537 lines
17 KiB
TypeScript
537 lines
17 KiB
TypeScript
import React, { useRef, useState, useEffect, useCallback } from 'react';
|
|
import { useAppStore, Tab } from '../../store';
|
|
import './TabBar.css';
|
|
|
|
const MAX_CHAT_TITLE_LENGTH = 18;
|
|
|
|
function getGitDiffResource(tabId: string): string {
|
|
return tabId.startsWith('git-diff:') ? tabId.slice('git-diff:'.length) : tabId;
|
|
}
|
|
|
|
function getCommitHashFromGitDiffTabId(tabId: string): string | null {
|
|
const resource = getGitDiffResource(tabId);
|
|
if (!resource.startsWith('commit:')) {
|
|
return null;
|
|
}
|
|
return resource.slice('commit:'.length);
|
|
}
|
|
|
|
const getTabTitle = (
|
|
tab: Tab,
|
|
postTitles: Map<string, string>,
|
|
media: { id: string; originalName: string }[],
|
|
chatTitles: Map<string, string>,
|
|
importDefTitles: Map<string, string>,
|
|
commitTitles: Map<string, string>
|
|
): string => {
|
|
if (tab.type === 'git-diff') {
|
|
const filePath = getGitDiffResource(tab.id);
|
|
const commitHash = getCommitHashFromGitDiffTabId(tab.id);
|
|
if (commitHash) {
|
|
const commitTitle = commitTitles.get(commitHash);
|
|
if (commitTitle) {
|
|
return commitTitle;
|
|
}
|
|
return `Commit ${commitHash.slice(0, 7)}`;
|
|
}
|
|
const filename = filePath.split('/').pop();
|
|
return filename || filePath;
|
|
}
|
|
|
|
if (tab.type === 'settings') {
|
|
return 'Settings';
|
|
}
|
|
|
|
if (tab.type === 'tags') {
|
|
return 'Tags';
|
|
}
|
|
|
|
if (tab.type === 'post') {
|
|
return postTitles.get(tab.id) || 'Loading...';
|
|
}
|
|
|
|
if (tab.type === 'media') {
|
|
const mediaItem = media.find(m => m.id === tab.id);
|
|
return mediaItem?.originalName || 'Media';
|
|
}
|
|
|
|
if (tab.type === 'chat') {
|
|
const title = chatTitles.get(tab.id);
|
|
if (title && title !== 'New Chat') {
|
|
// Truncate long titles for display
|
|
return title.length > MAX_CHAT_TITLE_LENGTH
|
|
? title.substring(0, MAX_CHAT_TITLE_LENGTH) + '…'
|
|
: title;
|
|
}
|
|
return 'New Chat';
|
|
}
|
|
|
|
if (tab.type === 'import') {
|
|
return importDefTitles.get(tab.id) || 'Import';
|
|
}
|
|
|
|
if (tab.type === 'metadata-diff') {
|
|
return 'Metadata Diff';
|
|
}
|
|
|
|
return 'Unknown';
|
|
};
|
|
|
|
const getTabIcon = (tab: Tab): React.ReactNode => {
|
|
switch (tab.type) {
|
|
case 'git-diff':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M9 3H5a2 2 0 0 0-2 2v4h2V5h4V3zm10 6h2V5a2 2 0 0 0-2-2h-4v2h4v4zM5 15H3v4a2 2 0 0 0 2 2h4v-2H5v-4zm16 0h-2v4h-4v2h4a2 2 0 0 0 2-2v-4zM7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z"/>
|
|
</svg>
|
|
);
|
|
case 'post':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M13.85 4.44l-3.28-3.3-.35-.14H2.5l-.5.5v13l.5.5h11l.5-.5V4.8l-.15-.36zm-.85 10.06H3V2h6v3.5l.5.5H13v8.5z"/>
|
|
</svg>
|
|
);
|
|
case 'media':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M14.5 2h-13l-.5.5v11l.5.5h13l.5-.5v-11l-.5-.5zM14 13H2V3h12v10zm-3.5-4.5L9 7.5l-2 2.5-1.5-1L3 12h10l-2.5-3.5z"/>
|
|
</svg>
|
|
);
|
|
case 'settings':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M9.1 4.4L8.6 2H7.4l-.5 2.4-.7.3-2-1.3-.9.8 1.3 2-.2.7-2.4.5v1.2l2.4.5.3.8-1.3 2 .8.8 2-1.3.8.3.4 2.3h1.2l.5-2.4.8-.3 2 1.3.8-.8-1.3-2 .3-.8 2.3-.4V7.4l-2.4-.5-.3-.8 1.3-2-.8-.8-2 1.3-.7-.2zM9.4 1l.5 2.4L12 2.1l2 2-1.4 2.1 2.4.4v3l-2.4.5L14 12l-2 2-2.1-1.4-.5 2.4h-3L5.9 12.5 4 14l-2-2 1.4-2.1L1 9.4v-3l2.4-.5L2 4l2-2 2.1 1.4.4-2.4h3zm.6 7c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM8 9c.6 0 1-.4 1-1s-.4-1-1-1-1 .4-1 1 .4 1 1 1z"/>
|
|
</svg>
|
|
);
|
|
case 'tags':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M14.28 7.72l-6-6A1 1 0 007.57 1.5H2.5A1 1 0 001.5 2.5v5.07a1 1 0 00.22.56l6 6a1 1 0 001.41 0l5.15-5a1 1 0 000-1.41zM4 5a1 1 0 110-2 1 1 0 010 2z"/>
|
|
</svg>
|
|
);
|
|
case 'chat':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M14 1H2a1 1 0 00-1 1v10a1 1 0 001 1h3v2.5l4-2.5h5a1 1 0 001-1V2a1 1 0 00-1-1zm0 11H8.5L5 14v-2H2V2h12v10z"/>
|
|
</svg>
|
|
);
|
|
case 'import':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
|
|
</svg>
|
|
);
|
|
case 'metadata-diff':
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M2 3h5v1H2V3zm0 3h5v1H2V6zm0 3h5v1H2V9zm0 3h5v1H2v-1zm7-9h5v1H9V3zm0 3h5v1H9V6zm0 3h5v1H9V9zm0 3h5v1H9v-1z"/>
|
|
</svg>
|
|
);
|
|
default:
|
|
return (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path d="M13.85 4.44l-3.28-3.3-.35-.14H2.5l-.5.5v13l.5.5h11l.5-.5V4.8l-.15-.36zm-.85 10.06H3V2h6v3.5l.5.5H13v8.5z"/>
|
|
</svg>
|
|
);
|
|
}
|
|
};
|
|
|
|
const CloseIcon: React.FC = () => (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z"/>
|
|
</svg>
|
|
);
|
|
|
|
const ChevronLeftIcon: React.FC = () => (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M10.354 3.146l.707.708L6.768 8l4.293 4.146-.707.708L5.354 8l5-4.854z"/>
|
|
</svg>
|
|
);
|
|
|
|
const ChevronRightIcon: React.FC = () => (
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
|
<path fillRule="evenodd" clipRule="evenodd" d="M5.646 12.854l-.707-.708L9.232 8 4.939 3.854l.707-.708L10.646 8l-5 4.854z"/>
|
|
</svg>
|
|
);
|
|
|
|
export const TabBar: React.FC = () => {
|
|
const {
|
|
tabs,
|
|
activeTabId,
|
|
media,
|
|
activeProject,
|
|
dirtyPosts,
|
|
toggleSidebar,
|
|
setActiveTab,
|
|
closeTab,
|
|
pinTab,
|
|
} = useAppStore();
|
|
|
|
const tabsContainerRef = useRef<HTMLDivElement>(null);
|
|
const [showLeftArrow, setShowLeftArrow] = useState(false);
|
|
const [showRightArrow, setShowRightArrow] = useState(false);
|
|
const [postTitles, setPostTitles] = useState<Map<string, string>>(new Map());
|
|
const [chatTitles, setChatTitles] = useState<Map<string, string>>(new Map());
|
|
const [importDefTitles, setImportDefTitles] = useState<Map<string, string>>(new Map());
|
|
const [commitTitles, setCommitTitles] = useState<Map<string, string>>(new Map());
|
|
|
|
// Fetch post titles from database for post tabs
|
|
useEffect(() => {
|
|
const postTabs = tabs.filter(t => t.type === 'post');
|
|
if (postTabs.length === 0) return;
|
|
|
|
const fetchTitles = async () => {
|
|
const newTitles = new Map(postTitles);
|
|
let changed = false;
|
|
|
|
for (const tab of postTabs) {
|
|
if (!postTitles.has(tab.id)) {
|
|
try {
|
|
const post = await window.electronAPI?.posts.get(tab.id);
|
|
if (post) {
|
|
newTitles.set(tab.id, post.title || 'Untitled');
|
|
changed = true;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch post title:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (changed) {
|
|
setPostTitles(newTitles);
|
|
}
|
|
};
|
|
|
|
fetchTitles();
|
|
}, [tabs]); // Note: intentionally not including postTitles to avoid infinite loops
|
|
|
|
// Listen for post updates to refresh titles
|
|
useEffect(() => {
|
|
const unsub = window.electronAPI?.on('post-updated', (...args: unknown[]) => {
|
|
const post = args[0] as { id: string; title: string } | undefined;
|
|
if (post) {
|
|
setPostTitles(prev => {
|
|
const newTitles = new Map(prev);
|
|
newTitles.set(post.id, post.title || 'Untitled');
|
|
return newTitles;
|
|
});
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unsub?.();
|
|
};
|
|
}, []);
|
|
|
|
// Fetch chat titles for chat tabs
|
|
useEffect(() => {
|
|
const chatTabs = tabs.filter(t => t.type === 'chat');
|
|
if (chatTabs.length === 0) return;
|
|
|
|
// Fetch titles for chat tabs that don't have a title yet
|
|
const fetchTitles = async () => {
|
|
const newTitles = new Map(chatTitles);
|
|
|
|
for (const tab of chatTabs) {
|
|
if (!chatTitles.has(tab.id)) {
|
|
try {
|
|
const conversation = await window.electronAPI?.chat.getConversation(tab.id);
|
|
if (conversation) {
|
|
newTitles.set(tab.id, conversation.title);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch chat title:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (newTitles.size !== chatTitles.size) {
|
|
setChatTitles(newTitles);
|
|
}
|
|
};
|
|
|
|
fetchTitles();
|
|
}, [tabs]); // Note: intentionally not including chatTitles to avoid infinite loops
|
|
|
|
// Listen for chat title updates
|
|
useEffect(() => {
|
|
const unsub = window.electronAPI?.chat.onTitleUpdated((data) => {
|
|
setChatTitles(prev => {
|
|
const newTitles = new Map(prev);
|
|
newTitles.set(data.conversationId, data.title);
|
|
return newTitles;
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
unsub?.();
|
|
};
|
|
}, []);
|
|
|
|
// Fetch import definition titles for import tabs
|
|
useEffect(() => {
|
|
const importTabs = tabs.filter(t => t.type === 'import');
|
|
if (importTabs.length === 0) return;
|
|
|
|
const fetchTitles = async () => {
|
|
const newTitles = new Map(importDefTitles);
|
|
for (const tab of importTabs) {
|
|
if (!importDefTitles.has(tab.id)) {
|
|
try {
|
|
const def = await window.electronAPI?.importDefinitions.get(tab.id);
|
|
if (def) {
|
|
newTitles.set(tab.id, def.name);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch import definition title:', error);
|
|
}
|
|
}
|
|
}
|
|
if (newTitles.size !== importDefTitles.size) {
|
|
setImportDefTitles(newTitles);
|
|
}
|
|
};
|
|
|
|
fetchTitles();
|
|
}, [tabs]); // Note: intentionally not including importDefTitles to avoid infinite loops
|
|
|
|
// Listen for import definition name updates
|
|
useEffect(() => {
|
|
const unsub = window.electronAPI?.importDefinitions.onNameUpdated((data) => {
|
|
setImportDefTitles(prev => {
|
|
const newTitles = new Map(prev);
|
|
newTitles.set(data.definitionId, data.name);
|
|
return newTitles;
|
|
});
|
|
});
|
|
|
|
return () => {
|
|
unsub?.();
|
|
};
|
|
}, []);
|
|
|
|
// Fetch commit subjects for commit-based git-diff tabs
|
|
useEffect(() => {
|
|
const commitHashes = tabs
|
|
.filter((tab) => tab.type === 'git-diff')
|
|
.map((tab) => getCommitHashFromGitDiffTabId(tab.id))
|
|
.filter((hash): hash is string => Boolean(hash));
|
|
|
|
if (commitHashes.length === 0 || !activeProject) {
|
|
return;
|
|
}
|
|
|
|
const missingHashes = commitHashes.filter((hash) => !commitTitles.has(hash));
|
|
if (missingHashes.length === 0) {
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
|
|
const fetchCommitTitles = async () => {
|
|
try {
|
|
const projectPath = activeProject.dataPath
|
|
? activeProject.dataPath
|
|
: await window.electronAPI?.app.getDefaultProjectPath(activeProject.id);
|
|
|
|
if (!projectPath) {
|
|
return;
|
|
}
|
|
|
|
const history = await window.electronAPI?.git.getHistory(projectPath, 200);
|
|
if (!history || cancelled) {
|
|
return;
|
|
}
|
|
|
|
setCommitTitles((previous) => {
|
|
const updated = new Map(previous);
|
|
let changed = false;
|
|
|
|
for (const hash of missingHashes) {
|
|
const match = history.find((entry) => entry.hash === hash);
|
|
if (match) {
|
|
updated.set(hash, `${match.shortHash} ${match.subject}`);
|
|
changed = true;
|
|
}
|
|
}
|
|
|
|
return changed ? updated : previous;
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to fetch commit titles:', error);
|
|
}
|
|
};
|
|
|
|
void fetchCommitTitles();
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [tabs, activeProject]);
|
|
|
|
// Check if arrows are needed based on scroll position
|
|
const updateArrowVisibility = useCallback(() => {
|
|
const container = tabsContainerRef.current;
|
|
if (!container) return;
|
|
|
|
const { scrollLeft, scrollWidth, clientWidth } = container;
|
|
setShowLeftArrow(scrollLeft > 0);
|
|
setShowRightArrow(scrollLeft + clientWidth < scrollWidth - 1);
|
|
}, []);
|
|
|
|
// Update arrow visibility on scroll or resize
|
|
useEffect(() => {
|
|
const container = tabsContainerRef.current;
|
|
if (!container) return;
|
|
|
|
updateArrowVisibility();
|
|
|
|
container.addEventListener('scroll', updateArrowVisibility);
|
|
const resizeObserver = new ResizeObserver(updateArrowVisibility);
|
|
resizeObserver.observe(container);
|
|
|
|
return () => {
|
|
container.removeEventListener('scroll', updateArrowVisibility);
|
|
resizeObserver.disconnect();
|
|
};
|
|
}, [updateArrowVisibility, tabs]);
|
|
|
|
// Scroll to active tab when it changes
|
|
useEffect(() => {
|
|
if (!activeTabId || !tabsContainerRef.current) return;
|
|
|
|
const container = tabsContainerRef.current;
|
|
const activeTab = container.querySelector(`[data-tab-id="${activeTabId}"]`) as HTMLElement;
|
|
if (activeTab) {
|
|
const containerRect = container.getBoundingClientRect();
|
|
const tabRect = activeTab.getBoundingClientRect();
|
|
|
|
if (tabRect.left < containerRect.left) {
|
|
container.scrollLeft -= containerRect.left - tabRect.left + 10;
|
|
} else if (tabRect.right > containerRect.right) {
|
|
container.scrollLeft += tabRect.right - containerRect.right + 10;
|
|
}
|
|
}
|
|
}, [activeTabId]);
|
|
|
|
// Keyboard shortcut handler (Ctrl+W to close active tab, Ctrl+B to toggle sidebar)
|
|
useEffect(() => {
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'w') {
|
|
e.preventDefault();
|
|
if (activeTabId) {
|
|
closeTab(activeTabId);
|
|
}
|
|
}
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
|
|
e.preventDefault();
|
|
toggleSidebar();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
|
}, [activeTabId, closeTab, toggleSidebar]);
|
|
|
|
const handleTabClick = (tabId: string) => {
|
|
setActiveTab(tabId);
|
|
};
|
|
|
|
const handleTabDoubleClick = (tab: Tab) => {
|
|
// Double-click on transient tab pins it
|
|
if (tab.isTransient) {
|
|
pinTab(tab.id);
|
|
}
|
|
};
|
|
|
|
const handleTabClose = (e: React.MouseEvent, tabId: string) => {
|
|
e.stopPropagation();
|
|
closeTab(tabId);
|
|
};
|
|
|
|
const handleMiddleClick = (e: React.MouseEvent, tabId: string) => {
|
|
// Middle-click closes the tab
|
|
if (e.button === 1) {
|
|
e.preventDefault();
|
|
closeTab(tabId);
|
|
}
|
|
};
|
|
|
|
const scrollLeft = () => {
|
|
const container = tabsContainerRef.current;
|
|
if (container) {
|
|
container.scrollBy({ left: -150, behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
const scrollRight = () => {
|
|
const container = tabsContainerRef.current;
|
|
if (container) {
|
|
container.scrollBy({ left: 150, behavior: 'smooth' });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="tab-bar">
|
|
{showLeftArrow && (
|
|
<button
|
|
className="tab-scroll-button tab-scroll-left"
|
|
onClick={scrollLeft}
|
|
title="Scroll tabs left"
|
|
>
|
|
<ChevronLeftIcon />
|
|
</button>
|
|
)}
|
|
|
|
<div className="tab-bar-tabs" ref={tabsContainerRef}>
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.id === activeTabId;
|
|
const isDirty = tab.type === 'post' && dirtyPosts.has(tab.id);
|
|
const title = getTabTitle(tab, postTitles, media, chatTitles, importDefTitles, commitTitles);
|
|
const icon = getTabIcon(tab);
|
|
|
|
return (
|
|
<div
|
|
key={tab.id}
|
|
data-tab-id={tab.id}
|
|
className={`tab ${isActive ? 'active' : ''} ${tab.isTransient ? 'transient' : ''} ${isDirty ? 'dirty' : ''}`}
|
|
onClick={() => handleTabClick(tab.id)}
|
|
onDoubleClick={() => handleTabDoubleClick(tab)}
|
|
onMouseDown={(e) => handleMiddleClick(e, tab.id)}
|
|
title={`${title}${tab.isTransient ? ' (Preview)' : ''}${isDirty ? ' • Modified' : ''}`}
|
|
>
|
|
<span className="tab-icon">{icon}</span>
|
|
<span className={`tab-title ${tab.isTransient ? 'italic' : ''}`}>
|
|
{title}
|
|
</span>
|
|
<div className="tab-actions">
|
|
{isDirty && <span className="tab-dirty-indicator">●</span>}
|
|
<button
|
|
className="tab-close"
|
|
onClick={(e) => handleTabClose(e, tab.id)}
|
|
title="Close (Ctrl+W)"
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{showRightArrow && (
|
|
<button
|
|
className="tab-scroll-button tab-scroll-right"
|
|
onClick={scrollRight}
|
|
title="Scroll tabs right"
|
|
>
|
|
<ChevronRightIcon />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TabBar;
|