gitmaps 1.1.20 → 1.1.21

package/app/globals.css

@@ -1145,17 +1145,24 @@ body {
 
 /* ── Sticky Zoom Controls ── */
 body.repo-loading .sticky-zoom-pill,
-body.repo-loading .detail-mode-switch,
+body.repo-loading .floating-top-controls,
 body.landing-placeholder-visible .sticky-zoom-pill,
-body.landing-placeholder-visible .detail-mode-switch {
+body.landing-placeholder-visible .floating-top-controls {
   display: none;
 }
 
-.detail-mode-switch {
+.floating-top-controls {
   position: fixed;
   top: 12px;
   right: 144px;
   z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.detail-mode-switch {
+  position: relative;
 }
 
 .detail-mode-btn {
@@ -1192,6 +1199,15 @@ body.landing-placeholder-visible .detail-mode-switch {
   box-shadow: 0 10px 28px rgba(59, 130, 246, 0.16);
 }
 
+.detail-mode-btn--secondary {
+  border-color: rgba(148, 163, 184, 0.28);
+  color: #e2e8f0;
+}
+
+.detail-mode-btn--secondary:hover {
+  border-color: rgba(148, 163, 184, 0.48);
+}
+
 .detail-mode-label {
   opacity: 0.72;
   text-transform: uppercase;

package/app/layout.tsx

@@ -875,10 +875,16 @@ export default function RootLayout({ children }: { children: any }) {
             </div>
 
             {/* Sticky Zoom Controls — floating pill, bottom-right */}
-            <div id="detailModeSwitch" className="detail-mode-switch" title="Toggle preview-focused detail mode">
-              <button id="toggleDetailMode" type="button" className="detail-mode-btn">
-                <span className="detail-mode-label">Renderer</span>
-                <span id="detailModeState" className="detail-mode-state">Preview</span>
+            <div className="floating-top-controls">
+              <div id="detailModeSwitch" className="detail-mode-switch" title="Toggle preview-focused detail mode">
+                <button id="toggleDetailMode" type="button" className="detail-mode-btn">
+                  <span className="detail-mode-label">Renderer</span>
+                  <span id="detailModeState" className="detail-mode-state">Preview</span>
+                </button>
+              </div>
+              <button id="openSettingsFloating" type="button" className="detail-mode-btn detail-mode-btn--secondary" title="Open settings">
+                <span className="detail-mode-label">Settings</span>
+                <span className="detail-mode-state">Tune</span>
               </button>
             </div>
 

package/app/lib/events.tsx

@@ -740,9 +740,11 @@ export function setupEventListeners(ctx: CanvasContext) {
         });
 
         // Settings modal
-        document.getElementById('openSettings')?.addEventListener('click', () => {
+        const openSettings = () => {
             import('./settings-modal').then(({ openSettingsModal }) => openSettingsModal(ctx));
-        });
+        };
+        document.getElementById('openSettings')?.addEventListener('click', openSettings);
+        document.getElementById('openSettingsFloating')?.addEventListener('click', openSettings);
 
         // Global search
         document.getElementById('openGlobalSearch')?.addEventListener('click', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gitmaps",
-  "version": "1.1.20",
+  "version": "1.1.21",
   "type": "module",
   "bin": {
     "gitmaps": "cli.ts"