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:
Hibryda 2026-03-05 23:42:41 +01:00
parent bb0e9283fc
commit bfd4021909
5 changed files with 399 additions and 41 deletions

View file

@ -1,6 +1,39 @@
<script lang="ts">
import { onMount } from 'svelte';
import SessionList from './lib/components/Sidebar/SessionList.svelte';
import TilingGrid from './lib/components/Layout/TilingGrid.svelte';
import { addPane, focusPaneByIndex, getPanes } from './lib/stores/layout';
function newTerminal() {
const id = crypto.randomUUID();
const num = getPanes().length + 1;
addPane({
id,
type: 'terminal',
title: `Terminal ${num}`,
});
}
onMount(() => {
function handleKeydown(e: KeyboardEvent) {
// Ctrl+N — new terminal
if (e.ctrlKey && !e.shiftKey && e.key === 'n') {
e.preventDefault();
newTerminal();
return;
}
// Ctrl+1-4 — focus pane by index
if (e.ctrlKey && !e.shiftKey && e.key >= '1' && e.key <= '4') {
e.preventDefault();
focusPaneByIndex(parseInt(e.key) - 1);
return;
}
}
window.addEventListener('keydown', handleKeydown);
return () => window.removeEventListener('keydown', handleKeydown);
});
</script>
<aside class="sidebar">