feat(frontend): add complete CSS design system and HTML shell

Create the Nexus Terminal design system with dark charcoal palette, teal accent, and premium desktop application styling: - tokens.css: Design tokens (colours, spacing, typography, layout) - base.css: Modern reset, scrollbar, focus, and utility styles - components.css: Buttons, forms, badges, dropdowns, notifications, disclosure, search, empty state, tooltip, spinner - layout.css: App grid shell (sidebar, tab bar, workspace, status bar) - sidebar.css: Connection manager with sections, profile items, search - tabs.css: Compact session tabs with status dots, protocol badges - terminal.css: xterm.js container, RAW mode views, send bar, search - forms.css: Profile editor sections, tag input, jump hosts, validation - modals.css: Modal, drawer, confirmation, host key, settings dialogs - index.html: Complete HTML shell with sidebar, tabs, workspace, status
2026-04-15 00:00:00 +01:00
parent 35bc9c75b1
commit 61e99e9fca
10 changed files with 3466 additions and 0 deletions
@@ -0,0 +1,137 @@
+/* ==========================================================================
+   Nexus Terminal — Application Layout
+   Grid shell, sidebar, tab bar, workspace, and status bar structure.
+   ========================================================================== */
+
+/* -----------------------------------------------------------------------
+   Main application grid
+   ----------------------------------------------------------------------- */
+.app {
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
+    grid-template-rows: var(--tab-bar-height) 1fr var(--status-bar-height);
+    height: 100vh;
+    overflow: hidden;
+    background: var(--bg-base);
+}
+
+/* Collapsed sidebar variant */
+.app.sidebar-collapsed {
+    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
+}
+
+/* -----------------------------------------------------------------------
+   Sidebar
+   ----------------------------------------------------------------------- */
+.sidebar {
+    grid-row: 1 / -1;
+    grid-column: 1;
+    background: var(--bg-surface);
+    border-right: 1px solid var(--border-subtle);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    z-index: var(--z-sticky);
+}
+
+/* -----------------------------------------------------------------------
+   Tab bar
+   ----------------------------------------------------------------------- */
+.tab-bar {
+    grid-column: 2;
+    grid-row: 1;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    min-height: var(--tab-bar-height);
+    overflow: hidden;
+}
+
+.tab-list {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;          /* Firefox */
+}
+.tab-list::-webkit-scrollbar {
+    display: none;
+}
+
+/* -----------------------------------------------------------------------
+   Workspace
+   ----------------------------------------------------------------------- */
+.workspace {
+    grid-column: 2;
+    grid-row: 2;
+    position: relative;
+    overflow: hidden;
+    background: var(--bg-base);
+}
+
+/* Terminal container — fills workspace */
+.terminal-container {
+    position: absolute;
+    inset: 0;
+    padding: var(--space-1);
+}
+
+/* -----------------------------------------------------------------------
+   Status bar
+   ----------------------------------------------------------------------- */
+.status-bar {
+    grid-column: 2;
+    grid-row: 3;
+    background: var(--bg-surface);
+    border-top: 1px solid var(--border-subtle);
+    display: flex;
+    align-items: center;
+    padding: 0 var(--space-3);
+    font-size: var(--text-xs);
+    color: var(--text-tertiary);
+    gap: var(--space-4);
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.status-bar span {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.status-spacer {
+    flex: 1;
+}
+
+/* Status bar indicator dots */
+.status-bar .status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    display: inline-block;
+}
+.status-dot.is-connected    { background: var(--success); }
+.status-dot.is-connecting   { background: var(--warning); }
+.status-dot.is-error        { background: var(--error); }
+.status-dot.is-disconnected { background: var(--text-tertiary); }
+
+/* -----------------------------------------------------------------------
+   Resize handle (between sidebar and workspace)
+   ----------------------------------------------------------------------- */
+.resize-handle {
+    position: absolute;
+    top: 0;
+    right: -3px;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: var(--z-sticky);
+}
+.resize-handle:hover,
+.resize-handle.is-dragging {
+    background: var(--accent-muted);
+}