Mike/Kordant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Context-based theme provider with animated Typewriter toggle

Browse Source 
- Convert theme to SolidJS Context/Provider pattern (ThemeProvider)
- Extract createThemeState() for testability without context
- Add Typewriter component with character-by-character reveal
- Animate ThemeToggle with Typewriter label and hover scale
- Add cursor CSS animations (typewriter-blink, cursor-typing, cursor-block)
- Fix background color transition by using 'all' on :root
- Rename theme.ts -> theme.tsx for JSX support
- All 26 theme tests passing
This commit is contained in:
Michael Freno
2026-05-25 15:10:52 -04:00
parent c9a82fc6de
commit d4c1b62a97
6 changed files with 311 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/components/layout/Navbar.tsx
View File

@@ -2,6 +2,7 @@ import { createSignal, onMount, onCleanup, Show, Suspense } from "solid-js";
import { A } from "@solidjs/router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui";
import { Typewriter } from "~/components/ui/Typewriter";
import { useTheme } from "~/lib/theme";
import { useAuth } from "./useAuth";
@@ -44,17 +45,48 @@ function ShieldLogo() {
function ThemeToggle() {
const { toggle, resolved } = useTheme();
const [mounted, setMounted] = createSignal(false);
onMount(() => {
setMounted(true);
});
return (
<button
type="button"
aria-label="Toggle theme"
class="p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-colors"
class="flex items-center gap-1.5 p-2 rounded-lg text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] transition-all duration-200 ease-in-out hover:scale-105"
onClick={toggle}
>
<Show
when={resolved() === "dark"}
fallback={
when={mounted()}
fallback={<div style={{ width: "20px", height: "20px" }} />}
>
<Show
when={resolved() === "dark"}
fallback={
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
</svg>
}
>
<svg
width="20"
height="20"
@@ -65,30 +97,22 @@ function ThemeToggle() {
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="5" />
<line x1="12" y1="1" x2="12" y2="3" />
<line x1="12" y1="21" x2="12" y2="23" />
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
<line x1="1" y1="12" x2="3" y2="12" />
<line x1="21" y1="12" x2="23" y2="12" />
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
}
</Show>
</Show>
<Show
when={mounted()}
fallback={<span style={{ visibility: "hidden" }}>Light</span>}
>
<svg
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
</svg>
<span class="text-sm font-medium hidden sm:inline">
<Show
when={resolved() === "dark"}
fallback={<Typewriter keepAlive={false}>Light</Typewriter>}
>
<Typewriter keepAlive={false}>Dark</Typewriter>
</Show>
</span>
</Show>
</button>
);

175
web/src/components/ui/Typewriter.tsx Normal file
View File

@@ -0,0 +1,175 @@
import { JSX, onMount, onCleanup, createSignal, children } from "solid-js";
export function Typewriter(props: {
children: JSX.Element;
speed?: number;
class?: string;
keepAlive?: boolean | number;
delay?: number;
}) {
const { keepAlive = true, delay = 0 } = props;
let containerRef: HTMLDivElement | undefined;
let cursorRef: HTMLDivElement | undefined;
const [isTyping, setIsTyping] = createSignal(false);
const [isDelaying, setIsDelaying] = createSignal(delay > 0);
const [shouldHide, setShouldHide] = createSignal(false);
const [animated, setAnimated] = createSignal(false);
const resolved = children(() => props.children);
onMount(() => {
if (!containerRef || !cursorRef) return;
containerRef.style.position = "relative";
let totalChars = 0;
const charElements: HTMLElement[] = [];
const walkDOM = (node: Node) => {
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent || "";
if (text.trim().length > 0) {
totalChars += text.length;
const fragment = document.createDocumentFragment();
const span = document.createElement("span");
text.split("").forEach((char) => {
const charSpan = document.createElement("span");
charSpan.textContent = char;
charSpan.style.opacity = "0";
charElements.push(charSpan);
span.appendChild(charSpan);
});
fragment.appendChild(span);
node.parentNode?.replaceChild(fragment, node);
}
} else if (node.nodeType === Node.ELEMENT_NODE) {
Array.from(node.childNodes).forEach(walkDOM);
}
};
walkDOM(containerRef);
setAnimated(true);
containerRef.setAttribute("data-typewriter-ready", "true");
const handleAnimationEnd = () => {
setShouldHide(true);
cursorRef?.removeEventListener("animationend", handleAnimationEnd);
};
let cleanupAnimation: (() => void) | undefined;
const startReveal = () => {
setIsTyping(true);
let currentIndex = 0;
const speed = props.speed || 30;
const msPerChar = 1000 / speed;
let lastTime = performance.now();
let animationFrameId: number;
const revealNextChar = (currentTime: number) => {
const elapsed = currentTime - lastTime;
if (elapsed >= msPerChar) {
if (currentIndex < totalChars) {
const charSpan = charElements[currentIndex];
if (charSpan) {
const rect = charSpan.getBoundingClientRect();
const containerRect = containerRef?.getBoundingClientRect();
charSpan.style.opacity = "1";
if (cursorRef && containerRect) {
cursorRef.style.left = `${rect.right - containerRect.left}px`;
cursorRef.style.top = `${rect.top - containerRect.top}px`;
cursorRef.style.height = `${charSpan.offsetHeight}px`;
}
}
currentIndex++;
lastTime = currentTime;
} else {
setIsTyping(false);
if (typeof keepAlive === "number") {
cursorRef?.addEventListener("animationend", handleAnimationEnd);
const durationSeconds = keepAlive / 1000;
const iterations = Math.ceil(durationSeconds);
if (cursorRef) {
cursorRef.style.animation = `blink 1s ${iterations}`;
}
}
return;
}
}
animationFrameId = requestAnimationFrame(revealNextChar);
};
animationFrameId = requestAnimationFrame(revealNextChar);
return () => {
if (animationFrameId) {
cancelAnimationFrame(animationFrameId);
}
};
};
if (delay > 0) {
setTimeout(() => {
setIsDelaying(false);
cleanupAnimation = startReveal();
}, delay);
} else {
cleanupAnimation = startReveal();
}
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting && cleanupAnimation) {
// Component is off-screen - could add pause logic here if needed
}
});
},
{
rootMargin: "50px",
threshold: 0.1,
},
);
observer.observe(containerRef);
onCleanup(() => {
observer.disconnect();
if (cleanupAnimation) {
cleanupAnimation();
}
});
});
const getCursorClass = () => {
if (isDelaying()) return "cursor-block";
if (isTyping()) return "cursor-typing";
if (shouldHide()) return "hidden";
return keepAlive ? "cursor-block" : "hidden";
};
return (
<div
ref={containerRef}
class={props.class}
style={{ opacity: animated() ? "1" : "0" }}
data-typewriter={!animated() ? "static" : "animated"}
>
{resolved()}
<span ref={cursorRef} class={getCursorClass()}></span>
</div>
);
}