Merge pull request #19 from hyphacoop/disclaimer

 Add AUTHORIZED_FETCH disclaimer to Actor Profile error messages

actor-profile.css

@@ -47,6 +47,15 @@
   overflow-wrap: break-word;
 }
 
+.disclaimer {
+  color: var(--rdp-text-color);
+  font-size: 1rem;
+}
+
+.disclaimer-link{
+  color: var(--rdp-link-color);
+}
+
 follow-button {
   appearance: none;
   border: 1px solid var(--rdp-border-color);

actor-profile.js

@@ -12,9 +12,28 @@ class ActorProfile extends HTMLElement {
 
   connectedCallback () {
     this.url = this.getAttribute('url')
+    this.renderDisclaimer() // Render the disclaimer regarding AUTHORIZED_FETCH
     this.fetchAndRenderActorProfile(this.url)
   }
 
+  renderDisclaimer () {
+    const disclaimer = document.createElement('div')
+    disclaimer.classList.add('disclaimer')
+
+    const disclaimerText = document.createElement('p')
+    disclaimerText.textContent = 'Some features may not be available for servers with AUTHORIZED_FETCH enabled. '
+
+    const learnMoreLink = document.createElement('a')
+    learnMoreLink.classList.add('disclaimer-link')
+    learnMoreLink.setAttribute('href', 'https://github.com/hyphacoop/distributed-press-organizing/issues/147')
+    learnMoreLink.setAttribute('target', '_blank')
+    learnMoreLink.textContent = 'Learn more.'
+
+    disclaimerText.appendChild(learnMoreLink)
+    disclaimer.appendChild(disclaimerText)
+    this.prepend(disclaimer)
+  }
+
   async fetchAndRenderActorProfile (url) {
     try {
       const actorInfo = await db.getActor(url)
@@ -69,6 +88,9 @@ class ActorProfile extends HTMLElement {
       pUserName.href = db.getObjectPage(actorInfo)
       pUserName.textContent = `@${actorInfo.preferredUsername}`
       actorContainer.appendChild(pUserName) // Append to the actor container
+
+      // Dispatch event with username
+      this.dispatchEvent(new CustomEvent('usernameUpdated', { bubbles: true, detail: { username: actorInfo.preferredUsername } }))
     }
 
     if (actorInfo.summary) {
@@ -102,10 +124,14 @@ class ActorProfile extends HTMLElement {
   }
 
   renderError (message) {
-    this.innerHTML = '' // Clear existing content
+    // Clear the actor profile content only, leaving the disclaimer intact
+    while (this.lastChild && this.lastChild !== this.firstChild) {
+      this.removeChild(this.lastChild)
+    }
+
     const errorComponent = document.createElement('error-message')
     errorComponent.setAttribute('message', message)
-    this.appendChild(errorComponent)
+    this.appendChild(errorComponent) // Append below the disclaimer
   }
 }
 

error-message.js

@@ -16,6 +16,9 @@ class ErrorMessage extends HTMLElement {
           text-align: center;
           margin: 20px;
           font-size: 1rem;
+          border: 1px solid var(--rdp-border-color);
+          border-radius: 4px;
+          padding: 6px;
         }
       `
 

outbox.css

@@ -3,3 +3,8 @@
   font-size: 0.875rem;
   text-align: center;
 }
+
+.other-activity {
+  color: var(--rdp-text-color);
+  font-size: 16px;
+}

outbox.js

@@ -170,6 +170,7 @@ class DistributedActivity extends HTMLElement {
   displayUnimplemented () {
     const message = `Activity type ${this.activityType} is not implemented yet.`
     const messageElement = document.createElement('p')
+    messageElement.classList.add('other-activity')
     messageElement.textContent = message
     this.appendChild(messageElement)
   }
@@ -220,13 +221,15 @@ class DistributedActivity extends HTMLElement {
     const to = this.activityData.object
     const message = `New follow request from ${from} to ${to}`
     const messageElement = document.createElement('p')
+    messageElement.classList.add('other-activity')
     messageElement.textContent = message
     this.appendChild(messageElement)
   }
 
   displayLikeActivity () {
     const message = `New like on ${this.activityData.object}`
     const messageElement = document.createElement('p')
+    messageElement.classList.add('other-activity')
     messageElement.textContent = message
     this.appendChild(messageElement)
   }

profile.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>User Profile</title>
+<title>Reader Profile</title>
 <style>
   @import url("./actor-profile.css");
   @import url("./common.css");
@@ -22,18 +22,8 @@
   </div>
 </div>
 <script>
-  // Pagination controls
-  document.addEventListener("outboxUpdated", () => {
-    const outboxElement = document.querySelector("distributed-outbox");
-    const prevButton = document.getElementById("prevPage");
-    const nextButton = document.getElementById("nextPage");
-
-    if (prevButton) {
-      prevButton.addEventListener("click", () => outboxElement.prevPage());
-    }
-    if (nextButton) {
-      nextButton.addEventListener("click", () => outboxElement.nextPage());
-    }
+  document.addEventListener('usernameUpdated', (event) => {
+    document.title += ` @${event.detail.username}`;
   });
 
   // Get actor url

theme-selector.js

@@ -51,28 +51,37 @@ class ThemeSelector extends HTMLElement {
     const select = document.createElement('select')
     select.id = 'theme-select'
 
-    // Create and append the options
-    const options = [
-      { value: 'light', text: 'Light' },
-      { value: 'dark', text: 'Dark' },
-      { value: '', text: '👁️ Color Blind Themes 👁️', disabled: true },
+    // Create and append the standard theme options
+    const standardGroup = document.createElement('optgroup')
+    standardGroup.label = 'Standard Themes';
+    ['light', 'dark'].forEach(text => {
+      const option = document.createElement('option')
+      option.value = text
+      option.textContent = text.charAt(0).toUpperCase() + text.slice(1)
+      standardGroup.appendChild(option)
+    })
+    select.appendChild(standardGroup)
+
+    // Create and append the colorblind theme options within an optgroup
+    const colorBlindGroup = document.createElement('optgroup')
+    colorBlindGroup.label = 'Color Blind Themes';
+    [
       { value: 'deuteranomaly', text: 'Deuteranomaly (Green-Weak)' },
       { value: 'protanomaly', text: 'Protanomaly (Red-Weak)' },
       { value: 'deuteranopia', text: 'Deuteranopia (Green-Blind)' },
       { value: 'protanopia', text: 'Protanopia (Red-Blind)' },
       { value: 'tritanopia', text: 'Tritanopia (Blue-Blind)' },
       { value: 'tritanomaly', text: 'Tritanomaly (Blue-Weak)' },
       { value: 'achromatopsia', text: 'Achromatopsia (All-Color-Blind)' }
-    ]
-
-    // Create and append the options
-    options.forEach(({ value, text }) => {
+    ].forEach(({ value, text }) => {
       const option = document.createElement('option')
       option.value = value
       option.textContent = text
-      select.appendChild(option)
+      colorBlindGroup.appendChild(option)
     })
 
+    select.appendChild(colorBlindGroup)
+
     // Append the select & style to the template's content
     template.content.appendChild(select)
     template.content.appendChild(style)