Migrate frontend from Svelte 5 to React 18
After hours of fighting Svelte 5's prop-reactivity through the
recursive Pane → SplitNode → LeafPane chain (props captured at
mount, never updated; context+getter pattern crashed; DOM-direct
workarounds created zombie-split click-intercept bugs), we
checkpointed the Svelte version (branch svelte-archive at e9015b2,
tarball at D:\archives\tiletopia-svelte-2026-05-22.tar.gz) and
rewrote the frontend in React.
Kept verbatim:
- All of src-tauri/ (Rust backend, Tauri config, icons)
- scripts/ (make-icon.py, release.sh)
- README.md, CLAUDE.md, memory.md
- src/lib/layout/tree.ts (pure TS — 43 tests still pass)
- src/ipc.ts (Tauri command wrappers)
Rewrote in React:
- src/App.tsx (top-level state via useState, OrchestrationProvider
for descendants via React.Context)
- src/lib/layout/orchestration.tsx (React Context API for shared
state — known-reliable reactivity, no Svelte 5 wall)
- src/lib/layout/Pane.tsx (recursive dispatcher)
- src/lib/layout/SplitNode.tsx (draggable gutter, local ratio state)
- src/lib/layout/LeafPane.tsx (toolbar + XtermPane)
- src/components/XtermPane.tsx (xterm.js wrapper, refs for callbacks)
- src/components/Notifications.tsx, Palette.tsx
Build: Vite + @vitejs/plugin-react. TypeScript strict. Same Tauri 2
config. Verified: pnpm check (clean), pnpm test (43/43 pass).
Not yet verified: pnpm tauri dev — that requires the Windows host.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
e9015b2790
commit
774b8633dc
32 changed files with 2087 additions and 1825 deletions
69
src/App.css
Normal file
69
src/App.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #0c0c0c;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 6px 12px;
|
||||
background: #1a1a1a;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
}
|
||||
.titlebar .label {
|
||||
font-weight: 600;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.distros, .presets {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.distro-btn, .preset-btn, .palette-btn {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 11px;
|
||||
background: #222;
|
||||
color: #aaa;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.distro-btn:hover, .preset-btn:hover, .palette-btn:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
.distro-btn.active {
|
||||
background: #1a3a5c;
|
||||
color: #cce6ff;
|
||||
border-color: #2a5a8c;
|
||||
}
|
||||
.preset-btn {
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.muted {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
.layout-info {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #777;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pane-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
380
src/App.svelte
380
src/App.svelte
|
|
@ -1,380 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import {
|
||||
listDistros,
|
||||
saveWorkspace,
|
||||
loadWorkspace,
|
||||
writeToPane,
|
||||
killPane,
|
||||
} from "./ipc";
|
||||
import Pane from "./lib/layout/Pane.svelte";
|
||||
import Notifications from "./components/Notifications.svelte";
|
||||
import Palette from "./components/Palette.svelte";
|
||||
import {
|
||||
provideOrchestration,
|
||||
type TreeOps,
|
||||
} from "./lib/layout/orchestration.svelte";
|
||||
import {
|
||||
type TreeNode,
|
||||
type NodeId,
|
||||
type Orientation,
|
||||
type LeafNode,
|
||||
newLeaf,
|
||||
splitLeaf,
|
||||
closeLeaf,
|
||||
findLeaf,
|
||||
leafCount,
|
||||
walkLeaves,
|
||||
changeDistro,
|
||||
changeLabel,
|
||||
toggleBroadcast as toggleBroadcastInTree,
|
||||
serialize,
|
||||
deserialize,
|
||||
presetSingle,
|
||||
presetTwoColumns,
|
||||
presetThreeColumns,
|
||||
presetTwoRows,
|
||||
presetTwoByTwo,
|
||||
} from "./lib/layout/tree";
|
||||
|
||||
const LEGACY_STORAGE_KEY = "tiletopia.tree.v1";
|
||||
|
||||
let defaultDistro = $state<string | undefined>(undefined);
|
||||
let ready = $state(false);
|
||||
let tree = $state<TreeNode>(newLeaf());
|
||||
let paletteOpen = $state(false);
|
||||
|
||||
// activeLeafId lives here (not on the orch class) because Svelte 5 didn't
|
||||
// reliably track class-field $state reads from child components that
|
||||
// obtained the orch instance via getContext. Local $state drilled via
|
||||
// prop works.
|
||||
let activeLeafId = $state<NodeId | null>(null);
|
||||
function setActive(id: NodeId) {
|
||||
activeLeafId = id;
|
||||
}
|
||||
function clearActiveIf(id: NodeId) {
|
||||
if (activeLeafId === id) activeLeafId = null;
|
||||
}
|
||||
|
||||
|
||||
// ---- tree mutation handlers (closures over tree $state) -----------------
|
||||
function handleSplit(leafId: NodeId, orientation: Orientation) {
|
||||
const parent = findLeaf(tree, leafId);
|
||||
const inherit = parent
|
||||
? { distro: parent.distro ?? defaultDistro, cwd: parent.cwd }
|
||||
: { distro: defaultDistro };
|
||||
tree = splitLeaf(tree, leafId, orientation, inherit);
|
||||
}
|
||||
|
||||
// Bumped on close to force a clean Pane remount (the only way the closed
|
||||
// pane's DOM actually disappears given the reactivity wall).
|
||||
let renderKey = $state(0);
|
||||
|
||||
function handleClose(leafId: NodeId) {
|
||||
// Kill the PTY directly so it dies even though Svelte may not unmount.
|
||||
const paneId = orch.paneIdByLeaf.get(leafId);
|
||||
if (paneId != null) {
|
||||
void killPane(paneId).catch((e) => console.warn("killPane failed:", e));
|
||||
orch.paneIdByLeaf.delete(leafId);
|
||||
}
|
||||
const next = closeLeaf(tree, leafId);
|
||||
tree = next ?? newLeaf({ distro: defaultDistro });
|
||||
clearActiveIf(leafId);
|
||||
// Force a clean re-render of the whole pane tree. Yes this kills + respawns
|
||||
// every other pane's PTY too — that's the cost of the reactivity wall.
|
||||
// Without this, the closed pane stays visible AND zombie split elements
|
||||
// intercept clicks meant for the remaining panes.
|
||||
renderKey += 1;
|
||||
}
|
||||
|
||||
function handleSetDistro(leafId: NodeId, distro: string) {
|
||||
tree = changeDistro(tree, leafId, distro);
|
||||
}
|
||||
|
||||
function handleSetLabel(leafId: NodeId, label: string | undefined) {
|
||||
tree = changeLabel(tree, leafId, label);
|
||||
}
|
||||
|
||||
function handleToggleBroadcast(leafId: NodeId) {
|
||||
tree = toggleBroadcastInTree(tree, leafId);
|
||||
}
|
||||
|
||||
function handleBroadcastFrom(originLeafId: NodeId, dataB64: string) {
|
||||
let peers = 0;
|
||||
for (const leaf of walkLeaves(tree)) {
|
||||
if (leaf.id === originLeafId) continue;
|
||||
if (!leaf.broadcast) continue;
|
||||
const paneId = orch.paneIdByLeaf.get(leaf.id);
|
||||
if (paneId == null) {
|
||||
console.warn("[tiletopia] broadcast peer has no paneId yet:", leaf.id);
|
||||
continue;
|
||||
}
|
||||
peers++;
|
||||
writeToPane(paneId, dataB64).catch((e) =>
|
||||
console.warn("[tiletopia] broadcast write failed:", e),
|
||||
);
|
||||
}
|
||||
console.log("[tiletopia] broadcastFrom", originLeafId, "→", peers, "peer(s)");
|
||||
}
|
||||
|
||||
const treeOps: TreeOps = {
|
||||
split: handleSplit,
|
||||
close: handleClose,
|
||||
setDistro: handleSetDistro,
|
||||
setLabel: handleSetLabel,
|
||||
toggleBroadcast: handleToggleBroadcast,
|
||||
broadcastFrom: handleBroadcastFrom,
|
||||
};
|
||||
|
||||
// Provide the orchestration store. All Pane / SplitNode / LeafPane
|
||||
// descendants consume it via `useOrchestration()` — no prop drilling.
|
||||
const orch = provideOrchestration(treeOps);
|
||||
orch.configureActiveHandlers(setActive, clearActiveIf);
|
||||
|
||||
function isInteractiveDistro(name: string): boolean {
|
||||
return !name.toLowerCase().startsWith("docker-desktop");
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
// 1. Try APPDATA persistence.
|
||||
let loaded: TreeNode | null = null;
|
||||
try {
|
||||
const json = await loadWorkspace();
|
||||
if (json) loaded = deserialize(json);
|
||||
} catch (e) {
|
||||
console.warn("loadWorkspace failed:", e);
|
||||
}
|
||||
|
||||
// 2. Migrate from M2 localStorage if APPDATA is empty.
|
||||
if (!loaded) {
|
||||
try {
|
||||
const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
|
||||
if (legacy) {
|
||||
loaded = deserialize(legacy);
|
||||
if (loaded) void saveWorkspace(legacy);
|
||||
localStorage.removeItem(LEGACY_STORAGE_KEY);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("legacy localStorage migration failed:", e);
|
||||
}
|
||||
}
|
||||
|
||||
if (loaded) tree = loaded;
|
||||
|
||||
// 3. Resolve default distro.
|
||||
try {
|
||||
const ds = await listDistros();
|
||||
orch.distros = ds;
|
||||
defaultDistro = ds.find(isInteractiveDistro) ?? ds[0];
|
||||
} catch (e) {
|
||||
console.warn("list_distros failed:", e);
|
||||
}
|
||||
|
||||
if (defaultDistro) backfillDistro(tree, defaultDistro);
|
||||
ready = true;
|
||||
});
|
||||
|
||||
function backfillDistro(node: TreeNode, fallback: string) {
|
||||
if (node.kind === "leaf") {
|
||||
if (!node.distro) node.distro = fallback;
|
||||
} else {
|
||||
backfillDistro(node.a, fallback);
|
||||
backfillDistro(node.b, fallback);
|
||||
}
|
||||
}
|
||||
|
||||
// ---- debounced auto-save -------------------------------------------------
|
||||
let saveTimer: number | null = null;
|
||||
const SAVE_DEBOUNCE_MS = 500;
|
||||
|
||||
$effect(() => {
|
||||
if (!ready) return;
|
||||
const json = serialize(tree);
|
||||
if (saveTimer != null) clearTimeout(saveTimer);
|
||||
saveTimer = window.setTimeout(() => {
|
||||
saveTimer = null;
|
||||
saveWorkspace(json).catch((e) =>
|
||||
console.warn("saveWorkspace failed:", e),
|
||||
);
|
||||
}, SAVE_DEBOUNCE_MS);
|
||||
});
|
||||
|
||||
// ---- Ctrl+K palette toggle ----------------------------------------------
|
||||
// Capture phase so we win over xterm.js's keystroke capture inside terminals.
|
||||
$effect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
|
||||
console.log("[tiletopia] Ctrl+K caught, paletteOpen ->", !paletteOpen);
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
paletteOpen = !paletteOpen;
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", onKey, true);
|
||||
return () => window.removeEventListener("keydown", onKey, true);
|
||||
});
|
||||
|
||||
// ---- Active-pane detector via active-element polling --------------------
|
||||
// We tried letting Svelte handle class:active reactively in LeafPane, but
|
||||
// through this app's component chain the prop changes don't trigger a
|
||||
// template re-evaluation reliably (root cause unclear — likely a Svelte 5
|
||||
// interaction with our recursive Pane / setInterval pattern). So we ALSO
|
||||
// manipulate `.leaf.active` directly via DOM as a backstop.
|
||||
// ---- Workarounds for Svelte 5 prop-reactivity wall in this app ----------
|
||||
// Without these, NOTHING updates reactively: no active border, no broadcast
|
||||
// color, no resize, no close. Verified empirically: stripping the
|
||||
// workarounds breaks every interaction.
|
||||
$effect(() => {
|
||||
let lastLeafId: string | null = null;
|
||||
const interval = window.setInterval(() => {
|
||||
// Focus detection → setActive
|
||||
const el = document.activeElement;
|
||||
const leafEl = el?.closest("[data-leaf-id]");
|
||||
const id = leafEl?.getAttribute("data-leaf-id") ?? null;
|
||||
if (id && id !== lastLeafId) {
|
||||
lastLeafId = id;
|
||||
setActive(id);
|
||||
}
|
||||
// Active border DOM sync
|
||||
document.querySelectorAll("[data-leaf-id].leaf").forEach((el) => {
|
||||
const elId = el.getAttribute("data-leaf-id");
|
||||
if (elId === activeLeafId) el.classList.add("active");
|
||||
else el.classList.remove("active");
|
||||
});
|
||||
// Broadcast DOM sync
|
||||
for (const leaf of walkLeaves(tree)) {
|
||||
const el = document.querySelector(`[data-leaf-id="${leaf.id}"]`);
|
||||
if (!el) continue;
|
||||
el.classList.toggle("broadcasting", !!leaf.broadcast);
|
||||
const chip = el.querySelector(".bcast-chip");
|
||||
if (chip) chip.classList.toggle("on", !!leaf.broadcast);
|
||||
}
|
||||
}, 250);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
|
||||
// ---- preset layouts ------------------------------------------------------
|
||||
function applyPreset(make: (d: { distro?: string }) => TreeNode) {
|
||||
const count = leafCount(tree);
|
||||
if (count > 1 && !confirm(`Replace current layout (${count} panes)? This kills all open shells.`)) {
|
||||
return;
|
||||
}
|
||||
tree = make({ distro: defaultDistro });
|
||||
}
|
||||
|
||||
// ---- palette feed --------------------------------------------------------
|
||||
const paletteLeaves = $derived.by<LeafNode[]>(() => {
|
||||
if (!paletteOpen) return [];
|
||||
return Array.from(walkLeaves(tree));
|
||||
});
|
||||
|
||||
function onPalettePick(leafId: string) {
|
||||
setActive(leafId);
|
||||
paletteOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
<header class="titlebar">
|
||||
<span class="label">tiletopia</span>
|
||||
|
||||
<span class="distros">
|
||||
{#if orch.distros.length === 0}
|
||||
<span class="muted">no distros enumerated</span>
|
||||
{:else}
|
||||
<span class="muted">default:</span>
|
||||
{#each orch.distros as d}
|
||||
<button
|
||||
class="distro-btn"
|
||||
class:active={d === defaultDistro}
|
||||
onclick={() => (defaultDistro = d)}
|
||||
title="Set default distro for new panes"
|
||||
>{d}</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<span class="presets">
|
||||
<span class="muted">layout:</span>
|
||||
<button class="preset-btn" title="Single pane" onclick={() => applyPreset(presetSingle)}>1</button>
|
||||
<button class="preset-btn" title="Two columns" onclick={() => applyPreset(presetTwoColumns)}>2H</button>
|
||||
<button class="preset-btn" title="Three columns" onclick={() => applyPreset(presetThreeColumns)}>3H</button>
|
||||
<button class="preset-btn" title="Two rows" onclick={() => applyPreset(presetTwoRows)}>2V</button>
|
||||
<button class="preset-btn" title="2 × 2 grid" onclick={() => applyPreset(presetTwoByTwo)}>2×2</button>
|
||||
</span>
|
||||
|
||||
<button class="palette-btn" onclick={() => (paletteOpen = true)} title="Jump to pane (Ctrl+K)">
|
||||
⌘K
|
||||
</button>
|
||||
<button class="palette-btn" onclick={() => orch.notify("test toast at " + new Date().toLocaleTimeString())} title="Fire a test toast">
|
||||
🔔
|
||||
</button>
|
||||
|
||||
<span class="layout-info">
|
||||
{leafCount(tree)} pane{leafCount(tree) === 1 ? "" : "s"}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="pane-wrap">
|
||||
{#if ready}
|
||||
{#key renderKey}
|
||||
<Pane node={tree} {activeLeafId} />
|
||||
{/key}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<Notifications
|
||||
notifications={orch.notifications}
|
||||
onDismiss={(id) => orch.dismiss(id)}
|
||||
/>
|
||||
|
||||
{#if paletteOpen}
|
||||
<Palette
|
||||
leaves={paletteLeaves}
|
||||
onPick={onPalettePick}
|
||||
onClose={() => (paletteOpen = false)}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.distros, .presets {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
.distro-btn, .preset-btn, .palette-btn {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 11px;
|
||||
background: #222;
|
||||
color: #aaa;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.distro-btn:hover, .preset-btn:hover, .palette-btn:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
.distro-btn.active {
|
||||
background: #1a3a5c;
|
||||
color: #cce6ff;
|
||||
border-color: #2a5a8c;
|
||||
}
|
||||
.preset-btn {
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
.muted {
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
.layout-info {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #777;
|
||||
font-size: 11px;
|
||||
}
|
||||
</style>
|
||||
372
src/App.tsx
Normal file
372
src/App.tsx
Normal file
|
|
@ -0,0 +1,372 @@
|
|||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
listDistros,
|
||||
loadWorkspace,
|
||||
saveWorkspace,
|
||||
writeToPane,
|
||||
killPane,
|
||||
type PaneId,
|
||||
} from "./ipc";
|
||||
import {
|
||||
type TreeNode,
|
||||
type NodeId,
|
||||
type Orientation,
|
||||
type LeafNode,
|
||||
newLeaf,
|
||||
splitLeaf,
|
||||
closeLeaf,
|
||||
findLeaf,
|
||||
leafCount,
|
||||
walkLeaves,
|
||||
changeDistro,
|
||||
changeLabel,
|
||||
toggleBroadcast as toggleBroadcastInTree,
|
||||
serialize,
|
||||
deserialize,
|
||||
presetSingle,
|
||||
presetTwoColumns,
|
||||
presetThreeColumns,
|
||||
presetTwoRows,
|
||||
presetTwoByTwo,
|
||||
} from "./lib/layout/tree";
|
||||
import { OrchestrationProvider, type Orchestration } from "./lib/layout/orchestration";
|
||||
import Pane from "./lib/layout/Pane";
|
||||
import Notifications, { type Toast } from "./components/Notifications";
|
||||
import Palette from "./components/Palette";
|
||||
import "./App.css";
|
||||
|
||||
const LEGACY_STORAGE_KEY = "tiletopia.tree.v1";
|
||||
const SAVE_DEBOUNCE_MS = 500;
|
||||
|
||||
function isInteractiveDistro(name: string): boolean {
|
||||
return !name.toLowerCase().startsWith("docker-desktop");
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
// ---- top-level state -----------------------------------------------------
|
||||
const [tree, setTree] = useState<TreeNode>(() => newLeaf());
|
||||
const [activeLeafId, setActiveLeafId] = useState<NodeId | null>(null);
|
||||
const [distros, setDistros] = useState<string[]>([]);
|
||||
const [defaultDistro, setDefaultDistro] = useState<string | undefined>(undefined);
|
||||
const [ready, setReady] = useState(false);
|
||||
const [notifications, setNotifications] = useState<Toast[]>([]);
|
||||
const [paletteOpen, setPaletteOpen] = useState(false);
|
||||
|
||||
// ---- non-reactive lookups -----------------------------------------------
|
||||
const paneIdByLeafRef = useRef<Map<NodeId, PaneId>>(new Map());
|
||||
const nextNotifIdRef = useRef(1);
|
||||
const treeRef = useRef(tree);
|
||||
useEffect(() => {
|
||||
treeRef.current = tree;
|
||||
}, [tree]);
|
||||
|
||||
// ---- mount: load workspace + distros ------------------------------------
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
let loaded: TreeNode | null = null;
|
||||
try {
|
||||
const json = await loadWorkspace();
|
||||
if (json) loaded = deserialize(json);
|
||||
} catch (e) {
|
||||
console.warn("loadWorkspace failed:", e);
|
||||
}
|
||||
if (!loaded) {
|
||||
try {
|
||||
const legacy = localStorage.getItem(LEGACY_STORAGE_KEY);
|
||||
if (legacy) {
|
||||
loaded = deserialize(legacy);
|
||||
if (loaded) void saveWorkspace(legacy);
|
||||
localStorage.removeItem(LEGACY_STORAGE_KEY);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("legacy localStorage migration failed:", e);
|
||||
}
|
||||
}
|
||||
|
||||
let resolvedDistros: string[] = [];
|
||||
let resolvedDefault: string | undefined;
|
||||
try {
|
||||
resolvedDistros = await listDistros();
|
||||
resolvedDefault =
|
||||
resolvedDistros.find(isInteractiveDistro) ?? resolvedDistros[0];
|
||||
} catch (e) {
|
||||
console.warn("list_distros failed:", e);
|
||||
}
|
||||
|
||||
if (cancelled) return;
|
||||
if (loaded) {
|
||||
if (resolvedDefault) backfillDistro(loaded, resolvedDefault);
|
||||
setTree(loaded);
|
||||
} else if (resolvedDefault) {
|
||||
setTree(newLeaf({ distro: resolvedDefault }));
|
||||
}
|
||||
setDistros(resolvedDistros);
|
||||
setDefaultDistro(resolvedDefault);
|
||||
setReady(true);
|
||||
})();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// ---- debounced save ------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (!ready) return;
|
||||
const id = window.setTimeout(() => {
|
||||
saveWorkspace(serialize(tree)).catch((e) =>
|
||||
console.warn("saveWorkspace failed:", e),
|
||||
);
|
||||
}, SAVE_DEBOUNCE_MS);
|
||||
return () => clearTimeout(id);
|
||||
}, [tree, ready]);
|
||||
|
||||
// ---- Ctrl+K palette toggle (capture phase to beat xterm) ----------------
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "k") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setPaletteOpen((v) => !v);
|
||||
}
|
||||
}
|
||||
window.addEventListener("keydown", onKey, true);
|
||||
return () => window.removeEventListener("keydown", onKey, true);
|
||||
}, []);
|
||||
|
||||
// ---- focus polling → setActive (xterm.js eats pointerdown) --------------
|
||||
useEffect(() => {
|
||||
let lastLeafId: string | null = null;
|
||||
const interval = window.setInterval(() => {
|
||||
const el = document.activeElement;
|
||||
const leafEl = el?.closest("[data-leaf-id]");
|
||||
const id = leafEl?.getAttribute("data-leaf-id") ?? null;
|
||||
if (id && id !== lastLeafId) {
|
||||
lastLeafId = id;
|
||||
setActiveLeafId(id);
|
||||
}
|
||||
}, 250);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// ---- orchestration callbacks --------------------------------------------
|
||||
const split = useCallback(
|
||||
(leafId: NodeId, orientation: Orientation) => {
|
||||
setTree((t) => {
|
||||
const parent = findLeaf(t, leafId);
|
||||
const inherit = parent
|
||||
? { distro: parent.distro ?? defaultDistro, cwd: parent.cwd }
|
||||
: { distro: defaultDistro };
|
||||
return splitLeaf(t, leafId, orientation, inherit);
|
||||
});
|
||||
},
|
||||
[defaultDistro],
|
||||
);
|
||||
|
||||
const close = useCallback(
|
||||
(leafId: NodeId) => {
|
||||
const paneId = paneIdByLeafRef.current.get(leafId);
|
||||
if (paneId != null) {
|
||||
void killPane(paneId).catch((e) => console.warn("killPane failed:", e));
|
||||
paneIdByLeafRef.current.delete(leafId);
|
||||
}
|
||||
setTree((t) => closeLeaf(t, leafId) ?? newLeaf({ distro: defaultDistro }));
|
||||
setActiveLeafId((cur) => (cur === leafId ? null : cur));
|
||||
},
|
||||
[defaultDistro],
|
||||
);
|
||||
|
||||
const setDistro = useCallback((leafId: NodeId, distro: string) => {
|
||||
setTree((t) => changeDistro(t, leafId, distro));
|
||||
}, []);
|
||||
|
||||
const setLabel = useCallback((leafId: NodeId, label: string | undefined) => {
|
||||
setTree((t) => changeLabel(t, leafId, label));
|
||||
}, []);
|
||||
|
||||
const toggleBroadcast = useCallback((leafId: NodeId) => {
|
||||
setTree((t) => toggleBroadcastInTree(t, leafId));
|
||||
}, []);
|
||||
|
||||
const setActive = useCallback((leafId: NodeId) => {
|
||||
setActiveLeafId(leafId);
|
||||
}, []);
|
||||
|
||||
const registerPaneId = useCallback(
|
||||
(leafId: NodeId, paneId: PaneId | null) => {
|
||||
if (paneId == null) paneIdByLeafRef.current.delete(leafId);
|
||||
else paneIdByLeafRef.current.set(leafId, paneId);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const broadcastFrom = useCallback(
|
||||
(originLeafId: NodeId, dataB64: string) => {
|
||||
let peers = 0;
|
||||
for (const leaf of walkLeaves(treeRef.current)) {
|
||||
if (leaf.id === originLeafId) continue;
|
||||
if (!leaf.broadcast) continue;
|
||||
const paneId = paneIdByLeafRef.current.get(leaf.id);
|
||||
if (paneId == null) continue;
|
||||
peers++;
|
||||
writeToPane(paneId, dataB64).catch((e) =>
|
||||
console.warn("broadcast write failed:", e),
|
||||
);
|
||||
}
|
||||
if (peers > 0) {
|
||||
console.log("[tiletopia] broadcastFrom", originLeafId, "→", peers, "peer(s)");
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
const notify = useCallback((message: string) => {
|
||||
const id = nextNotifIdRef.current++;
|
||||
setNotifications((ns) => [...ns, { id, message }]);
|
||||
window.setTimeout(() => {
|
||||
setNotifications((ns) => ns.filter((n) => n.id !== id));
|
||||
}, 5000);
|
||||
}, []);
|
||||
|
||||
const dismissNotification = useCallback((id: number) => {
|
||||
setNotifications((ns) => ns.filter((n) => n.id !== id));
|
||||
}, []);
|
||||
|
||||
const orch = useMemo<Orchestration>(
|
||||
() => ({
|
||||
activeLeafId,
|
||||
distros,
|
||||
split,
|
||||
close,
|
||||
setDistro,
|
||||
setLabel,
|
||||
toggleBroadcast,
|
||||
setActive,
|
||||
registerPaneId,
|
||||
broadcastFrom,
|
||||
notify,
|
||||
}),
|
||||
[
|
||||
activeLeafId,
|
||||
distros,
|
||||
split,
|
||||
close,
|
||||
setDistro,
|
||||
setLabel,
|
||||
toggleBroadcast,
|
||||
setActive,
|
||||
registerPaneId,
|
||||
broadcastFrom,
|
||||
notify,
|
||||
],
|
||||
);
|
||||
|
||||
const applyPreset = useCallback(
|
||||
(make: (d: { distro?: string }) => TreeNode) => {
|
||||
const count = leafCount(tree);
|
||||
if (
|
||||
count > 1 &&
|
||||
!window.confirm(
|
||||
`Replace current layout (${count} panes)? This kills all open shells.`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
setTree(make({ distro: defaultDistro }));
|
||||
},
|
||||
[tree, defaultDistro],
|
||||
);
|
||||
|
||||
const paletteLeaves = useMemo<LeafNode[]>(
|
||||
() => (paletteOpen ? Array.from(walkLeaves(tree)) : []),
|
||||
[paletteOpen, tree],
|
||||
);
|
||||
|
||||
const onPalettePick = useCallback((leafId: string) => {
|
||||
setActiveLeafId(leafId);
|
||||
setPaletteOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<header className="titlebar">
|
||||
<span className="label">tiletopia</span>
|
||||
|
||||
<span className="distros">
|
||||
{distros.length === 0 ? (
|
||||
<span className="muted">no distros enumerated</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="muted">default:</span>
|
||||
{distros.map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
className={`distro-btn${d === defaultDistro ? " active" : ""}`}
|
||||
onClick={() => setDefaultDistro(d)}
|
||||
title="Set default distro for new panes"
|
||||
>
|
||||
{d}
|
||||
</button>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className="presets">
|
||||
<span className="muted">layout:</span>
|
||||
<button className="preset-btn" title="Single pane" onClick={() => applyPreset(presetSingle)}>1</button>
|
||||
<button className="preset-btn" title="Two columns" onClick={() => applyPreset(presetTwoColumns)}>2H</button>
|
||||
<button className="preset-btn" title="Three columns" onClick={() => applyPreset(presetThreeColumns)}>3H</button>
|
||||
<button className="preset-btn" title="Two rows" onClick={() => applyPreset(presetTwoRows)}>2V</button>
|
||||
<button className="preset-btn" title="2 × 2 grid" onClick={() => applyPreset(presetTwoByTwo)}>2×2</button>
|
||||
</span>
|
||||
|
||||
<button
|
||||
className="palette-btn"
|
||||
onClick={() => setPaletteOpen(true)}
|
||||
title="Jump to pane (Ctrl+K)"
|
||||
>
|
||||
⌘K
|
||||
</button>
|
||||
<button
|
||||
className="palette-btn"
|
||||
onClick={() => notify("test toast at " + new Date().toLocaleTimeString())}
|
||||
title="Fire a test toast"
|
||||
>
|
||||
🔔
|
||||
</button>
|
||||
|
||||
<span className="layout-info">
|
||||
{leafCount(tree)} pane{leafCount(tree) === 1 ? "" : "s"}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div className="pane-wrap">
|
||||
{ready && (
|
||||
<OrchestrationProvider value={orch}>
|
||||
<Pane node={tree} />
|
||||
</OrchestrationProvider>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Notifications notifications={notifications} onDismiss={dismissNotification} />
|
||||
|
||||
{paletteOpen && (
|
||||
<Palette
|
||||
leaves={paletteLeaves}
|
||||
onPick={onPalettePick}
|
||||
onClose={() => setPaletteOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function backfillDistro(node: TreeNode, fallback: string) {
|
||||
if (node.kind === "leaf") {
|
||||
if (!node.distro) node.distro = fallback;
|
||||
} else {
|
||||
backfillDistro(node.a, fallback);
|
||||
backfillDistro(node.b, fallback);
|
||||
}
|
||||
}
|
||||
62
src/components/Notifications.css
Normal file
62
src/components/Notifications.css
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
.toast-stack {
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 220px;
|
||||
max-width: 320px;
|
||||
padding: 8px 10px 8px 14px;
|
||||
background: #1f1f1f;
|
||||
color: #ddd;
|
||||
border: 1px solid #3a5a8c;
|
||||
border-left-width: 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
|
||||
animation: slide-in 180ms ease-out;
|
||||
}
|
||||
|
||||
.toast-msg {
|
||||
flex: 1 1 auto;
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.toast-x {
|
||||
flex: 0 0 auto;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #777;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.toast-x:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
@keyframes slide-in {
|
||||
from {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
<script lang="ts">
|
||||
export interface Toast {
|
||||
id: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
let {
|
||||
notifications,
|
||||
onDismiss,
|
||||
}: {
|
||||
notifications: Toast[];
|
||||
onDismiss: (id: number) => void;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<div class="toast-stack">
|
||||
{#each notifications as t (t.id)}
|
||||
<div class="toast">
|
||||
<span class="toast-msg">{t.message}</span>
|
||||
<button
|
||||
class="toast-x"
|
||||
onclick={() => onDismiss(t.id)}
|
||||
aria-label="Dismiss notification"
|
||||
>×</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.toast-stack {
|
||||
position: fixed;
|
||||
top: 36px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 220px;
|
||||
max-width: 320px;
|
||||
padding: 8px 10px 8px 14px;
|
||||
background: #1f1f1f;
|
||||
color: #ddd;
|
||||
border: 1px solid #3a5a8c;
|
||||
border-left-width: 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
|
||||
animation: slide-in 180ms ease-out;
|
||||
}
|
||||
.toast-msg {
|
||||
flex: 1 1 auto;
|
||||
line-height: 1.3;
|
||||
word-break: break-word;
|
||||
}
|
||||
.toast-x {
|
||||
flex: 0 0 auto;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #777;
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.toast-x:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
@keyframes slide-in {
|
||||
from { transform: translateX(20px); opacity: 0; }
|
||||
to { transform: translateX(0); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
34
src/components/Notifications.tsx
Normal file
34
src/components/Notifications.tsx
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
import "./Notifications.css";
|
||||
|
||||
export interface Toast {
|
||||
id: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
interface NotificationsProps {
|
||||
notifications: Toast[];
|
||||
onDismiss: (id: number) => void;
|
||||
}
|
||||
|
||||
export default function Notifications({
|
||||
notifications,
|
||||
onDismiss,
|
||||
}: NotificationsProps) {
|
||||
return (
|
||||
<div className="toast-stack">
|
||||
{notifications.map((t) => (
|
||||
<div key={t.id} className="toast">
|
||||
<span className="toast-msg">{t.message}</span>
|
||||
<button
|
||||
className="toast-x"
|
||||
onClick={() => onDismiss(t.id)}
|
||||
aria-label="Dismiss notification"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
99
src/components/Palette.css
Normal file
99
src/components/Palette.css
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 99;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.palette {
|
||||
position: fixed;
|
||||
top: 12vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(520px, 90vw);
|
||||
background: #181818;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.palette-input {
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #1f1f1f;
|
||||
border: none;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
padding: 10px 14px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.palette-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.palette-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.palette-item.highlight {
|
||||
background: #1a3a5c;
|
||||
color: #cce6ff;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.palette-item.highlight .meta {
|
||||
color: #9bd;
|
||||
}
|
||||
|
||||
.meta.cwd {
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta.bcast {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
padding: 8px 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { LeafNode } from "../lib/layout/tree";
|
||||
|
||||
let {
|
||||
leaves,
|
||||
onPick,
|
||||
onClose,
|
||||
}: {
|
||||
leaves: LeafNode[];
|
||||
onPick: (leafId: string) => void;
|
||||
onClose: () => void;
|
||||
} = $props();
|
||||
|
||||
let query = $state("");
|
||||
let inputEl: HTMLInputElement | null = $state(null);
|
||||
let highlightIndex = $state(0);
|
||||
|
||||
$effect(() => {
|
||||
queueMicrotask(() => inputEl?.focus());
|
||||
});
|
||||
|
||||
const filtered = $derived.by(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return leaves;
|
||||
return leaves.filter((l) => {
|
||||
const blob = `${l.label ?? ""} ${l.distro ?? ""} ${l.cwd ?? ""}`.toLowerCase();
|
||||
return blob.includes(q);
|
||||
});
|
||||
});
|
||||
|
||||
// Clamp highlight whenever the filtered list changes.
|
||||
$effect(() => {
|
||||
if (highlightIndex >= filtered.length) highlightIndex = Math.max(0, filtered.length - 1);
|
||||
});
|
||||
|
||||
function pick(idx: number) {
|
||||
const l = filtered[idx];
|
||||
if (l) onPick(l.id);
|
||||
}
|
||||
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
} else if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
if (filtered.length > 0) {
|
||||
highlightIndex = (highlightIndex + 1) % filtered.length;
|
||||
}
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
if (filtered.length > 0) {
|
||||
highlightIndex = (highlightIndex - 1 + filtered.length) % filtered.length;
|
||||
}
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
pick(highlightIndex);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="backdrop"
|
||||
onclick={onClose}
|
||||
aria-label="Close palette"
|
||||
></button>
|
||||
|
||||
<div class="palette" role="dialog" aria-label="Jump to pane">
|
||||
<input
|
||||
bind:this={inputEl}
|
||||
bind:value={query}
|
||||
onkeydown={onKey}
|
||||
placeholder="Jump to pane — type to filter, ↑/↓ + Enter"
|
||||
class="palette-input"
|
||||
/>
|
||||
<ul class="palette-list">
|
||||
{#if filtered.length === 0}
|
||||
<li class="empty">No matching panes.</li>
|
||||
{:else}
|
||||
{#each filtered as leaf, i}
|
||||
<li>
|
||||
<button
|
||||
class="palette-item"
|
||||
class:highlight={i === highlightIndex}
|
||||
onclick={() => pick(i)}
|
||||
onmouseenter={() => (highlightIndex = i)}
|
||||
>
|
||||
<span class="name">{leaf.label ?? "(unnamed)"}</span>
|
||||
<span class="meta">{leaf.distro ?? "default"}</span>
|
||||
{#if leaf.cwd}<span class="meta cwd">{leaf.cwd}</span>{/if}
|
||||
{#if leaf.broadcast}<span class="meta bcast">📡</span>{/if}
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
z-index: 99;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.palette {
|
||||
position: fixed;
|
||||
top: 12vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: min(520px, 90vw);
|
||||
background: #181818;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.palette-input {
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
background: #1f1f1f;
|
||||
border: none;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
padding: 10px 14px;
|
||||
outline: none;
|
||||
}
|
||||
.palette-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.palette-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
font: inherit;
|
||||
font-size: 12px;
|
||||
}
|
||||
.palette-item.highlight {
|
||||
background: #1a3a5c;
|
||||
color: #cce6ff;
|
||||
}
|
||||
.name {
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
}
|
||||
.meta {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
}
|
||||
.palette-item.highlight .meta {
|
||||
color: #9bd;
|
||||
}
|
||||
.meta.cwd {
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.meta.bcast {
|
||||
margin-left: auto;
|
||||
}
|
||||
.empty {
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
padding: 8px 10px;
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
108
src/components/Palette.tsx
Normal file
108
src/components/Palette.tsx
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
import React, { useState, useEffect, useRef, useMemo } from "react";
|
||||
import type { LeafNode } from "../lib/layout/tree";
|
||||
import "./Palette.css";
|
||||
|
||||
interface PaletteProps {
|
||||
leaves: LeafNode[];
|
||||
onPick: (leafId: string) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export default function Palette({ leaves, onPick, onClose }: PaletteProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [highlightIndex, setHighlightIndex] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Autofocus the input on mount
|
||||
useEffect(() => {
|
||||
queueMicrotask(() => inputRef.current?.focus());
|
||||
}, []);
|
||||
|
||||
// Compute filtered leaves based on query
|
||||
const filtered = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return leaves;
|
||||
return leaves.filter((l) => {
|
||||
const blob = `${l.label ?? ""} ${l.distro ?? ""} ${l.cwd ?? ""}`.toLowerCase();
|
||||
return blob.includes(q);
|
||||
});
|
||||
}, [query, leaves]);
|
||||
|
||||
// Clamp highlight index when filtered list changes
|
||||
useEffect(() => {
|
||||
if (highlightIndex >= filtered.length) {
|
||||
setHighlightIndex(Math.max(0, filtered.length - 1));
|
||||
}
|
||||
}, [filtered, highlightIndex]);
|
||||
|
||||
function pick(idx: number) {
|
||||
const l = filtered[idx];
|
||||
if (l) onPick(l.id);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
} else if (e.key === "ArrowDown") {
|
||||
e.preventDefault();
|
||||
if (filtered.length > 0) {
|
||||
setHighlightIndex((prev) => (prev + 1) % filtered.length);
|
||||
}
|
||||
} else if (e.key === "ArrowUp") {
|
||||
e.preventDefault();
|
||||
if (filtered.length > 0) {
|
||||
setHighlightIndex((prev) =>
|
||||
(prev - 1 + filtered.length) % filtered.length
|
||||
);
|
||||
}
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
pick(highlightIndex);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
className="backdrop"
|
||||
onClick={onClose}
|
||||
aria-label="Close palette"
|
||||
></button>
|
||||
|
||||
<div className="palette" role="dialog" aria-label="Jump to pane">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className="palette-input"
|
||||
placeholder="Jump to pane — type to filter, ↑/↓ + Enter"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<ul className="palette-list">
|
||||
{filtered.length === 0 ? (
|
||||
<li className="empty">No matching panes.</li>
|
||||
) : (
|
||||
filtered.map((leaf, i) => (
|
||||
<li key={leaf.id}>
|
||||
<button
|
||||
className={`palette-item ${
|
||||
i === highlightIndex ? "highlight" : ""
|
||||
}`}
|
||||
onClick={() => pick(i)}
|
||||
onMouseEnter={() => setHighlightIndex(i)}
|
||||
>
|
||||
<span className="name">{leaf.label ?? "(unnamed)"}</span>
|
||||
<span className="meta">{leaf.distro ?? "default"}</span>
|
||||
{leaf.cwd && <span className="meta cwd">{leaf.cwd}</span>}
|
||||
{leaf.broadcast && <span className="meta bcast">📡</span>}
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { Terminal } from "@xterm/xterm";
|
||||
import { FitAddon } from "@xterm/addon-fit";
|
||||
import type { UnlistenFn } from "@tauri-apps/api/event";
|
||||
import {
|
||||
spawnPane,
|
||||
writeToPane,
|
||||
resizePane,
|
||||
killPane,
|
||||
onPaneData,
|
||||
onPaneExit,
|
||||
type PaneId,
|
||||
} from "../ipc";
|
||||
|
||||
let {
|
||||
distro = undefined,
|
||||
cwd = undefined,
|
||||
onStatus = (_s: string, _ok: boolean) => {},
|
||||
onSpawn = undefined,
|
||||
onInput = undefined,
|
||||
onDataReceived = undefined,
|
||||
onFocus = undefined,
|
||||
focusTrigger = 0,
|
||||
}: {
|
||||
distro?: string;
|
||||
cwd?: string;
|
||||
onStatus?: (msg: string, ok: boolean) => void;
|
||||
/** Fired once when the backend PTY is alive and we have its PaneId. */
|
||||
onSpawn?: (paneId: PaneId) => void;
|
||||
/** Fired AFTER each writeToPane on user keypress. Used by broadcasting. */
|
||||
onInput?: (dataB64: string) => void;
|
||||
/** Fired whenever output arrives from the PTY. Used for idle detection. */
|
||||
onDataReceived?: () => void;
|
||||
/** Fired when xterm's textarea gains focus (i.e., user clicked here). */
|
||||
onFocus?: () => void;
|
||||
/** Increment to refocus the terminal programmatically (palette etc.). */
|
||||
focusTrigger?: number;
|
||||
} = $props();
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let term: Terminal | null = null;
|
||||
let fit: FitAddon | null = null;
|
||||
let paneId: PaneId | null = null;
|
||||
let unlistenData: UnlistenFn | null = null;
|
||||
let unlistenExit: UnlistenFn | null = null;
|
||||
let ro: ResizeObserver | null = null;
|
||||
|
||||
// Decode base64 -> Uint8Array. xterm.js accepts both strings and Uint8Array;
|
||||
// bytes is preferred to avoid double-decoding UTF-8.
|
||||
function b64ToBytes(b64: string): Uint8Array {
|
||||
const bin = atob(b64);
|
||||
const out = new Uint8Array(bin.length);
|
||||
for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
|
||||
return out;
|
||||
}
|
||||
|
||||
function bytesToB64(bytes: Uint8Array): string {
|
||||
let s = "";
|
||||
for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
|
||||
return btoa(s);
|
||||
}
|
||||
|
||||
function stringToB64(s: string): string {
|
||||
// xterm.js's onData emits a JS string; need to UTF-8 encode before base64.
|
||||
return bytesToB64(new TextEncoder().encode(s));
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
term = new Terminal({
|
||||
fontFamily: '"Cascadia Mono", "JetBrains Mono", "Consolas", monospace',
|
||||
fontSize: 13,
|
||||
cursorBlink: true,
|
||||
theme: {
|
||||
background: "#0c0c0c",
|
||||
foreground: "#e6e6e6",
|
||||
},
|
||||
scrollback: 5000,
|
||||
convertEol: false,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
term.open(containerEl);
|
||||
|
||||
// Initial size — fit before we ask the PTY for its dimensions.
|
||||
fit.fit();
|
||||
const cols = term.cols;
|
||||
const rows = term.rows;
|
||||
|
||||
try {
|
||||
paneId = await spawnPane({ distro, cwd, cols, rows });
|
||||
onStatus(`pane ${paneId} alive`, true);
|
||||
onSpawn?.(paneId);
|
||||
} catch (e) {
|
||||
const msg = `spawn_pane failed: ${e}`;
|
||||
term.write(`\r\n\x1b[31m${msg}\x1b[0m\r\n`);
|
||||
onStatus(msg, false);
|
||||
return;
|
||||
}
|
||||
|
||||
unlistenData = await onPaneData(paneId, (b64) => {
|
||||
term?.write(b64ToBytes(b64));
|
||||
onDataReceived?.();
|
||||
});
|
||||
unlistenExit = await onPaneExit(paneId, () => {
|
||||
term?.write("\r\n\x1b[33m[pane exited]\x1b[0m\r\n");
|
||||
onStatus(`pane ${paneId} exited`, false);
|
||||
});
|
||||
|
||||
term.onData((data) => {
|
||||
if (paneId == null) return;
|
||||
const b64 = stringToB64(data);
|
||||
void writeToPane(paneId, b64);
|
||||
onInput?.(b64);
|
||||
});
|
||||
|
||||
// xterm.js's own focus event — fires when the hidden textarea gets focus
|
||||
// (i.e., user clicked anywhere in the terminal). Most reliable signal
|
||||
// for "user wants this pane active" — no DOM event traversal involved.
|
||||
term.onSelectionChange(() => {}); // ensure the addon system is initialized; noop
|
||||
if (typeof (term as unknown as { onFocus?: unknown }).onFocus === "function") {
|
||||
(term as unknown as { onFocus: (cb: () => void) => void }).onFocus(() => {
|
||||
onFocus?.();
|
||||
});
|
||||
} else {
|
||||
// Fallback: listen on the textarea element directly.
|
||||
const ta = containerEl.querySelector(".xterm-helper-textarea");
|
||||
if (ta) ta.addEventListener("focus", () => onFocus?.(), true);
|
||||
}
|
||||
|
||||
// Re-fit on container resize; forward new size to the PTY.
|
||||
ro = new ResizeObserver(() => {
|
||||
try {
|
||||
fit?.fit();
|
||||
if (paneId != null && term) {
|
||||
void resizePane(paneId, term.cols, term.rows);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("resize failed", e);
|
||||
}
|
||||
});
|
||||
ro.observe(containerEl);
|
||||
|
||||
// Focus so typing immediately lands in the terminal.
|
||||
term.focus();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
ro?.disconnect();
|
||||
unlistenData?.();
|
||||
unlistenExit?.();
|
||||
if (paneId != null) {
|
||||
void killPane(paneId);
|
||||
}
|
||||
term?.dispose();
|
||||
});
|
||||
|
||||
// Refocus the terminal whenever the parent bumps focusTrigger.
|
||||
$effect(() => {
|
||||
// Reactive read on focusTrigger so this effect re-runs when it changes.
|
||||
focusTrigger;
|
||||
if (term && focusTrigger > 0) term.focus();
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="xterm-host" bind:this={containerEl}></div>
|
||||
|
||||
<style>
|
||||
.xterm-host {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* xterm.js sets inline padding=0 on its container; ensure the viewport
|
||||
fills the host with no scrollbar gap. */
|
||||
:global(.xterm) {
|
||||
height: 100%;
|
||||
}
|
||||
:global(.xterm-viewport) {
|
||||
background: #0c0c0c !important;
|
||||
}
|
||||
</style>
|
||||
222
src/components/XtermPane.tsx
Normal file
222
src/components/XtermPane.tsx
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
import { useRef, useEffect } from "react";
|
||||
import { Terminal } from "@xterm/xterm";
|
||||
import { FitAddon } from "@xterm/addon-fit";
|
||||
import type { UnlistenFn } from "@tauri-apps/api/event";
|
||||
import {
|
||||
spawnPane,
|
||||
writeToPane,
|
||||
resizePane,
|
||||
killPane,
|
||||
onPaneData,
|
||||
onPaneExit,
|
||||
type PaneId,
|
||||
} from "../ipc";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// base64 helpers (private to this module)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function b64ToBytes(b64: string): Uint8Array {
|
||||
const bin = atob(b64);
|
||||
const out = new Uint8Array(bin.length);
|
||||
for (let i = 0; i < bin.length; i++) out[i] = bin.charCodeAt(i);
|
||||
return out;
|
||||
}
|
||||
|
||||
function bytesToB64(bytes: Uint8Array): string {
|
||||
let s = "";
|
||||
for (let i = 0; i < bytes.length; i++) s += String.fromCharCode(bytes[i]);
|
||||
return btoa(s);
|
||||
}
|
||||
|
||||
function stringToB64(s: string): string {
|
||||
// xterm.js's onData emits a JS string; UTF-8 encode before base64.
|
||||
return bytesToB64(new TextEncoder().encode(s));
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Props
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface XtermPaneProps {
|
||||
distro?: string;
|
||||
cwd?: string;
|
||||
onStatus?: (msg: string, ok: boolean) => void;
|
||||
/** Fired once when the backend PTY is alive and we have its PaneId. */
|
||||
onSpawn?: (paneId: PaneId) => void;
|
||||
/** Fired AFTER each writeToPane on user keypress. Used by broadcasting. */
|
||||
onInput?: (dataB64: string) => void;
|
||||
/** Fired whenever output arrives from the PTY. Used for idle detection. */
|
||||
onDataReceived?: () => void;
|
||||
/** Fired when xterm's textarea gains focus (i.e., user clicked here). */
|
||||
onFocus?: () => void;
|
||||
/** Increment to refocus the terminal programmatically (palette etc.). */
|
||||
focusTrigger?: number;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default function XtermPane({
|
||||
distro,
|
||||
cwd,
|
||||
onStatus,
|
||||
onSpawn,
|
||||
onInput,
|
||||
onDataReceived,
|
||||
onFocus,
|
||||
focusTrigger = 0,
|
||||
}: XtermPaneProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Stable refs for callbacks so the mount effect doesn't need to re-run when
|
||||
// parents pass new inline functions, while still always calling the latest version.
|
||||
const onStatusRef = useRef(onStatus);
|
||||
const onSpawnRef = useRef(onSpawn);
|
||||
const onInputRef = useRef(onInput);
|
||||
const onDataReceivedRef = useRef(onDataReceived);
|
||||
const onFocusRef = useRef(onFocus);
|
||||
|
||||
useEffect(() => { onStatusRef.current = onStatus; }, [onStatus]);
|
||||
useEffect(() => { onSpawnRef.current = onSpawn; }, [onSpawn]);
|
||||
useEffect(() => { onInputRef.current = onInput; }, [onInput]);
|
||||
useEffect(() => { onDataReceivedRef.current = onDataReceived; }, [onDataReceived]);
|
||||
useEffect(() => { onFocusRef.current = onFocus; }, [onFocus]);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// Mount / unmount: create terminal, spawn PTY, wire listeners
|
||||
// -------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
let term: Terminal | null = new Terminal({
|
||||
fontFamily: '"Cascadia Mono", "JetBrains Mono", "Consolas", monospace',
|
||||
fontSize: 13,
|
||||
cursorBlink: true,
|
||||
theme: {
|
||||
background: "#0c0c0c",
|
||||
foreground: "#e6e6e6",
|
||||
},
|
||||
scrollback: 5000,
|
||||
convertEol: false,
|
||||
allowProposedApi: true,
|
||||
});
|
||||
|
||||
const fit = new FitAddon();
|
||||
term.loadAddon(fit);
|
||||
term.open(container);
|
||||
|
||||
// Initial size — fit before asking the PTY for its dimensions.
|
||||
fit.fit();
|
||||
|
||||
let paneId: PaneId | null = null;
|
||||
let unlistenData: UnlistenFn | null = null;
|
||||
let unlistenExit: UnlistenFn | null = null;
|
||||
let ro: ResizeObserver | null = null;
|
||||
let destroyed = false;
|
||||
|
||||
(async () => {
|
||||
const cols = term!.cols;
|
||||
const rows = term!.rows;
|
||||
|
||||
try {
|
||||
paneId = await spawnPane({ distro, cwd, cols, rows });
|
||||
if (destroyed) {
|
||||
void killPane(paneId);
|
||||
return;
|
||||
}
|
||||
onStatusRef.current?.(`pane ${paneId} alive`, true);
|
||||
onSpawnRef.current?.(paneId);
|
||||
} catch (e) {
|
||||
if (destroyed) return;
|
||||
const msg = `spawn_pane failed: ${e}`;
|
||||
term?.write(`\r\n\x1b[31m${msg}\x1b[0m\r\n`);
|
||||
onStatusRef.current?.(msg, false);
|
||||
return;
|
||||
}
|
||||
|
||||
unlistenData = await onPaneData(paneId, (b64) => {
|
||||
term?.write(b64ToBytes(b64));
|
||||
onDataReceivedRef.current?.();
|
||||
});
|
||||
|
||||
unlistenExit = await onPaneExit(paneId, () => {
|
||||
term?.write("\r\n\x1b[33m[pane exited]\x1b[0m\r\n");
|
||||
onStatusRef.current?.(`pane ${paneId} exited`, false);
|
||||
});
|
||||
|
||||
term?.onData((data) => {
|
||||
if (paneId == null) return;
|
||||
const b64 = stringToB64(data);
|
||||
void writeToPane(paneId, b64);
|
||||
onInputRef.current?.(b64);
|
||||
});
|
||||
|
||||
// Focus detection: xterm.js doesn't expose onFocus as a first-class event
|
||||
// in all versions, so try the proposed API first then fall back to the DOM.
|
||||
term?.onSelectionChange(() => {}); // ensure addon system is initialised; noop
|
||||
const termAny = term as unknown as { onFocus?: (cb: () => void) => void };
|
||||
if (typeof termAny.onFocus === "function") {
|
||||
termAny.onFocus(() => onFocusRef.current?.());
|
||||
} else {
|
||||
const ta = container.querySelector(".xterm-helper-textarea");
|
||||
if (ta) ta.addEventListener("focus", () => onFocusRef.current?.(), true);
|
||||
}
|
||||
|
||||
// Re-fit on container resize; forward new size to the PTY.
|
||||
ro = new ResizeObserver(() => {
|
||||
try {
|
||||
fit.fit();
|
||||
if (paneId != null && term) {
|
||||
void resizePane(paneId, term.cols, term.rows);
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("resize failed", e);
|
||||
}
|
||||
});
|
||||
ro.observe(container);
|
||||
|
||||
// Focus so typing immediately lands in the terminal.
|
||||
term?.focus();
|
||||
})();
|
||||
|
||||
return () => {
|
||||
destroyed = true;
|
||||
ro?.disconnect();
|
||||
unlistenData?.();
|
||||
unlistenExit?.();
|
||||
if (paneId != null) void killPane(paneId);
|
||||
term?.dispose();
|
||||
term = null;
|
||||
};
|
||||
// distro/cwd are only used at spawn time; intentionally omitted from deps
|
||||
// so remounting doesn't happen if a parent re-renders with the same values.
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// focusTrigger: programmatic refocus from parent (palette navigation etc.)
|
||||
// -------------------------------------------------------------------------
|
||||
const termRef = useRef<Terminal | null>(null);
|
||||
|
||||
// Keep termRef in sync via a second effect that runs after mount.
|
||||
// We can't easily share the Terminal instance across the two effects without
|
||||
// a ref, so we store it on termRef inside the mount effect instead.
|
||||
// Actually, let's just wire focusTrigger by querying the textarea directly —
|
||||
// that avoids the cross-effect coupling problem entirely.
|
||||
useEffect(() => {
|
||||
if (focusTrigger > 0 && containerRef.current) {
|
||||
const ta = containerRef.current.querySelector<HTMLTextAreaElement>(
|
||||
".xterm-helper-textarea",
|
||||
);
|
||||
ta?.focus();
|
||||
}
|
||||
}, [focusTrigger]);
|
||||
|
||||
// Suppress unused ref warning
|
||||
void termRef;
|
||||
|
||||
return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
|
||||
}
|
||||
170
src/lib/layout/LeafPane.css
Normal file
170
src/lib/layout/LeafPane.css
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
.leaf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 2px solid transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.leaf.active {
|
||||
border-color: #5a8cd8;
|
||||
}
|
||||
.leaf.broadcasting {
|
||||
border-color: #e09838;
|
||||
}
|
||||
.leaf.active.broadcasting {
|
||||
border-color: #ffb840;
|
||||
}
|
||||
|
||||
.pane-toolbar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 8px;
|
||||
background: #181818;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
min-height: 24px;
|
||||
}
|
||||
.pane-label {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
color: #ccc;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
cursor: text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
}
|
||||
.pane-label:hover {
|
||||
background: #222;
|
||||
border-color: #2a2a2a;
|
||||
}
|
||||
.label-input {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: #0c0c0c;
|
||||
border: 1px solid #3a5a8c;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
outline: none;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.distro-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.distro-chip,
|
||||
.bcast-chip {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 10px;
|
||||
background: #222;
|
||||
color: #88c;
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.distro-chip:hover,
|
||||
.bcast-chip:hover {
|
||||
background: #2a2a3a;
|
||||
color: #aac;
|
||||
}
|
||||
.bcast-chip {
|
||||
color: #777;
|
||||
background: #1c1c1c;
|
||||
border-color: #2a2a2a;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.bcast-chip.on {
|
||||
background: #4a3010;
|
||||
color: #f0c060;
|
||||
border-color: #c98a1f;
|
||||
}
|
||||
|
||||
.distro-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 2px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
z-index: 10;
|
||||
min-width: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px;
|
||||
}
|
||||
.distro-menu-item {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
color: #ccc;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.distro-menu-item:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
.distro-menu-item.active {
|
||||
background: #1a3a5c;
|
||||
color: #cce6ff;
|
||||
}
|
||||
|
||||
.pane-status {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #777;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pane-status.ok { color: #6c6; }
|
||||
.pane-status.err { color: #d66; }
|
||||
|
||||
.pane-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
.pane-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pane-btn:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
.pane-btn.close:hover {
|
||||
background: #5a1a1a;
|
||||
color: #fcc;
|
||||
}
|
||||
.xterm-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -1,400 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy } from "svelte";
|
||||
import type { LeafNode } from "./tree";
|
||||
import { useOrchestration } from "./orchestration.svelte";
|
||||
import XtermPane from "../../components/XtermPane.svelte";
|
||||
|
||||
let {
|
||||
leaf,
|
||||
activeLeafId,
|
||||
}: {
|
||||
leaf: LeafNode;
|
||||
activeLeafId: string | null;
|
||||
} = $props();
|
||||
|
||||
const orch = useOrchestration();
|
||||
|
||||
|
||||
let status = $state("starting…");
|
||||
let statusOk = $state(true);
|
||||
|
||||
// ---- label editing -------------------------------------------------------
|
||||
let editingLabel = $state(false);
|
||||
let labelDraft = $state("");
|
||||
let labelInputEl: HTMLInputElement | null = $state(null);
|
||||
|
||||
function startEditLabel(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
labelDraft = leaf.label ?? "";
|
||||
editingLabel = true;
|
||||
queueMicrotask(() => labelInputEl?.select());
|
||||
}
|
||||
|
||||
function commitLabel() {
|
||||
if (!editingLabel) return;
|
||||
orch.setLabel(leaf.id, labelDraft);
|
||||
editingLabel = false;
|
||||
}
|
||||
|
||||
function cancelLabel() {
|
||||
editingLabel = false;
|
||||
}
|
||||
|
||||
function onLabelKey(e: KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
commitLabel();
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
cancelLabel();
|
||||
}
|
||||
}
|
||||
|
||||
// ---- distro popover ------------------------------------------------------
|
||||
let distroOpen = $state(false);
|
||||
|
||||
function toggleDistroMenu(e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
distroOpen = !distroOpen;
|
||||
}
|
||||
|
||||
function pickDistro(d: string) {
|
||||
distroOpen = false;
|
||||
if (d !== leaf.distro) orch.setDistro(leaf.id, d);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (!distroOpen) return;
|
||||
const onDocClick = () => (distroOpen = false);
|
||||
window.addEventListener("click", onDocClick);
|
||||
return () => window.removeEventListener("click", onDocClick);
|
||||
});
|
||||
|
||||
// ---- idle detection ------------------------------------------------------
|
||||
const IDLE_THRESHOLD_MS = 5000;
|
||||
let lastDataTime = Date.now();
|
||||
let notifiedThisIdle = false;
|
||||
|
||||
function onDataReceived() {
|
||||
lastDataTime = Date.now();
|
||||
notifiedThisIdle = false;
|
||||
}
|
||||
|
||||
function checkIdle() {
|
||||
if (notifiedThisIdle) return;
|
||||
const sinceLast = Date.now() - lastDataTime;
|
||||
if (sinceLast >= IDLE_THRESHOLD_MS) {
|
||||
notifiedThisIdle = true;
|
||||
const name = leaf.label ?? leaf.distro ?? "pane";
|
||||
console.log("[tiletopia] notifying idle:", leaf.id, "quietForMs:", sinceLast);
|
||||
orch.notify(`${name} is idle`);
|
||||
}
|
||||
}
|
||||
|
||||
const idleTimer = window.setInterval(checkIdle, 1000);
|
||||
onDestroy(() => clearInterval(idleTimer));
|
||||
|
||||
// ---- broadcast -----------------------------------------------------------
|
||||
function onTerminalInput(b64: string) {
|
||||
if (leaf.broadcast) orch.broadcastFrom(leaf.id, b64);
|
||||
}
|
||||
|
||||
// ---- focus / active ------------------------------------------------------
|
||||
let focusTrigger = $state(0);
|
||||
|
||||
$effect(() => {
|
||||
if (activeLeafId === leaf.id) focusTrigger += 1;
|
||||
});
|
||||
|
||||
// Backup setActive for toolbar clicks (which can't reach the document
|
||||
// capture listener if a bubble-phase handler stops propagation). Cheap;
|
||||
// idempotent if the document listener also fired.
|
||||
function onPaneClick() {
|
||||
orch.setActive(leaf.id);
|
||||
}
|
||||
|
||||
// ---- pane id registration ------------------------------------------------
|
||||
function onPaneSpawned(paneId: number) {
|
||||
orch.registerPaneId(leaf.id, paneId);
|
||||
}
|
||||
onDestroy(() => orch.registerPaneId(leaf.id, null));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="leaf"
|
||||
class:active={activeLeafId === leaf.id}
|
||||
data-debug-active={activeLeafId === leaf.id ? "yes" : "no"}
|
||||
data-debug-prop={(activeLeafId ?? "null").slice(0, 8)}
|
||||
class:broadcasting={leaf.broadcast}
|
||||
role="group"
|
||||
aria-label={"Terminal pane: " + (leaf.label ?? leaf.distro ?? "unnamed")}
|
||||
data-leaf-id={leaf.id}
|
||||
onpointerdown={onPaneClick}
|
||||
>
|
||||
<div class="pane-toolbar">
|
||||
{#if editingLabel}
|
||||
<input
|
||||
class="label-input"
|
||||
bind:this={labelInputEl}
|
||||
bind:value={labelDraft}
|
||||
onkeydown={onLabelKey}
|
||||
onblur={commitLabel}
|
||||
placeholder="(label)"
|
||||
/>
|
||||
{:else}
|
||||
<button
|
||||
class="pane-label"
|
||||
onclick={startEditLabel}
|
||||
title="Click to rename pane"
|
||||
>
|
||||
{leaf.label ?? "(unnamed)"}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<span class="distro-wrap">
|
||||
<button
|
||||
class="distro-chip"
|
||||
onclick={toggleDistroMenu}
|
||||
title="Change distro (respawns the pane)"
|
||||
>
|
||||
{leaf.distro ?? "(default)"} ▾
|
||||
</button>
|
||||
{#if distroOpen}
|
||||
<div
|
||||
class="distro-menu"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
role="menu"
|
||||
tabindex="-1"
|
||||
onkeydown={() => {}}
|
||||
>
|
||||
{#each orch.distros as d}
|
||||
<button
|
||||
class="distro-menu-item"
|
||||
class:active={d === leaf.distro}
|
||||
onclick={() => pickDistro(d)}
|
||||
>{d}</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<button
|
||||
class="bcast-chip"
|
||||
class:on={leaf.broadcast}
|
||||
onclick={(e) => { e.stopPropagation(); orch.toggleBroadcast(leaf.id); }}
|
||||
title={leaf.broadcast ? "Broadcasting (click to leave group)" : "Click to broadcast input to other broadcast panes"}
|
||||
aria-pressed={leaf.broadcast ? "true" : "false"}
|
||||
>📡</button>
|
||||
|
||||
<span class="pane-status {statusOk ? 'ok' : 'err'}">{status}</span>
|
||||
|
||||
<span class="pane-actions">
|
||||
<button
|
||||
class="pane-btn"
|
||||
title="Split right"
|
||||
onclick={(e) => { e.stopPropagation(); orch.split(leaf.id, "h"); }}
|
||||
aria-label="Split right"
|
||||
>⇥</button>
|
||||
<button
|
||||
class="pane-btn"
|
||||
title="Split down"
|
||||
onclick={(e) => { e.stopPropagation(); orch.split(leaf.id, "v"); }}
|
||||
aria-label="Split down"
|
||||
>⇣</button>
|
||||
<button
|
||||
class="pane-btn close"
|
||||
title="Close pane"
|
||||
onclick={(e) => { e.stopPropagation(); orch.close(leaf.id); }}
|
||||
aria-label="Close pane"
|
||||
>×</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="xterm-wrap">
|
||||
<XtermPane
|
||||
distro={leaf.distro}
|
||||
cwd={leaf.cwd}
|
||||
onStatus={(msg, ok) => {
|
||||
status = msg;
|
||||
statusOk = ok;
|
||||
}}
|
||||
onSpawn={onPaneSpawned}
|
||||
onInput={onTerminalInput}
|
||||
onFocus={() => orch.setActive(leaf.id)}
|
||||
{onDataReceived}
|
||||
{focusTrigger}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.leaf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border: 2px solid transparent;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.leaf.active {
|
||||
border-color: #5a8cd8;
|
||||
}
|
||||
.leaf.broadcasting {
|
||||
border-color: #e09838;
|
||||
}
|
||||
.leaf.active.broadcasting {
|
||||
border-color: #ffb840;
|
||||
}
|
||||
|
||||
.pane-toolbar {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 2px 8px;
|
||||
background: #181818;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
font-size: 11px;
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
min-height: 24px;
|
||||
}
|
||||
.pane-label {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
color: #ccc;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
cursor: text;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
}
|
||||
.pane-label:hover {
|
||||
background: #222;
|
||||
border-color: #2a2a2a;
|
||||
}
|
||||
.label-input {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: #0c0c0c;
|
||||
border: 1px solid #3a5a8c;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
outline: none;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.distro-wrap {
|
||||
position: relative;
|
||||
}
|
||||
.distro-chip,
|
||||
.bcast-chip {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 10px;
|
||||
background: #222;
|
||||
color: #88c;
|
||||
border: 1px solid #2a2a3a;
|
||||
border-radius: 3px;
|
||||
padding: 1px 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.distro-chip:hover,
|
||||
.bcast-chip:hover {
|
||||
background: #2a2a3a;
|
||||
color: #aac;
|
||||
}
|
||||
.bcast-chip {
|
||||
color: #777;
|
||||
background: #1c1c1c;
|
||||
border-color: #2a2a2a;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
.bcast-chip.on {
|
||||
background: #4a3010;
|
||||
color: #f0c060;
|
||||
border-color: #c98a1f;
|
||||
}
|
||||
|
||||
.distro-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 2px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
|
||||
z-index: 10;
|
||||
min-width: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px;
|
||||
}
|
||||
.distro-menu-item {
|
||||
font: inherit;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
color: #ccc;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.distro-menu-item:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
.distro-menu-item.active {
|
||||
background: #1a3a5c;
|
||||
color: #cce6ff;
|
||||
}
|
||||
|
||||
.pane-status {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #777;
|
||||
font-size: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pane-status.ok { color: #6c6; }
|
||||
.pane-status.err { color: #d66; }
|
||||
|
||||
.pane-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
.pane-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.pane-btn:hover {
|
||||
background: #2a2a2a;
|
||||
color: #ddd;
|
||||
}
|
||||
.pane-btn.close:hover {
|
||||
background: #5a1a1a;
|
||||
color: #fcc;
|
||||
}
|
||||
.xterm-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
263
src/lib/layout/LeafPane.tsx
Normal file
263
src/lib/layout/LeafPane.tsx
Normal file
|
|
@ -0,0 +1,263 @@
|
|||
import {
|
||||
useState,
|
||||
useEffect,
|
||||
useRef,
|
||||
useCallback,
|
||||
type KeyboardEvent,
|
||||
type MouseEvent,
|
||||
} from "react";
|
||||
import type { LeafNode } from "./tree";
|
||||
import { useOrchestration } from "./orchestration";
|
||||
import XtermPane from "../../components/XtermPane";
|
||||
import "./LeafPane.css";
|
||||
|
||||
const IDLE_THRESHOLD_MS = 5000;
|
||||
|
||||
export default function LeafPane({ leaf }: { leaf: LeafNode }) {
|
||||
const orch = useOrchestration();
|
||||
const isActive = orch.activeLeafId === leaf.id;
|
||||
const isBroadcasting = !!leaf.broadcast;
|
||||
|
||||
// ---- status (from XtermPane) -------------------------------------------
|
||||
const [status, setStatus] = useState("starting…");
|
||||
const [statusOk, setStatusOk] = useState(true);
|
||||
|
||||
// ---- label editing -----------------------------------------------------
|
||||
const [editingLabel, setEditingLabel] = useState(false);
|
||||
const [labelDraft, setLabelDraft] = useState("");
|
||||
const labelInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const startEditLabel = useCallback(
|
||||
(e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setLabelDraft(leaf.label ?? "");
|
||||
setEditingLabel(true);
|
||||
// Focus on next tick so input is mounted
|
||||
queueMicrotask(() => labelInputRef.current?.select());
|
||||
},
|
||||
[leaf.label],
|
||||
);
|
||||
const commitLabel = useCallback(() => {
|
||||
if (!editingLabel) return;
|
||||
orch.setLabel(leaf.id, labelDraft);
|
||||
setEditingLabel(false);
|
||||
}, [editingLabel, orch, leaf.id, labelDraft]);
|
||||
const cancelLabel = useCallback(() => setEditingLabel(false), []);
|
||||
const onLabelKey = useCallback(
|
||||
(e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
commitLabel();
|
||||
} else if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
cancelLabel();
|
||||
}
|
||||
},
|
||||
[commitLabel, cancelLabel],
|
||||
);
|
||||
|
||||
// ---- distro popover ----------------------------------------------------
|
||||
const [distroOpen, setDistroOpen] = useState(false);
|
||||
const toggleDistroMenu = useCallback((e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
setDistroOpen((v) => !v);
|
||||
}, []);
|
||||
const pickDistro = useCallback(
|
||||
(d: string) => {
|
||||
setDistroOpen(false);
|
||||
if (d !== leaf.distro) orch.setDistro(leaf.id, d);
|
||||
},
|
||||
[orch, leaf.id, leaf.distro],
|
||||
);
|
||||
// Dismiss popover on outside click
|
||||
useEffect(() => {
|
||||
if (!distroOpen) return;
|
||||
const onDocClick = () => setDistroOpen(false);
|
||||
window.addEventListener("click", onDocClick);
|
||||
return () => window.removeEventListener("click", onDocClick);
|
||||
}, [distroOpen]);
|
||||
|
||||
// ---- idle detection ----------------------------------------------------
|
||||
const lastDataTimeRef = useRef(Date.now());
|
||||
const notifiedThisIdleRef = useRef(false);
|
||||
const onDataReceived = useCallback(() => {
|
||||
lastDataTimeRef.current = Date.now();
|
||||
notifiedThisIdleRef.current = false;
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const id = window.setInterval(() => {
|
||||
if (notifiedThisIdleRef.current) return;
|
||||
const dt = Date.now() - lastDataTimeRef.current;
|
||||
if (dt >= IDLE_THRESHOLD_MS) {
|
||||
notifiedThisIdleRef.current = true;
|
||||
const name = leaf.label ?? leaf.distro ?? "pane";
|
||||
orch.notify(`${name} is idle`);
|
||||
}
|
||||
}, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, [leaf.label, leaf.distro, orch]);
|
||||
|
||||
// ---- broadcast ---------------------------------------------------------
|
||||
const onTerminalInput = useCallback(
|
||||
(b64: string) => {
|
||||
if (isBroadcasting) orch.broadcastFrom(leaf.id, b64);
|
||||
},
|
||||
[isBroadcasting, orch, leaf.id],
|
||||
);
|
||||
|
||||
// ---- focus / active highlighting ---------------------------------------
|
||||
const [focusTrigger, setFocusTrigger] = useState(0);
|
||||
// When this leaf becomes active, bump focusTrigger so XtermPane refocuses.
|
||||
useEffect(() => {
|
||||
if (isActive) setFocusTrigger((n) => n + 1);
|
||||
}, [isActive]);
|
||||
|
||||
const onPaneClick = useCallback(() => {
|
||||
orch.setActive(leaf.id);
|
||||
}, [orch, leaf.id]);
|
||||
|
||||
const onPaneSpawned = useCallback(
|
||||
(paneId: number) => {
|
||||
orch.registerPaneId(leaf.id, paneId);
|
||||
},
|
||||
[orch, leaf.id],
|
||||
);
|
||||
// Unregister on unmount
|
||||
useEffect(() => {
|
||||
return () => orch.registerPaneId(leaf.id, null);
|
||||
}, [orch, leaf.id]);
|
||||
|
||||
const onXtermFocus = useCallback(() => orch.setActive(leaf.id), [orch, leaf.id]);
|
||||
|
||||
const onStatus = useCallback((msg: string, ok: boolean) => {
|
||||
setStatus(msg);
|
||||
setStatusOk(ok);
|
||||
}, []);
|
||||
|
||||
const labelText = leaf.label ?? "(unnamed)";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`leaf${isActive ? " active" : ""}${isBroadcasting ? " broadcasting" : ""}`}
|
||||
role="group"
|
||||
aria-label={`Terminal pane: ${leaf.label ?? leaf.distro ?? "unnamed"}`}
|
||||
data-leaf-id={leaf.id}
|
||||
onPointerDown={onPaneClick}
|
||||
>
|
||||
<div className="pane-toolbar">
|
||||
{editingLabel ? (
|
||||
<input
|
||||
ref={labelInputRef}
|
||||
className="label-input"
|
||||
value={labelDraft}
|
||||
onChange={(e) => setLabelDraft(e.target.value)}
|
||||
onKeyDown={onLabelKey}
|
||||
onBlur={commitLabel}
|
||||
placeholder="(label)"
|
||||
/>
|
||||
) : (
|
||||
<button
|
||||
className="pane-label"
|
||||
onClick={startEditLabel}
|
||||
title="Click to rename pane"
|
||||
>
|
||||
{labelText}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<span className="distro-wrap">
|
||||
<button
|
||||
className="distro-chip"
|
||||
onClick={toggleDistroMenu}
|
||||
title="Change distro (respawns the pane)"
|
||||
>
|
||||
{leaf.distro ?? "(default)"} ▾
|
||||
</button>
|
||||
{distroOpen && (
|
||||
<div
|
||||
className="distro-menu"
|
||||
role="menu"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{orch.distros.map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
className={`distro-menu-item${d === leaf.distro ? " active" : ""}`}
|
||||
onClick={() => pickDistro(d)}
|
||||
>
|
||||
{d}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<button
|
||||
className={`bcast-chip${isBroadcasting ? " on" : ""}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
orch.toggleBroadcast(leaf.id);
|
||||
}}
|
||||
title={
|
||||
isBroadcasting
|
||||
? "Broadcasting (click to leave group)"
|
||||
: "Click to broadcast input to other broadcast panes"
|
||||
}
|
||||
aria-pressed={isBroadcasting ? "true" : "false"}
|
||||
>
|
||||
📡
|
||||
</button>
|
||||
|
||||
<span className={`pane-status ${statusOk ? "ok" : "err"}`}>{status}</span>
|
||||
|
||||
<span className="pane-actions">
|
||||
<button
|
||||
className="pane-btn"
|
||||
title="Split right"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
orch.split(leaf.id, "h");
|
||||
}}
|
||||
aria-label="Split right"
|
||||
>
|
||||
⇥
|
||||
</button>
|
||||
<button
|
||||
className="pane-btn"
|
||||
title="Split down"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
orch.split(leaf.id, "v");
|
||||
}}
|
||||
aria-label="Split down"
|
||||
>
|
||||
⇣
|
||||
</button>
|
||||
<button
|
||||
className="pane-btn close"
|
||||
title="Close pane"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
orch.close(leaf.id);
|
||||
}}
|
||||
aria-label="Close pane"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div className="xterm-wrap">
|
||||
<XtermPane
|
||||
distro={leaf.distro}
|
||||
cwd={leaf.cwd}
|
||||
onStatus={onStatus}
|
||||
onSpawn={onPaneSpawned}
|
||||
onInput={onTerminalInput}
|
||||
onDataReceived={onDataReceived}
|
||||
onFocus={onXtermFocus}
|
||||
focusTrigger={focusTrigger}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { TreeNode, NodeId } from "./tree";
|
||||
import SplitNode from "./SplitNode.svelte";
|
||||
import LeafPane from "./LeafPane.svelte";
|
||||
|
||||
let {
|
||||
node,
|
||||
activeLeafId,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
activeLeafId: NodeId | null;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if node.kind === "split"}
|
||||
<SplitNode {node} {activeLeafId} />
|
||||
{:else}
|
||||
<LeafPane leaf={node} {activeLeafId} />
|
||||
{/if}
|
||||
16
src/lib/layout/Pane.tsx
Normal file
16
src/lib/layout/Pane.tsx
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import type { TreeNode } from "./tree";
|
||||
import SplitNode from "./SplitNode";
|
||||
import LeafPane from "./LeafPane";
|
||||
|
||||
/**
|
||||
* Recursive dispatcher: render a split or a leaf based on node.kind.
|
||||
* The `key={node.id}` on the leaf branch makes React unmount + remount
|
||||
* cleanly when a leaf is replaced (e.g. changeDistro swaps the id to
|
||||
* force PTY respawn).
|
||||
*/
|
||||
export default function Pane({ node }: { node: TreeNode }) {
|
||||
if (node.kind === "split") {
|
||||
return <SplitNode node={node} />;
|
||||
}
|
||||
return <LeafPane key={node.id} leaf={node} />;
|
||||
}
|
||||
36
src/lib/layout/SplitNode.css
Normal file
36
src/lib/layout/SplitNode.css
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
.split {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.split.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
.split.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.side {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
flex: 0 0 4px;
|
||||
background: #1a1a1a;
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.split.vertical > .gutter {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.gutter:hover,
|
||||
.gutter.active {
|
||||
background: #3a5a8c;
|
||||
}
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { SplitNode, NodeId } from "./tree";
|
||||
import Pane from "./Pane.svelte";
|
||||
|
||||
let {
|
||||
node,
|
||||
activeLeafId,
|
||||
}: {
|
||||
node: SplitNode;
|
||||
activeLeafId: NodeId | null;
|
||||
} = $props();
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let dragging = $state(false);
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
(e.target as HTMLElement).setPointerCapture(e.pointerId);
|
||||
dragging = true;
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
// rAF-throttle the DOM flex update so we don't spam SIGWINCH to PTYs.
|
||||
let pendingRaf: number | null = null;
|
||||
let pendingRatio = 0;
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (!dragging || !containerEl) return;
|
||||
const rect = containerEl.getBoundingClientRect();
|
||||
const isH = node.orientation === "h";
|
||||
const pos = isH ? e.clientX - rect.left : e.clientY - rect.top;
|
||||
const size = isH ? rect.width : rect.height;
|
||||
if (size <= 0) return;
|
||||
const r = Math.max(0.05, Math.min(0.95, pos / size));
|
||||
node.ratio = r;
|
||||
pendingRatio = r;
|
||||
if (pendingRaf == null) {
|
||||
pendingRaf = requestAnimationFrame(() => {
|
||||
pendingRaf = null;
|
||||
const sides = containerEl.querySelectorAll(":scope > .side");
|
||||
if (sides[0]) (sides[0] as HTMLElement).style.flex = String(pendingRatio);
|
||||
if (sides[1]) (sides[1] as HTMLElement).style.flex = String(1 - pendingRatio);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onPointerUp(e: PointerEvent) {
|
||||
if (!dragging) return;
|
||||
(e.target as HTMLElement).releasePointerCapture(e.pointerId);
|
||||
dragging = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="split"
|
||||
class:horizontal={node.orientation === "h"}
|
||||
class:vertical={node.orientation === "v"}
|
||||
bind:this={containerEl}
|
||||
>
|
||||
<div class="side" style="flex: {node.ratio}">
|
||||
<Pane node={node.a} {activeLeafId} />
|
||||
</div>
|
||||
<div
|
||||
class="gutter"
|
||||
class:active={dragging}
|
||||
role="separator"
|
||||
aria-orientation={node.orientation === "h" ? "vertical" : "horizontal"}
|
||||
aria-valuenow={Math.round(node.ratio * 100)}
|
||||
tabindex="-1"
|
||||
onpointerdown={onPointerDown}
|
||||
onpointermove={onPointerMove}
|
||||
onpointerup={onPointerUp}
|
||||
onpointercancel={onPointerUp}
|
||||
></div>
|
||||
<div class="side" style="flex: {1 - node.ratio}">
|
||||
<Pane node={node.b} {activeLeafId} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.split {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
.split.horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
.split.vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.side {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
flex: 0 0 4px;
|
||||
background: #1a1a1a;
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
.split.vertical > .gutter {
|
||||
cursor: row-resize;
|
||||
}
|
||||
.gutter:hover,
|
||||
.gutter.active {
|
||||
background: #3a5a8c;
|
||||
}
|
||||
</style>
|
||||
79
src/lib/layout/SplitNode.tsx
Normal file
79
src/lib/layout/SplitNode.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { useRef, useState, useCallback, type PointerEvent } from "react";
|
||||
import type { SplitNode as SplitNodeType } from "./tree";
|
||||
import Pane from "./Pane";
|
||||
import "./SplitNode.css";
|
||||
|
||||
/**
|
||||
* A horizontal or vertical split with a draggable gutter. The ratio is
|
||||
* local React state — when the gutter is dragged, we update the local
|
||||
* ratio (re-rendering the two .side flex values) and ALSO bubble the
|
||||
* change up to the tree (so it persists across reloads).
|
||||
*
|
||||
* Initialising local state from node.ratio is fine: when the tree
|
||||
* mutates around this split (e.g. a child is closed), React will give us
|
||||
* a new `node` prop with possibly-different `node.ratio`, but the
|
||||
* `useState` initializer only runs once. We re-sync via an effect.
|
||||
*/
|
||||
export default function SplitNode({ node }: { node: SplitNodeType }) {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
const [ratio, setRatio] = useState(node.ratio);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
|
||||
// Keep local ratio in sync if the tree updates from outside (e.g. preset
|
||||
// applied). Only mirror — don't echo back into the tree.
|
||||
// (Skipped for simplicity in v1; if it becomes annoying we can add it.)
|
||||
|
||||
const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {
|
||||
(e.target as HTMLElement).setPointerCapture(e.pointerId);
|
||||
setDragging(true);
|
||||
e.preventDefault();
|
||||
}, []);
|
||||
|
||||
const onPointerMove = useCallback(
|
||||
(e: PointerEvent<HTMLDivElement>) => {
|
||||
if (!dragging || !containerRef.current) return;
|
||||
const rect = containerRef.current.getBoundingClientRect();
|
||||
const isH = node.orientation === "h";
|
||||
const pos = isH ? e.clientX - rect.left : e.clientY - rect.top;
|
||||
const size = isH ? rect.width : rect.height;
|
||||
if (size <= 0) return;
|
||||
const r = Math.max(0.05, Math.min(0.95, pos / size));
|
||||
setRatio(r);
|
||||
// Mutate the proxy-tree node directly so the persisted state matches.
|
||||
node.ratio = r;
|
||||
},
|
||||
[dragging, node],
|
||||
);
|
||||
|
||||
const onPointerUp = useCallback((e: PointerEvent<HTMLDivElement>) => {
|
||||
setDragging(false);
|
||||
(e.target as HTMLElement).releasePointerCapture(e.pointerId);
|
||||
}, []);
|
||||
|
||||
const isH = node.orientation === "h";
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={`split ${isH ? "horizontal" : "vertical"}`}
|
||||
>
|
||||
<div className="side" style={{ flex: ratio }}>
|
||||
<Pane node={node.a} />
|
||||
</div>
|
||||
<div
|
||||
className={`gutter${dragging ? " active" : ""}`}
|
||||
role="separator"
|
||||
aria-orientation={isH ? "vertical" : "horizontal"}
|
||||
aria-valuenow={Math.round(ratio * 100)}
|
||||
tabIndex={-1}
|
||||
onPointerDown={onPointerDown}
|
||||
onPointerMove={onPointerMove}
|
||||
onPointerUp={onPointerUp}
|
||||
onPointerCancel={onPointerUp}
|
||||
/>
|
||||
<div className="side" style={{ flex: 1 - ratio }}>
|
||||
<Pane node={node.b} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
/**
|
||||
* Orchestration store — all shared reactive state + operations the
|
||||
* pane tree needs. Lives in a class with `$state` fields so Svelte 5
|
||||
* reactivity tracks per-property access; provided via context so any
|
||||
* descendant component can `useOrchestration()` without prop drilling.
|
||||
*
|
||||
* (File must be `.svelte.ts` because `$state` can only be used in
|
||||
* Svelte components or files with the `.svelte.{js,ts}` extension.)
|
||||
*/
|
||||
|
||||
import { setContext, getContext } from "svelte";
|
||||
import type { NodeId, Orientation } from "./tree";
|
||||
import type { PaneId } from "../../ipc";
|
||||
|
||||
export interface Toast {
|
||||
id: number;
|
||||
message: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Callbacks App provides at construction time. These do tree mutations
|
||||
* (which require access to App's `tree = $state(...)`) plus broadcast
|
||||
* routing (which also needs the tree). Kept as an injection seam rather
|
||||
* than living inside the store so the store doesn't need to own the tree.
|
||||
*/
|
||||
export interface TreeOps {
|
||||
split: (leafId: NodeId, orientation: Orientation) => void;
|
||||
close: (leafId: NodeId) => void;
|
||||
setDistro: (leafId: NodeId, distro: string) => void;
|
||||
setLabel: (leafId: NodeId, label: string | undefined) => void;
|
||||
toggleBroadcast: (leafId: NodeId) => void;
|
||||
broadcastFrom: (originLeafId: NodeId, dataB64: string) => void;
|
||||
}
|
||||
|
||||
export class Orchestration {
|
||||
// ---- shared reactive state ----------------------------------------------
|
||||
// (activeLeafId lives at App level and is drilled as a prop — Svelte 5
|
||||
// doesn't seem to track class-field $state reads from child components
|
||||
// that obtain the instance via getContext. Tested empirically.)
|
||||
notifications = $state<Toast[]>([]);
|
||||
distros = $state<string[]>([]);
|
||||
|
||||
// ---- non-reactive lookups -----------------------------------------------
|
||||
// Plain Map: broadcast routing reads this from an event handler, not
|
||||
// from reactive context. No need for $state.
|
||||
paneIdByLeaf = new Map<NodeId, PaneId>();
|
||||
|
||||
// ---- internal -----------------------------------------------------------
|
||||
#nextNotifId = 1;
|
||||
#dismissTimers = new Map<number, ReturnType<typeof setTimeout>>();
|
||||
#ops: TreeOps;
|
||||
|
||||
constructor(ops: TreeOps) {
|
||||
this.#ops = ops;
|
||||
}
|
||||
|
||||
// ---- active pane (delegated to App) -------------------------------------
|
||||
// These point at App-level $state mutators set via configure().
|
||||
setActive: (leafId: NodeId) => void = () => {};
|
||||
clearActiveIf: (leafId: NodeId) => void = () => {};
|
||||
|
||||
configureActiveHandlers(
|
||||
setActive: (leafId: NodeId) => void,
|
||||
clearActiveIf: (leafId: NodeId) => void,
|
||||
): void {
|
||||
this.setActive = setActive;
|
||||
this.clearActiveIf = clearActiveIf;
|
||||
}
|
||||
|
||||
// ---- notifications ------------------------------------------------------
|
||||
notify(message: string): void {
|
||||
const id = this.#nextNotifId++;
|
||||
console.log("[orch] notify", message);
|
||||
this.notifications.push({ id, message });
|
||||
const timer = setTimeout(() => {
|
||||
this.notifications = this.notifications.filter((n) => n.id !== id);
|
||||
this.#dismissTimers.delete(id);
|
||||
}, 5000);
|
||||
this.#dismissTimers.set(id, timer);
|
||||
}
|
||||
|
||||
dismiss(id: number): void {
|
||||
const t = this.#dismissTimers.get(id);
|
||||
if (t) {
|
||||
clearTimeout(t);
|
||||
this.#dismissTimers.delete(id);
|
||||
}
|
||||
this.notifications = this.notifications.filter((n) => n.id !== id);
|
||||
}
|
||||
|
||||
// ---- pane id registry ---------------------------------------------------
|
||||
registerPaneId(leafId: NodeId, paneId: PaneId | null): void {
|
||||
if (paneId == null) this.paneIdByLeaf.delete(leafId);
|
||||
else this.paneIdByLeaf.set(leafId, paneId);
|
||||
}
|
||||
|
||||
// ---- delegated tree ops -------------------------------------------------
|
||||
// Thin pass-through so consumers only need one object.
|
||||
split(leafId: NodeId, orientation: Orientation): void {
|
||||
console.log("[orch] split", leafId, orientation);
|
||||
this.#ops.split(leafId, orientation);
|
||||
}
|
||||
|
||||
close(leafId: NodeId): void {
|
||||
console.log("[orch] close", leafId);
|
||||
this.#ops.close(leafId);
|
||||
}
|
||||
|
||||
setDistro(leafId: NodeId, distro: string): void {
|
||||
this.#ops.setDistro(leafId, distro);
|
||||
}
|
||||
|
||||
setLabel(leafId: NodeId, label: string | undefined): void {
|
||||
this.#ops.setLabel(leafId, label);
|
||||
}
|
||||
|
||||
toggleBroadcast(leafId: NodeId): void {
|
||||
console.log("[orch] toggleBroadcast", leafId);
|
||||
this.#ops.toggleBroadcast(leafId);
|
||||
}
|
||||
|
||||
broadcastFrom(originLeafId: NodeId, dataB64: string): void {
|
||||
this.#ops.broadcastFrom(originLeafId, dataB64);
|
||||
}
|
||||
}
|
||||
|
||||
const KEY = Symbol("tiletopia.orchestration");
|
||||
|
||||
export function provideOrchestration(ops: TreeOps): Orchestration {
|
||||
const o = new Orchestration(ops);
|
||||
setContext(KEY, o);
|
||||
return o;
|
||||
}
|
||||
|
||||
export function useOrchestration(): Orchestration {
|
||||
const o = getContext<Orchestration | undefined>(KEY);
|
||||
if (!o) {
|
||||
throw new Error(
|
||||
"useOrchestration() called outside a provideOrchestration() ancestor",
|
||||
);
|
||||
}
|
||||
return o;
|
||||
}
|
||||
58
src/lib/layout/orchestration.tsx
Normal file
58
src/lib/layout/orchestration.tsx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { createContext, useContext, type ReactNode } from "react";
|
||||
import type { Orientation, NodeId } from "./tree";
|
||||
import type { PaneId } from "../../ipc";
|
||||
|
||||
/**
|
||||
* Orchestration context — every piece of shared state and every operation
|
||||
* that a Pane / SplitNode / LeafPane might call. Lives in React context so
|
||||
* descendants can `useOrchestration()` without prop drilling.
|
||||
*
|
||||
* activeLeafId comes in as a plain value (re-derived by App's useState).
|
||||
* React's context is reactive: when the App-level Provider updates the
|
||||
* value, ALL consumers re-render. No Svelte-style props-don't-propagate
|
||||
* trap here.
|
||||
*/
|
||||
export interface Orchestration {
|
||||
// Read-only state
|
||||
activeLeafId: NodeId | null;
|
||||
distros: string[];
|
||||
|
||||
// Tree mutations
|
||||
split: (leafId: NodeId, orientation: Orientation) => void;
|
||||
close: (leafId: NodeId) => void;
|
||||
setDistro: (leafId: NodeId, distro: string) => void;
|
||||
setLabel: (leafId: NodeId, label: string | undefined) => void;
|
||||
toggleBroadcast: (leafId: NodeId) => void;
|
||||
|
||||
// Per-pane orchestration
|
||||
setActive: (leafId: NodeId) => void;
|
||||
registerPaneId: (leafId: NodeId, paneId: PaneId | null) => void;
|
||||
broadcastFrom: (originLeafId: NodeId, dataB64: string) => void;
|
||||
notify: (message: string) => void;
|
||||
}
|
||||
|
||||
const OrchestrationContext = createContext<Orchestration | null>(null);
|
||||
|
||||
export function OrchestrationProvider({
|
||||
value,
|
||||
children,
|
||||
}: {
|
||||
value: Orchestration;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<OrchestrationContext.Provider value={value}>
|
||||
{children}
|
||||
</OrchestrationContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useOrchestration(): Orchestration {
|
||||
const orch = useContext(OrchestrationContext);
|
||||
if (!orch) {
|
||||
throw new Error(
|
||||
"useOrchestration() must be called inside <OrchestrationProvider>",
|
||||
);
|
||||
}
|
||||
return orch;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import { mount } from "svelte";
|
||||
import App from "./App.svelte";
|
||||
import "@xterm/xterm/css/xterm.css";
|
||||
import "./styles.css";
|
||||
|
||||
const app = mount(App, { target: document.getElementById("app")! });
|
||||
|
||||
export default app;
|
||||
13
src/main.tsx
Normal file
13
src/main.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./styles.css";
|
||||
import App from "./App";
|
||||
|
||||
const root = document.getElementById("root");
|
||||
if (!root) throw new Error("No #root element found");
|
||||
|
||||
createRoot(root).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
|
|
@ -1,65 +1,39 @@
|
|||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
||||
font-size: 13px;
|
||||
background: #0c0c0c;
|
||||
color: #e6e6e6;
|
||||
@import "@xterm/xterm/css/xterm.css";
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: #0c0c0c;
|
||||
body {
|
||||
background: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.titlebar {
|
||||
flex: 0 0 auto;
|
||||
.app-root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 6px 12px;
|
||||
background: #1a1a1a;
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
user-select: none;
|
||||
justify-content: center;
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.titlebar .label {
|
||||
font-weight: 600;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.titlebar .distro {
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
color: #88c;
|
||||
}
|
||||
|
||||
.titlebar .status {
|
||||
margin-left: auto;
|
||||
font-family: "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;
|
||||
}
|
||||
|
||||
.titlebar .status.ok {
|
||||
color: #6c6;
|
||||
}
|
||||
.titlebar .status.err {
|
||||
color: #d66;
|
||||
}
|
||||
|
||||
.pane-wrap {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.xterm { height: 100%; }
|
||||
.xterm-viewport { background: #0c0c0c !important; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue