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

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;