feat(core): add layered side rail preferences

webui/src/styles/components.css

@@ -1010,6 +1010,69 @@
   }
 }
 
+.navigation-preference-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  margin-bottom: var(--space-3);
+}
+
+.navigation-preference-toolbar p {
+  margin: 0;
+}
+
+.navigation-preference-list {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.navigation-preference-list > li {
+  display: grid;
+  grid-template-columns: auto minmax(12rem, 1fr) auto auto;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-3);
+  border: var(--border-soft-line);
+  border-radius: var(--radius-md);
+  background: var(--surface-raised);
+}
+
+.navigation-preference-order-actions {
+  display: flex;
+  gap: var(--space-1);
+}
+
+.navigation-preference-label {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.navigation-preference-label span {
+  overflow: hidden;
+  color: var(--text-muted);
+  font-family: var(--font-mono, monospace);
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 760px) {
+  .navigation-preference-toolbar,
+  .navigation-preference-list > li {
+    align-items: stretch;
+    grid-template-columns: 1fr;
+  }
+
+  .navigation-preference-toolbar {
+    display: grid;
+  }
+}
+
 .admin-section-page {
   display: grid;
   gap: 16px;