From 83453ec04616174239e4023e7254c77113688679 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 16:04:42 -0500
Subject: [PATCH] core/input.css: add styles needed for dropdown updates

---
 input.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/input.css b/input.css
index 3c0311bf..6e2e17e8 100644
--- a/input.css
+++ b/input.css
@@ -89,6 +89,10 @@
             @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300;
         }
 
+        #navigation-menu-popover li:not(:last-of-type) a {
+            @apply flex gap-2 items-center px-2 pb-2 pt-1.5 rounded-sm hover:bg-green-50 hover:text-green-700 no-underline
+        }
+
         label {
             @apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
         }
@@ -962,3 +966,20 @@ actor-typeahead::part(menu) {
     color: #f9fafb;
   }
 }
+
+.site-navigation-dropdown-trigger {
+        anchor-name: --dropdown-trigger;
+    }
+
+.site-navigation-popover {
+    position: absolute;
+    margin: 0;
+    inset: auto;
+    position-anchor: --dropdown-trigger;
+    position-area: bottom right;
+    position-try-fallbacks: --bottom-left;
+}
+
+@position-try --bottom-left {
+    position-area: bottom left;
+}
\ No newline at end of file
-- 
2.43.0


From e39c9af3e48dbb91c5b5355794d855e9570f5004 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 16:29:05 -0500
Subject: [PATCH] appview/layouts/fragments: use popopver api + semantic
 markdown for dropdown menu

---
 .../templates/layouts/fragments/topbar.html   | 65 ++++++++++++++-----
 1 file changed, 49 insertions(+), 16 deletions(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index dcba4bec..c91ccf61 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -47,29 +47,62 @@
 {{ end }}
 
 {{ define "profileDropdown" }}
-<details class="relative inline-block text-left nav-dropdown">
-    <summary class="cursor-pointer list-none flex items-center gap-1">
-        {{ $user := .Did }}
-        <img
+  {{ $user := .Did }}
+  <button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown" aria-controls="navigation-menu-popover">
+      <img
             src="{{ tinyAvatar $user }}"
             alt=""
             class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
         />
-        <span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
-    </summary>
-    <div class="absolute flex flex-col right-0 mt-4 p-4 rounded w-48 bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700">
-        <a href="/{{ $user }}">profile</a>
-        <a href="/{{ $user }}?tab=repos">repositories</a>
-        <a href="/{{ $user }}?tab=strings">strings</a>
-        <a href="/settings">settings</a>
-        <a href="#"
+  </button>
+  <nav popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
+    <div class="flex gap-2 py-2">
+       <img
+            src="{{ tinyAvatar $user }}"
+            alt=""
+            class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
+        />
+        <p>{{ $user | resolve | truncateAt30 }}</p>
+    </div>
+    <hr class="h-1 w-full mb-1 mt-2" role="separator" aria-orientation="horizontal" />
+    <ul id="navigation-menu-popover">
+        <li>
+          <a href="/{{ $user }}"> 
+            {{ i "user" "w-4 h-4" }}
+            <span>profile</span>
+          </a>
+        </li>
+       <li>
+         <a href="/{{ $user }}?tab=repos">
+          {{ i "book-marked" "w-4 h-4" }}
+          <span>repositories</span>
+         </a>
+       </li>
+        <li>
+          <a href="/{{ $user }}?tab=strings">
+            {{ i "spool" "w-4 h-4" }}
+            <span>strings</span>
+          </a>
+        </li>
+        <li>
+          <a href="/settings">
+             {{ i "settings" "w-4 h-4" }}
+            <span>settings</span>
+          </a>
+        </li>
+       <hr class="h-1 w-full mb-1 mt-2" />
+       <li>
+         <a href="#"
            hx-post="/logout"
            hx-swap="none"
-           class="text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
-          logout
+           class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm no-underline">
+            {{ i "arrow-right-from-line" "w-4 h-4" }}
+          <span>logout</span>
         </a>
-    </div>
-</details>
+       </li>
+    </ul>
+  </nav>
+{{ end }}
 
 <script>
 document.addEventListener('click', function(event) {
-- 
2.43.0


From cbdd2cb06aa6d37efd9025eb06e81d2cefe205f2 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 19:58:31 -0500
Subject: [PATCH] appview/layouts/fragments: remove extra end statement and fix
 indentation

---
 .../templates/layouts/fragments/topbar.html   | 105 +++++++++---------
 1 file changed, 52 insertions(+), 53 deletions(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index c91ccf61..0a870141 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -48,61 +48,60 @@
 
 {{ define "profileDropdown" }}
   {{ $user := .Did }}
-  <button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown" aria-controls="navigation-menu-popover">
+<button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown" aria-controls="navigation-menu-popover">
+  <img
+        src="{{ tinyAvatar $user }}"
+        alt=""
+        class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
+    />
+</button>
+<nav popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
+  <div class="flex gap-2 py-2">
       <img
-            src="{{ tinyAvatar $user }}"
-            alt=""
-            class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
-        />
-  </button>
-  <nav popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
-    <div class="flex gap-2 py-2">
-       <img
-            src="{{ tinyAvatar $user }}"
-            alt=""
-            class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
-        />
-        <p>{{ $user | resolve | truncateAt30 }}</p>
-    </div>
-    <hr class="h-1 w-full mb-1 mt-2" role="separator" aria-orientation="horizontal" />
-    <ul id="navigation-menu-popover">
-        <li>
-          <a href="/{{ $user }}"> 
-            {{ i "user" "w-4 h-4" }}
-            <span>profile</span>
-          </a>
-        </li>
-       <li>
-         <a href="/{{ $user }}?tab=repos">
-          {{ i "book-marked" "w-4 h-4" }}
-          <span>repositories</span>
-         </a>
-       </li>
-        <li>
-          <a href="/{{ $user }}?tab=strings">
-            {{ i "spool" "w-4 h-4" }}
-            <span>strings</span>
-          </a>
-        </li>
-        <li>
-          <a href="/settings">
-             {{ i "settings" "w-4 h-4" }}
-            <span>settings</span>
-          </a>
-        </li>
-       <hr class="h-1 w-full mb-1 mt-2" />
-       <li>
-         <a href="#"
-           hx-post="/logout"
-           hx-swap="none"
-           class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm no-underline">
-            {{ i "arrow-right-from-line" "w-4 h-4" }}
-          <span>logout</span>
+          src="{{ tinyAvatar $user }}"
+          alt=""
+          class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
+      />
+      <p>{{ $user | resolve | truncateAt30 }}</p>
+  </div>
+  <hr class="h-1 w-full mb-1 mt-2" role="separator" aria-orientation="horizontal" />
+  <ul id="navigation-menu-popover">
+      <li>
+        <a href="/{{ $user }}"> 
+          {{ i "user" "w-4 h-4" }}
+          <span>profile</span>
         </a>
-       </li>
-    </ul>
-  </nav>
-{{ end }}
+      </li>
+      <li>
+        <a href="/{{ $user }}?tab=repos">
+        {{ i "book-marked" "w-4 h-4" }}
+        <span>repositories</span>
+        </a>
+      </li>
+      <li>
+        <a href="/{{ $user }}?tab=strings">
+          {{ i "spool" "w-4 h-4" }}
+          <span>strings</span>
+        </a>
+      </li>
+      <li>
+        <a href="/settings">
+            {{ i "settings" "w-4 h-4" }}
+          <span>settings</span>
+        </a>
+      </li>
+      <hr class="h-1 w-full mb-1 mt-2" />
+      <li>
+        <a href="#"
+          hx-post="/logout"
+          hx-swap="none"
+          class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm no-underline">
+          {{ i "arrow-right-from-line" "w-4 h-4" }}
+        <span>logout</span>
+      </a>
+      </li>
+  </ul>
+</nav>
 
 <script>
 document.addEventListener('click', function(event) {
-- 
2.43.0


From c7941bc59159e86fb2f407dfe0e0cd23bb34240e Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 20:01:10 -0500
Subject: [PATCH] core/input: remove underline specifically for logout link

---
 appview/pages/templates/layouts/fragments/topbar.html | 2 +-
 input.css                                             | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 0a870141..7f0b98c4 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -95,7 +95,7 @@
         <a href="#"
           hx-post="/logout"
           hx-swap="none"
-          class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm no-underline">
+          class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm">
           {{ i "arrow-right-from-line" "w-4 h-4" }}
         <span>logout</span>
       </a>
diff --git a/input.css b/input.css
index 6e2e17e8..1cd0a371 100644
--- a/input.css
+++ b/input.css
@@ -93,6 +93,10 @@
             @apply flex gap-2 items-center px-2 pb-2 pt-1.5 rounded-sm hover:bg-green-50 hover:text-green-700 no-underline
         }
 
+        a[hx-post="/logout"] {
+            @apply no-underline;
+        }
+
         label {
             @apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100;
         }
-- 
2.43.0


From c4ea864bd04bad74bfbf75413bd35a3ca233ddb8 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 20:04:20 -0500
Subject: [PATCH] appview/layouts/fragments: remove explicit role and
 orientation from hr tag

---
 appview/pages/templates/layouts/fragments/topbar.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 7f0b98c4..0998cf1e 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -64,7 +64,7 @@
       />
       <p>{{ $user | resolve | truncateAt30 }}</p>
   </div>
-  <hr class="h-1 w-full mb-1 mt-2" role="separator" aria-orientation="horizontal" />
+  <hr class="h-1 w-full mb-1 mt-2" />
   <ul id="navigation-menu-popover">
       <li>
         <a href="/{{ $user }}"> 
-- 
2.43.0


From b2e181690b4cad4f4b2f1e3af80724598f7a10d8 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 20:36:36 -0500
Subject: [PATCH] core/input.css: remove anchor fallback position, always
 anchor bottom left

---
 input.css | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/input.css b/input.css
index 1cd0a371..11ed834e 100644
--- a/input.css
+++ b/input.css
@@ -972,18 +972,12 @@ actor-typeahead::part(menu) {
 }
 
 .site-navigation-dropdown-trigger {
-        anchor-name: --dropdown-trigger;
-    }
+    anchor-name: --dropdown-trigger;
+}
 
 .site-navigation-popover {
-    position: absolute;
     margin: 0;
     inset: auto;
     position-anchor: --dropdown-trigger;
-    position-area: bottom right;
-    position-try-fallbacks: --bottom-left;
-}
-
-@position-try --bottom-left {
     position-area: bottom left;
-}
\ No newline at end of file
+}
-- 
2.43.0


From 7ca3fbfb6c08a86454df89e8ac75106dad166716 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 21:07:42 -0500
Subject: [PATCH] appview/layouts/fragments: add javascript to set aria-current
 on dropdown links

---
 appview/pages/templates/layouts/fragments/topbar.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index 0998cf1e..e8cc4c6b 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -112,5 +112,14 @@ document.addEventListener('click', function(event) {
         }
     });
 });
+
+const navigationPopoverLinks = document.querySelectorAll("#navigation-menu-popover li a");
+const currentPageURL = window.location.href
+navigationPopoverLinks.forEach(link => {
+  const navigationPopoverLinkURL = link.href
+  if (navigationPopoverLinkURL === currentPageURL) {
+    link.ariaCurrent = "page"
+  }
+})
 </script>
 {{ end }}
-- 
2.43.0


From a0a9d361473ea661141866dca64deac2746fbeb8 Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Mon, 22 Dec 2025 22:23:14 -0500
Subject: [PATCH] appview/layouts/fragments: remove aria-controls, switch
 nested nav to div

---
 appview/pages/templates/layouts/fragments/topbar.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index e8cc4c6b..ff8eecd2 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -48,14 +48,14 @@
 
 {{ define "profileDropdown" }}
   {{ $user := .Did }}
-<button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown" aria-controls="navigation-menu-popover">
+<button type="button" popovertarget="navigation-popover" class="site-navigation-dropdown-trigger" aria-label="Open site navigation dropdown">
   <img
         src="{{ tinyAvatar $user }}"
         alt=""
         class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
     />
 </button>
-<nav popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
+<div popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
   <div class="flex gap-2 py-2">
       <img
           src="{{ tinyAvatar $user }}"
@@ -101,7 +101,7 @@
       </a>
       </li>
   </ul>
-</nav>
+</div>
 
 <script>
 document.addEventListener('click', function(event) {
-- 
2.43.0


From d6efab6045f828e712ef0ea90d9596dadc9da0ea Mon Sep 17 00:00:00 2001
From: "dane.is.extraordinarily.cool" <me@dane.computer>
Date: Sat, 27 Dec 2025 12:33:45 -0500
Subject: [PATCH] appview/layouts/fragments: adjust dark mode css or topbar
 dropdown

---
 appview/pages/templates/layouts/fragments/topbar.html | 10 +++++-----
 input.css                                             |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/appview/pages/templates/layouts/fragments/topbar.html b/appview/pages/templates/layouts/fragments/topbar.html
index ff8eecd2..2de8388f 100644
--- a/appview/pages/templates/layouts/fragments/topbar.html
+++ b/appview/pages/templates/layouts/fragments/topbar.html
@@ -55,7 +55,7 @@
         class="rounded-full h-6 w-6 border border-gray-300 dark:border-gray-700"
     />
 </button>
-<div popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-100 rounded-sm p-2">
+<div popover="auto" id="navigation-popover" class="site-navigation-popover shadow-md border border-gray-200 rounded p-2 bg-white dark:bg-gray-800 dark:text-white dark:border-gray-700">
   <div class="flex gap-2 py-2">
       <img
           src="{{ tinyAvatar $user }}"
@@ -64,10 +64,10 @@
       />
       <p>{{ $user | resolve | truncateAt30 }}</p>
   </div>
-  <hr class="h-1 w-full mb-1 mt-2" />
+  <hr class="h-1 w-full mb-1 mt-2 dark:border-gray-700" />
   <ul id="navigation-menu-popover">
       <li>
-        <a href="/{{ $user }}"> 
+        <a href="/{{ $user }}">
           {{ i "user" "w-4 h-4" }}
           <span>profile</span>
         </a>
@@ -90,12 +90,12 @@
           <span>settings</span>
         </a>
       </li>
-      <hr class="h-1 w-full mb-1 mt-2" />
+      <hr class="h-1 w-full mb-1 mt-2 dark:border-gray-700" />
       <li>
         <a href="#"
           hx-post="/logout"
           hx-swap="none"
-          class="text-red-600 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm">
+          class="text-red-400 flex gap-2 items-center hover:bg-red-50 hover:text-red-700 px-2 py-2 rounded-sm dark:hover:bg-red-700 dark:hover:text-red-50">
           {{ i "arrow-right-from-line" "w-4 h-4" }}
         <span>logout</span>
       </a>
diff --git a/input.css b/input.css
index 11ed834e..412e86eb 100644
--- a/input.css
+++ b/input.css
@@ -90,7 +90,7 @@
         }
 
         #navigation-menu-popover li:not(:last-of-type) a {
-            @apply flex gap-2 items-center px-2 pb-2 pt-1.5 rounded-sm hover:bg-green-50 hover:text-green-700 no-underline
+            @apply flex gap-2 items-center px-2 pb-2 pt-1.5 rounded-sm hover:bg-green-50 hover:text-green-700 no-underline dark:hover:text-green-50 dark:hover:bg-green-700;
         }
 
         a[hx-post="/logout"] {
-- 
2.43.0