dirtydishes/islandflow
1
0
Fork 0
Code Issues 2 Pull requests 4 Projects Releases Packages Wiki Activity Actions 1

Add theme selector with persisted context

Browse source
This commit is contained in:
dirtydishes 2026-01-06 14:59:59 -05:00
parent 8fc8361390
commit 16d42daf54
4 changed files with 115 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

34
apps/web/app/globals.css
View file

@ -78,6 +78,40 @@ h1 {
min-width: 220px;
}
.header-controls {
display: flex;
gap: 12px;
align-items: center;
justify-content: flex-end;
}
.theme-picker {
display: flex;
align-items: center;
gap: 8px;
}
.theme-label {
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #6f5b39;
}
.theme-select {
border: 1px solid rgba(111, 91, 57, 0.35);
border-radius: 12px;
padding: 6px 10px;
background: #fffdf7;
color: #1d1d1b;
font-size: 0.9rem;
}
.theme-select:focus-visible {
outline: 2px solid rgba(47, 109, 79, 0.3);
outline-offset: 2px;
}
.filter-bar {
display: flex;
align-items: center;

5
apps/web/app/layout.tsx
View file

@ -1,5 +1,6 @@
import "./globals.css";
import type { ReactNode } from "react";
import { ThemeProvider } from "./providers/theme";
export const metadata = {
title: "Islandflow",
@ -13,7 +14,9 @@ type RootLayoutProps = {
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html lang="en">
<body>{children}</body>
<body>
<ThemeProvider>{children}</ThemeProvider>
</body>
</html>
);
}

33
apps/web/app/page.tsx
View file

@ -1,6 +1,14 @@
"use client";
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import {
useCallback,
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
type ChangeEvent
} from "react";
import type {
AlertEvent,
ClassifierHitEvent,
@ -11,6 +19,7 @@ import type {
OptionNBBO,
OptionPrint
} from "@islandflow/types";
import { useTheme, type Theme } from "./providers/theme";
const MAX_ITEMS = 500;
const NBBO_MAX_AGE_MS = Number(process.env.NEXT_PUBLIC_NBBO_MAX_AGE_MS);
@ -1503,6 +1512,7 @@ export default function HomePage() {
const [selectedAlert, setSelectedAlert] = useState<AlertEvent | null>(null);
const [selectedDarkEvent, setSelectedDarkEvent] = useState<InferredDarkEvent | null>(null);
const [filterInput, setFilterInput] = useState<string>("");
const { theme, setTheme } = useTheme();
const optionsScroll = useListScroll();
const equitiesScroll = useListScroll();
const flowScroll = useListScroll();
@ -1874,6 +1884,11 @@ export default function HomePage() {
setMode((prev) => (prev === "live" ? "replay" : "live"));
};
const handleThemeChange = (event: ChangeEvent<HTMLSelectElement>) => {
const nextTheme = event.target.value as Theme;
setTheme(nextTheme);
};
return (
<main className="dashboard">
<header className="header">
@ -1889,9 +1904,19 @@ export default function HomePage() {
<span className="summary-value">
{lastSeen ? formatTime(lastSeen) : "Waiting for data"}
</span>
<button className="mode-button" type="button" onClick={toggleMode}>
Switch to {mode === "live" ? "Replay" : "Live"}
</button>
<div className="header-controls">
<label className="theme-picker">
<span className="theme-label">Theme</span>
<select className="theme-select" value={theme} onChange={handleThemeChange}>
<option value="default">Default</option>
<option value="bbg">BBG</option>
<option value="system">System (placeholder)</option>
</select>
</label>
<button className="mode-button" type="button" onClick={toggleMode}>
Switch to {mode === "live" ? "Replay" : "Live"}
</button>
</div>
</div>
</header>

48
apps/web/app/providers/theme.tsx Normal file
View file

@ -0,0 +1,48 @@
"use client";
import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
const STORAGE_KEY = "theme";
export type Theme = "default" | "bbg" | "system";
type ThemeContextValue = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
const isTheme = (value: string | null): value is Theme => {
return value === "default" || value === "bbg" || value === "system";
};
const ThemeContext = createContext<ThemeContextValue | null>(null);
export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setTheme] = useState<Theme>("default");
useEffect(() => {
const stored = localStorage.getItem(STORAGE_KEY);
if (isTheme(stored)) {
setTheme(stored);
} else if (stored !== null && !isTheme(stored)) {
localStorage.removeItem(STORAGE_KEY);
}
}, []);
useEffect(() => {
document.documentElement.dataset.theme = theme;
localStorage.setItem(STORAGE_KEY, theme);
}, [theme]);
const value = useMemo<ThemeContextValue>(() => ({ theme, setTheme }), [theme]);
return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
}
export function useTheme(): ThemeContextValue {
const context = useContext(ThemeContext);
if (!context) {
throw new Error("useTheme must be used within a ThemeProvider");
}
return context;
}