feat(ui): unified zone toggle + polished interactions for sidebar/top cards

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## Changes 10/23/2025 (v1.6.1)
+
+feat(ui): unified zone toggle + polished interactions for sidebar/top cards
+
+- Add floating toggle button styling (hover lift, press, focus ring, ripple)
+  for #zonesToggleFloating and #sidebarToggleFloating (CSS).
+- Ensure icons are visible and centered; enforce consistent sizing/color.
+- Introduce unified “zones collapsed” state persisted via `localStorage.zonesCollapsed`.
+- Update dragAndDrop.js to:
+  - manage a single floating toggle for both Sidebar and Top Zone
+  - keep toggle visible when cards are in Top Zone; hide only when both cards are in Header
+  - rotate icon 90° when both cards are in Top Zone and panels are open
+  - respect collapsed state during DnD flows and on load
+  - preserve original DnD behaviors and saved orders (sidebar/header)
+- Minor layout/visibility fixes during drag (clear temp heights; honor collapsed).
+
+Notes:
+
+- No breaking API changes; existing `sidebarOrder` / `headerOrder` continue to work.
+- New key: `zonesCollapsed` (string '0'/'1') controls visibility of Sidebar + Top Zone.
+
+UX:
+
+- Floating toggle feels more “material”: subtle hover elevation, press feedback,
+  focus ring, and click ripple to restore the prior interactive feel.
+- Icons remain legible on white (explicit color set), centered in the circular button.
+
+---
+
 ## Changes 10/22/2025 (v1.6.0)
 
 feat(acl): granular per-folder permissions + stricter gates; WebDAV & UI aligned

public/css/styles.css

@@ -2308,4 +2308,69 @@ body.dark-mode .user-dropdown .user-menu .item:hover {
 }
 
 :root { --perm-caret: #444; }          /* light */
-body.dark-mode { --perm-caret: #ccc; }  /* dark */
+body.dark-mode { --perm-caret: #ccc; }  /* dark */
+
+#zonesToggleFloating,
+#sidebarToggleFloating {
+  transition:
+    transform 160ms cubic-bezier(.2,.0,.2,1),
+    box-shadow 160ms cubic-bezier(.2,.0,.2,1),
+    border-color 160ms cubic-bezier(.2,.0,.2,1),
+    background-color 160ms cubic-bezier(.2,.0,.2,1);
+}
+
+#zonesToggleFloating .material-icons,
+#zonesToggleFloating .material-icons-outlined,
+#sidebarToggleFloating .material-icons,
+#sidebarToggleFloating .material-icons-outlined {
+  color: #333 !important;
+  font-size: 22px;
+  line-height: 1;
+  display: block;
+}
+
+#zonesToggleFloating:hover,
+#sidebarToggleFloating:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(0,0,0,.14);
+  border-color: #cfcfcf;
+}
+
+#zonesToggleFloating:active,
+#sidebarToggleFloating:active {
+  transform: translateY(0) scale(.96);
+  box-shadow: 0 3px 8px rgba(0,0,0,.12);
+}
+
+#zonesToggleFloating:focus-visible,
+#sidebarToggleFloating:focus-visible {
+  outline: none;
+  box-shadow:
+    0 6px 16px rgba(0,0,0,.14),
+    0 0 0 3px rgba(25,118,210,.25); /* soft brandy ring */
+}
+
+#zonesToggleFloating::after,
+#sidebarToggleFloating::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(circle, rgba(0,0,0,.12) 0%, rgba(0,0,0,0) 60%);
+  transform: scale(0);
+  opacity: 0;
+  transition: transform 300ms ease, opacity 450ms ease;
+  pointer-events: none;
+}
+
+#zonesToggleFloating:active::after,
+#sidebarToggleFloating:active::after {
+  transform: scale(1.4);
+  opacity: 1;
+}
+
+#zonesToggleFloating.is-collapsed,
+#sidebarToggleFloating.is-collapsed {
+  background: #fafafa;
+  border-color: #e2e2e2;
+}

public/js/adminPanel.js

@@ -4,7 +4,7 @@ import { loadAdminConfigFunc } from './auth.js';
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 
-const version = "v1.6.0";
+const version = "v1.6.1";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;