release(v1.9.1): customizable folder colors + live preview; improved tree persistence; accent button; manual sync script

public/css/styles.css

@@ -62,6 +62,51 @@ body {
   @media (max-width: 600px) {
     .zones-toggle { left: 85px !important; }
   }
+
+/* Optional tokens */
+:root{
+  --filr-accent-500:#008CB4; /* base */
+  --filr-accent-600:#00789A; /* hover */
+  --filr-accent-700:#006882; /* active/border */
+  --filr-accent-ring:rgba(0,140,180,.4);
+}
+
+/* Button */
+.btn-color-folder{
+  display:inline-flex; align-items:center; gap:6px;
+  background:var(--filr-accent-500);
+  border:1px solid var(--filr-accent-700);
+  color:#fff;                           /* ensure white text */
+}
+.btn-color-folder .material-icons{
+  color:currentColor;                    /* makes icon white too */
+}
+
+.btn-color-folder:hover,
+.btn-color-folder:focus-visible{
+  background:var(--filr-accent-600);
+  border-color:var(--filr-accent-700);
+}
+
+.btn-color-folder:active{
+  background:var(--filr-accent-700);
+}
+
+.btn-color-folder:focus-visible{
+  outline:2px solid var(--filr-accent-ring);
+  outline-offset:2px;
+}
+
+/* Dark mode: start slightly deeper so it doesn't glow */
+.dark-mode .btn-color-folder{
+  background:var(--filr-accent-600);
+  border-color:var(--filr-accent-700);
+  color:#fff;
+}
+.dark-mode .btn-color-folder:hover,
+.dark-mode .btn-color-folder:focus-visible{
+  background:var(--filr-accent-700);
+}
   /* ===========================================================
      HEADER & NAVIGATION
      =========================================================== */
@@ -801,14 +846,17 @@ body {
   }
   #uploadForm {
   display: none;
-  }.folder-actions {
-  display: flex;
-    flex-wrap: nowrap;
-    padding-left: 8px;
+  }
+  .folder-actions {
+    display: flex;
+    justify-content: center;
     align-items: center;
-    white-space: nowrap;
-    padding-top: 10px;
-  }@media (min-width: 600px) and (max-width: 992px) {
+    gap: 2px;
+    flex-wrap: wrap;
+    white-space: normal;
+    margin: 0; /* no hacks needed */
+  }
+  @media (min-width: 600px) and (max-width: 992px) {
   .folder-actions {
       white-space: nowrap;
   }}
@@ -821,10 +869,8 @@ body {
   }.folder-actions .material-icons {
   font-size: 24px;
     vertical-align: -2px;
-  }.folder-actions .btn + .btn {
-  margin-left: 6px;
   }.folder-actions .btn {
-  padding: 10px 12px;
+
     font-size: 0.85rem;
     line-height: 1.1;
     border-radius: 6px;
@@ -834,7 +880,7 @@ body {
     transition: transform 120ms ease, box-shadow 120ms ease;
     will-change: transform;
   }.folder-actions .material-icons {
-  font-size: 24px;
+  font-size: 20px;
     vertical-align: -2px;
     transition: transform 120ms ease;
   }.folder-actions .btn:hover,
@@ -1152,6 +1198,7 @@ body {
     width: 5px;
   }#folderTreeContainer {
   display: block;
+  margin-left: 10px;
   }.folder-option {
   cursor: pointer;
   }.folder-option:hover {
@@ -1641,6 +1688,7 @@ body {
   }.custom-folder-card-body {
   padding-top: 5px !important;
     padding-right: 0 !important;
+    padding-left: 0 !important;
   }#addUserModal,
   #removeUserModal {
   z-index: 5000 !important;
@@ -2073,17 +2121,6 @@ body {
 
 /* ---------- Crisp colors & strokes for the SVG parts ---------- */
 
-#folderTreeContainer .folder-icon .folder-front,
-#folderTreeContainer .folder-icon .folder-back {
-  fill: currentColor;
-  stroke: var(--filr-folder-stroke);
-  stroke-width: 1.1;
-  vector-effect: non-scaling-stroke;
-  paint-order: stroke fill;
-}
-
-#folderTreeContainer .folder-icon .folder-front { color: var(--filr-folder-front); }
-#folderTreeContainer .folder-icon .folder-back  { color: var(--filr-folder-back);  }
 
 #folderTreeContainer .folder-icon .paper {
   fill: var(--filr-paper-fill);
@@ -2123,3 +2160,15 @@ body {
   background: rgba(122,179,255,.24);
   box-shadow: inset 0 0 0 1px rgba(122,179,255,.45);
 }
+
+/* variables will be set inline per .folder-option when user colors a folder */
+#folderTreeContainer .folder-icon .folder-front,
+#folderTreeContainer .folder-icon .folder-back {
+  fill: currentColor;
+  stroke: var(--filr-folder-stroke);
+  stroke-width: 1.1;
+  vector-effect: non-scaling-stroke;
+  paint-order: stroke fill;
+}
+#folderTreeContainer .folder-icon .folder-front { color: var(--filr-folder-front); }
+#folderTreeContainer .folder-icon .folder-back  { color: var(--filr-folder-back);  }