From 2d9143784b08d4ab06f99257697f2bf082ded796 Mon Sep 17 00:00:00 2001
From: Xavier Le Baux <xavier.lebaux@gmail.com>
Date: Mon, 10 Feb 2025 12:42:13 -0300
Subject: [PATCH 1/2] feat(tags): add alphabetical sort button to TagsPanel

- Introduce the handleSortAlphabetically action in TagsTree to recursively sort tags by name.
- Add a new ToolbarButton to trigger the sort functionality in the panel header.
---
 .../Outliner/TagsPanel/TagsTree.tsx           | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/src/frontend/containers/Outliner/TagsPanel/TagsTree.tsx b/src/frontend/containers/Outliner/TagsPanel/TagsTree.tsx
index 24b8c43b..7c2a169b 100644
--- a/src/frontend/containers/Outliner/TagsPanel/TagsTree.tsx
+++ b/src/frontend/containers/Outliner/TagsPanel/TagsTree.tsx
@@ -535,6 +535,22 @@ const TagsTree = observer((props: Partial<MultiSplitPaneProps>) => {
     }
   });
 
+  // NEW: Action to sort the tags alphabetically (recursively)
+  const handleSortAlphabetically = useAction(() => {
+    // Recursive sorting function
+    const sortTags = (tags: ClientTag[]) => {
+      // First, sort children of each tag
+      tags.forEach(tag => {
+        if (tag.subTags && tag.subTags.length > 0) {
+          sortTags(tag.subTags);
+        }
+      });
+      // Then sort the array in place
+      tags.sort((a, b) => a.name.localeCompare(b.name));
+    };
+    sortTags(tagStore.root.subTags);
+  });
+
   const handleBranchOnKeyDown = useAction(
     (event: React.KeyboardEvent<HTMLLIElement>, nodeData: ClientTag, treeData: ITreeData) =>
       createBranchOnKeyDown(
@@ -597,6 +613,13 @@ const TagsTree = observer((props: Partial<MultiSplitPaneProps>) => {
               tooltip="Add a new tag"
             />
           )}
+          {/* NEW: Sort button */}
+          <ToolbarButton
+            icon={IconSet.SORT} // make sure IconSet.SORT exists, or replace with an existing sort icon
+            text="Sort"
+            onClick={handleSortAlphabetically}
+            tooltip="Sort tags alphabetically"
+          />
         </Toolbar>
       }
       {...props}

From e6d719aae021fefbbbf400db51cd602fd0d93b8b Mon Sep 17 00:00:00 2001
From: Xavier Le Baux <xavier.lebaux@gmail.com>
Date: Mon, 10 Feb 2025 13:39:58 -0300
Subject: [PATCH 2/2] refactor(navigation): simplify navigation panel layout
 and styling

- Flatten navigation buttons structure in NavigationPanel
- Update CSS to improve horizontal scrolling and button layout
- Add title attribute to navigation buttons for better accessibility
---
 resources/icons/grid-view.svg                 |  2 +-
 resources/style/outliner.scss                 | 63 +++++-------------
 .../Outliner/NavigationPanel/index.tsx        | 65 +++++++++----------
 3 files changed, 50 insertions(+), 80 deletions(-)

diff --git a/resources/icons/grid-view.svg b/resources/icons/grid-view.svg
index aabe6949..f907bcf0 100644
--- a/resources/icons/grid-view.svg
+++ b/resources/icons/grid-view.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM9 9H5V5h4v4zm5 2h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zm1-6h4v4h-4V5zM3 20a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6zm2-5h4v4H5v-4zm8 5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6zm2-5h4v4h-4v-4z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM9 9H5V5h4v4zm5 2h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zm1-6h4v4h-4V5zM3 20a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6zm2-5h4v4H5v-4zm8 5a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6zm2-5h4v4h-4v-4z"></path></svg>
\ No newline at end of file
diff --git a/resources/style/outliner.scss b/resources/style/outliner.scss
index bf9f38ca..b275c1d0 100644
--- a/resources/style/outliner.scss
+++ b/resources/style/outliner.scss
@@ -215,51 +215,24 @@
 }
 
 .navigation-buttons {
-  // display: flex;
-  // flex-wrap: wrap;
-  padding: 0.2rem;
-
-  .navigation-buttons-raw {
-    display: flex;
-
-    .navigation-button {
-      // flex: 1;
-
-      display: inline-block;
-      flex-direction: column;
-      background-color: var(--background-color);
-      border-radius: 10px;
-      width: 100%;
-      min-width: 50px;
-      cursor: pointer;
-      // max-width: 120px;
-
-      margin: 0.2rem;
-
-      &:hover {
-        background-color: var(--text-color-alt);
-      }
-
-      .navigation-button__icon {
-        .custom-icon {
-          width: 1.4rem;
-          height: 1.4rem;
-        }
-      }
-
-      .navigation-button__label {
-      }
-    }
-  }
+  display: flex;
+  overflow-x: auto; /* Allows horizontal scrolling if needed */
+  white-space: nowrap; /* Prevents text wrapping */
+}
 
-  .navigation-button--checked {
-    box-shadow: inset 0 0 0 2px var(--accent-color);
-    background-color: none;
+.navigation-button {
+  // flex: 0 0 auto; /* Prevents buttons from shrinking */
+  width: 100%; /* Square width */
+  // height: 100%; /* Square height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px;
+  transition: border-color 0.3s;
+  border-radius: 10px;
+}
 
-    .navigation-button__icon {
-      .custom-icon {
-        color: var(--accent-color);
-      }
-    }
-  }
+.navigation-button--checked {
+  background-color: var(--background-color);
+  border-radius: 10px;
 }
diff --git a/src/frontend/containers/Outliner/NavigationPanel/index.tsx b/src/frontend/containers/Outliner/NavigationPanel/index.tsx
index d839c72a..d0c5d5ba 100644
--- a/src/frontend/containers/Outliner/NavigationPanel/index.tsx
+++ b/src/frontend/containers/Outliner/NavigationPanel/index.tsx
@@ -22,6 +22,7 @@ export const NavigationButton = ({
   checked,
 }: NavigationButtonProps) => (
   <button
+    title={text}
     className={'navigation-button' + (checked ? ' navigation-button--checked' : '')}
     tabIndex={-1}
     aria-checked={checked}
@@ -39,40 +40,36 @@ const TagsPanel = observer((props: Partial<MultiSplitPaneProps>) => {
 
   return (
     <div className="navigation-buttons">
-      <div className="navigation-buttons-raw">
-        <NavigationButton
-          icon={IconSet.VIEW_LIST}
-          onClick={uiStore.setMethodList}
-          checked={uiStore.isList}
-          text="List"
-        />
-        <NavigationButton
-          icon={IconSet.VIEW_GRID}
-          onClick={uiStore.setMethodMasonry}
-          checked={uiStore.isMasonry}
-          text="Grid"
-        />
-      </div>
-      <div className="navigation-buttons-raw">
-        <NavigationButton
-          icon={IconSet.FACE_SMILING}
-          onClick={uiStore.setMethodFaces}
-          checked={uiStore.isFaces}
-          text="Faces"
-        />
-        <NavigationButton
-          icon={IconSet.WORLD}
-          onClick={uiStore.setMethodMap}
-          checked={uiStore.isMap}
-          text="Map"
-        />
-        <NavigationButton
-          icon={IconSet.FILTER_DATE}
-          onClick={uiStore.setMethodCalendar}
-          checked={uiStore.isCalendar}
-          text="Calendar"
-        />
-      </div>
+      <NavigationButton
+        icon={IconSet.VIEW_LIST}
+        onClick={uiStore.setMethodList}
+        checked={uiStore.isList}
+        text="List"
+      />
+      <NavigationButton
+        icon={IconSet.VIEW_GRID}
+        onClick={uiStore.setMethodMasonry}
+        checked={uiStore.isMasonry}
+        text="Grid"
+      />
+      <NavigationButton
+        icon={IconSet.FACE_SMILING}
+        onClick={uiStore.setMethodFaces}
+        checked={uiStore.isFaces}
+        text="Faces"
+      />
+      <NavigationButton
+        icon={IconSet.WORLD}
+        onClick={uiStore.setMethodMap}
+        checked={uiStore.isMap}
+        text="Map"
+      />
+      <NavigationButton
+        icon={IconSet.FILTER_DATE}
+        onClick={uiStore.setMethodCalendar}
+        checked={uiStore.isCalendar}
+        text="Calendar"
+      />
     </div>
   );
 });