feat(v2): add tiling layout, sidebar controls, and keyboard shortcuts
- TilingGrid: dynamic CSS Grid with auto-preset based on pane count - Layout presets: 1-col, 2-col, 3-col, 2x2, master-stack - PaneContainer: close button, status indicator, focus highlight - SessionList: new terminal button, layout preset selector, pane list - Layout store: pane CRUD, focus management, grid template generation - Keyboard: Ctrl+N new terminal, Ctrl+1-4 focus pane by index
This commit is contained in:
parent
bb0e9283fc
commit
bfd4021909
5 changed files with 399 additions and 41 deletions
|
|
@ -3,15 +3,25 @@
|
|||
|
||||
interface Props {
|
||||
title: string;
|
||||
status?: 'idle' | 'running' | 'error' | 'done';
|
||||
onClose?: () => void;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { title, children }: Props = $props();
|
||||
let { title, status = 'idle', onClose, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="pane-container">
|
||||
<div class="pane-header">
|
||||
<span class="pane-title">{title}</span>
|
||||
<div class="pane-controls">
|
||||
{#if status !== 'idle'}
|
||||
<span class="status {status}">{status}</span>
|
||||
{/if}
|
||||
{#if onClose}
|
||||
<button class="close-btn" onclick={onClose} title="Close pane">×</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pane-content">
|
||||
{@render children()}
|
||||
|
|
@ -26,12 +36,14 @@
|
|||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pane-header {
|
||||
height: var(--pane-header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
|
|
@ -47,8 +59,39 @@
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pane-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.status.running { color: var(--ctp-blue); }
|
||||
.status.error { color: var(--ctp-red); }
|
||||
.status.done { color: var(--ctp-green); }
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--ctp-red);
|
||||
}
|
||||
|
||||
.pane-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue