feat: enhance Appwrite integration and chat functionality
- Added support for encrypted coach chats with a new `coach_chats` collection in the Appwrite database. - Updated `.env.example` to include `OLLAMA_API_KEY`, `OLLAMA_MODEL`, and `APPWRITE_API_KEY` for server-side configurations. - Introduced a setup script in `package.json` for initializing Appwrite database tables. - Enhanced the Vite configuration to proxy requests to the Ollama API. - Updated the main application structure to accommodate new chat features and improved theme management. - Refined CSS styles for better UI consistency and added new components for chat functionality.
This commit is contained in:
Ned Halksworth
+822
-119
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,229 @@
|
||||
import { buildThemeTokens, type ThemeSeed, type ThemeTokens } from "../lib/themeTokens";
|
||||
|
||||
export type ThemeCategory = "vocaloid" | "flavour" | "sugarfree";
|
||||
|
||||
export type AppTheme = {
|
||||
id: string;
|
||||
label: string;
|
||||
category: ThemeCategory;
|
||||
swatch: string;
|
||||
tokens: ThemeTokens;
|
||||
};
|
||||
|
||||
export const THEME_STORAGE_KEY = "red-bull-intake-tracker.theme.v1";
|
||||
export const LEGACY_ACCENT_STORAGE_KEY = "red-bull-intake-tracker.accent.v1";
|
||||
export const DEFAULT_THEME_ID = "oura-mist";
|
||||
|
||||
const LEGACY_ACCENT_MAP: Record<string, string> = {
|
||||
pink: "oura-mist",
|
||||
blue: "oura-mist",
|
||||
};
|
||||
|
||||
function theme(id: string, label: string, category: ThemeCategory, swatch: string, seed: ThemeSeed): AppTheme {
|
||||
return { id, label, category, swatch, tokens: buildThemeTokens(seed) };
|
||||
}
|
||||
|
||||
export const APP_THEMES: AppTheme[] = [
|
||||
theme("oura-mist", "Oura Mist", "vocaloid", "#4b86ad", {
|
||||
primary: "#4b86ad",
|
||||
tokens: {
|
||||
primary: "#4b86ad",
|
||||
primaryContainer: "#dff2ff",
|
||||
onPrimaryContainer: "#10283a",
|
||||
chartPrimary: "#4b86ad",
|
||||
chartSecondary: "#6f8f7c",
|
||||
chartTertiary: "#9b7b51",
|
||||
},
|
||||
}),
|
||||
theme("miku-blue", "Miku Blue", "vocaloid", "#39c5bb", {
|
||||
primary: "#39c5bb",
|
||||
secondary: "#39d5ff",
|
||||
tertiary: "#7ce7ff",
|
||||
}),
|
||||
theme("teto-red", "Teto Red", "vocaloid", "#fe0404", {
|
||||
primary: "#fe0404",
|
||||
secondary: "#ff3448",
|
||||
tertiary: "#ff6b6b",
|
||||
}),
|
||||
theme("pastel-pink", "Pastel Pink", "vocaloid", "#ffb7d9", {
|
||||
primary: "#e07aa8",
|
||||
secondary: "#ffb7d9",
|
||||
tertiary: "#ffd8e7",
|
||||
}),
|
||||
|
||||
theme("original", "Original", "flavour", "#00a7ff", {
|
||||
primary: "#0077c8",
|
||||
secondary: "#00a7ff",
|
||||
tertiary: "#1e3264",
|
||||
}),
|
||||
theme("zero", "Zero", "flavour", "#2a2a2a", {
|
||||
primary: "#2a2a2a",
|
||||
secondary: "#5c5c5c",
|
||||
tertiary: "#8a8a8a",
|
||||
dark: true,
|
||||
}),
|
||||
theme("summer", "Summer Edition", "flavour", "#f0e53b", {
|
||||
primary: "#d4c400",
|
||||
secondary: "#f0e53b",
|
||||
tertiary: "#ffc247",
|
||||
}),
|
||||
theme("cherry", "Cherry Edition", "flavour", "#e40046", {
|
||||
primary: "#c3093b",
|
||||
secondary: "#e40046",
|
||||
tertiary: "#ff6b8a",
|
||||
}),
|
||||
theme("spring", "Spring Edition", "flavour", "#ff8fab", {
|
||||
primary: "#e85d8a",
|
||||
secondary: "#ffb3c6",
|
||||
tertiary: "#ffd8e7",
|
||||
}),
|
||||
theme("apple", "Apple Edition", "flavour", "#78be20", {
|
||||
primary: "#5a9a12",
|
||||
secondary: "#78be20",
|
||||
tertiary: "#a8d84a",
|
||||
}),
|
||||
theme("peach", "Peach Edition", "flavour", "#ff9b63", {
|
||||
primary: "#e87a3a",
|
||||
secondary: "#ff9b63",
|
||||
tertiary: "#ffc9a3",
|
||||
}),
|
||||
theme("ice", "Ice Edition", "flavour", "#49adbe", {
|
||||
primary: "#2d8a9a",
|
||||
secondary: "#49adbe",
|
||||
tertiary: "#7ce7ff",
|
||||
}),
|
||||
theme("blue-edition", "Blue Edition", "flavour", "#496dff", {
|
||||
primary: "#3a52cc",
|
||||
secondary: "#496dff",
|
||||
tertiary: "#9c73ff",
|
||||
}),
|
||||
theme("red-edition", "Red Edition", "flavour", "#ff355e", {
|
||||
primary: "#e02045",
|
||||
secondary: "#ff355e",
|
||||
tertiary: "#ff6b8a",
|
||||
}),
|
||||
theme("tropical", "Tropical Edition", "flavour", "#ffc247", {
|
||||
primary: "#e0a820",
|
||||
secondary: "#ffc247",
|
||||
tertiary: "#ff9b63",
|
||||
}),
|
||||
theme("coconut", "Coconut Edition", "flavour", "#7ce7ff", {
|
||||
primary: "#4ec4e0",
|
||||
secondary: "#7ce7ff",
|
||||
tertiary: "#d8f9ff",
|
||||
}),
|
||||
theme("green-edition", "Green Edition", "flavour", "#b7ff4a", {
|
||||
primary: "#7acc20",
|
||||
secondary: "#b7ff4a",
|
||||
tertiary: "#d4ff8a",
|
||||
}),
|
||||
theme("apricot", "Apricot Edition", "flavour", "#ff8c42", {
|
||||
primary: "#e06a20",
|
||||
secondary: "#ff8c42",
|
||||
tertiary: "#ffb87a",
|
||||
}),
|
||||
theme("ruby", "Ruby Edition", "flavour", "#c3093b", {
|
||||
primary: "#a00730",
|
||||
secondary: "#c3093b",
|
||||
tertiary: "#e04060",
|
||||
}),
|
||||
|
||||
theme("sugarfree", "Sugarfree", "sugarfree", "#c8d4e0", {
|
||||
primary: "#8a9bb0",
|
||||
secondary: "#c8d4e0",
|
||||
tertiary: "#e7eef8",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-summer", "Summer Sugarfree", "sugarfree", "#e8e4a0", {
|
||||
primary: "#c4c020",
|
||||
secondary: "#e8e4a0",
|
||||
tertiary: "#f0e53b",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-apple", "Apple Sugarfree", "sugarfree", "#b8d4a0", {
|
||||
primary: "#6a9a30",
|
||||
secondary: "#b8d4a0",
|
||||
tertiary: "#78be20",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-peach", "Peach Sugarfree", "sugarfree", "#f0d0b8", {
|
||||
primary: "#d08050",
|
||||
secondary: "#f0d0b8",
|
||||
tertiary: "#ff9b63",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-ice", "Ice Sugarfree", "sugarfree", "#b8e0e8", {
|
||||
primary: "#4a9aaa",
|
||||
secondary: "#b8e0e8",
|
||||
tertiary: "#49adbe",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-lilac", "Lilac Sugarfree", "sugarfree", "#d8c8f0", {
|
||||
primary: "#9070c0",
|
||||
secondary: "#d8c8f0",
|
||||
tertiary: "#b898e0",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-pink", "Pink Sugarfree", "sugarfree", "#f0c8d8", {
|
||||
primary: "#d06090",
|
||||
secondary: "#f0c8d8",
|
||||
tertiary: "#ffb7d9",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-blue", "Blue Sugarfree", "sugarfree", "#c8d0f8", {
|
||||
primary: "#5060c0",
|
||||
secondary: "#c8d0f8",
|
||||
tertiary: "#496dff",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-coconut", "Coconut Sugarfree", "sugarfree", "#d0f0f8", {
|
||||
primary: "#60b8d0",
|
||||
secondary: "#d0f0f8",
|
||||
tertiary: "#7ce7ff",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-green", "Green Sugarfree", "sugarfree", "#d8f0b8", {
|
||||
primary: "#70a830",
|
||||
secondary: "#d8f0b8",
|
||||
tertiary: "#b7ff4a",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-ruby", "Ruby Sugarfree", "sugarfree", "#f0c0c8", {
|
||||
primary: "#a03050",
|
||||
secondary: "#f0c0c8",
|
||||
tertiary: "#c3093b",
|
||||
sugarFree: true,
|
||||
}),
|
||||
theme("sf-spring", "Spring Sugarfree", "sugarfree", "#f8d0e0", {
|
||||
primary: "#d07090",
|
||||
secondary: "#f8d0e0",
|
||||
tertiary: "#ffb3c6",
|
||||
sugarFree: true,
|
||||
}),
|
||||
];
|
||||
|
||||
export const THEME_CATEGORIES: Array<{ id: ThemeCategory; label: string }> = [
|
||||
{ id: "vocaloid", label: "Vocaloid & Pink" },
|
||||
{ id: "flavour", label: "Flavours" },
|
||||
{ id: "sugarfree", label: "Sugarfree" },
|
||||
];
|
||||
|
||||
export function getThemeById(id: string): AppTheme {
|
||||
return APP_THEMES.find((entry) => entry.id === id) ?? APP_THEMES[0];
|
||||
}
|
||||
|
||||
export function readStoredThemeId(): string {
|
||||
if (typeof window === "undefined") return DEFAULT_THEME_ID;
|
||||
|
||||
const stored = localStorage.getItem(THEME_STORAGE_KEY);
|
||||
if (stored && APP_THEMES.some((entry) => entry.id === stored)) {
|
||||
return stored;
|
||||
}
|
||||
|
||||
const legacy = localStorage.getItem(LEGACY_ACCENT_STORAGE_KEY);
|
||||
if (legacy && LEGACY_ACCENT_MAP[legacy]) {
|
||||
return LEGACY_ACCENT_MAP[legacy];
|
||||
}
|
||||
|
||||
return DEFAULT_THEME_ID;
|
||||
}
|
||||
+412
-93
@@ -17,7 +17,7 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: #fff8fb;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -26,15 +26,15 @@
|
||||
|
||||
html {
|
||||
min-width: 320px;
|
||||
background: #fff8fb;
|
||||
background: #f8fbff;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background: #fff8fb;
|
||||
color: #21191d;
|
||||
background: #f8fbff;
|
||||
color: #1f252a;
|
||||
font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
@@ -135,9 +135,9 @@ textarea:focus-visible {
|
||||
|
||||
.material-drawer {
|
||||
@apply sticky top-6 hidden h-[calc(100vh-3rem)] flex-col border p-4 lg:flex;
|
||||
background: var(--surface-container);
|
||||
border-color: var(--outline-variant);
|
||||
border-radius: 28px;
|
||||
background: color-mix(in srgb, var(--surface-container-lowest) 84%, transparent);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
|
||||
border-radius: 32px;
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
@@ -169,9 +169,9 @@ textarea:focus-visible {
|
||||
|
||||
.top-app-bar {
|
||||
@apply border p-4 sm:p-5;
|
||||
background: color-mix(in srgb, var(--surface-container-low) 84%, white);
|
||||
border-color: var(--outline-variant);
|
||||
border-radius: 28px;
|
||||
background: color-mix(in srgb, var(--surface-container-lowest) 86%, transparent);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent);
|
||||
border-radius: 34px;
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
@@ -220,7 +220,7 @@ textarea:focus-visible {
|
||||
}
|
||||
|
||||
.mobile-nav-bar {
|
||||
@apply fixed inset-x-3 bottom-3 z-40 grid grid-cols-4 gap-1 border p-1 shadow-fridge;
|
||||
@apply fixed inset-x-3 bottom-3 z-40 grid grid-cols-5 gap-1 border p-1 shadow-fridge;
|
||||
background: color-mix(in srgb, var(--surface-container-high) 92%, white);
|
||||
border-color: var(--outline-variant);
|
||||
border-radius: 28px;
|
||||
@@ -251,16 +251,313 @@ textarea:focus-visible {
|
||||
|
||||
.glass-panel {
|
||||
@apply rounded-lg border shadow-fridge;
|
||||
background: var(--surface-container);
|
||||
border-color: var(--outline-variant);
|
||||
border-radius: 24px;
|
||||
background: color-mix(in srgb, var(--surface-container-lowest) 88%, transparent);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 62%, transparent);
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.can-panel {
|
||||
@apply rounded-lg border shadow-can;
|
||||
background: linear-gradient(135deg, var(--primary-container), var(--surface-container-high) 58%, var(--tertiary-container));
|
||||
border-color: color-mix(in srgb, var(--primary) 20%, var(--outline-variant));
|
||||
border-radius: 28px;
|
||||
border-radius: 36px;
|
||||
}
|
||||
|
||||
.today-panel {
|
||||
background:
|
||||
radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--primary-container) 82%, white) 0 22%, transparent 44%),
|
||||
linear-gradient(145deg, var(--surface-container-lowest), var(--surface-container) 54%, var(--tertiary-container));
|
||||
}
|
||||
|
||||
.oura-hero {
|
||||
background:
|
||||
radial-gradient(circle at 14% 28%, color-mix(in srgb, var(--primary-container) 72%, white) 0 18%, transparent 42%),
|
||||
radial-gradient(circle at 82% 8%, color-mix(in srgb, var(--secondary-container) 70%, white) 0 18%, transparent 38%),
|
||||
var(--surface-container-lowest);
|
||||
}
|
||||
|
||||
.oura-ring {
|
||||
@apply grid h-32 w-32 shrink-0 place-items-center p-2 shadow-can;
|
||||
background: conic-gradient(var(--primary) var(--progress), var(--surface-container-high) 0);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.oura-ring > div {
|
||||
@apply flex h-full w-full flex-col items-center justify-center;
|
||||
background: var(--surface-container-lowest);
|
||||
border-radius: inherit;
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--outline-variant) 72%, transparent);
|
||||
}
|
||||
|
||||
.oura-ring span {
|
||||
@apply text-4xl font-semibold leading-none;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.oura-ring small {
|
||||
@apply mt-1 text-xs font-semibold uppercase;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.wellness-pill {
|
||||
@apply flex items-center justify-between gap-3 rounded-full border px-4 py-3 text-sm;
|
||||
background: color-mix(in srgb, var(--surface-container-high) 78%, white);
|
||||
border-color: var(--outline-variant);
|
||||
}
|
||||
|
||||
.wellness-pill span {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.wellness-pill strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.suggestion-chip {
|
||||
@apply min-h-11 rounded-full border px-4 py-2 text-sm font-semibold transition disabled:cursor-not-allowed;
|
||||
background: color-mix(in srgb, var(--surface-container-high) 72%, white);
|
||||
border-color: var(--outline-variant);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.suggestion-chip:hover:not(:disabled) {
|
||||
background: var(--primary-container);
|
||||
color: var(--on-primary-container);
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
.coach-gemini-shell {
|
||||
@apply grid min-h-[760px] gap-4;
|
||||
}
|
||||
|
||||
.coach-locked-shell {
|
||||
@apply place-items-center;
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
.coach-chat-sidebar {
|
||||
@apply hidden min-h-[760px] flex-col border p-3 xl:flex;
|
||||
background: color-mix(in srgb, var(--surface-container-lowest) 80%, transparent);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 64%, transparent);
|
||||
border-radius: 34px;
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
.coach-sidebar-brand {
|
||||
@apply flex items-center gap-3 px-2 py-2;
|
||||
}
|
||||
|
||||
.coach-brand-orb {
|
||||
@apply grid h-16 w-16 place-items-center rounded-full shadow-sm;
|
||||
background: radial-gradient(circle at 30% 26%, #ffffff 0 12%, #d7ecff 13% 48%, #7fb6df 72%, #5d8fb3 100%);
|
||||
color: #163247;
|
||||
}
|
||||
|
||||
.coach-brand-orb-small {
|
||||
@apply h-10 w-10;
|
||||
}
|
||||
|
||||
.coach-new-chat {
|
||||
@apply mt-4 inline-flex min-h-12 items-center gap-3 rounded-full px-4 text-sm font-semibold transition disabled:cursor-not-allowed;
|
||||
background: var(--surface-container-high);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.coach-new-chat:hover:not(:disabled) {
|
||||
background: var(--primary-container);
|
||||
}
|
||||
|
||||
.coach-chat-list {
|
||||
@apply mt-4 grid flex-1 content-start gap-1 overflow-y-auto;
|
||||
}
|
||||
|
||||
.coach-chat-row {
|
||||
@apply grid grid-cols-[1fr_auto] items-center rounded-3xl transition;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.coach-chat-row > button:first-child {
|
||||
@apply grid min-w-0 gap-1 px-4 py-3 text-left;
|
||||
}
|
||||
|
||||
.coach-chat-row > button:last-child {
|
||||
@apply mr-2 grid h-8 w-8 place-items-center rounded-full opacity-0 transition;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.coach-chat-row:hover > button:last-child,
|
||||
.coach-chat-row-active > button:last-child {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.coach-chat-row span {
|
||||
@apply truncate text-sm font-medium;
|
||||
}
|
||||
|
||||
.coach-chat-row small {
|
||||
@apply text-xs;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.coach-chat-row-active,
|
||||
.coach-chat-row:hover {
|
||||
background: var(--surface-container-high);
|
||||
}
|
||||
|
||||
.coach-context-card {
|
||||
@apply mt-4 rounded-[28px] border p-4;
|
||||
background: color-mix(in srgb, var(--surface-container-low) 76%, white);
|
||||
border-color: var(--outline-variant);
|
||||
}
|
||||
|
||||
.coach-stage {
|
||||
@apply relative flex min-h-[760px] flex-col overflow-hidden border;
|
||||
background:
|
||||
radial-gradient(circle at 50% 64%, rgba(192, 225, 250, 0.78) 0 18%, transparent 42%),
|
||||
linear-gradient(180deg, rgba(255,255,255,0.94), rgba(248,251,255,0.96));
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 64%, transparent);
|
||||
border-radius: 38px;
|
||||
box-shadow: var(--elevation-1);
|
||||
}
|
||||
|
||||
.coach-stage-topbar {
|
||||
@apply flex items-center justify-between px-5 py-4 text-xs font-semibold;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.coach-stage-messages {
|
||||
@apply flex-1 space-y-5 overflow-y-auto px-4 pb-36 pt-8 sm:px-8 lg:px-16;
|
||||
}
|
||||
|
||||
.coach-empty-state {
|
||||
@apply mx-auto flex min-h-[520px] max-w-3xl flex-col items-center justify-center text-center;
|
||||
}
|
||||
|
||||
.coach-empty-state h2 {
|
||||
@apply mt-6 text-5xl font-normal tracking-tight sm:text-6xl;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.coach-empty-state p {
|
||||
@apply mt-4 max-w-xl text-base leading-7;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.coach-prompt-grid {
|
||||
@apply mt-7 grid gap-2 sm:grid-cols-3;
|
||||
}
|
||||
|
||||
.coach-message {
|
||||
@apply flex;
|
||||
}
|
||||
|
||||
.coach-message-user {
|
||||
@apply justify-end;
|
||||
}
|
||||
|
||||
.coach-message-assistant {
|
||||
@apply justify-start;
|
||||
}
|
||||
|
||||
.coach-message-bubble {
|
||||
@apply max-w-[840px] rounded-[34px] border px-5 py-4 shadow-sm;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.coach-message-user .coach-message-bubble {
|
||||
background: #ececec;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.coach-message-user .coach-message-bubble,
|
||||
.coach-message-user .coach-message-bubble * {
|
||||
color: var(--text) !important;
|
||||
}
|
||||
|
||||
.thinking-slider {
|
||||
@apply w-full overflow-hidden rounded-full border px-3 py-2 text-sm font-medium;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-color: transparent;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.thinking-slider-active {
|
||||
border-color: color-mix(in srgb, var(--primary) 42%, var(--outline-variant));
|
||||
}
|
||||
|
||||
.thinking-slider-track {
|
||||
@apply block overflow-hidden whitespace-nowrap;
|
||||
mask-image: linear-gradient(90deg, transparent, black 18%, black 82%, transparent);
|
||||
}
|
||||
|
||||
.thinking-slider-track span {
|
||||
@apply inline-block;
|
||||
padding-left: 100%;
|
||||
animation: thinking-slide 3.2s linear infinite;
|
||||
}
|
||||
|
||||
.thinking-trace {
|
||||
@apply mt-2 max-h-56 overflow-auto rounded-3xl border p-4 text-xs leading-5 whitespace-pre-wrap;
|
||||
background: rgba(255, 255, 255, 0.72);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 58%, transparent);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.coach-composer {
|
||||
@apply absolute inset-x-4 bottom-4 z-10 mx-auto flex max-w-4xl items-center gap-3 rounded-full border p-3 sm:bottom-7;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent);
|
||||
box-shadow: 0 18px 50px rgba(74, 102, 122, 0.18);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.coach-input {
|
||||
@apply min-h-12 flex-1 rounded-full border-0 px-2 text-lg shadow-none transition;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.coach-input:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.composer-icon-button,
|
||||
.composer-send-button {
|
||||
@apply grid h-12 w-12 shrink-0 place-items-center rounded-full transition disabled:cursor-not-allowed disabled:opacity-45;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.composer-icon-button:hover {
|
||||
background: var(--surface-container-high);
|
||||
}
|
||||
|
||||
.composer-send-button {
|
||||
background: #97cbf5;
|
||||
color: #10283a;
|
||||
}
|
||||
|
||||
.composer-send-button:hover:not(:disabled) {
|
||||
filter: brightness(0.98);
|
||||
}
|
||||
|
||||
.composer-stop-button {
|
||||
background: var(--surface-container-high);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.coach-unlock-card {
|
||||
@apply mt-8 flex w-full max-w-xl flex-col gap-3 rounded-full border p-3 sm:flex-row;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
border-color: color-mix(in srgb, var(--outline-variant) 68%, transparent);
|
||||
box-shadow: var(--elevation-2);
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.coach-gemini-shell {
|
||||
grid-template-columns: 340px minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.can-emblem {
|
||||
@@ -402,123 +699,139 @@ textarea:focus-visible {
|
||||
@apply flex items-center gap-2 rounded-md border px-3 py-2 text-sm shadow-sm;
|
||||
}
|
||||
|
||||
.accent-picker {
|
||||
@apply inline-flex min-h-11 items-center gap-1 rounded-md border p-1 shadow-sm;
|
||||
.theme-indicator {
|
||||
@apply inline-flex min-h-11 items-center gap-2 rounded-full border px-3 text-sm font-semibold transition;
|
||||
background: var(--surface-container-high);
|
||||
border-color: var(--outline-variant);
|
||||
border-radius: 999px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.accent-picker button {
|
||||
@apply inline-flex min-h-9 items-center gap-2 rounded px-3 text-sm font-semibold transition;
|
||||
.theme-indicator:hover {
|
||||
background: var(--primary-container);
|
||||
color: var(--on-primary-container);
|
||||
}
|
||||
|
||||
.theme-indicator-swatch {
|
||||
@apply h-4 w-4 rounded-full border border-white shadow-sm;
|
||||
}
|
||||
|
||||
.theme-indicator-label {
|
||||
@apply max-w-[9rem] truncate;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
@apply grid gap-4;
|
||||
}
|
||||
|
||||
.settings-tabs {
|
||||
@apply inline-flex flex-wrap gap-1 rounded-full border p-1;
|
||||
background: var(--surface-container-high);
|
||||
border-color: var(--outline-variant);
|
||||
}
|
||||
|
||||
.settings-tabs button {
|
||||
@apply rounded-full px-4 py-2 text-sm font-semibold transition;
|
||||
color: var(--muted);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
.accent-picker button:hover,
|
||||
.accent-picker-active {
|
||||
.settings-tabs button:hover,
|
||||
.settings-tab-active {
|
||||
background: var(--primary-container);
|
||||
color: var(--on-primary-container) !important;
|
||||
}
|
||||
|
||||
.accent-swatch {
|
||||
@apply h-3 w-3 rounded-full border border-white shadow-sm;
|
||||
.theme-preview-strip {
|
||||
@apply flex flex-wrap gap-2;
|
||||
}
|
||||
|
||||
.accent-swatch-blue {
|
||||
background: #d8e7ff;
|
||||
.theme-preview-chip {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.accent-swatch-pink {
|
||||
background: #ffd8e7;
|
||||
.theme-picker-grid {
|
||||
@apply grid gap-3 sm:grid-cols-2 lg:grid-cols-3;
|
||||
}
|
||||
|
||||
.theme-tile {
|
||||
@apply flex min-h-[4.5rem] items-center gap-3 rounded-xl border px-3 py-3 text-left transition;
|
||||
background: var(--surface-container);
|
||||
border-color: var(--outline-variant);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.theme-tile:hover {
|
||||
box-shadow: var(--elevation-1);
|
||||
border-color: var(--outline);
|
||||
}
|
||||
|
||||
.theme-tile-active {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--elevation-1);
|
||||
background: var(--primary-container);
|
||||
color: var(--on-primary-container);
|
||||
}
|
||||
|
||||
.theme-tile-swatch {
|
||||
@apply h-10 w-10 shrink-0 rounded-full border border-white shadow-sm;
|
||||
}
|
||||
|
||||
.theme-tile-label {
|
||||
@apply text-sm font-semibold leading-5;
|
||||
}
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
--primary: #9c4168;
|
||||
--primary: #4b86ad;
|
||||
--on-primary: #ffffff;
|
||||
--primary-container: #ffd8e7;
|
||||
--on-primary-container: #3e001d;
|
||||
--secondary: #526354;
|
||||
--primary-container: #dff2ff;
|
||||
--on-primary-container: #10283a;
|
||||
--secondary: #647887;
|
||||
--on-secondary: #ffffff;
|
||||
--secondary-container: #d7efe2;
|
||||
--on-secondary-container: #102116;
|
||||
--tertiary: #765930;
|
||||
--secondary-container: #ecf3f7;
|
||||
--on-secondary-container: #1f2d35;
|
||||
--tertiary: #9b7b51;
|
||||
--on-tertiary: #ffffff;
|
||||
--tertiary-container: #ffddb2;
|
||||
--on-tertiary-container: #2b1700;
|
||||
--tertiary-container: #f4eadb;
|
||||
--on-tertiary-container: #332313;
|
||||
--error: #ba1a1a;
|
||||
--on-error: #ffffff;
|
||||
--error-container: #ffdad6;
|
||||
--on-error-container: #410002;
|
||||
--bg: #fff8fb;
|
||||
--surface: #fff8fb;
|
||||
--bg: #f8fbff;
|
||||
--surface: #f8fbff;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #fff0f5;
|
||||
--surface-container: #faedf3;
|
||||
--surface-container-high: #f4e7ee;
|
||||
--surface-container-low: #f1f7fb;
|
||||
--surface-container: #edf3f7;
|
||||
--surface-container-high: #e7eef3;
|
||||
--panel: var(--surface-container);
|
||||
--panel-strong: var(--surface-container-lowest);
|
||||
--outline: #85737a;
|
||||
--outline-variant: #d8c2ca;
|
||||
--text: #21191d;
|
||||
--muted: #655b60;
|
||||
--subtle: #83757c;
|
||||
--outline: #7c8992;
|
||||
--outline-variant: #dce5ea;
|
||||
--text: #1f252a;
|
||||
--muted: #68747c;
|
||||
--subtle: #839099;
|
||||
--accent: var(--primary-container);
|
||||
--accent-soft: var(--surface-container-low);
|
||||
--accent-strong: var(--primary);
|
||||
--accent-warm: #d7efe2;
|
||||
--chart-primary: #b85d84;
|
||||
--chart-secondary: #5f7f6f;
|
||||
--chart-tertiary: #906d1d;
|
||||
--accent-warm: #eef4f7;
|
||||
--chart-primary: #4b86ad;
|
||||
--chart-secondary: #6f8f7c;
|
||||
--chart-tertiary: #9b7b51;
|
||||
--chart-error: #ba1a1a;
|
||||
--chart-grid: rgba(132, 115, 122, 0.24);
|
||||
--elevation-1: 0 1px 2px rgba(69, 54, 62, 0.14), 0 2px 6px rgba(69, 54, 62, 0.08);
|
||||
--elevation-2: 0 2px 6px rgba(69, 54, 62, 0.14), 0 8px 18px rgba(69, 54, 62, 0.08);
|
||||
--chart-grid: rgba(124, 137, 146, 0.18);
|
||||
--elevation-1: 0 12px 34px rgba(69, 91, 108, 0.08), 0 1px 2px rgba(69, 91, 108, 0.06);
|
||||
--elevation-2: 0 18px 44px rgba(69, 91, 108, 0.12), 0 2px 8px rgba(69, 91, 108, 0.08);
|
||||
min-height: 100vh;
|
||||
background: var(--bg) !important;
|
||||
color: var(--text) !important;
|
||||
font-family: "Google Sans", "Google Sans Text", "Product Sans", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
.app-shell[data-accent="blue"] {
|
||||
--primary: #49617d;
|
||||
--on-primary: #ffffff;
|
||||
--primary-container: #d8e7ff;
|
||||
--on-primary-container: #061d35;
|
||||
--secondary: #5f5d72;
|
||||
--secondary-container: #e5dff9;
|
||||
--on-secondary-container: #1c1a2c;
|
||||
--tertiary: #765930;
|
||||
--tertiary-container: #ffddb2;
|
||||
--bg: #f8fbff;
|
||||
--surface: #f8fbff;
|
||||
--surface-container-lowest: #ffffff;
|
||||
--surface-container-low: #eef4fb;
|
||||
--surface-container: #e8eef6;
|
||||
--surface-container-high: #e1e9f2;
|
||||
--outline: #72777f;
|
||||
--outline-variant: #c2c7cf;
|
||||
--text: #191c20;
|
||||
--muted: #5d6269;
|
||||
--subtle: #777c83;
|
||||
--accent-warm: #ffd8e7;
|
||||
--chart-primary: #49617d;
|
||||
--chart-secondary: #9c4168;
|
||||
--chart-tertiary: #906d1d;
|
||||
--chart-error: #ba1a1a;
|
||||
--chart-grid: rgba(114, 119, 127, 0.24);
|
||||
}
|
||||
|
||||
.app-shell[data-accent="pink"] {
|
||||
--primary: #9c4168;
|
||||
--on-primary: #ffffff;
|
||||
--primary-container: #ffd8e7;
|
||||
--on-primary-container: #3e001d;
|
||||
}
|
||||
|
||||
.backdrop-wash {
|
||||
background: linear-gradient(180deg, var(--bg) 0%, var(--surface-container-lowest) 46%, var(--surface-container-low) 100%);
|
||||
background:
|
||||
radial-gradient(circle at 70% 35%, var(--primary-container) 0 18%, transparent 42%),
|
||||
radial-gradient(circle at 12% 12%, var(--surface-container-lowest) 0 18%, transparent 38%),
|
||||
linear-gradient(180deg, var(--bg) 0%, var(--surface-container-lowest) 46%, var(--surface-container-low) 100%);
|
||||
}
|
||||
|
||||
.backdrop-grid {
|
||||
@@ -526,7 +839,7 @@ textarea:focus-visible {
|
||||
linear-gradient(var(--chart-grid) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--chart-grid) 1px, transparent 1px);
|
||||
background-size: 48px 48px;
|
||||
opacity: 0.22;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.backdrop-rail {
|
||||
@@ -675,3 +988,9 @@ textarea:focus-visible {
|
||||
.app-shell .modal-panel {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@keyframes thinking-slide {
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ export const appwriteConfig = {
|
||||
projectId: env.VITE_APPWRITE_PROJECT_ID || "6a0752ee001fb2ef7138",
|
||||
databaseId: env.VITE_APPWRITE_DATABASE_ID || "redbull_tracker",
|
||||
collectionId: env.VITE_APPWRITE_COLLECTION_ID || "intake_entries",
|
||||
chatCollectionId: env.VITE_APPWRITE_CHAT_COLLECTION_ID || "coach_chats",
|
||||
oauthSuccessUrl: resolveOAuthUrl(env.VITE_APPWRITE_OAUTH_SUCCESS_URL),
|
||||
oauthFailureUrl: resolveOAuthUrl(env.VITE_APPWRITE_OAUTH_FAILURE_URL),
|
||||
};
|
||||
|
||||
@@ -0,0 +1,178 @@
|
||||
import type { Models } from "appwrite";
|
||||
import type { CoachChat } from "../types";
|
||||
import { appwriteConfig, ID, Permission, Query, Role, tablesDB } from "./appwrite";
|
||||
|
||||
const CHAT_CRYPTO_VERSION = 1;
|
||||
const KEY_ITERATIONS = 210_000;
|
||||
|
||||
type EncryptedChatRow = Models.Row & {
|
||||
userId: string;
|
||||
encryptedTitle: string;
|
||||
encryptedMessages: string;
|
||||
titleIv: string;
|
||||
messagesIv: string;
|
||||
salt: string;
|
||||
version: number;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
type EncryptedValue = {
|
||||
ciphertext: string;
|
||||
iv: string;
|
||||
};
|
||||
|
||||
export async function listEncryptedChats(userId: string, passphrase: string) {
|
||||
const response = await tablesDB.listRows<EncryptedChatRow>({
|
||||
databaseId: appwriteConfig.databaseId,
|
||||
tableId: appwriteConfig.chatCollectionId,
|
||||
queries: [Query.equal("userId", userId), Query.orderDesc("updatedAt"), Query.limit(50)],
|
||||
});
|
||||
|
||||
const chats: CoachChat[] = [];
|
||||
for (const row of response.rows) {
|
||||
chats.push(await decryptChatRow(row, passphrase));
|
||||
}
|
||||
|
||||
return chats;
|
||||
}
|
||||
|
||||
export async function createEncryptedChat(userId: string, passphrase: string, chat: CoachChat) {
|
||||
const row = await tablesDB.createRow<EncryptedChatRow>({
|
||||
databaseId: appwriteConfig.databaseId,
|
||||
tableId: appwriteConfig.chatCollectionId,
|
||||
rowId: ID.custom(chat.id),
|
||||
data: await toEncryptedRowData(userId, passphrase, chat),
|
||||
permissions: userRowPermissions(userId),
|
||||
});
|
||||
|
||||
return decryptChatRow(row, passphrase);
|
||||
}
|
||||
|
||||
export async function updateEncryptedChat(userId: string, passphrase: string, chat: CoachChat) {
|
||||
const row = await tablesDB.updateRow<EncryptedChatRow>({
|
||||
databaseId: appwriteConfig.databaseId,
|
||||
tableId: appwriteConfig.chatCollectionId,
|
||||
rowId: chat.id,
|
||||
data: await toEncryptedRowData(userId, passphrase, chat),
|
||||
permissions: userRowPermissions(userId),
|
||||
});
|
||||
|
||||
return decryptChatRow(row, passphrase);
|
||||
}
|
||||
|
||||
export async function deleteEncryptedChat(id: string) {
|
||||
await tablesDB.deleteRow({
|
||||
databaseId: appwriteConfig.databaseId,
|
||||
tableId: appwriteConfig.chatCollectionId,
|
||||
rowId: id,
|
||||
});
|
||||
}
|
||||
|
||||
export function chatStorageErrorMessage(error: unknown) {
|
||||
if (error instanceof Error) {
|
||||
if (/decrypt|operation failed|unable to decrypt/i.test(error.message)) {
|
||||
return "Encrypted chat key could not unlock saved chats.";
|
||||
}
|
||||
if (/not found|404/i.test(error.message)) {
|
||||
return `Appwrite chat table '${appwriteConfig.chatCollectionId}' was not found.`;
|
||||
}
|
||||
if (/permissions?.*create|action 'create'|not authorized|401|unauthorized/i.test(error.message)) {
|
||||
return `Appwrite chat table needs Users -> Create and row security on '${appwriteConfig.chatCollectionId}'.`;
|
||||
}
|
||||
return error.message;
|
||||
}
|
||||
return "Encrypted chat storage failed.";
|
||||
}
|
||||
|
||||
async function toEncryptedRowData(userId: string, passphrase: string, chat: CoachChat) {
|
||||
const salt = crypto.getRandomValues(new Uint8Array(16));
|
||||
const key = await deriveKey(passphrase, userId, salt);
|
||||
const title = await encryptText(chat.title, key);
|
||||
const messages = await encryptText(JSON.stringify(chat.messages), key);
|
||||
|
||||
return {
|
||||
userId,
|
||||
encryptedTitle: title.ciphertext,
|
||||
encryptedMessages: messages.ciphertext,
|
||||
titleIv: title.iv,
|
||||
messagesIv: messages.iv,
|
||||
salt: bytesToBase64(salt),
|
||||
version: CHAT_CRYPTO_VERSION,
|
||||
updatedAt: chat.updatedAt,
|
||||
};
|
||||
}
|
||||
|
||||
async function decryptChatRow(row: EncryptedChatRow, passphrase: string): Promise<CoachChat> {
|
||||
const salt = base64ToBytes(row.salt);
|
||||
const key = await deriveKey(passphrase, row.userId, salt);
|
||||
const title = await decryptText({ ciphertext: row.encryptedTitle, iv: row.titleIv }, key);
|
||||
const messages = JSON.parse(await decryptText({ ciphertext: row.encryptedMessages, iv: row.messagesIv }, key));
|
||||
|
||||
return {
|
||||
id: row.$id,
|
||||
userId: row.userId,
|
||||
title,
|
||||
messages,
|
||||
createdAt: row.$createdAt,
|
||||
updatedAt: row.updatedAt || row.$updatedAt,
|
||||
};
|
||||
}
|
||||
|
||||
async function deriveKey(passphrase: string, userId: string, salt: Uint8Array) {
|
||||
const material = await crypto.subtle.importKey(
|
||||
"raw",
|
||||
new TextEncoder().encode(`${userId}:${passphrase}`),
|
||||
"PBKDF2",
|
||||
false,
|
||||
["deriveKey"],
|
||||
);
|
||||
|
||||
return crypto.subtle.deriveKey(
|
||||
{ name: "PBKDF2", salt: bytesToArrayBuffer(salt), iterations: KEY_ITERATIONS, hash: "SHA-256" },
|
||||
material,
|
||||
{ name: "AES-GCM", length: 256 },
|
||||
false,
|
||||
["encrypt", "decrypt"],
|
||||
);
|
||||
}
|
||||
|
||||
function bytesToArrayBuffer(bytes: Uint8Array) {
|
||||
return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength) as ArrayBuffer;
|
||||
}
|
||||
|
||||
async function encryptText(value: string, key: CryptoKey): Promise<EncryptedValue> {
|
||||
const iv = crypto.getRandomValues(new Uint8Array(12));
|
||||
const encrypted = await crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, new TextEncoder().encode(value));
|
||||
return { ciphertext: bytesToBase64(new Uint8Array(encrypted)), iv: bytesToBase64(iv) };
|
||||
}
|
||||
|
||||
async function decryptText(value: EncryptedValue, key: CryptoKey) {
|
||||
const decrypted = await crypto.subtle.decrypt(
|
||||
{ name: "AES-GCM", iv: base64ToBytes(value.iv) },
|
||||
key,
|
||||
base64ToBytes(value.ciphertext),
|
||||
);
|
||||
return new TextDecoder().decode(decrypted);
|
||||
}
|
||||
|
||||
function bytesToBase64(bytes: Uint8Array) {
|
||||
let binary = "";
|
||||
bytes.forEach((byte) => {
|
||||
binary += String.fromCharCode(byte);
|
||||
});
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
function base64ToBytes(value: string) {
|
||||
const binary = atob(value);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let index = 0; index < binary.length; index += 1) {
|
||||
bytes[index] = binary.charCodeAt(index);
|
||||
}
|
||||
return bytes;
|
||||
}
|
||||
|
||||
function userRowPermissions(userId: string) {
|
||||
const role = Role.user(userId);
|
||||
return [Permission.read(role), Permission.update(role), Permission.delete(role)];
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
import type { CSSProperties } from "react";
|
||||
|
||||
export type ThemeTokens = {
|
||||
primary: string;
|
||||
onPrimary: string;
|
||||
primaryContainer: string;
|
||||
onPrimaryContainer: string;
|
||||
secondary: string;
|
||||
onSecondary: string;
|
||||
secondaryContainer: string;
|
||||
onSecondaryContainer: string;
|
||||
tertiary: string;
|
||||
onTertiary: string;
|
||||
tertiaryContainer: string;
|
||||
onTertiaryContainer: string;
|
||||
error: string;
|
||||
onError: string;
|
||||
errorContainer: string;
|
||||
onErrorContainer: string;
|
||||
bg: string;
|
||||
surface: string;
|
||||
surfaceContainerLowest: string;
|
||||
surfaceContainerLow: string;
|
||||
surfaceContainer: string;
|
||||
surfaceContainerHigh: string;
|
||||
outline: string;
|
||||
outlineVariant: string;
|
||||
text: string;
|
||||
muted: string;
|
||||
subtle: string;
|
||||
accentWarm: string;
|
||||
chartPrimary: string;
|
||||
chartSecondary: string;
|
||||
chartTertiary: string;
|
||||
chartError: string;
|
||||
chartGrid: string;
|
||||
elevation1: string;
|
||||
elevation2: string;
|
||||
};
|
||||
|
||||
export type ThemeSeed = {
|
||||
primary: string;
|
||||
secondary?: string;
|
||||
tertiary?: string;
|
||||
sugarFree?: boolean;
|
||||
dark?: boolean;
|
||||
tokens?: Partial<ThemeTokens>;
|
||||
};
|
||||
|
||||
type Rgb = { r: number; g: number; b: number };
|
||||
|
||||
function clamp(value: number, min = 0, max = 255) {
|
||||
return Math.min(max, Math.max(min, value));
|
||||
}
|
||||
|
||||
function parseHex(hex: string): Rgb {
|
||||
const normalized = hex.replace("#", "");
|
||||
const value =
|
||||
normalized.length === 3
|
||||
? normalized
|
||||
.split("")
|
||||
.map((part) => part + part)
|
||||
.join("")
|
||||
: normalized;
|
||||
return {
|
||||
r: parseInt(value.slice(0, 2), 16),
|
||||
g: parseInt(value.slice(2, 4), 16),
|
||||
b: parseInt(value.slice(4, 6), 16),
|
||||
};
|
||||
}
|
||||
|
||||
function toHex({ r, g, b }: Rgb) {
|
||||
return `#${[r, g, b]
|
||||
.map((channel) => clamp(Math.round(channel)).toString(16).padStart(2, "0"))
|
||||
.join("")}`;
|
||||
}
|
||||
|
||||
function mix(a: string, b: string, weight: number) {
|
||||
const left = parseHex(a);
|
||||
const right = parseHex(b);
|
||||
return toHex({
|
||||
r: left.r * (1 - weight) + right.r * weight,
|
||||
g: left.g * (1 - weight) + right.g * weight,
|
||||
b: left.b * (1 - weight) + right.b * weight,
|
||||
});
|
||||
}
|
||||
|
||||
function luminance(hex: string) {
|
||||
const { r, g, b } = parseHex(hex);
|
||||
const channels = [r, g, b].map((channel) => {
|
||||
const value = channel / 255;
|
||||
return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
|
||||
});
|
||||
return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2];
|
||||
}
|
||||
|
||||
function onColor(background: string) {
|
||||
return luminance(background) > 0.58 ? "#1f252a" : "#ffffff";
|
||||
}
|
||||
|
||||
function containerColor(primary: string) {
|
||||
return mix(primary, "#ffffff", 0.82);
|
||||
}
|
||||
|
||||
function surfaceStack(primary: string, sugarFree: boolean, dark: boolean) {
|
||||
if (dark) {
|
||||
return {
|
||||
bg: mix(primary, "#000000", 0.88),
|
||||
surface: mix(primary, "#000000", 0.86),
|
||||
surfaceContainerLowest: mix(primary, "#000000", 0.78),
|
||||
surfaceContainerLow: mix(primary, "#000000", 0.82),
|
||||
surfaceContainer: mix(primary, "#000000", 0.84),
|
||||
surfaceContainerHigh: mix(primary, "#000000", 0.8),
|
||||
outline: mix(primary, "#ffffff", 0.35),
|
||||
outlineVariant: mix(primary, "#ffffff", 0.18),
|
||||
text: "#f5f7fa",
|
||||
muted: mix("#ffffff", primary, 0.45),
|
||||
subtle: mix("#ffffff", primary, 0.55),
|
||||
accentWarm: mix(primary, "#ffffff", 0.12),
|
||||
};
|
||||
}
|
||||
|
||||
const tint = sugarFree ? mix(primary, "#e8ecf4", 0.72) : mix(primary, "#ffffff", 0.94);
|
||||
return {
|
||||
bg: tint,
|
||||
surface: tint,
|
||||
surfaceContainerLowest: "#ffffff",
|
||||
surfaceContainerLow: mix(primary, "#ffffff", sugarFree ? 0.9 : 0.92),
|
||||
surfaceContainer: mix(primary, "#ffffff", sugarFree ? 0.86 : 0.88),
|
||||
surfaceContainerHigh: mix(primary, "#ffffff", sugarFree ? 0.8 : 0.82),
|
||||
outline: mix(primary, "#68747c", 0.55),
|
||||
outlineVariant: mix(primary, "#dce5ea", 0.72),
|
||||
text: "#1f252a",
|
||||
muted: mix("#68747c", primary, 0.25),
|
||||
subtle: mix("#839099", primary, 0.2),
|
||||
accentWarm: mix(primary, "#ffffff", sugarFree ? 0.78 : 0.84),
|
||||
};
|
||||
}
|
||||
|
||||
function chartSecondary(primary: string) {
|
||||
return mix(primary, "#9c4168", 0.45);
|
||||
}
|
||||
|
||||
function chartTertiary(primary: string) {
|
||||
return mix(primary, "#906d1d", 0.35);
|
||||
}
|
||||
|
||||
function rgbaFromHex(hex: string, alpha: number) {
|
||||
const { r, g, b } = parseHex(hex);
|
||||
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
|
||||
}
|
||||
|
||||
export function buildThemeTokens(seed: ThemeSeed): ThemeTokens {
|
||||
const { primary, sugarFree = false, dark = false } = seed;
|
||||
const secondary = seed.secondary ?? mix(primary, "#647887", 0.35);
|
||||
const tertiary = seed.tertiary ?? mix(primary, "#9b7b51", 0.3);
|
||||
const surfaces = surfaceStack(primary, sugarFree, dark);
|
||||
const primaryContainer = containerColor(primary);
|
||||
const secondaryContainer = containerColor(secondary);
|
||||
const tertiaryContainer = containerColor(tertiary);
|
||||
const error = "#ba1a1a";
|
||||
const errorContainer = "#ffdad6";
|
||||
|
||||
const tokens: ThemeTokens = {
|
||||
primary,
|
||||
onPrimary: onColor(primary),
|
||||
primaryContainer,
|
||||
onPrimaryContainer: onColor(primaryContainer),
|
||||
secondary,
|
||||
onSecondary: onColor(secondary),
|
||||
secondaryContainer,
|
||||
onSecondaryContainer: onColor(secondaryContainer),
|
||||
tertiary,
|
||||
onTertiary: onColor(tertiary),
|
||||
tertiaryContainer,
|
||||
onTertiaryContainer: onColor(tertiaryContainer),
|
||||
error,
|
||||
onError: "#ffffff",
|
||||
errorContainer,
|
||||
onErrorContainer: "#410002",
|
||||
bg: surfaces.bg,
|
||||
surface: surfaces.surface,
|
||||
surfaceContainerLowest: surfaces.surfaceContainerLowest,
|
||||
surfaceContainerLow: surfaces.surfaceContainerLow,
|
||||
surfaceContainer: surfaces.surfaceContainer,
|
||||
surfaceContainerHigh: surfaces.surfaceContainerHigh,
|
||||
outline: surfaces.outline,
|
||||
outlineVariant: surfaces.outlineVariant,
|
||||
text: surfaces.text,
|
||||
muted: surfaces.muted,
|
||||
subtle: surfaces.subtle,
|
||||
accentWarm: surfaces.accentWarm,
|
||||
chartPrimary: primary,
|
||||
chartSecondary: chartSecondary(primary),
|
||||
chartTertiary: chartTertiary(primary),
|
||||
chartError: error,
|
||||
chartGrid: rgbaFromHex(surfaces.outline, 0.24),
|
||||
elevation1: `0 12px 34px ${rgbaFromHex(primary, 0.08)}, 0 1px 2px ${rgbaFromHex(primary, 0.06)}`,
|
||||
elevation2: `0 18px 44px ${rgbaFromHex(primary, 0.12)}, 0 2px 8px ${rgbaFromHex(primary, 0.08)}`,
|
||||
};
|
||||
|
||||
return { ...tokens, ...seed.tokens };
|
||||
}
|
||||
|
||||
export function themeTokensToStyle(tokens: ThemeTokens): CSSProperties {
|
||||
return {
|
||||
"--primary": tokens.primary,
|
||||
"--on-primary": tokens.onPrimary,
|
||||
"--primary-container": tokens.primaryContainer,
|
||||
"--on-primary-container": tokens.onPrimaryContainer,
|
||||
"--secondary": tokens.secondary,
|
||||
"--on-secondary": tokens.onSecondary,
|
||||
"--secondary-container": tokens.secondaryContainer,
|
||||
"--on-secondary-container": tokens.onSecondaryContainer,
|
||||
"--tertiary": tokens.tertiary,
|
||||
"--on-tertiary": tokens.onTertiary,
|
||||
"--tertiary-container": tokens.tertiaryContainer,
|
||||
"--on-tertiary-container": tokens.onTertiaryContainer,
|
||||
"--error": tokens.error,
|
||||
"--on-error": tokens.onError,
|
||||
"--error-container": tokens.errorContainer,
|
||||
"--on-error-container": tokens.onErrorContainer,
|
||||
"--bg": tokens.bg,
|
||||
"--surface": tokens.surface,
|
||||
"--surface-container-lowest": tokens.surfaceContainerLowest,
|
||||
"--surface-container-low": tokens.surfaceContainerLow,
|
||||
"--surface-container": tokens.surfaceContainer,
|
||||
"--surface-container-high": tokens.surfaceContainerHigh,
|
||||
"--panel": tokens.surfaceContainer,
|
||||
"--panel-strong": tokens.surfaceContainerLowest,
|
||||
"--outline": tokens.outline,
|
||||
"--outline-variant": tokens.outlineVariant,
|
||||
"--text": tokens.text,
|
||||
"--muted": tokens.muted,
|
||||
"--subtle": tokens.subtle,
|
||||
"--accent": tokens.primaryContainer,
|
||||
"--accent-soft": tokens.surfaceContainerLow,
|
||||
"--accent-strong": tokens.primary,
|
||||
"--accent-warm": tokens.accentWarm,
|
||||
"--chart-primary": tokens.chartPrimary,
|
||||
"--chart-secondary": tokens.chartSecondary,
|
||||
"--chart-tertiary": tokens.chartTertiary,
|
||||
"--chart-error": tokens.chartError,
|
||||
"--chart-grid": tokens.chartGrid,
|
||||
"--elevation-1": tokens.elevation1,
|
||||
"--elevation-2": tokens.elevation2,
|
||||
} as CSSProperties;
|
||||
}
|
||||
@@ -54,3 +54,23 @@ export type ImportPreview = {
|
||||
fileName: string;
|
||||
rows: ImportPreviewRow[];
|
||||
};
|
||||
|
||||
export type ChatRole = "user" | "assistant";
|
||||
|
||||
export type CoachMessage = {
|
||||
id: string;
|
||||
role: ChatRole;
|
||||
content: string;
|
||||
thinking?: string;
|
||||
pending?: boolean;
|
||||
stopped?: boolean;
|
||||
};
|
||||
|
||||
export type CoachChat = {
|
||||
id: string;
|
||||
userId: string;
|
||||
title: string;
|
||||
messages: CoachMessage[];
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
Vendored
+2
@@ -5,8 +5,10 @@ interface ImportMetaEnv {
|
||||
readonly VITE_APPWRITE_PROJECT_ID?: string;
|
||||
readonly VITE_APPWRITE_DATABASE_ID?: string;
|
||||
readonly VITE_APPWRITE_COLLECTION_ID?: string;
|
||||
readonly VITE_APPWRITE_CHAT_COLLECTION_ID?: string;
|
||||
readonly VITE_APPWRITE_OAUTH_SUCCESS_URL?: string;
|
||||
readonly VITE_APPWRITE_OAUTH_FAILURE_URL?: string;
|
||||
readonly VITE_OLLAMA_PROXY_URL?: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
|
||||
Reference in New Issue
Block a user