generated from nhcarrigan/template
280 lines
8.8 KiB
Svelte
280 lines
8.8 KiB
Svelte
<script lang="ts">
|
|
import { claudeStore } from "$lib/stores/claude";
|
|
import { onMount } from "svelte";
|
|
import type { Conversation } from "$lib/stores/conversations";
|
|
import { SvelteMap } from "svelte/reactivity";
|
|
|
|
let conversations: Map<string, Conversation> = new Map();
|
|
let activeConversationId: string | null = null;
|
|
let editingTabId: string | null = null;
|
|
let editingName = "";
|
|
|
|
// Track which conversation actually has the Claude connection
|
|
let connectedConversationId: string | null = null;
|
|
|
|
// Track last seen message count for each conversation
|
|
let lastSeenMessageCount = new SvelteMap<string, number>();
|
|
|
|
claudeStore.conversations.subscribe((convs) => {
|
|
conversations = convs;
|
|
|
|
// Update the last seen count for the active conversation
|
|
if (activeConversationId) {
|
|
const activeConv = convs.get(activeConversationId);
|
|
if (activeConv) {
|
|
lastSeenMessageCount.set(activeConversationId, activeConv.terminalLines.length);
|
|
}
|
|
}
|
|
});
|
|
|
|
claudeStore.activeConversationId.subscribe((id) => {
|
|
activeConversationId = id;
|
|
});
|
|
|
|
// Find the connected conversation
|
|
$: {
|
|
let foundConnected = false;
|
|
for (const [id, conv] of conversations) {
|
|
if (conv.connectionStatus === "connected" || conv.connectionStatus === "connecting") {
|
|
connectedConversationId = id;
|
|
foundConnected = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!foundConnected) {
|
|
connectedConversationId = null;
|
|
}
|
|
}
|
|
|
|
function createNewTab() {
|
|
claudeStore.createConversation();
|
|
}
|
|
|
|
async function switchTab(id: string) {
|
|
if (editingTabId) {
|
|
saveTabName();
|
|
}
|
|
await claudeStore.switchConversation(id);
|
|
|
|
// Mark messages as seen when switching to this tab
|
|
const conv = conversations.get(id);
|
|
if (conv) {
|
|
lastSeenMessageCount.set(id, conv.terminalLines.length);
|
|
// Trigger reactivity
|
|
lastSeenMessageCount = lastSeenMessageCount;
|
|
}
|
|
}
|
|
|
|
function deleteTab(id: string, event: MouseEvent) {
|
|
event.stopPropagation();
|
|
if (conversations.size > 1) {
|
|
claudeStore.deleteConversation(id);
|
|
}
|
|
}
|
|
|
|
function startEditing(id: string, name: string, event: MouseEvent) {
|
|
event.stopPropagation();
|
|
editingTabId = id;
|
|
editingName = name;
|
|
// Focus input after DOM update
|
|
setTimeout(() => {
|
|
const input = document.querySelector('.tab-item input[type="text"]') as HTMLInputElement;
|
|
if (input) input.focus();
|
|
}, 0);
|
|
}
|
|
|
|
function saveTabName() {
|
|
if (editingTabId && editingName.trim()) {
|
|
claudeStore.renameConversation(editingTabId, editingName.trim());
|
|
}
|
|
editingTabId = null;
|
|
editingName = "";
|
|
}
|
|
|
|
function getConnectionStatusColor(status: Conversation["connectionStatus"]): string {
|
|
switch (status) {
|
|
case "connected":
|
|
return "bg-green-500";
|
|
case "connecting":
|
|
return "bg-yellow-500";
|
|
case "disconnected":
|
|
return "bg-red-500";
|
|
default:
|
|
return "bg-gray-500";
|
|
}
|
|
}
|
|
|
|
function hasUnreadMessages(id: string, conversation: Conversation): boolean {
|
|
if (id === activeConversationId) return false; // Active tab never has unread
|
|
const lastSeen = lastSeenMessageCount.get(id) || 0;
|
|
return conversation.terminalLines.length > lastSeen;
|
|
}
|
|
|
|
function handleKeydown(event: KeyboardEvent) {
|
|
if (event.key === "Enter") {
|
|
saveTabName();
|
|
} else if (event.key === "Escape") {
|
|
editingTabId = null;
|
|
editingName = "";
|
|
}
|
|
}
|
|
|
|
function handleTabKeydown(id: string, event: KeyboardEvent) {
|
|
if (event.key === "Enter" || event.key === " ") {
|
|
event.preventDefault();
|
|
switchTab(id);
|
|
}
|
|
}
|
|
|
|
// Keyboard shortcuts
|
|
onMount(() => {
|
|
function handleGlobalKeydown(event: KeyboardEvent) {
|
|
// Ctrl/Cmd + T: New tab
|
|
if ((event.ctrlKey || event.metaKey) && event.key === "t") {
|
|
event.preventDefault();
|
|
createNewTab();
|
|
}
|
|
// Ctrl/Cmd + W: Close current tab
|
|
else if ((event.ctrlKey || event.metaKey) && event.key === "w") {
|
|
event.preventDefault();
|
|
if (activeConversationId && conversations.size > 1) {
|
|
claudeStore.deleteConversation(activeConversationId);
|
|
}
|
|
}
|
|
// Ctrl/Cmd + Tab: Next tab
|
|
else if ((event.ctrlKey || event.metaKey) && event.key === "Tab" && !event.shiftKey) {
|
|
event.preventDefault();
|
|
const tabs = Array.from(conversations.keys());
|
|
const currentIndex = tabs.findIndex((id) => id === activeConversationId);
|
|
if (currentIndex !== -1) {
|
|
const nextIndex = (currentIndex + 1) % tabs.length;
|
|
claudeStore.switchConversation(tabs[nextIndex]);
|
|
}
|
|
}
|
|
// Ctrl/Cmd + Shift + Tab: Previous tab
|
|
else if ((event.ctrlKey || event.metaKey) && event.key === "Tab" && event.shiftKey) {
|
|
event.preventDefault();
|
|
const tabs = Array.from(conversations.keys());
|
|
const currentIndex = tabs.findIndex((id) => id === activeConversationId);
|
|
if (currentIndex !== -1) {
|
|
const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
|
claudeStore.switchConversation(tabs[prevIndex]);
|
|
}
|
|
}
|
|
}
|
|
|
|
window.addEventListener("keydown", handleGlobalKeydown);
|
|
return () => window.removeEventListener("keydown", handleGlobalKeydown);
|
|
});
|
|
</script>
|
|
|
|
<div
|
|
class="terminal-tabs flex items-center gap-1 px-2 py-1 bg-[var(--bg-secondary)] border-b border-[var(--border-color)]"
|
|
>
|
|
{#each Array.from(conversations.entries()) as [id, conversation] (id)}
|
|
<div
|
|
class="tab-item group relative flex items-center px-3 py-1.5 rounded-t cursor-pointer transition-all
|
|
{id === activeConversationId
|
|
? 'bg-[var(--bg-terminal)] text-[var(--text-primary)] border-t border-l border-r border-[var(--border-color)]'
|
|
: 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] hover:bg-[var(--bg-terminal)]/50'}"
|
|
onclick={() => switchTab(id)}
|
|
onkeydown={(e) => handleTabKeydown(id, e)}
|
|
role="tab"
|
|
tabindex={0}
|
|
aria-selected={id === activeConversationId}
|
|
>
|
|
{#if editingTabId === id}
|
|
<input
|
|
type="text"
|
|
bind:value={editingName}
|
|
onblur={saveTabName}
|
|
onkeydown={handleKeydown}
|
|
onclick={(e) => e.stopPropagation()}
|
|
class="bg-transparent border-b border-[var(--border-color)] outline-none px-0 py-0 text-sm w-32"
|
|
/>
|
|
{:else}
|
|
<div class="flex items-center gap-2">
|
|
<div
|
|
class="w-2 h-2 rounded-full {getConnectionStatusColor(conversation.connectionStatus)}"
|
|
title="Connection: {conversation.connectionStatus}{id !== connectedConversationId &&
|
|
connectedConversationId
|
|
? ' (Another tab is connected)'
|
|
: ''}"
|
|
></div>
|
|
<span
|
|
class="text-sm pr-6 max-w-[150px] truncate"
|
|
ondblclick={(e) => startEditing(id, conversation.name, e)}
|
|
role="button"
|
|
tabindex={-1}
|
|
>
|
|
{conversation.name}
|
|
</span>
|
|
{#if id !== activeConversationId && id === connectedConversationId}
|
|
<span
|
|
class="text-xs text-[var(--text-tertiary)]"
|
|
title="This tab has the Claude connection"
|
|
>
|
|
(connected)
|
|
</span>
|
|
{/if}
|
|
{#if hasUnreadMessages(id, conversation)}
|
|
<div
|
|
class="absolute -top-1 -right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse"
|
|
title="New messages"
|
|
></div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if conversations.size > 1}
|
|
<button
|
|
onclick={(e) => deleteTab(id, e)}
|
|
class="absolute right-1 top-1/2 -translate-y-1/2 w-4 h-4 flex items-center justify-center rounded hover:bg-[var(--bg-secondary)] opacity-0 group-hover:opacity-100 transition-opacity"
|
|
title="Close tab"
|
|
>
|
|
<svg
|
|
class="w-3 h-3"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M6 18L18 6M6 6l12 12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
{/each}
|
|
|
|
<button
|
|
onclick={createNewTab}
|
|
class="new-tab-btn flex items-center justify-center w-7 h-7 rounded hover:bg-[var(--bg-tertiary)] text-[var(--text-secondary)] transition-colors"
|
|
title="New conversation (Ctrl+T)"
|
|
>
|
|
<svg
|
|
class="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<style>
|
|
.terminal-tabs {
|
|
min-height: 36px;
|
|
}
|
|
|
|
.tab-item {
|
|
min-width: 100px;
|
|
}
|
|
</style>
|