@leanspec/ui 0.2.14 → 0.2.15-dev.21025278490

package/src/components/dependencies/SpecSidebar.tsx

@@ -1,256 +0,0 @@
-import { Clock, PlayCircle, CheckCircle2, Archive, AlertCircle, ArrowUp, Minus, ArrowDown } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-import { cn } from '../../lib/utils';
-import type { SpecNode, FocusedNodeDetails } from './types';
-
-const statusIcons = {
-  'planned': Clock,
-  'in-progress': PlayCircle,
-  'complete': CheckCircle2,
-  'archived': Archive,
-};
-
-const priorityIcons = {
-  'critical': AlertCircle,
-  'high': ArrowUp,
-  'medium': Minus,
-  'low': ArrowDown,
-};
-
-interface SpecListItemProps {
-  spec: SpecNode;
-  type: 'upstream' | 'downstream';
-  depth: number;
-  onClick: () => void;
-}
-
-function SpecListItem({ spec, type, depth, onClick }: SpecListItemProps) {
-  const { t } = useTranslation();
-  const typeColors = {
-    upstream: 'border-l-amber-500',
-    downstream: 'border-l-emerald-500',
-  };
-
-  const depthLabel = depth === 1
-    ? t('dependenciesPage.sidebar.depth.direct')
-    : t('dependenciesPage.sidebar.depth.level', { depth });
-  
-  const StatusIcon = statusIcons[spec.status as keyof typeof statusIcons] || Clock;
-  const PriorityIcon = priorityIcons[spec.priority as keyof typeof priorityIcons] || Minus;
-
-  return (
-    <button
-      onClick={onClick}
-      className={cn(
-        'w-full text-left px-2 py-1.5 rounded border-l-2 bg-muted/30 hover:bg-muted/50 transition-colors',
-        typeColors[type]
-      )}
-    >
-      <div className="flex items-center gap-1.5">
-        <span className="text-[10px] font-bold text-muted-foreground">
-          #{spec.number.toString().padStart(3, '0')}
-        </span>
-        {/* Status icon */}
-        <div
-          className={cn(
-            'rounded p-0.5 flex items-center justify-center',
-            spec.status === 'planned' && 'bg-blue-500/20',
-            spec.status === 'in-progress' && 'bg-orange-500/20',
-            spec.status === 'complete' && 'bg-green-500/20',
-            spec.status === 'archived' && 'bg-gray-500/20'
-          )}
-          title={t(`status.${spec.status}`)}
-        >
-          <StatusIcon
-            className={cn(
-              'h-2.5 w-2.5',
-              spec.status === 'planned' && 'text-blue-600 dark:text-blue-400',
-              spec.status === 'in-progress' && 'text-orange-600 dark:text-orange-400',
-              spec.status === 'complete' && 'text-green-600 dark:text-green-400',
-              spec.status === 'archived' && 'text-gray-500 dark:text-gray-400'
-            )}
-          />
-        </div>
-        {/* Priority icon */}
-        <div
-          className={cn(
-            'rounded p-0.5 flex items-center justify-center',
-            spec.priority === 'critical' && 'bg-red-500/20',
-            spec.priority === 'high' && 'bg-orange-500/20',
-            spec.priority === 'medium' && 'bg-blue-500/20',
-            spec.priority === 'low' && 'bg-gray-500/20'
-          )}
-          title={spec.priority ? t(`priority.${spec.priority}`) : undefined}
-        >
-          <PriorityIcon
-            className={cn(
-              'h-2.5 w-2.5',
-              spec.priority === 'critical' && 'text-red-600 dark:text-red-400',
-              spec.priority === 'high' && 'text-orange-600 dark:text-orange-400',
-              spec.priority === 'medium' && 'text-blue-600 dark:text-blue-400',
-              spec.priority === 'low' && 'text-gray-500 dark:text-gray-400'
-            )}
-          />
-        </div>
-        <span className="text-[8px] px-1 py-0.5 rounded bg-muted text-muted-foreground font-medium ml-auto">
-          {depthLabel}
-        </span>
-      </div>
-      <p className="text-[11px] text-foreground truncate leading-tight mt-0.5">{spec.name}</p>
-    </button>
-  );
-}
-
-interface SpecSidebarProps {
-  focusedDetails: FocusedNodeDetails | null;
-  onSelectSpec: (specId: string) => void;
-  onOpenSpec: (specNumber: number) => void;
-}
-
-export function SpecSidebar({ focusedDetails, onSelectSpec, onOpenSpec }: SpecSidebarProps) {
-  const { t } = useTranslation();
-  if (!focusedDetails) {
-    return (
-      <div className="w-64 shrink-0 rounded-lg border border-border bg-background/95 overflow-hidden flex flex-col">
-        <div className="flex-1 flex items-center justify-center p-4">
-          <div className="text-center text-muted-foreground">
-            <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-muted/50 flex items-center justify-center">
-              <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={1.5}
-                  d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
-                />
-              </svg>
-            </div>
-            <p className="text-sm font-medium">{t('dependenciesPage.sidebar.emptyTitle')}</p>
-            <p className="text-xs mt-1">{t('dependenciesPage.sidebar.emptyDescription')}</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  const { node, upstream, downstream } = focusedDetails;
-  
-  const StatusIcon = statusIcons[node.status as keyof typeof statusIcons] || Clock;
-  const PriorityIcon = priorityIcons[node.priority as keyof typeof priorityIcons] || Minus;
-
-  return (
-    <div className="w-64 shrink-0 rounded-lg border border-border bg-background/95 overflow-hidden flex flex-col">
-      {/* Selected spec header */}
-      <div className="p-3 border-b border-border bg-muted/30">
-        <div className="flex items-center gap-2 mb-1">
-          <span className="font-bold text-sm">#{node.number.toString().padStart(3, '0')}</span>
-          {/* Status icon */}
-          <div
-            className={cn(
-              'rounded p-1 flex items-center justify-center',
-              node.status === 'planned' && 'bg-blue-500/20',
-              node.status === 'in-progress' && 'bg-orange-500/20',
-              node.status === 'complete' && 'bg-green-500/20',
-              node.status === 'archived' && 'bg-gray-500/20'
-            )}
-            title={node.status}
-          >
-            <StatusIcon
-              className={cn(
-                'h-3 w-3',
-                node.status === 'planned' && 'text-blue-600 dark:text-blue-300',
-                node.status === 'in-progress' && 'text-orange-600 dark:text-orange-300',
-                node.status === 'complete' && 'text-green-600 dark:text-green-300',
-                node.status === 'archived' && 'text-gray-500 dark:text-gray-300'
-              )}
-            />
-          </div>
-          {/* Priority icon */}
-          <div
-            className={cn(
-              'rounded p-1 flex items-center justify-center',
-              node.priority === 'critical' && 'bg-red-500/20',
-              node.priority === 'high' && 'bg-orange-500/20',
-              node.priority === 'medium' && 'bg-blue-500/20',
-              node.priority === 'low' && 'bg-gray-500/20'
-            )}
-            title={node.priority}
-          >
-            <PriorityIcon
-              className={cn(
-                'h-3 w-3',
-                node.priority === 'critical' && 'text-red-600 dark:text-red-300',
-                node.priority === 'high' && 'text-orange-600 dark:text-orange-300',
-                node.priority === 'medium' && 'text-blue-600 dark:text-blue-300',
-                node.priority === 'low' && 'text-gray-500 dark:text-gray-300'
-              )}
-            />
-          </div>
-        </div>
-        <p className="text-sm font-medium text-foreground leading-snug">{node.name}</p>
-        <button
-          onClick={() => onOpenSpec(node.number)}
-          className="mt-2 w-full rounded bg-primary/20 border border-primary/40 px-2 py-1.5 text-xs text-primary hover:bg-primary/30 font-medium"
-        >
-          {t('dependenciesPage.sidebar.openSpec')}
-        </button>
-      </div>
-
-      {/* Scrollable spec lists */}
-      <div className="flex-1 overflow-auto p-3 space-y-4">
-        {/* Upstream Dependencies */}
-        <div>
-          <div className="flex items-center gap-2 mb-2">
-            <span className="inline-block w-2 h-2 rounded-full bg-amber-500" />
-            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              {t('dependenciesPage.sidebar.dependsOnHeading', { count: upstream.reduce((sum, g) => sum + g.specs.length, 0) })}
-            </span>
-          </div>
-          {upstream.length > 0 ? (
-            <div className="space-y-1.5">
-              {upstream.flatMap((group) =>
-                group.specs.map((spec) => (
-                  <SpecListItem
-                    key={spec.id}
-                    spec={spec}
-                    type="upstream"
-                    depth={group.depth}
-                    onClick={() => onSelectSpec(spec.id)}
-                  />
-                ))
-              )}
-            </div>
-          ) : (
-            <p className="text-xs text-muted-foreground/60 italic">{t('dependenciesPage.sidebar.emptyUpstream')}</p>
-          )}
-        </div>
-
-        {/* Downstream Dependents */}
-        <div>
-          <div className="flex items-center gap-2 mb-2">
-            <span className="inline-block w-2 h-2 rounded-full bg-emerald-500" />
-            <span className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
-              {t('dependenciesPage.sidebar.requiredByHeading', { count: downstream.reduce((sum, g) => sum + g.specs.length, 0) })}
-            </span>
-          </div>
-          {downstream.length > 0 ? (
-            <div className="space-y-1.5">
-              {downstream.flatMap((group) =>
-                group.specs.map((spec) => (
-                  <SpecListItem
-                    key={spec.id}
-                    spec={spec}
-                    type="downstream"
-                    depth={group.depth}
-                    onClick={() => onSelectSpec(spec.id)}
-                  />
-                ))
-              )}
-            </div>
-          ) : (
-            <p className="text-xs text-muted-foreground/60 italic">{t('dependenciesPage.sidebar.emptyDownstream')}</p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/dependencies/constants.ts

@@ -1,25 +0,0 @@
-// Node dimensions
-export const NODE_WIDTH = 180;
-export const NODE_HEIGHT = 60;
-export const COMPACT_NODE_WIDTH = 120;
-export const COMPACT_NODE_HEIGHT = 40;
-
-// Edge colors
-export const DEPENDS_ON_COLOR = '#f59e0b';
-
-// Status tone classes for node styling (aligned with StatusBadge component)
-// Using light/dark mode compatible colors
-export const toneClasses: Record<string, string> = {
-  planned: 'border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-200',
-  'in-progress': 'border-orange-500 bg-orange-100 text-orange-800 dark:bg-orange-950/60 dark:text-orange-200',
-  complete: 'border-green-500 bg-green-100 text-green-800 dark:bg-green-950/60 dark:text-green-200',
-  archived: 'border-gray-400 bg-gray-100 text-gray-600 dark:border-gray-500/80 dark:bg-gray-900/60 dark:text-gray-400',
-};
-
-// Background colors for minimap (aligned with StatusBadge component)
-export const toneBgColors: Record<string, string> = {
-  planned: '#3b82f6',     // blue-500 (works in both themes)
-  'in-progress': '#f97316', // orange-500
-  complete: '#22c55e',    // green-500
-  archived: '#6b7280',    // gray-500
-};

package/src/components/dependencies/types.ts

@@ -1,38 +0,0 @@
-import type { DependencyGraph } from '../../types/api';
-
-export type GraphTone = 'planned' | 'in-progress' | 'complete' | 'archived';
-
-export interface SpecNodeData {
-  label: string;
-  shortLabel: string;
-  badge: string;
-  number: number;
-  tone: GraphTone;
-  priority: string;
-  href?: string;
-  interactive?: boolean;
-  isFocused?: boolean;
-  connectionDepth?: number;
-  isDimmed?: boolean;
-  isCompact?: boolean;
-  isSecondary?: boolean; // Shown due to critical path, not primary filter
-}
-
-export type SpecNode = DependencyGraph['nodes'][0];
-
-// Specs grouped by their depth level from the focused node
-export interface SpecsByDepth {
-  depth: number;
-  specs: SpecNode[];
-}
-
-export interface FocusedNodeDetails {
-  node: SpecNode;
-  upstream: SpecsByDepth[];  // All transitive deps grouped by depth
-  downstream: SpecsByDepth[]; // All transitive dependents grouped by depth
-}
-
-export interface ConnectionStats {
-  connected: number;
-  standalone: number;
-}

package/src/components/dependencies/utils.ts

@@ -1,261 +0,0 @@
-import dagre from '@dagrejs/dagre';
-import type { Node, Edge } from 'reactflow';
-import type { SpecNodeData } from './types';
-import {
-  NODE_WIDTH,
-  NODE_HEIGHT,
-  COMPACT_NODE_WIDTH,
-  COMPACT_NODE_HEIGHT,
-} from './constants';
-
-/**
- * Get nodes at various depths from a starting node (directional BFS)
- * Only includes upstream (specs this depends on) and downstream (specs that depend on this)
- * Edge direction: source depends_on target (A→B means A depends on B)
- */
-export function getConnectionDepths(
-  startId: string,
-  edges: Array<{ source: string; target: string }>,
-  maxDepth: number = 2
-): Map<string, number> {
-  const depths = new Map<string, number>();
-  depths.set(startId, 0);
-
-  // Build directional adjacency maps
-  // upstreamMap: source → targets (specs that source depends on)
-  // downstreamMap: target → sources (specs that depend on target)
-  const upstreamMap = new Map<string, Set<string>>();
-  const downstreamMap = new Map<string, Set<string>>();
-
-  edges.forEach((e) => {
-    // source depends on target, so target is upstream of source
-    if (!upstreamMap.has(e.source)) upstreamMap.set(e.source, new Set());
-    upstreamMap.get(e.source)!.add(e.target);
-
-    // source depends on target, so source is downstream of target
-    if (!downstreamMap.has(e.target)) downstreamMap.set(e.target, new Set());
-    downstreamMap.get(e.target)!.add(e.source);
-  });
-
-  // BFS upstream (specs this depends on, directly or transitively)
-  let currentLevel = new Set([startId]);
-  let depth = 1;
-  while (currentLevel.size > 0 && depth <= maxDepth) {
-    const nextLevel = new Set<string>();
-    currentLevel.forEach((nodeId) => {
-      const upstreamNodes = upstreamMap.get(nodeId);
-      if (upstreamNodes) {
-        upstreamNodes.forEach((upstream) => {
-          if (!depths.has(upstream)) {
-            depths.set(upstream, depth);
-            nextLevel.add(upstream);
-          }
-        });
-      }
-    });
-    currentLevel = nextLevel;
-    depth++;
-  }
-
-  // BFS downstream (specs that depend on this, directly or transitively)
-  currentLevel = new Set([startId]);
-  depth = 1;
-  while (currentLevel.size > 0 && depth <= maxDepth) {
-    const nextLevel = new Set<string>();
-    currentLevel.forEach((nodeId) => {
-      const downstreamNodes = downstreamMap.get(nodeId);
-      if (downstreamNodes) {
-        downstreamNodes.forEach((downstream) => {
-          if (!depths.has(downstream)) {
-            depths.set(downstream, depth);
-            nextLevel.add(downstream);
-          }
-        });
-      }
-    });
-    currentLevel = nextLevel;
-    depth++;
-  }
-
-  return depths;
-}
-
-/**
- * Layout the graph using dagre (hierarchical DAG layout)
- */
-export function layoutGraph(
-  nodes: Node<SpecNodeData>[],
-  edges: Edge[],
-  isCompact: boolean,
-  showStandalone: boolean,
-  options: {
-    mode?: 'graph' | 'focus';
-    focusedNodeId?: string | null;
-    upstreamIds?: Set<string>;
-    downstreamIds?: Set<string>;
-  } = {}
-): { nodes: Node<SpecNodeData>[]; edges: Edge[] } {
-  if (nodes.length === 0) return { nodes: [], edges: [] };
-
-  const mode = options.mode ?? 'graph';
-
-  if (mode === 'focus' && options.focusedNodeId) {
-    return layeredLayout(nodes, edges, isCompact);
-  }
-
-  const width = isCompact ? COMPACT_NODE_WIDTH : NODE_WIDTH;
-  const height = isCompact ? COMPACT_NODE_HEIGHT : NODE_HEIGHT;
-  const gap = isCompact ? 30 : 50;
-
-  // Separate nodes with dependencies from standalone nodes
-  const nodesWithDeps = new Set<string>();
-  edges.forEach((e) => {
-    nodesWithDeps.add(e.source);
-    nodesWithDeps.add(e.target);
-  });
-
-  const connectedNodes = nodes.filter((n) => nodesWithDeps.has(n.id));
-  const standaloneNodes = showStandalone ? nodes.filter((n) => !nodesWithDeps.has(n.id)) : [];
-
-  const allLayoutedNodes: Node<SpecNodeData>[] = [];
-
-  // DAG view: Layout connected nodes with dagre (left-to-right for dependency flow)
-  if (connectedNodes.length > 0) {
-    const graph = new dagre.graphlib.Graph();
-    graph.setGraph({
-      rankdir: 'LR',
-      align: 'UL',
-      nodesep: isCompact ? 30 : 50,
-      ranksep: isCompact ? 80 : 120,
-      marginx: 40,
-      marginy: 40,
-    });
-    graph.setDefaultEdgeLabel(() => ({}));
-
-    connectedNodes.forEach((node) => {
-      graph.setNode(node.id, { width, height });
-    });
-    edges.forEach((edge) => {
-      if (nodesWithDeps.has(edge.source) && nodesWithDeps.has(edge.target)) {
-        graph.setEdge(edge.source, edge.target);
-      }
-    });
-
-    dagre.layout(graph);
-
-    // Find bounds for centering
-    let minX = Infinity, minY = Infinity, maxX = 0, maxY = 0;
-    connectedNodes.forEach((node) => {
-      const pos = graph.node(node.id);
-      minX = Math.min(minX, pos.x - width / 2);
-      minY = Math.min(minY, pos.y - height / 2);
-      maxX = Math.max(maxX, pos.x + width / 2);
-      maxY = Math.max(maxY, pos.y + height / 2);
-    });
-
-    connectedNodes.forEach((node) => {
-      const pos = graph.node(node.id);
-      allLayoutedNodes.push({
-        ...node,
-        position: {
-          x: pos.x - minX,
-          y: pos.y - minY,
-        },
-      });
-    });
-
-    // Layout standalone nodes in a grid below the graph
-    if (standaloneNodes.length > 0) {
-      const graphHeight = maxY - minY;
-      const graphWidth = maxX - minX;
-      const gridStartY = graphHeight + gap * 2;
-      const cols = Math.ceil(Math.sqrt(standaloneNodes.length * 1.5));
-      const gridWidth = cols * (width + gap);
-      const gridStartX = graphWidth > gridWidth ? Math.floor((graphWidth - gridWidth) / 2) : 0;
-
-      standaloneNodes.forEach((node, i) => {
-        const col = i % cols;
-        const row = Math.floor(i / cols);
-        allLayoutedNodes.push({
-          ...node,
-          position: {
-            x: gridStartX + col * (width + gap),
-            y: gridStartY + row * (height + gap),
-          },
-        });
-      });
-    }
-  } else {
-    // Only standalone nodes - arrange in a grid
-    const cols = Math.ceil(Math.sqrt(standaloneNodes.length * 1.5));
-
-    standaloneNodes.forEach((node, i) => {
-      const col = i % cols;
-      const row = Math.floor(i / cols);
-      allLayoutedNodes.push({
-        ...node,
-        position: {
-          x: col * (width + gap),
-          y: row * (height + gap),
-        },
-      });
-    });
-  }
-
-  return { nodes: allLayoutedNodes, edges };
-}
-
-function layeredLayout(
-  nodes: Node<SpecNodeData>[],
-  edges: Edge[],
-  isCompact: boolean,
-): { nodes: Node<SpecNodeData>[]; edges: Edge[] } {
-  // Use dagre for consistent hierarchical layout
-  // This preserves the structure of complex dependency chains (A->B->C)
-  // instead of flattening them into just "upstream" and "downstream" buckets
-
-  const width = isCompact ? COMPACT_NODE_WIDTH : NODE_WIDTH;
-  const height = isCompact ? COMPACT_NODE_HEIGHT : NODE_HEIGHT;
-
-  const graph = new dagre.graphlib.Graph();
-  graph.setGraph({
-    rankdir: 'LR', // Consistent with main graph
-    align: 'UL',
-    nodesep: isCompact ? 30 : 50,
-    ranksep: isCompact ? 80 : 120,
-    marginx: 40,
-    marginy: 40,
-  });
-  graph.setDefaultEdgeLabel(() => ({}));
-
-  nodes.forEach((node) => {
-    graph.setNode(node.id, { width, height });
-  });
-
-  edges.forEach((edge) => {
-    graph.setEdge(edge.source, edge.target);
-  });
-
-  dagre.layout(graph);
-
-  // Find bounds to normalize coordinates (start at 0,0)
-  let minX = Infinity, minY = Infinity;
-  nodes.forEach((node) => {
-    const pos = graph.node(node.id);
-    minX = Math.min(minX, pos.x - width / 2);
-    minY = Math.min(minY, pos.y - height / 2);
-  });
-
-  const layoutedNodes = nodes.map((node) => {
-    const pos = graph.node(node.id);
-    return {
-      ...node,
-      position: {
-        x: pos.x - minX,
-        y: pos.y - minY,
-      },
-    };
-  });
-
-  return { nodes: layoutedNodes, edges };
-}

package/src/components/metadata-editors/PriorityEditor.tsx

@@ -1,89 +0,0 @@
-import { useState } from 'react';
-import { AlertCircle, ArrowDown, ArrowUp, Loader2, Minus } from 'lucide-react';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@leanspec/ui-components';
-import { cn } from '../../lib/utils';
-import { api } from '../../lib/api';
-import type { Spec } from '../../types/api';
-import { useTranslation } from 'react-i18next';
-
-const PRIORITY_OPTIONS: Array<{ value: NonNullable<Spec['priority']>; labelKey: `priority.${string}`; className: string; Icon: React.ComponentType<{ className?: string }> }> = [
-  { value: 'critical', labelKey: 'priority.critical', className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400', Icon: AlertCircle },
-  { value: 'high', labelKey: 'priority.high', className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400', Icon: ArrowUp },
-  { value: 'medium', labelKey: 'priority.medium', className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400', Icon: Minus },
-  { value: 'low', labelKey: 'priority.low', className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400', Icon: ArrowDown },
-];
-
-interface PriorityEditorProps {
-  specName: string;
-  value: Spec['priority'];
-  onChange?: (priority: NonNullable<Spec['priority']>) => void;
-  disabled?: boolean;
-  className?: string;
-}
-
-export function PriorityEditor({ specName, value, onChange, disabled = false, className }: PriorityEditorProps) {
-  const initial = value || 'medium';
-  const [priority, setPriority] = useState<NonNullable<Spec['priority']>>(initial as NonNullable<Spec['priority']>);
-  const [updating, setUpdating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const { t } = useTranslation('common');
-
-  const option = PRIORITY_OPTIONS.find((opt) => opt.value === priority) || PRIORITY_OPTIONS[1];
-
-  const handleChange = async (next: NonNullable<Spec['priority']>) => {
-    if (next === priority) return;
-    const previous = priority;
-    setPriority(next);
-    setUpdating(true);
-    setError(null);
-
-    try {
-      await api.updateSpec(specName, { priority: next });
-      onChange?.(next);
-    } catch (err) {
-      setPriority(previous);
-      const message = err instanceof Error ? err.message : t('editors.priorityError');
-      setError(message);
-    } finally {
-      setUpdating(false);
-    }
-  };
-
-  return (
-    <div className="space-y-1">
-      <Select
-        value={priority}
-        onValueChange={(value) => handleChange(value as NonNullable<Spec['priority']>)}
-        disabled={disabled || updating}
-      >
-        <SelectTrigger
-          className={cn(
-            'h-7 w-fit min-w-[100px] border-0 px-2 text-xs font-medium justify-start',
-            option.className,
-            className,
-            updating && 'opacity-70'
-          )}
-          aria-label={t('editors.changePriority')}
-        >
-          <div className="flex items-center gap-1.5">
-            {updating ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <option.Icon className="h-3.5 w-3.5" />}
-            <SelectValue placeholder={t('specsPage.filters.priority')}>
-              {t(option.labelKey)}
-            </SelectValue>
-          </div>
-        </SelectTrigger>
-        <SelectContent>
-          {PRIORITY_OPTIONS.map((opt) => (
-            <SelectItem key={opt.value} value={opt.value} className="flex items-center gap-2">
-              <div className="flex items-center gap-2">
-                <opt.Icon className="h-4 w-4" />
-                <span>{t(opt.labelKey)}</span>
-              </div>
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {error && <p className="text-xs text-destructive">{error}</p>}
-    </div>
-  );
-}