explewd/waste-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity
Files
1d38766006bbe9201a150f4b71fb81c0fcf61e0b
waste-go/web/src/App.css

88 lines
5.9 KiB
CSS
Raw Normal View History

feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0f0f13;
--surface: #1a1a22;
--border: #2a2a36;
--accent: #7c6af7;
--text: #e0e0e8;
--muted: #6b6b80;
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
--sidebar-w: 220px;
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
}
html, body, #root { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: system-ui, sans-serif; font-size: 14px; }
button { cursor: pointer; background: var(--accent); color: #fff; border: none; border-radius: 4px; padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: 0.4; cursor: default; }
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
input { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 10px; font-size: 13px; outline: none; width: 100%; }
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
input:focus { border-color: var(--accent); }
/* ── onboarding ── */
Fix web UI messaging, alias resolution, and onboarding Messaging: - Append \n to WS IPC sends so bufio.Scanner fires (messages from web were silently dropped — the line scanner never saw a newline) - Handle session_ready in web store to update peer aliases after hello Alias resolution: - Seed AddPeer alias from SQLite cache so returning peers resolve immediately, before hello exchange completes - Remove stale SavePeer call from AddPeer (was writing placeholder IDs) - Add PeerAlias() point-lookup to store Onboarding redesign: - Three-state UI: disconnected (daemon instructions), connecting, connected-no-network (join form) - Read ?n= / ?network= / ?anchor= / ?invite=waste:... URL params to pre-fill the join form for invite links - Show daemon alias + peer ID before any network is joined (master_alias + master_id now included in state_snapshot) - Identity backup: export (passphrase-protected yaw-key-backup-1 JSON, download button) and restore (paste + passphrase verify) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 23:22:32 +02:00
.onboarding { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; max-width: 380px; margin: 0 auto; padding: 2rem; }
.onboarding h1 { font-size: 2rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 4px; }
.onboarding .status { color: var(--muted); font-size: 13px; }
.onboarding .status.connecting { color: var(--accent); }
.onboarding .status.disconnected { color: #e06060; }
.onboarding-identity { text-align: center; }
.onboarding-identity .alias { display: block; font-size: 1.1rem; font-weight: 600; }
.onboarding-identity .peer-id { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.onboarding-hint { color: var(--muted); font-size: 12px; text-align: center; }
.onboarding-hint.muted { color: var(--muted); }
.onboarding-code { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; font-size: 12px; font-family: monospace; color: var(--text); width: 100%; text-align: left; }
.onboarding-section { width: 100%; border-top: 1px solid var(--border); padding-top: 12px; }
.join-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.join-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
button.primary { background: var(--accent); width: 100%; padding: 8px; font-size: 14px; }
.toggle-link { background: none; color: var(--muted); font-size: 12px; padding: 4px 0; text-align: left; }
.toggle-link:hover { color: var(--text); }
.backup-panel { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.backup-form { display: flex; flex-direction: column; gap: 6px; }
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.backup-form textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; font-size: 11px; resize: vertical; width: 100%; }
Fix web UI messaging, alias resolution, and onboarding Messaging: - Append \n to WS IPC sends so bufio.Scanner fires (messages from web were silently dropped — the line scanner never saw a newline) - Handle session_ready in web store to update peer aliases after hello Alias resolution: - Seed AddPeer alias from SQLite cache so returning peers resolve immediately, before hello exchange completes - Remove stale SavePeer call from AddPeer (was writing placeholder IDs) - Add PeerAlias() point-lookup to store Onboarding redesign: - Three-state UI: disconnected (daemon instructions), connecting, connected-no-network (join form) - Read ?n= / ?network= / ?anchor= / ?invite=waste:... URL params to pre-fill the join form for invite links - Show daemon alias + peer ID before any network is joined (master_alias + master_id now included in state_snapshot) - Identity backup: export (passphrase-protected yaw-key-backup-1 JSON, download button) and restore (paste + passphrase verify) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 23:22:32 +02:00
.export-result { display: flex; flex-direction: column; gap: 6px; }
.export-result textarea { font-size: 10px; }
.mono { font-family: monospace; }
details summary { color: var(--muted); font-size: 12px; cursor: pointer; }
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
/* ── chat layout ── */
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.chat-layout { display: grid; grid-template-columns: var(--sidebar-w) 1fr; height: 100%; }
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
/* ── sidebar ── */
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.sidebar { background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
.sidebar-identity { padding: 12px 12px 10px; border-bottom: 1px solid var(--border); }
.sidebar-identity .alias { display: block; font-weight: 600; font-size: 14px; }
.sidebar-identity .peer-id { display: block; color: var(--muted); font-size: 10px; font-family: monospace; margin-top: 2px; }
.sidebar-section { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sidebar-section:last-child { border-bottom: none; flex: 1; }
.sidebar-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding: 4px 12px 2px; }
.sidebar-item { background: none; color: var(--text); text-align: left; padding: 5px 12px; border-radius: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.sidebar-item:hover { background: rgba(255,255,255,0.04); }
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
.sidebar-item.active { background: var(--accent); color: #fff; }
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.sidebar-empty { font-size: 11px; color: var(--muted); padding: 4px 12px; }
/* peer rows in sidebar */
.sidebar-peers { gap: 0; }
.peer-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.peer-row { display: flex; align-items: center; gap: 6px; padding: 4px 12px; }
.peer-row:hover { background: rgba(255,255,255,0.04); }
.peer-row:hover .peer-row-actions { opacity: 1; }
.peer-row-alias { font-size: 13px; font-weight: 500; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peer-row-id { font-size: 10px; color: var(--muted); font-family: monospace; }
.peer-row-actions { opacity: 0; display: flex; gap: 2px; transition: opacity 0.1s; }
.peer-action { background: none; color: var(--muted); font-size: 14px; padding: 1px 3px; line-height: 1; }
.peer-action:hover { color: var(--accent); background: none; }
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
/* ── message pane ── */
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.message-pane { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.message-pane-header { padding: 10px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; color: var(--text); }
.messages { flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; }
ui: fix message layout — no-wrap timestamp, tighter alias column Switch back to flex, set explicit widths: 52px timestamp (nowrap, 24h), 90px alias (right-aligned). Eliminates wrapping and the large gap. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 19:47:19 +02:00
.message { display: flex; align-items: baseline; gap: 0; padding: 2px 16px; line-height: 1.5; }
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.message:hover { background: rgba(255,255,255,0.02); }
ui: fix message layout — no-wrap timestamp, tighter alias column Switch back to flex, set explicit widths: 52px timestamp (nowrap, 24h), 90px alias (right-aligned). Eliminates wrapping and the large gap. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 19:47:19 +02:00
.message-ts { color: var(--muted); font-size: 11px; white-space: nowrap; flex-shrink: 0; width: 52px; }
.message-alias { font-weight: 600; font-size: 13px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; width: 90px; padding-right: 10px; }
feat: standalone web UI (React + Vite) React + TypeScript UI on port 5274. Connects to local daemon via WebSocket IPC (DaemonAdapter). Full chat layout with sidebar, message pane, and peer list. Mirrors the TUI feature set. - src/types.ts — IPC types mirroring proto.go - src/adapter/daemon — WebSocket IPC adapter with auto-reconnect - src/store/index.ts — Zustand store; handles all daemon events - src/pages/ — Onboarding (connect + join) and Chat - src/components/ — Sidebar, MessagePane, PeerList Dev: cd web && npm run dev (port 5274) Build: cd web && npm run build Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-22 21:57:32 +02:00
.message.mine .message-alias { color: var(--accent); }
ui: fix message alignment, show self in peer list Messages now use a fixed grid (44px ts · 120px alias right-aligned · 1fr text) instead of flex, so text always starts at the same column regardless of alias length. Self shown at top of peer list with accent dot and bold name. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 19:45:08 +02:00
.message-text { word-break: break-word; font-size: 14px; color: var(--text); }
redesign: 2-col layout, peers in sidebar, IRC-style messages, NAT dot - Peers moved from right panel into sidebar below Rooms - Messages left-aligned IRC style: time · alias · text - Per-peer colored dot: green=direct/NAT-punched, amber=relay/connecting, red=failed - Hover title on peer row shows full ID, connection type, remote address, last seen - Removed right PeerList panel Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-25 13:28:40 +02:00
.compose { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); }
.compose input { flex: 1; width: auto; }
.compose button { flex-shrink: 0; }
Reference in New Issue Copy Permalink