Add pending apps and frontend components

- apps/captain-mobile: Mobile API service - apps/flow-ui: Flow UI application - apps/mindlink: Mindlink application - apps/storage: Storage API and workers - apps/tzzr-cli: TZZR CLI tool - deck-frontend/backups: Historical TypeScript versions - hst-frontend: Standalone HST frontend Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-16 18:26:59 +00:00
parent 17506aaee2
commit 9b244138b5
177 changed files with 15063 additions and 0 deletions
--- a/hst-frontend/css/main.css
+++ b/hst-frontend/css/main.css
@@ -0,0 +1,181 @@
+/* === RESET & VARIABLES === */
+*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+
+:root {
+    --bg: #0a0a0f;
+    --bg-secondary: #12121a;
+    --bg-card: #1a1a24;
+    --border: #2a2a3a;
+    --text: #e0e0e0;
+    --text-muted: #888;
+    --accent: #7c8aff;
+    --card-width: 176px;
+    --card-img-height: 176px;
+}
+
+html, body { height: 100%; overflow: hidden; }
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    background: var(--bg);
+    color: var(--text);
+}
+
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg-secondary); }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
+::-webkit-scrollbar-thumb:hover { background: #444; }
+
+/* === TOPBAR === */
+.topbar {
+    height: 50px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    gap: 12px;
+}
+.topbar-left { display: flex; align-items: center; gap: 10px; }
+.topbar-center { flex: 1; display: flex; justify-content: center; }
+.topbar-right { display: flex; align-items: center; gap: 10px; }
+.logo { font-weight: 700; font-size: 1.2em; color: var(--accent); letter-spacing: 1px; }
+
+/* === BUTTONS === */
+.btn {
+    padding: 7px 14px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 0.8em;
+    font-weight: 500;
+    transition: all 0.15s ease;
+}
+.btn:hover { border-color: var(--accent); color: var(--text); }
+.btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.btn-sm { padding: 5px 10px; font-size: 0.75em; }
+.sel-count { font-size: 0.7em; margin-left: 4px; opacity: 0.8; }
+
+.search-box {
+    width: 300px;
+    padding: 9px 14px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text);
+    font-size: 0.9em;
+}
+.search-box:focus { outline: none; border-color: var(--accent); }
+.search-box::placeholder { color: var(--text-muted); }
+
+.base-selector { display: flex; gap: 2px; background: var(--bg-card); border-radius: 6px; padding: 3px; }
+.base-btn {
+    padding: 6px 14px;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 0.8em;
+    font-weight: 600;
+    transition: all 0.15s ease;
+}
+.base-btn:hover { color: var(--text); }
+.base-btn.active { background: var(--accent); color: #fff; }
+
+/* === GROUPS BAR === */
+.groups-bar {
+    height: 44px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    gap: 8px;
+    overflow-x: auto;
+}
+.group-btn {
+    padding: 6px 16px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 0.75em;
+    font-weight: 500;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: all 0.15s ease;
+}
+.group-btn:hover { border-color: var(--accent); color: var(--text); }
+.group-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+
+/* === MAIN LAYOUT === */
+.main-layout { display: flex; height: calc(100vh - 94px); }
+
+/* === LEFT PANEL === */
+.left-panel {
+    width: 84px;
+    background: var(--bg-secondary);
+    border-right: 1px solid var(--border);
+    overflow-y: auto;
+    padding: 10px 6px;
+    flex-shrink: 0;
+}
+.lib-icon {
+    width: 68px;
+    height: 68px;
+    margin: 6px auto;
+    border-radius: 10px;
+    background: var(--bg-card);
+    border: 2px solid transparent;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    transition: all 0.15s ease;
+    overflow: hidden;
+}
+.lib-icon:hover { border-color: var(--accent); }
+.lib-icon.active { border-color: var(--accent); background: rgba(124, 138, 255, 0.15); }
+.lib-icon img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; }
+.lib-icon span {
+    font-size: 0.6em;
+    color: var(--text-muted);
+    margin-top: 4px;
+    text-align: center;
+    max-width: 62px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.lib-icon.active span { color: var(--accent); }
+
+/* === CENTER PANEL === */
+.center-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
+
+.view-tabs {
+    display: flex;
+    gap: 6px;
+    padding: 10px 16px;
+    background: var(--bg-secondary);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+.view-tab {
+    padding: 7px 20px;
+    background: transparent;
+    border: none;
+    border-radius: 6px;
+    color: var(--text-muted);
+    cursor: pointer;
+    font-size: 0.85em;
+    font-weight: 500;
+    transition: all 0.15s ease;
+}
+.view-tab:hover { color: var(--text); background: var(--bg-card); }
+.view-tab.active { background: var(--accent); color: #fff; }
+
+.view-container { flex: 1; overflow: hidden; position: relative; }