707 lines
25 KiB
Svelte
707 lines
25 KiB
Svelte
<script lang="ts">
|
|
import { onMount, untrack } from 'svelte';
|
|
import ProjectCard from './ProjectCard.svelte';
|
|
import SettingsDrawer from './SettingsDrawer.svelte';
|
|
import CommandPalette from './CommandPalette.svelte';
|
|
import ToastContainer from './ToastContainer.svelte';
|
|
import NotifDrawer from './NotifDrawer.svelte';
|
|
import StatusBar from './StatusBar.svelte';
|
|
import SearchOverlay from './SearchOverlay.svelte';
|
|
import SplashScreen from './SplashScreen.svelte';
|
|
import ProjectWizard from './ProjectWizard.svelte';
|
|
import { themeStore } from './theme-store.svelte.ts';
|
|
import { fontStore } from './font-store.svelte.ts';
|
|
import { keybindingStore } from './keybinding-store.svelte.ts';
|
|
import { setAgentToastFn } from './agent-store.svelte.ts';
|
|
import { appRpc } from './rpc.ts';
|
|
import { initI18n, getDir, getLocale } from './i18n.svelte.ts';
|
|
import {
|
|
getProjects, getGroups, getActiveGroupId,
|
|
getMountedGroupIds, getActiveGroup, getFilteredProjects,
|
|
getTotalCostDerived, getTotalTokensDerived,
|
|
setActiveGroup, addProjectFromWizard, deleteProject,
|
|
cloneCountForProject, handleClone, addGroup as wsAddGroup,
|
|
loadGroupsFromDb, loadProjectsFromDb, trackAllProjects,
|
|
type WizardResult,
|
|
} from './workspace-store.svelte.ts';
|
|
import {
|
|
getNotifications, clearAll as clearNotifications, getNotifCount,
|
|
} from './notifications-store.svelte.ts';
|
|
import {
|
|
getSettingsOpen, setSettingsOpen, toggleSettings,
|
|
getPaletteOpen, setPaletteOpen, togglePalette,
|
|
getSearchOpen, toggleSearch,
|
|
getNotifDrawerOpen, setNotifDrawerOpen, toggleNotifDrawer,
|
|
getShowWizard, setShowWizard,
|
|
getProjectToDelete, setProjectToDelete,
|
|
getShowAddGroup, setShowAddGroup, toggleAddGroup,
|
|
getNewGroupName, setNewGroupName, resetAddGroupForm,
|
|
toggleWizard,
|
|
} from './ui-store.svelte.ts';
|
|
|
|
// ── Local view-only state (not shared across components) ────
|
|
let appReady = $state(false);
|
|
let sessionStart = $state(Date.now());
|
|
|
|
// ── Blink timer (untracked — must not create reactive dependency) ────
|
|
let blinkVisible = $state(true);
|
|
let _blinkId: ReturnType<typeof setInterval>;
|
|
$effect(() => {
|
|
_blinkId = setInterval(() => { untrack(() => { blinkVisible = !blinkVisible; }); }, 500);
|
|
return () => clearInterval(_blinkId);
|
|
});
|
|
|
|
// ── Session duration (untracked) ──────────────────────────────
|
|
let sessionDuration = $state('0m');
|
|
$effect(() => {
|
|
function update() {
|
|
const mins = Math.floor((Date.now() - sessionStart) / 60000);
|
|
untrack(() => { sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`; });
|
|
}
|
|
update();
|
|
const id = setInterval(update, 10000);
|
|
return () => clearInterval(id);
|
|
});
|
|
|
|
// ── Window controls ─────────────────────────────────────────
|
|
function handleClose() { appRpc.request["window.close"]({}).catch(console.error); }
|
|
function handleMaximize() { appRpc.request["window.maximize"]({}).catch(console.error); }
|
|
function handleMinimize() { appRpc.request["window.minimize"]({}).catch(console.error); }
|
|
|
|
// ── Window frame persistence (debounced 500ms) ──────────────
|
|
let frameSaveTimer: ReturnType<typeof setTimeout> | null = null;
|
|
function saveWindowFrame() {
|
|
if (frameSaveTimer) clearTimeout(frameSaveTimer);
|
|
frameSaveTimer = setTimeout(() => {
|
|
appRpc.request["window.getFrame"]({}).then((frame) => {
|
|
appRpc.request["settings.set"]({ key: 'win_x', value: String(frame.x) }).catch(console.error);
|
|
appRpc.request["settings.set"]({ key: 'win_y', value: String(frame.y) }).catch(console.error);
|
|
appRpc.request["settings.set"]({ key: 'win_width', value: String(frame.width) }).catch(console.error);
|
|
appRpc.request["settings.set"]({ key: 'win_height', value: String(frame.height) }).catch(console.error);
|
|
}).catch(console.error);
|
|
}, 500);
|
|
}
|
|
|
|
// ── Wizard handler ──────────────────────────────────────────
|
|
function handleWizardCreated(result: WizardResult) {
|
|
addProjectFromWizard(result);
|
|
setShowWizard(false);
|
|
}
|
|
|
|
async function confirmDeleteProject() {
|
|
const toDelete = getProjectToDelete();
|
|
if (!toDelete) return;
|
|
await deleteProject(toDelete);
|
|
setProjectToDelete(null);
|
|
}
|
|
|
|
// ── Group add (local UI + store) ────────────────────────────
|
|
async function handleAddGroup() {
|
|
const name = getNewGroupName().trim();
|
|
if (!name) return;
|
|
await wsAddGroup(name);
|
|
resetAddGroupForm();
|
|
}
|
|
|
|
// ── Notification drawer ─────────────────────────────────────
|
|
function handleClearNotifications() {
|
|
clearNotifications();
|
|
setNotifDrawerOpen(false);
|
|
}
|
|
|
|
// ── Toast ref for agent notifications ───────────────────────
|
|
let toastRef: ToastContainer | undefined;
|
|
|
|
function showToast(message: string, variant: 'success' | 'warning' | 'error' | 'info') {
|
|
toastRef?.addToast(message, variant);
|
|
}
|
|
|
|
// ── Global error boundary ───────────────────────────────────
|
|
function setupErrorBoundary() {
|
|
window.addEventListener('unhandledrejection', (e: PromiseRejectionEvent) => {
|
|
const msg = e.reason instanceof Error ? e.reason.message : String(e.reason);
|
|
console.error('[unhandled rejection]', e.reason);
|
|
showToast(`Unhandled error: ${msg.slice(0, 100)}`, 'error');
|
|
e.preventDefault();
|
|
});
|
|
window.addEventListener('error', (e: ErrorEvent) => {
|
|
console.error('[uncaught error]', e.error);
|
|
showToast(`Error: ${e.message.slice(0, 100)}`, 'error');
|
|
});
|
|
}
|
|
|
|
// ── DEBUG overlay ───────────────────────────────────────────
|
|
const DEBUG_ENABLED = typeof window !== 'undefined' && new URLSearchParams(window.location.search).has('debug');
|
|
let debugLog = $state<string[]>([]);
|
|
|
|
$effect(() => {
|
|
if (!DEBUG_ENABLED) return;
|
|
function debugClick(e: MouseEvent) {
|
|
const el = e.target as HTMLElement;
|
|
const tag = el?.tagName;
|
|
const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
|
|
const elAtPoint = document.elementFromPoint(e.clientX, e.clientY);
|
|
let line = `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`;
|
|
if (elAtPoint && elAtPoint !== el) {
|
|
const overTag = (elAtPoint as HTMLElement).tagName;
|
|
const overCls = ((elAtPoint as HTMLElement).className?.toString?.() ?? '').slice(0, 40);
|
|
line += ` OVERLAY: ${overTag}.${overCls}`;
|
|
}
|
|
debugLog = [...debugLog.slice(-8), line];
|
|
}
|
|
function debugDown(e: MouseEvent) {
|
|
const el = e.target as HTMLElement;
|
|
debugLog = [...debugLog.slice(-8), `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? '').slice(0, 40)}`];
|
|
}
|
|
document.addEventListener('click', debugClick, true);
|
|
document.addEventListener('mousedown', debugDown, true);
|
|
return () => {
|
|
document.removeEventListener('click', debugClick, true);
|
|
document.removeEventListener('mousedown', debugDown, true);
|
|
};
|
|
});
|
|
|
|
// ── i18n: keep <html> lang and dir in sync ──────────────────
|
|
$effect(() => {
|
|
document.documentElement.lang = getLocale();
|
|
document.documentElement.dir = getDir();
|
|
});
|
|
|
|
// ── Init ────────────────────────────────────────────────────
|
|
onMount(() => {
|
|
setAgentToastFn(showToast);
|
|
setupErrorBoundary();
|
|
|
|
const initTasks = [
|
|
initI18n().catch(console.error),
|
|
themeStore.initTheme(appRpc).catch(console.error),
|
|
fontStore.initFonts(appRpc).catch(console.error),
|
|
keybindingStore.init(appRpc).catch(console.error),
|
|
loadGroupsFromDb().catch(console.error),
|
|
loadProjectsFromDb().catch(console.error),
|
|
];
|
|
|
|
const timeout = new Promise(r => setTimeout(r, 10000));
|
|
Promise.race([Promise.allSettled(initTasks), timeout]).then(() => {
|
|
appReady = true;
|
|
trackAllProjects();
|
|
});
|
|
|
|
keybindingStore.on('palette', () => { togglePalette(); });
|
|
keybindingStore.on('settings', () => { toggleSettings(); });
|
|
keybindingStore.on('group1', () => setActiveGroup(getGroups()[0]?.id));
|
|
keybindingStore.on('group2', () => setActiveGroup(getGroups()[1]?.id));
|
|
keybindingStore.on('group3', () => setActiveGroup(getGroups()[2]?.id));
|
|
keybindingStore.on('group4', () => setActiveGroup(getGroups()[3]?.id));
|
|
keybindingStore.on('minimize', () => handleMinimize());
|
|
|
|
function handleSearchShortcut(e: KeyboardEvent) {
|
|
if (e.ctrlKey && e.shiftKey && e.key === 'F') {
|
|
e.preventDefault();
|
|
toggleSearch();
|
|
}
|
|
}
|
|
document.addEventListener('keydown', handleSearchShortcut);
|
|
|
|
function handlePaletteCommand(e: Event) {
|
|
const detail = (e as CustomEvent).detail;
|
|
switch (detail) {
|
|
case 'settings': toggleSettings(); break;
|
|
case 'search': toggleSearch(); break;
|
|
case 'new-project': setShowWizard(true); break;
|
|
case 'toggle-sidebar': toggleSettings(); break;
|
|
default: console.log(`[palette] unhandled command: ${detail}`);
|
|
}
|
|
}
|
|
window.addEventListener('palette-command', handlePaletteCommand);
|
|
|
|
const cleanup = keybindingStore.installListener();
|
|
return () => {
|
|
cleanup();
|
|
document.removeEventListener('keydown', handleSearchShortcut);
|
|
window.removeEventListener('palette-command', handlePaletteCommand);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<SplashScreen ready={appReady} />
|
|
<SettingsDrawer open={getSettingsOpen()} onClose={() => setSettingsOpen(false)} />
|
|
<CommandPalette open={getPaletteOpen()} onClose={() => setPaletteOpen(false)} />
|
|
<SearchOverlay open={getSearchOpen()} onClose={() => setSearchOpen(false)} />
|
|
<ToastContainer bind:this={toastRef} />
|
|
<NotifDrawer
|
|
open={getNotifDrawerOpen()}
|
|
notifications={getNotifications()}
|
|
onClear={handleClearNotifications}
|
|
onClose={() => setNotifDrawerOpen(false)}
|
|
/>
|
|
|
|
<div
|
|
class="app-shell"
|
|
role="presentation"
|
|
>
|
|
<!-- Left sidebar icon rail -->
|
|
<aside class="sidebar" role="navigation" aria-label="Primary navigation">
|
|
<!-- AGOR vertical title -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="agor-title" aria-hidden="true">AGOR</div>
|
|
|
|
<!-- Group icons — numbered circles -->
|
|
<div class="sidebar-groups" role="list" aria-label="Project groups">
|
|
{#each getGroups() as group, i}
|
|
<button
|
|
class="group-btn"
|
|
class:active={getActiveGroupId() === group.id}
|
|
onclick={() => setActiveGroup(group.id)}
|
|
aria-label="{group.name} (Ctrl+{i + 1})"
|
|
title="{group.name} (Ctrl+{i + 1})"
|
|
>
|
|
<span class="group-circle" aria-hidden="true">{i + 1}</span>
|
|
{#if group.hasNew}
|
|
<span class="group-badge" aria-label="New activity"></span>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
|
|
<!-- Add group button -->
|
|
<button
|
|
class="group-btn add-group-btn"
|
|
onclick={() => toggleAddGroup()}
|
|
aria-label="Add group"
|
|
title="Add group"
|
|
>
|
|
<span class="group-circle" aria-hidden="true">+</span>
|
|
</button>
|
|
</div>
|
|
|
|
{#if getShowAddGroup()}
|
|
<div class="add-group-form">
|
|
<input
|
|
class="add-group-input"
|
|
type="text"
|
|
placeholder="Group name"
|
|
value={getNewGroupName()}
|
|
oninput={(e) => setNewGroupName((e.target as HTMLInputElement).value)}
|
|
onkeydown={(e) => { if (e.key === 'Enter') handleAddGroup(); if (e.key === 'Escape') setShowAddGroup(false); }}
|
|
autofocus
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Add project button -->
|
|
<button
|
|
class="sidebar-icon"
|
|
onclick={() => toggleWizard()}
|
|
aria-label="Add project"
|
|
title="Add project"
|
|
>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="sidebar-spacer"></div>
|
|
|
|
<!-- Settings gear -->
|
|
<button
|
|
class="sidebar-icon"
|
|
class:active={getSettingsOpen()}
|
|
onclick={() => toggleSettings()}
|
|
aria-label="Settings (Ctrl+,)"
|
|
title="Settings (Ctrl+,)"
|
|
data-testid="settings-btn"
|
|
>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
|
|
</svg>
|
|
</button>
|
|
</aside>
|
|
|
|
<!-- Main workspace -->
|
|
<main class="workspace">
|
|
<!-- Project grid -->
|
|
<div class="project-grid" role="list" aria-label="{getActiveGroup()?.name ?? 'Projects'} projects">
|
|
{#each getProjects() as project (project.id)}
|
|
{#if getMountedGroupIds().has(project.groupId ?? 'dev')}
|
|
<div role="listitem" style:display={(project.groupId ?? 'dev') === getActiveGroupId() ? 'flex' : 'none'}>
|
|
<ProjectCard
|
|
id={project.id}
|
|
name={project.name}
|
|
cwd={project.cwd}
|
|
accent={project.accent}
|
|
provider={project.provider}
|
|
profile={project.profile}
|
|
model={project.model}
|
|
contextPct={project.contextPct}
|
|
burnRate={project.burnRate}
|
|
{blinkVisible}
|
|
clonesAtMax={cloneCountForProject(project.id) >= 3}
|
|
onClone={handleClone}
|
|
worktreeBranch={project.worktreeBranch}
|
|
cloneOf={project.cloneOf}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
|
|
<!-- Empty group -->
|
|
<div class="empty-group" role="listitem"
|
|
style:display={getFilteredProjects().length === 0 ? 'flex' : 'none'}>
|
|
<p class="empty-group-text">No projects in {getActiveGroup()?.name ?? 'this group'}</p>
|
|
</div>
|
|
|
|
<!-- Project wizard overlay (display toggle) -->
|
|
<div style:display={getShowWizard() ? 'contents' : 'none'}>
|
|
<ProjectWizard
|
|
onClose={() => setShowWizard(false)}
|
|
onCreated={handleWizardCreated}
|
|
groupId={getActiveGroupId()}
|
|
groups={getGroups().map(g => ({ id: g.id, name: g.name }))}
|
|
existingNames={getProjects().map(p => p.name)}
|
|
/>
|
|
</div>
|
|
|
|
<!-- Delete project confirmation -->
|
|
{#if getProjectToDelete()}
|
|
<div class="delete-overlay" role="listitem">
|
|
<p class="delete-text">Delete project "{getProjects().find(p => p.id === getProjectToDelete())?.name}"?</p>
|
|
<div class="add-card-actions">
|
|
<button class="add-cancel" onclick={() => setProjectToDelete(null)}>Cancel</button>
|
|
<button class="delete-confirm" onclick={confirmDeleteProject}>Delete</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Right sidebar: window controls + notification bell -->
|
|
<aside class="right-bar" aria-label="Window controls and notifications">
|
|
<div class="window-controls-vertical" role="toolbar" aria-label="Window controls">
|
|
<button class="wc-btn close-btn" onclick={handleClose} aria-label="Close window" title="Close">✕</button>
|
|
<button class="wc-btn" onclick={handleMaximize} aria-label="Maximize window" title="Maximize">□</button>
|
|
<button class="wc-btn" onclick={handleMinimize} aria-label="Minimize window" title="Minimize">─</button>
|
|
</div>
|
|
|
|
<div class="right-spacer"></div>
|
|
|
|
<button
|
|
class="right-icon notif-btn"
|
|
class:active={getNotifDrawerOpen()}
|
|
onclick={() => toggleNotifDrawer()}
|
|
aria-label="{getNotifCount() > 0 ? `${getNotifCount()} notifications` : 'Notifications'}"
|
|
title="Notifications"
|
|
>
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
|
|
</svg>
|
|
{#if getNotifCount() > 0}
|
|
<span class="right-badge" aria-hidden="true">{getNotifCount()}</span>
|
|
{/if}
|
|
</button>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Status bar (health-backed) -->
|
|
<StatusBar
|
|
projectCount={getFilteredProjects().length}
|
|
totalTokens={getTotalTokensDerived()}
|
|
totalCost={getTotalCostDerived()}
|
|
{sessionDuration}
|
|
groupName={getActiveGroup()?.name ?? ''}
|
|
/>
|
|
|
|
{#if DEBUG_ENABLED && debugLog.length > 0}
|
|
<div style="position:fixed;bottom:0;left:0;right:0;background:#000;color:#0f0;font-family:monospace;font-size:10px;padding:4px 8px;z-index:9999;max-height:100px;overflow-y:auto;pointer-events:none;">
|
|
{#each debugLog as line}
|
|
<div>{line}</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
:global(body) { overflow: hidden; }
|
|
:global(#app) { display: flex; flex-direction: column; height: 100vh; }
|
|
|
|
.app-shell {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Left sidebar ─────────────────────────────────────────── */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
flex-shrink: 0;
|
|
background: var(--ctp-mantle);
|
|
border-right: 1px solid var(--ctp-surface0);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.375rem 0 0.5rem;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.agor-title {
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
font-family: 'Inter', system-ui, sans-serif;
|
|
font-weight: 900;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--ctp-overlay0);
|
|
padding: 1rem 0;
|
|
user-select: none;
|
|
flex-shrink: 0;
|
|
cursor: grab;
|
|
}
|
|
|
|
.sidebar-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
width: 100%;
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid var(--ctp-surface0);
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.sidebar-spacer { flex: 1; }
|
|
|
|
.group-btn {
|
|
position: relative;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.group-circle {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--ctp-surface1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--ctp-subtext0);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.group-btn:hover .group-circle {
|
|
border-color: var(--ctp-overlay1);
|
|
color: var(--ctp-text);
|
|
background: var(--ctp-surface0);
|
|
}
|
|
|
|
.group-btn.active .group-circle {
|
|
border-color: var(--accent, var(--ctp-mauve));
|
|
color: var(--accent, var(--ctp-mauve));
|
|
background: color-mix(in srgb, var(--accent, var(--ctp-mauve)) 10%, transparent);
|
|
}
|
|
|
|
.group-badge {
|
|
position: absolute;
|
|
top: 0.125rem;
|
|
right: 0.125rem;
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 50%;
|
|
background: var(--ctp-red);
|
|
}
|
|
|
|
.sidebar-icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--ctp-overlay1);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.15s, color 0.15s;
|
|
padding: 0;
|
|
}
|
|
|
|
.sidebar-icon:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
|
|
.sidebar-icon.active { background: var(--ctp-surface1); color: var(--ctp-text); }
|
|
.sidebar-icon svg { width: 1rem; height: 1rem; }
|
|
|
|
/* ── Main workspace ───────────────────────────────────────── */
|
|
.workspace {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-rows: 1fr;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--ctp-crust);
|
|
overflow-y: auto;
|
|
align-content: start;
|
|
}
|
|
|
|
.project-grid::-webkit-scrollbar { width: 0.375rem; }
|
|
.project-grid::-webkit-scrollbar-track { background: transparent; }
|
|
.project-grid::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 0.25rem; }
|
|
|
|
.empty-group {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 3rem 0;
|
|
color: var(--ctp-overlay0);
|
|
}
|
|
|
|
.empty-group-text { font-size: 0.875rem; font-style: italic; }
|
|
|
|
/* ── Right sidebar ────────────────────────────────────────── */
|
|
.right-bar {
|
|
width: 2.25rem;
|
|
flex-shrink: 0;
|
|
background: var(--ctp-mantle);
|
|
border-left: 1px solid var(--ctp-surface0);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.375rem 0;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.window-controls-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.wc-btn {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--ctp-overlay1);
|
|
font-size: 0.625rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: background 0.12s, color 0.12s;
|
|
padding: 0;
|
|
font-family: var(--ui-font-family);
|
|
}
|
|
|
|
.wc-btn:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
|
|
.close-btn:hover { background: var(--ctp-red); color: var(--ctp-base); }
|
|
|
|
.right-spacer { flex: 1; }
|
|
|
|
.right-icon {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--ctp-overlay1);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.375rem;
|
|
position: relative;
|
|
transition: color 0.12s, background 0.12s;
|
|
padding: 0;
|
|
}
|
|
|
|
.right-icon:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
|
|
.right-icon.active { background: var(--ctp-surface1); color: var(--ctp-text); }
|
|
.right-icon svg { width: 0.875rem; height: 0.875rem; }
|
|
|
|
.right-badge {
|
|
position: absolute;
|
|
top: 0.125rem;
|
|
right: 0.125rem;
|
|
min-width: 0.875rem;
|
|
height: 0.875rem;
|
|
background: var(--ctp-red);
|
|
color: var(--ctp-base);
|
|
border-radius: 0.4375rem;
|
|
font-size: 0.5rem;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.125rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Add group form ─────────────────────────────────────────── */
|
|
.add-group-form {
|
|
padding: 0.25rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.add-group-input {
|
|
width: 100%;
|
|
padding: 0.25rem;
|
|
background: var(--ctp-surface0);
|
|
border: 1px solid var(--ctp-surface1);
|
|
border-radius: 0.25rem;
|
|
color: var(--ctp-text);
|
|
font-size: 0.625rem;
|
|
font-family: var(--ui-font-family);
|
|
text-align: center;
|
|
}
|
|
.add-group-input:focus { outline: none; border-color: var(--ctp-blue); }
|
|
|
|
/* ── Delete project overlay ──────────────────────────────────── */
|
|
.add-card-actions { display: flex; gap: 0.375rem; justify-content: flex-end; }
|
|
|
|
.add-cancel, .delete-confirm {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
font-family: var(--ui-font-family);
|
|
}
|
|
|
|
.add-cancel { background: transparent; border: 1px solid var(--ctp-surface1); color: var(--ctp-subtext0); }
|
|
.add-cancel:hover { background: var(--ctp-surface0); color: var(--ctp-text); }
|
|
|
|
.delete-overlay {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
background: var(--ctp-base);
|
|
border: 1px solid var(--ctp-red);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.delete-text { font-size: 0.875rem; color: var(--ctp-text); margin: 0; }
|
|
.delete-confirm { background: color-mix(in srgb, var(--ctp-red) 20%, transparent); border: 1px solid var(--ctp-red); color: var(--ctp-red); }
|
|
.delete-confirm:hover { background: color-mix(in srgb, var(--ctp-red) 35%, transparent); }
|
|
</style>
|