Add Svelte 5 frontend (App, TitleBar, BlockRing, ModelStack, WeeklyBar, Settings)

2026-05-09 00:07:02 +01:00 · 2026-05-09 00:07:02 +01:00 · 0e8a87fbc5
commit 0e8a87fbc5
parent 14ffcf4bd3
17 changed files with 779 additions and 0 deletions
--- a/src/styles.css
+++ b/src/styles.css
@ -0,0 +1,96 @@
+/* Glass / always-on-top widget look. */
+
+:root {
+  --bg: rgba(18, 20, 26, 0.78);
+  --bg-card: rgba(255, 255, 255, 0.04);
+  --border: rgba(255, 255, 255, 0.08);
+  --fg: #e8eaf0;
+  --fg-dim: #9aa0aa;
+  --accent: #b08bff;     /* Anthropic-ish purple */
+  --opus: #b08bff;
+  --sonnet: #6ec1ff;
+  --haiku: #7ee0a3;
+  --other: #d8d8d8;
+  --warn: #ffb454;
+  --danger: #ff6b6b;
+
+  --radius: 10px;
+  --pad: 10px;
+
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-size: 13px;
+  color: var(--fg);
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent; /* honor Tauri transparent:true */
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  backdrop-filter: blur(14px);
+}
+
+button {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px 8px;
+  cursor: pointer;
+}
+button:hover { background: rgba(255, 255, 255, 0.06); }
+button.icon {
+  border: none;
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-dim);
+}
+button.icon:hover { color: var(--fg); }
+
+input[type="number"], input[type="text"], select {
+  font: inherit;
+  color: inherit;
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 4px 6px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.section {
+  padding: 8px var(--pad);
+  border-top: 1px solid var(--border);
+}
+.section:first-child { border-top: none; }
+
+.label {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--fg-dim);
+  margin-bottom: 4px;
+}
+
+.row { display: flex; align-items: center; gap: 8px; }
+.row.spread { justify-content: space-between; }
+.muted { color: var(--fg-dim); font-size: 11px; }