sync: contextual substrate UX from private repo
- Add DimensionIconsContext for app-wide dimension icon sharing - Enhanced getNodeIcon() with favicon/YouTube/PDF detection + dimension icons - Propagate dynamic icons to GridView, ListView, SearchModal, FocusPanel, ViewsOverlay, FolderViewOverlay - Add RahEdge component with hover labels for map edges - Update RahNode with dimension-colored borders and icon support - Add MiniMap with dimension color coding to MapPane - MCP server: add description field to rah_update_node, bump standalone to v1.4.2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
“BeeRad”
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
d6987a3dc1
commit
d723212ed3
@@ -9,6 +9,7 @@ import { parseNodeMarkers } from '@/tools/infrastructure/nodeFormatter';
|
||||
import { Node, NodeConnection, Chunk } from '@/types/database';
|
||||
import DimensionTags from './dimensions/DimensionTags';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
import ConfirmDialog from '../common/ConfirmDialog';
|
||||
import { SourceReader } from './source';
|
||||
|
||||
@@ -44,6 +45,7 @@ interface FocusPanelProps {
|
||||
}
|
||||
|
||||
export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeClick, onTabClose, refreshTrigger, onOpenInOtherSlot, hideTabBar, onTextSelect, highlightedPassage }: FocusPanelProps) {
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
const [nodesData, setNodesData] = useState<Record<number, Node>>({});
|
||||
|
||||
// Context menu state
|
||||
@@ -1408,6 +1410,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
|
||||
}}>
|
||||
{connection.connected_node.id}
|
||||
</span>
|
||||
<span style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
|
||||
{getNodeIcon(connection.connected_node, dimensionIcons, 12)}
|
||||
</span>
|
||||
<span style={{ color: '#f8fafc', fontSize: '13px', fontWeight: 500 }}>{connection.connected_node.title}</span>
|
||||
</div>
|
||||
{edgeEditingId === connection.edge.id ? (
|
||||
@@ -1880,6 +1885,13 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
|
||||
{activeTab}
|
||||
</span>
|
||||
|
||||
{/* Node type icon */}
|
||||
{nodesData[activeTab] && (
|
||||
<span style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
|
||||
{getNodeIcon(nodesData[activeTab], dimensionIcons, 18)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{editingField === 'title' ? (
|
||||
<input
|
||||
ref={inputRef as React.RefObject<HTMLInputElement>}
|
||||
@@ -3209,6 +3221,9 @@ export default function FocusPanel({ openTabs, activeTab, onTabSelect, onNodeCli
|
||||
}}>
|
||||
{connection.connected_node.id}
|
||||
</span>
|
||||
<span style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
|
||||
{getNodeIcon(connection.connected_node, dimensionIcons, 12)}
|
||||
</span>
|
||||
<span
|
||||
onClick={() => onNodeClick?.(connection.connected_node.id)}
|
||||
style={{
|
||||
|
||||
@@ -7,6 +7,7 @@ import ConfirmDialog from '../common/ConfirmDialog';
|
||||
import InputDialog from '../common/InputDialog';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
import LucideIconPicker, { DynamicIcon } from '../common/LucideIconPicker';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
import { usePersistentState } from '@/hooks/usePersistentState';
|
||||
|
||||
type DimensionViewMode = 'grid' | 'list' | 'kanban';
|
||||
@@ -121,8 +122,8 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
// Node priority ordering within dimensions (persisted)
|
||||
const [dimensionOrders, setDimensionOrders] = usePersistentState<Record<string, number[]>>('ui.dimensionOrders', {});
|
||||
|
||||
// Dimension icons (persisted) - maps dimension name to Lucide icon name
|
||||
const [dimensionIcons, setDimensionIcons] = usePersistentState<Record<string, string>>('ui.dimensionIcons', {});
|
||||
// Dimension icons from shared context
|
||||
const { dimensionIcons, setDimensionIcons } = useDimensionIcons();
|
||||
|
||||
// Dimension edit modal state
|
||||
const [editingDimensionModal, setEditingDimensionModal] = useState<DimensionSummary | null>(null);
|
||||
@@ -1235,7 +1236,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
</div>
|
||||
{node.link && (
|
||||
<span style={{ flexShrink: 0 }}>
|
||||
{getNodeIcon(node)}
|
||||
{getNodeIcon(node, dimensionIcons)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
@@ -1359,7 +1360,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
borderRadius: '8px',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{getNodeIcon(node)}
|
||||
{getNodeIcon(node, dimensionIcons)}
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
@@ -1829,7 +1830,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
borderRadius: '8px',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{getNodeIcon(node)}
|
||||
{getNodeIcon(node, dimensionIcons)}
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
@@ -2560,7 +2561,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
justifyContent: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{getNodeIcon(node)}
|
||||
{getNodeIcon(node, dimensionIcons)}
|
||||
</div>
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<div style={{
|
||||
@@ -2848,7 +2849,7 @@ export default function FolderViewOverlay({ onClose, onNodeOpen, refreshToken, o
|
||||
}}>
|
||||
#{node.id}
|
||||
</span>
|
||||
<span style={{ flexShrink: 0, marginTop: '1px' }}>{getNodeIcon(node)}</span>
|
||||
<span style={{ flexShrink: 0, marginTop: '1px' }}>{getNodeIcon(node, dimensionIcons)}</span>
|
||||
<div style={{
|
||||
fontSize: '12px',
|
||||
fontWeight: 500,
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import Chip from '../common/Chip';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
|
||||
interface SearchModalProps {
|
||||
isOpen: boolean;
|
||||
@@ -15,9 +17,11 @@ interface NodeSuggestion {
|
||||
id: number;
|
||||
title: string;
|
||||
dimensions?: string[];
|
||||
link?: string;
|
||||
}
|
||||
|
||||
export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFilters }: SearchModalProps) {
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [suggestions, setSuggestions] = useState<NodeSuggestion[]>([]);
|
||||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||||
@@ -107,7 +111,8 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
|
||||
const nodeSuggestions: NodeSuggestion[] = result.data.map((node: any) => ({
|
||||
id: node.id,
|
||||
title: node.title,
|
||||
dimensions: node.dimensions || []
|
||||
dimensions: node.dimensions || [],
|
||||
link: node.link || undefined,
|
||||
}));
|
||||
|
||||
setSuggestions(nodeSuggestions);
|
||||
@@ -202,7 +207,8 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
|
||||
onMouseEnter={() => setSelectedIndex(index)}
|
||||
className={`search-result-item ${index === selectedIndex ? 'selected' : ''}`}
|
||||
>
|
||||
<span className="result-id">#{suggestion.id}</span>
|
||||
<span className="result-id">{suggestion.id}</span>
|
||||
<span className="result-icon">{getNodeIcon(suggestion as any, dimensionIcons, 14)}</span>
|
||||
<span className="result-title">{suggestion.title}</span>
|
||||
{index === selectedIndex && (
|
||||
<span className="result-hint">↵</span>
|
||||
@@ -345,6 +351,12 @@ export default function SearchModal({ isOpen, onClose, onNodeSelect, existingFil
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
flex: 1;
|
||||
color: #e5e5e5;
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState, useCallback, type CSSProperties }
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
MiniMap,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
addEdge as rfAddEdge,
|
||||
@@ -22,8 +23,10 @@ import type { MapPaneProps } from './types';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
|
||||
import { RahNode } from './map/RahNode';
|
||||
import { RahEdge } from './map/RahEdge';
|
||||
import EdgeExplanationModal from './map/EdgeExplanationModal';
|
||||
import { toRFNodes, toRFEdges, NODE_LIMIT, type RahNodeData } from './map/utils';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
import './map/map-styles.css';
|
||||
|
||||
interface DimensionInfo {
|
||||
@@ -34,6 +37,7 @@ interface DimensionInfo {
|
||||
}
|
||||
|
||||
const nodeTypes = { rahNode: RahNode };
|
||||
const edgeTypes = { rahEdge: RahEdge };
|
||||
|
||||
// Debounce helper
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
@@ -57,6 +61,7 @@ function MapPaneInner({
|
||||
activeTabId,
|
||||
}: MapPaneProps) {
|
||||
const reactFlowInstance = useReactFlow();
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
|
||||
// --- Data state (DB-level) ---
|
||||
const [baseNodes, setBaseNodes] = useState<DbNode[]>([]);
|
||||
@@ -190,6 +195,7 @@ function MapPaneInner({
|
||||
selectedNodeId,
|
||||
connectedNodeIds,
|
||||
rfPositionsRef.current,
|
||||
dimensionIcons,
|
||||
);
|
||||
|
||||
const nodeIdSet = new Set(newRfNodes.map(n => n.id));
|
||||
@@ -590,15 +596,26 @@ function MapPaneInner({
|
||||
onNodeDragStop={onNodeDragStop}
|
||||
onConnect={onConnect}
|
||||
nodeTypes={nodeTypes}
|
||||
edgeTypes={edgeTypes}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
minZoom={0.1}
|
||||
maxZoom={3}
|
||||
defaultEdgeOptions={{ type: 'default' }}
|
||||
defaultEdgeOptions={{ type: 'rahEdge' }}
|
||||
proOptions={{ hideAttribution: true }}
|
||||
colorMode="dark"
|
||||
>
|
||||
<Background color="#1a1a1a" gap={40} size={1} />
|
||||
<MiniMap
|
||||
style={{ background: '#0a0a0a', border: '1px solid #1f1f1f', borderRadius: 6 }}
|
||||
maskColor="rgba(0,0,0,0.6)"
|
||||
nodeColor={(n) => {
|
||||
const data = n.data as RahNodeData | undefined;
|
||||
return data?.primaryDimensionColor || '#374151';
|
||||
}}
|
||||
pannable
|
||||
zoomable
|
||||
/>
|
||||
</ReactFlow>
|
||||
|
||||
{/* Selected node info panel */}
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { memo, useState } from 'react';
|
||||
import {
|
||||
BaseEdge,
|
||||
getStraightPath,
|
||||
type EdgeProps,
|
||||
} from '@xyflow/react';
|
||||
|
||||
interface RahEdgeData {
|
||||
explanation?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
function RahEdgeComponent({
|
||||
id,
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
style,
|
||||
data,
|
||||
...rest
|
||||
}: EdgeProps) {
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const explanation = (data as RahEdgeData | undefined)?.explanation;
|
||||
|
||||
const [edgePath, labelX, labelY] = getStraightPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
targetX,
|
||||
targetY,
|
||||
});
|
||||
|
||||
return (
|
||||
<g
|
||||
onMouseEnter={() => setHovered(true)}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
>
|
||||
{/* Invisible wider path for easier hover targeting */}
|
||||
<path
|
||||
d={edgePath}
|
||||
fill="none"
|
||||
stroke="transparent"
|
||||
strokeWidth={12}
|
||||
style={{ cursor: 'default' }}
|
||||
/>
|
||||
<BaseEdge id={id} path={edgePath} style={style} />
|
||||
{hovered && explanation && (
|
||||
<foreignObject
|
||||
x={labelX - 80}
|
||||
y={labelY - 14}
|
||||
width={160}
|
||||
height={28}
|
||||
style={{ overflow: 'visible', pointerEvents: 'none' }}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: '#1a1a1a',
|
||||
border: '1px solid #333',
|
||||
borderRadius: 4,
|
||||
padding: '2px 8px',
|
||||
fontSize: 10,
|
||||
color: '#ccc',
|
||||
textAlign: 'center',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: 160,
|
||||
}}
|
||||
>
|
||||
{explanation}
|
||||
</div>
|
||||
</foreignObject>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export const RahEdge = memo(RahEdgeComponent);
|
||||
@@ -4,11 +4,12 @@ import { memo } from 'react';
|
||||
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react';
|
||||
import type { RahNodeData } from './utils';
|
||||
import { LABEL_THRESHOLD } from './utils';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
|
||||
type RahNodeType = Node<RahNodeData, 'rahNode'>;
|
||||
|
||||
function RahNodeComponent({ data, selected }: NodeProps<RahNodeType>) {
|
||||
const { label, dimensions, edgeCount, isExpanded } = data;
|
||||
const { label, dimensions, edgeCount, isExpanded, dbNode, dimensionIcons, primaryDimensionColor } = data;
|
||||
const isTop = !isExpanded && edgeCount > 3;
|
||||
|
||||
return (
|
||||
@@ -19,6 +20,7 @@ function RahNodeComponent({ data, selected }: NodeProps<RahNodeType>) {
|
||||
isTop && 'rah-map-node--top',
|
||||
selected && 'rah-map-node--selected',
|
||||
].filter(Boolean).join(' ')}
|
||||
style={primaryDimensionColor ? { borderLeftColor: primaryDimensionColor, borderLeftWidth: 3 } : undefined}
|
||||
>
|
||||
<Handle
|
||||
type="target"
|
||||
@@ -26,7 +28,10 @@ function RahNodeComponent({ data, selected }: NodeProps<RahNodeType>) {
|
||||
className="rah-map-handle"
|
||||
/>
|
||||
<div className="rah-map-node__title">
|
||||
{label.length > 28 ? label.slice(0, 26) + '\u2026' : label}
|
||||
<span className="rah-map-node__icon">
|
||||
{getNodeIcon(dbNode, dimensionIcons, 14)}
|
||||
</span>
|
||||
{label.length > 26 ? label.slice(0, 24) + '\u2026' : label}
|
||||
</div>
|
||||
{(isTop || isExpanded) && dimensions.length > 0 && (
|
||||
<div className="rah-map-node__dims">
|
||||
|
||||
@@ -89,6 +89,15 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.rah-map-node__icon {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rah-map-node__dims {
|
||||
@@ -130,3 +139,10 @@
|
||||
.rah-map-wrapper .react-flow__node.dimmed:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* MiniMap dark theme */
|
||||
.rah-map-wrapper .react-flow__minimap {
|
||||
background: #0a0a0a;
|
||||
border: 1px solid #1f1f1f;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
@@ -1,12 +1,42 @@
|
||||
import type { Node as DbNode, Edge as DbEdge } from '@/types/database';
|
||||
import type { Node as RFNode, Edge as RFEdge } from '@xyflow/react';
|
||||
|
||||
// Fixed palette for dimension border colors (muted, dark-theme-friendly)
|
||||
const DIMENSION_COLORS = [
|
||||
'#22c55e', // green
|
||||
'#3b82f6', // blue
|
||||
'#f59e0b', // amber
|
||||
'#ef4444', // red
|
||||
'#8b5cf6', // violet
|
||||
'#ec4899', // pink
|
||||
'#06b6d4', // cyan
|
||||
'#f97316', // orange
|
||||
'#14b8a6', // teal
|
||||
'#a855f7', // purple
|
||||
];
|
||||
|
||||
function hashDimensionColor(dimension: string): string {
|
||||
let hash = 0;
|
||||
for (let i = 0; i < dimension.length; i++) {
|
||||
hash = ((hash << 5) - hash + dimension.charCodeAt(i)) | 0;
|
||||
}
|
||||
return DIMENSION_COLORS[Math.abs(hash) % DIMENSION_COLORS.length];
|
||||
}
|
||||
|
||||
export function getDimensionColor(dimensions: string[] | undefined): string | undefined {
|
||||
if (!dimensions || dimensions.length === 0) return undefined;
|
||||
// Use first dimension for border color
|
||||
return hashDimensionColor(dimensions[0]);
|
||||
}
|
||||
|
||||
export interface RahNodeData {
|
||||
label: string;
|
||||
dimensions: string[];
|
||||
edgeCount: number;
|
||||
isExpanded: boolean;
|
||||
dbNode: DbNode;
|
||||
dimensionIcons?: Record<string, string>;
|
||||
primaryDimensionColor?: string;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
@@ -83,6 +113,7 @@ export function toRFNodes(
|
||||
selectedNodeId: number | null,
|
||||
connectedNodeIds: Set<number>,
|
||||
existingPositions: Map<string, { x: number; y: number }>,
|
||||
dimensionIcons?: Record<string, string>,
|
||||
): RFNode<RahNodeData>[] {
|
||||
const sortedBase = [...baseNodes].sort((a, b) => (b.edge_count ?? 0) - (a.edge_count ?? 0));
|
||||
const maxEdges = Math.max(...sortedBase.map(n => n.edge_count ?? 0), 1);
|
||||
@@ -109,6 +140,8 @@ export function toRFNodes(
|
||||
edgeCount: node.edge_count ?? 0,
|
||||
isExpanded: false,
|
||||
dbNode: node,
|
||||
dimensionIcons,
|
||||
primaryDimensionColor: getDimensionColor(node.dimensions),
|
||||
},
|
||||
};
|
||||
});
|
||||
@@ -154,6 +187,8 @@ export function toRFNodes(
|
||||
edgeCount: node.edge_count ?? 0,
|
||||
isExpanded: true,
|
||||
dbNode: node,
|
||||
dimensionIcons,
|
||||
primaryDimensionColor: getDimensionColor(node.dimensions),
|
||||
},
|
||||
});
|
||||
});
|
||||
@@ -181,11 +216,15 @@ export function toRFEdges(
|
||||
);
|
||||
const isDimmed = hasSelection && !isConnected;
|
||||
|
||||
const explanation = typeof e.context?.explanation === 'string' ? e.context.explanation : '';
|
||||
|
||||
return {
|
||||
id: String(e.id),
|
||||
source: String(e.from_node_id),
|
||||
target: String(e.to_node_id),
|
||||
type: 'rahEdge',
|
||||
animated: isConnected,
|
||||
data: { explanation },
|
||||
style: isConnected
|
||||
? { stroke: '#22c55e', strokeWidth: 2.5, opacity: 1 }
|
||||
: isDimmed
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { Node } from '@/types/database';
|
||||
import { File } from 'lucide-react';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
|
||||
interface GridViewProps {
|
||||
nodes: Node[];
|
||||
@@ -9,6 +10,7 @@ interface GridViewProps {
|
||||
}
|
||||
|
||||
export default function GridView({ nodes, onNodeClick }: GridViewProps) {
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
const truncateContent = (content?: string, maxLength: number = 120) => {
|
||||
if (!content) return '';
|
||||
if (content.length <= maxLength) return content;
|
||||
@@ -85,7 +87,7 @@ export default function GridView({ nodes, onNodeClick }: GridViewProps) {
|
||||
borderRadius: '6px',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<File size={14} color="#666" />
|
||||
{getNodeIcon(node, dimensionIcons, 14)}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '13px',
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { Node } from '@/types/database';
|
||||
import { File } from 'lucide-react';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
|
||||
interface ListViewProps {
|
||||
nodes: Node[];
|
||||
@@ -9,6 +10,7 @@ interface ListViewProps {
|
||||
}
|
||||
|
||||
export default function ListView({ nodes, onNodeClick }: ListViewProps) {
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
const formatDate = (dateString?: string) => {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
@@ -84,7 +86,7 @@ export default function ListView({ nodes, onNodeClick }: ListViewProps) {
|
||||
borderRadius: '6px',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<File size={16} color="#666" />
|
||||
{getNodeIcon(node, dimensionIcons, 16)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Plus, Trash2, LayoutGrid, List, Columns3, Save, Filter, ChevronDown, X
|
||||
import type { Node } from '@/types/database';
|
||||
import InputDialog from '../common/InputDialog';
|
||||
import { getNodeIcon } from '@/utils/nodeIcons';
|
||||
import { useDimensionIcons } from '@/context/DimensionIconsContext';
|
||||
|
||||
type ViewMode = 'grid' | 'list' | 'kanban';
|
||||
|
||||
@@ -39,6 +40,7 @@ interface ViewsOverlayProps {
|
||||
}
|
||||
|
||||
export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refreshToken = 0 }: ViewsOverlayProps) {
|
||||
const { dimensionIcons } = useDimensionIcons();
|
||||
// Dimensions for filter picker
|
||||
const [dimensions, setDimensions] = useState<DimensionSummary[]>([]);
|
||||
const [dimensionsLoading, setDimensionsLoading] = useState(true);
|
||||
@@ -401,7 +403,7 @@ export default function ViewsOverlay({ onNodeClick, onNodeOpenInOtherPane, refre
|
||||
|
||||
// Render node card
|
||||
const renderNodeCard = (node: Node, columnId?: string, dimension?: string) => {
|
||||
const nodeIcon = getNodeIcon(node);
|
||||
const nodeIcon = getNodeIcon(node, dimensionIcons);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { createContext, useContext, type ReactNode } from 'react';
|
||||
import { usePersistentState } from '@/hooks/usePersistentState';
|
||||
|
||||
interface DimensionIconsContextValue {
|
||||
dimensionIcons: Record<string, string>;
|
||||
setDimensionIcons: React.Dispatch<React.SetStateAction<Record<string, string>>>;
|
||||
}
|
||||
|
||||
const DimensionIconsContext = createContext<DimensionIconsContextValue>({
|
||||
dimensionIcons: {},
|
||||
setDimensionIcons: () => {},
|
||||
});
|
||||
|
||||
export function DimensionIconsProvider({ children }: { children: ReactNode }) {
|
||||
const [dimensionIcons, setDimensionIcons] = usePersistentState<Record<string, string>>('ui.dimensionIcons', {});
|
||||
|
||||
return (
|
||||
<DimensionIconsContext.Provider value={{ dimensionIcons, setDimensionIcons }}>
|
||||
{children}
|
||||
</DimensionIconsContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useDimensionIcons() {
|
||||
return useContext(DimensionIconsContext);
|
||||
}
|
||||
+77
-31
@@ -1,26 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Video, FileText, File, Globe } from 'lucide-react';
|
||||
import { Video, FileText, File, Globe, Folder } from 'lucide-react';
|
||||
import { Node } from '@/types/database';
|
||||
import { getIconByName } from '@/components/common/LucideIconPicker';
|
||||
|
||||
interface FaviconIconProps {
|
||||
domain: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
const FaviconIcon = ({ domain }: FaviconIconProps) => {
|
||||
const FaviconIcon = ({ domain, size = 16 }: FaviconIconProps) => {
|
||||
const [failed, setFailed] = useState(false);
|
||||
|
||||
|
||||
if (failed) {
|
||||
return <Globe size={16} color="#94a3b8" />;
|
||||
return <Globe size={size} color="#94a3b8" />;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
src={`https://www.google.com/s2/favicons?domain=${domain}&sz=16`}
|
||||
width={16}
|
||||
height={16}
|
||||
src={`https://www.google.com/s2/favicons?domain=${domain}&sz=${size}`}
|
||||
width={size}
|
||||
height={size}
|
||||
alt=""
|
||||
referrerPolicy="no-referrer"
|
||||
onError={() => setFailed(true)}
|
||||
@@ -28,29 +30,73 @@ const FaviconIcon = ({ domain }: FaviconIconProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export function getNodeIcon(node: Node): React.ReactElement {
|
||||
// No link - show generic file icon
|
||||
if (!node.link) {
|
||||
return <File size={16} color="#94a3b8" />;
|
||||
/**
|
||||
* Resolve the icon for a node.
|
||||
*
|
||||
* Priority:
|
||||
* 1. URL-derived icon (favicon, YouTube, PDF) — if node has a link
|
||||
* 2. Dimension-derived icon — from the node's most popular dimension that has an icon set
|
||||
* 3. Fallback to generic File icon
|
||||
*
|
||||
* @param node - The database node
|
||||
* @param dimensionIcons - Map of dimension name → Lucide icon name (from DimensionIconsContext)
|
||||
* @param size - Icon size in px (default 16)
|
||||
*/
|
||||
export function getNodeIcon(
|
||||
node: Node,
|
||||
dimensionIcons?: Record<string, string>,
|
||||
size: number = 16,
|
||||
): React.ReactElement {
|
||||
// If node has a link, use URL-derived icon (primary)
|
||||
if (node.link) {
|
||||
const url = node.link.toLowerCase();
|
||||
|
||||
// YouTube videos
|
||||
if (url.includes('youtube.com') || url.includes('youtu.be')) {
|
||||
return <Video size={size} color="#FF0000" />;
|
||||
}
|
||||
|
||||
// PDFs and papers
|
||||
if (url.endsWith('.pdf') || node.metadata?.type === 'paper') {
|
||||
return <FileText size={size} color="#94a3b8" />;
|
||||
}
|
||||
|
||||
// Website favicon with graceful fallback
|
||||
try {
|
||||
const domain = new URL(node.link).hostname;
|
||||
return <FaviconIcon domain={domain} size={size} />;
|
||||
} catch {
|
||||
return <Globe size={size} color="#94a3b8" />;
|
||||
}
|
||||
}
|
||||
|
||||
const url = node.link.toLowerCase();
|
||||
|
||||
// YouTube videos
|
||||
if (url.includes('youtube.com') || url.includes('youtu.be')) {
|
||||
return <Video size={16} color="#FF0000" />;
|
||||
}
|
||||
|
||||
// PDFs and papers
|
||||
if (url.endsWith('.pdf') || node.metadata?.type === 'paper') {
|
||||
return <FileText size={16} color="#94a3b8" />;
|
||||
}
|
||||
|
||||
// Website favicon with graceful fallback
|
||||
try {
|
||||
const domain = new URL(node.link).hostname;
|
||||
return <FaviconIcon domain={domain} />;
|
||||
} catch {
|
||||
return <Globe size={16} color="#94a3b8" />;
|
||||
|
||||
// No link — try dimension-derived icon
|
||||
if (dimensionIcons && node.dimensions?.length) {
|
||||
// Find the first dimension that has an icon set
|
||||
// (dimensions are already ordered, so first match wins)
|
||||
for (const dim of node.dimensions) {
|
||||
const iconName = dimensionIcons[dim];
|
||||
if (iconName && iconName !== 'Folder') {
|
||||
const IconComponent = getIconByName(iconName);
|
||||
return <IconComponent size={size} color="#94a3b8" />;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback
|
||||
return <File size={size} color="#94a3b8" />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the dimension icon for a given dimension name.
|
||||
* Returns Folder if no icon is set.
|
||||
*/
|
||||
export function getDimensionIcon(
|
||||
dimensionName: string,
|
||||
dimensionIcons: Record<string, string>,
|
||||
size: number = 16,
|
||||
): React.ReactElement {
|
||||
const iconName = dimensionIcons[dimensionName] || 'Folder';
|
||||
const IconComponent = getIconByName(iconName);
|
||||
return <IconComponent size={size} color="#94a3b8" />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user