fix: move theme toggle into shared top-bar controls

views/partials/theme.php

@@ -106,19 +106,6 @@ if ($themeSection === 'head'):
         color: var(--theme-text-muted);
     }
 
-    #themeToggle {
-        position: fixed;
-        top: calc(1rem + env(safe-area-inset-top));
-        right: 1rem;
-        z-index: 50;
-    }
-
-    @media (max-width: 640px) {
-        #themeToggle {
-            top: calc(4.75rem + env(safe-area-inset-top));
-        }
-    }
-
     #themeToggle:focus-visible {
         outline: 3px solid #2563eb;
         outline-offset: 2px;
@@ -129,24 +116,6 @@ endif;
 
 if ($themeSection === 'body'):
 ?>
-<button
-    id="themeToggle"
-    type="button"
-    class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-md transition"
-    aria-label="Switch to dark mode"
-    title="Switch to dark mode"
->
-    <i id="themeToggleIcon" class="bi bi-moon-stars-fill" aria-hidden="true"></i>
-</button>
-
-<noscript>
-    <style>
-        #themeToggle {
-            display: none !important;
-        }
-    </style>
-</noscript>
-
 <script>
     (function () {
         var html = document.documentElement;

views/partials/topbar-controls.php

@@ -0,0 +1,31 @@
+<?php
+$showSettings = isset($showSettings) ? (bool) $showSettings : false;
+$settingsUrl = isset($settingsUrl) ? (string) $settingsUrl : url('/settings');
+?>
+<div class="flex items-center space-x-4">
+    <button
+        id="themeToggle"
+        type="button"
+        class="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg shadow-sm transition"
+        aria-label="Switch to dark mode"
+        title="Switch to dark mode"
+        aria-pressed="false"
+    >
+        <i id="themeToggleIcon" class="bi bi-moon-stars-fill" aria-hidden="true"></i>
+    </button>
+
+    <?php if ($showSettings): ?>
+        <a href="<?php echo htmlspecialchars($settingsUrl); ?>" class="theme-text-muted hover:opacity-95">
+            <i class="bi bi-gear-fill text-2xl" aria-hidden="true"></i>
+            <span class="sr-only">Settings</span>
+        </a>
+    <?php endif; ?>
+</div>
+
+<noscript>
+    <style>
+        #themeToggle {
+            display: none !important;
+        }
+    </style>
+</noscript>