frontend: tags

frontend/src/skeuomorphic_ws.jsx

@@ -10,7 +10,7 @@ import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
 import { useAssetNavigator } from './hooks/useAssetNavigator';
 import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
 import PreviewZoomOverlay from './detail/PreviewZoomOverlay';
-import { getReadableTextColor } from './utils/colors';
+import { getTagColorStyle } from './utils/colors';
 import './skeuomorphic_ws.css';
 
 const ITEM_WIDTH = 220;
@@ -598,23 +598,6 @@ const clampCardDimensions = (width, height) => {
 const formatTransform = (x, y, rotation = 0, scale = 1) =>
   `translate3d(${x}px, ${y}px, 0) rotate(${rotation}deg) scale(${scale})`;
 
-const normalizeColor = (input) => {
-  if (!input) return null;
-  const value = String(input).trim();
-  if (!value) return null;
-  if (/^#(?:[0-9a-fA-F]{3}){1,2}$/.test(value)) {
-    return value.length === 4
-      ? `#${value[1]}${value[1]}${value[2]}${value[2]}${value[3]}${value[3]}`
-      : value;
-  }
-  if (/^[0-9a-fA-F]{6}$/.test(value)) {
-    return `#${value}`;
-  }
-  return null;
-};
-
-const getContrastingTextColor = (hex) => getReadableTextColor(hex, { light: '#1f2125' });
-
 const SkeuomorphicWorkspace = ({
   documents = [],
   searchResults = null,
@@ -1758,21 +1741,18 @@ const SkeuomorphicWorkspace = ({
                         ) {
                           return null;
                         }
-                        const colorValue = normalizeColor(tag.color);
-                        const foreground = getContrastingTextColor(colorValue || '#1b1f24');
+                        const colorStyle = getTagColorStyle(tag.color);
                         const pendingRemoval =
                           pendingRemovalTag &&
                           pendingRemovalTag.docId === doc.id &&
                           pendingRemovalTag.tagId === tag.id;
-                        const tagClasses = ['skeuo-tag'];
-                        if (pendingRemoval) tagClasses.push('is-tear-pending');
-                        const tagStyle =
-                          colorValue ? { backgroundColor: colorValue, color: foreground } : undefined;
+                        const tagClasses = ['badge', 'tag-chip', 'tag-chip--draggable'];
+                        if (pendingRemoval) tagClasses.push('tag-chip--tear-pending');
                         return (
-                          <div
+                          <span
                             key={key}
                             className={tagClasses.join(' ')}
-                            style={tagStyle}
+                            style={colorStyle || undefined}
                             title={tag.label || 'Tag'}
                             draggable
                             onPointerDown={(event) => handleDocTagPointerDown(event, doc, tag)}
@@ -1780,8 +1760,8 @@ const SkeuomorphicWorkspace = ({
                             onDrag={handleDocTagDrag}
                             onDragEnd={(event) => handleDocTagDragEnd(event)}
                           >
-                            <span>{tag.label || 'Tag'}</span>
-                          </div>
+                            <span className="tag-chip__label">{tag.label || 'Tag'}</span>
+                          </span>
                         );
                       })}
                     </div>