From 8e7a2f3d6cd962f7cffa50dc943116a605a33a94 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Tue, 11 Nov 2025 21:40:29 +0100
Subject: [PATCH] desaturate theme a bit

---
 .../hooks/documents/useDocumentsWorkspace.js  |  1 +
 frontend/src/hooks/documents/useFolderTree.js | 20 ++++++++++++-
 .../hooks/documents/useFolderTreeActions.js   |  6 ++++
 frontend/src/styles/base/theme.css            | 28 +++++++++----------
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/frontend/src/hooks/documents/useDocumentsWorkspace.js b/frontend/src/hooks/documents/useDocumentsWorkspace.js
index f17a52c..6fe4baa 100644
--- a/frontend/src/hooks/documents/useDocumentsWorkspace.js
+++ b/frontend/src/hooks/documents/useDocumentsWorkspace.js
@@ -796,6 +796,7 @@ const useDocumentsWorkspace = ({
     setDraggedFolderId,
     isInvalidFolderDrop,
     setCreatingFolder,
+    clearSelection,
   });
 
   const {
diff --git a/frontend/src/hooks/documents/useFolderTree.js b/frontend/src/hooks/documents/useFolderTree.js
index b0f7675..55ea0be 100644
--- a/frontend/src/hooks/documents/useFolderTree.js
+++ b/frontend/src/hooks/documents/useFolderTree.js
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import {
   DEFAULT_FOLDER_NAME,
   createRootNode,
@@ -30,6 +30,8 @@ const useFolderTree = ({
   const [currentFolder, setCurrentFolder] = useState(null);
   const [currentSubfolders, setCurrentSubfolders] = useState([]);
 
+  const lastAppliedFolderIdRef = useRef(null);
+
   const {
     focusedDocumentId,
     setFocusedDocumentId,
@@ -41,6 +43,9 @@ const useFolderTree = ({
 
   const applySelectedFolder = useCallback(
     (folderId, contents) => {
+      const folderChanged = lastAppliedFolderIdRef.current !== folderId;
+      lastAppliedFolderIdRef.current = folderId;
+
       const subfolders = contents?.subfolders ?? [];
       const docs = assetManager.hydrateDocuments(contents?.documents ?? []);
       const folderInfo = contents?.folder ?? null;
@@ -63,6 +68,11 @@ const useFolderTree = ({
       let mergedSelection = [];
 
       setSelectedEntries((previous) => {
+        if (folderChanged) {
+          nextDocKeys = [];
+          mergedSelection = [];
+          return [];
+        }
         const previousFolderKeys = previous
           .filter(isFolderRowKey)
           .filter((key) => availableFolderKeys.has(key));
@@ -72,6 +82,14 @@ const useFolderTree = ({
         return mergedSelection;
       });
 
+      if (folderChanged) {
+        setFocusedDocumentId(null);
+        selectionAnchorRef.current = null;
+        selectionOrderRef.current = [];
+        setSelectionOrder([]);
+        return;
+      }
+
       const nextFocus = (() => {
         const currentFocusedKey = resolveDocumentRowKey(focusedDocumentId);
         if (currentFocusedKey && availableDocKeySet.has(currentFocusedKey)) {
diff --git a/frontend/src/hooks/documents/useFolderTreeActions.js b/frontend/src/hooks/documents/useFolderTreeActions.js
index 29da7b1..ebb7001 100644
--- a/frontend/src/hooks/documents/useFolderTreeActions.js
+++ b/frontend/src/hooks/documents/useFolderTreeActions.js
@@ -28,6 +28,7 @@ const useFolderTreeActions = ({
   setDraggedFolderId,
   isInvalidFolderDrop,
   setCreatingFolder,
+  clearSelection,
 }) => {
   const moveFolder = useCallback(
     async (folderId, targetFolderId) => {
@@ -173,6 +174,10 @@ const useFolderTreeActions = ({
     async (folderId, { replace = false, immediate = false } = {}) => {
       const targetId = folderId && folderId !== 'root' ? folderId : 'root';
 
+      if (typeof clearSelection === 'function') {
+        clearSelection();
+      }
+
       await ensureFolderAncestorsLoaded(targetId);
       expandFolderAncestors(targetId);
 
@@ -186,6 +191,7 @@ const useFolderTreeActions = ({
       navigate(path, { replace });
     },
     [
+      clearSelection,
       ensureFolderAncestorsLoaded,
       expandFolderAncestors,
       isFilterActive,
diff --git a/frontend/src/styles/base/theme.css b/frontend/src/styles/base/theme.css
index 44bbe35..7f558ef 100644
--- a/frontend/src/styles/base/theme.css
+++ b/frontend/src/styles/base/theme.css
@@ -9,14 +9,14 @@
   --surface-hue-shift: -4deg;
 
   /* --- Neutrals --- */
-  --bg: oklch(0.97 0.001 calc(var(--neutral-hue) + var(--surface-hue-shift)));
-  --surface: oklch(0.985 0.001 calc(var(--neutral-hue) + var(--surface-hue-shift)));
-  --surface-subtle: oklch(0.96 0.002 calc(var(--neutral-hue) + var(--surface-hue-shift)));
-  --fg: oklch(0.32 0.005 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
-  --muted: oklch(0.54 0.008 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --bg: oklch(0.97 0 calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --surface: oklch(0.985 0 calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --surface-subtle: oklch(0.96 0 calc(var(--neutral-hue) + var(--surface-hue-shift)));
+  --fg: oklch(0.32 0 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --muted: oklch(0.54 0 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
   --muted-subtle: color-mix(in oklch, var(--muted) 55%, var(--border));
-  --sidebar-fg: oklch(0.56 0.007 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
-  --border: oklch(0.92 0.002 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --sidebar-fg: oklch(0.56 0 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
+  --border: oklch(0.92 0 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
 
   /* --- Accent (primary) --- */
   --accent: oklch(0.61 0.16 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
@@ -186,14 +186,14 @@
     --dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
     --dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
 
-    --bg: oklch(0.15 0.01 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-    --surface: oklch(0.19 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-    --surface-subtle: oklch(0.23 0.012 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
-    --fg: oklch(0.89 0.015 var(--dark-foreground-hue));
-    --muted: oklch(0.72 0.02 var(--dark-foreground-hue));
+    --bg: oklch(0.15 0 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --surface: oklch(0.19 0 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --surface-subtle: oklch(0.23 0 calc(var(--dark-neutral-hue) + var(--surface-hue-shift)));
+    --fg: oklch(0.89 0 var(--dark-foreground-hue));
+    --muted: oklch(0.72 0 var(--dark-foreground-hue));
     --muted-subtle: color-mix(in oklch, var(--muted) 45%, var(--border));
-    --sidebar-fg: oklch(0.78 0.02 var(--dark-foreground-hue));
-    --border: oklch(0.33 0.01 var(--dark-foreground-hue));
+    --sidebar-fg: oklch(0.78 0 var(--dark-foreground-hue));
+    --border: oklch(0.33 0 var(--dark-foreground-hue));
 
     --accent: oklch(0.75 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
     --accent-hover: oklch(0.82 0.13 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));