Add settings panel and readonly default

server/public/styles.css

@@ -193,12 +193,12 @@
 }
 
 .u-nav .pathbar .up-button {
-  flex: 0 0 38px;
+  flex: 0 0 32px;
   font-size: 18px;
   line-height: 1;
 }
 
-.u-nav .pathbar > button:not(.icon),
+.u-nav .pathbar > button.icon,
 .u-nav .pathbar .view-toggle {
   flex: 0 0 auto;
 }
@@ -225,7 +225,7 @@
 .u-nav .view-toggle button {
   border-radius: 0;
   flex: 0 0 auto;
-  min-width: 88px;
+  min-width: 32px;
   overflow: visible;
 }
 
@@ -535,6 +535,61 @@
   padding: 10px;
 }
 
+.u-nav .settings-panel {
+  animation: transfer-slide-down 160ms ease-out both;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+  min-width: 320px;
+  overflow: hidden;
+  position: absolute;
+  transform-origin: top right;
+  width: min(380px, calc(100% - 32px));
+  z-index: 10010;
+}
+
+.u-nav .settings-panel-header {
+  align-items: center;
+  background: var(--surface-2);
+  border-bottom: 1px solid var(--line);
+  display: flex;
+  justify-content: space-between;
+  min-height: 40px;
+  padding: 5px 8px 5px 12px;
+}
+
+.u-nav .settings-panel-body {
+  display: grid;
+  gap: 2px;
+  padding: 8px;
+}
+
+.u-nav .setting-row {
+  align-items: center;
+  border-radius: 6px;
+  display: grid;
+  gap: 14px;
+  grid-template-columns: 1fr auto;
+  padding: 10px;
+}
+
+.u-nav .setting-row:hover {
+  background: var(--surface-2);
+}
+
+.u-nav .setting-row small {
+  color: var(--muted);
+  display: block;
+  margin-top: 2px;
+}
+
+.u-nav .setting-row input {
+  accent-color: var(--accent);
+  height: 18px;
+  width: 18px;
+}
+
 @keyframes transfer-slide-down {
   from {
     opacity: 0;
@@ -675,4 +730,11 @@
     right: 10px !important;
     width: auto !important;
   }
+
+  .u-nav .settings-panel {
+    left: 10px !important;
+    min-width: 0;
+    right: 10px !important;
+    width: auto !important;
+  }
 }