From 4fd1b712fa75310318e51fe2e4e19bcbb83e98a5 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Fri, 28 Nov 2025 19:46:25 +0100
Subject: [PATCH] feat: Sort document tags alphabetically and prevent
 hover/focus on empty folder menu items.

---
 frontend/src/documents/DocumentSummarySection.tsx  |  6 +++++-
 frontend/src/documents/SelectionFolderMenu.tsx     |  2 +-
 frontend/src/documents/components/DocumentTags.tsx | 12 ++++++++++--
 frontend/src/documents/components/EntryTags.tsx    |  2 +-
 frontend/src/styles/detail/detail-panels.css       |  6 ++++++
 5 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/frontend/src/documents/DocumentSummarySection.tsx b/frontend/src/documents/DocumentSummarySection.tsx
index 635ff9a..34b5e1e 100644
--- a/frontend/src/documents/DocumentSummarySection.tsx
+++ b/frontend/src/documents/DocumentSummarySection.tsx
@@ -472,7 +472,11 @@ const DocumentSummarySection: React.FC<DocumentSummarySectionProps> = ({
       id: tag.id,
       label: tag.label,
       color: tag.color ?? tagLookupById.get(tag.id)?.color ?? null,
-    }));
+    })).sort((a, b) => {
+      const labelA = (a.label || '').toLowerCase();
+      const labelB = (b.label || '').toLowerCase();
+      return labelA.localeCompare(labelB);
+    });
   }, [document?.tags, tagLookupById]);
 
   const resolvedCorrespondents = useMemo(() => {
diff --git a/frontend/src/documents/SelectionFolderMenu.tsx b/frontend/src/documents/SelectionFolderMenu.tsx
index 0f62a35..958f5ec 100644
--- a/frontend/src/documents/SelectionFolderMenu.tsx
+++ b/frontend/src/documents/SelectionFolderMenu.tsx
@@ -257,7 +257,7 @@ const SelectionFolderMenu: React.FC<SelectionFolderMenuProps> = ({
                                 return (
                                     <div
                                         key={item.id}
-                                        className="menu__item selection-assignment__item"
+                                        className={`menu__item selection-assignment__item${!hasChildren ? ' selection-assignment__item--empty' : ''}`}
                                         role="menuitem"
                                     >
                                         {/* Clickable area to navigate down */}
diff --git a/frontend/src/documents/components/DocumentTags.tsx b/frontend/src/documents/components/DocumentTags.tsx
index 79570f2..b6425e6 100644
--- a/frontend/src/documents/components/DocumentTags.tsx
+++ b/frontend/src/documents/components/DocumentTags.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { getTagColorStyle } from '../../utils/colors';
 import { writeTagTransferData } from '../tagTransfer';
 import type { DocumentTag } from '../../types/documents';
@@ -23,13 +23,21 @@ const DocumentTags: React.FC<DocumentTagsProps> = ({
     onTagDragStart,
     onTagDragEnd,
 }) => {
+    const sortedTags = useMemo(() => {
+        return [...tags].sort((a, b) => {
+            const labelA = (a.label || '').toLowerCase();
+            const labelB = (b.label || '').toLowerCase();
+            return labelA.localeCompare(labelB);
+        });
+    }, [tags]);
+
     if (tags.length === 0) {
         return null;
     }
 
     return (
         <>
-            {tags.map((tag, index) => {
+            {sortedTags.map((tag, index) => {
                 const colorSource = tag?.color || tagLookupById?.get(tag.id)?.color;
                 const style = getTagColorStyle(colorSource);
                 const tagId = tag?.id ?? null;
diff --git a/frontend/src/documents/components/EntryTags.tsx b/frontend/src/documents/components/EntryTags.tsx
index fa3f589..9db4804 100644
--- a/frontend/src/documents/components/EntryTags.tsx
+++ b/frontend/src/documents/components/EntryTags.tsx
@@ -4,7 +4,7 @@ import type { Identifier } from '../../types/identifiers';
 import type { DocumentTag } from '../../types/documents';
 
 interface EntryTagsProps {
-    tags: Identifier[];
+    tags: DocumentTag[];
     tagLookupById?: Map<Identifier, DocumentTag> | null;
     onTagClick?: (tagId: Identifier) => void;
     docId: Identifier;
diff --git a/frontend/src/styles/detail/detail-panels.css b/frontend/src/styles/detail/detail-panels.css
index 2da2124..64de28d 100644
--- a/frontend/src/styles/detail/detail-panels.css
+++ b/frontend/src/styles/detail/detail-panels.css
@@ -846,4 +846,10 @@
   display: flex;
   align-items: center;
   gap: 0.25rem;
+}
+
+.menu .selection-assignment__item--empty:hover,
+.menu .selection-assignment__item--empty:focus-visible {
+  background: transparent;
+  cursor: default;
 }
\ No newline at end of file