feat: Sort document tags alphabetically and prevent hover/focus on empty folder menu items.

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(() => {

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 */}

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;

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;

frontend/src/styles/detail/detail-panels.css

@@ -847,3 +847,9 @@
   align-items: center;
   gap: 0.25rem;
 }
+
+.menu .selection-assignment__item--empty:hover,
+.menu .selection-assignment__item--empty:focus-visible {
+  background: transparent;
+  cursor: default;
+}