fetch on render instead of fetch as you render

src/app/admin/chat/_components/ModelSelector.tsx

@@ -1,48 +0,0 @@
-'use client'
-import { trpc } from '~/app/_trpc/Client'
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '~/components/ui/select'
-
-export default function ModelSelector({ initialValue }: { initialValue: string }) {
-	const utils = trpc.useUtils()
-	const { data: models, isLoading, error } = trpc.chat.listModels.useQuery()
-	const { data: model = initialValue } = trpc.chat.getModel.useQuery(undefined, {
-		initialData: initialValue,
-	})
-
-	const mutation = trpc.chat.updateModel.useMutation({
-		onSuccess: () => utils.chat.getModel.invalidate(),
-	})
-
-	// Ensure the currently-saved model is always selectable, even if the
-	// OpenAI list doesn't include it (e.g. a deprecated model).
-	const options = Array.from(new Set([model, ...(models ?? [])])).filter(Boolean)
-
-	return (
-		<div className="flex flex-col gap-2">
-			<Select value={model} onValueChange={(v) => mutation.mutate({ model: v })}>
-				<SelectTrigger className="w-72">
-					<SelectValue placeholder={isLoading ? 'Loading models…' : 'Select a model'} />
-				</SelectTrigger>
-				<SelectContent>
-					{options.map((id) => (
-						<SelectItem key={id} value={id}>
-							{id}
-						</SelectItem>
-					))}
-				</SelectContent>
-			</Select>
-			<div className="flex items-center gap-3 text-sm text-muted-foreground">
-				{mutation.isPending && <span>Saving…</span>}
-				{mutation.isSuccess && !mutation.isPending && <span>Saved</span>}
-				{error && <span className="text-destructive">Failed to load models: {error.message}</span>}
-				{mutation.error && <span className="text-destructive">{mutation.error.message}</span>}
-			</div>
-		</div>
-	)
-}

src/app/admin/chat/page.tsx

@@ -1,23 +1,11 @@
 import { servTrpc } from '~/app/_trpc/ServerClient'
 import SystemPromptForm from './_components/SystemPromptForm'
-import ModelSelector from './_components/ModelSelector'
 
 export default async function SystemPromptPage() {
 	const prompt = await servTrpc.chat.getSystemPrompt()
-	const model = await servTrpc.chat.getModel()
 
 	return (
-		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
+		<div className="w-full max-w-2xl p-6 flex flex-col gap-4">
-			<div className="flex flex-col gap-4">
-				<div>
-					<h1 className="text-lg font-semibold">AI Model</h1>
-					<p className="text-sm text-muted-foreground">
-						The OpenAI model used to respond to chat requests.
-					</p>
-				</div>
-				<ModelSelector initialValue={model} />
-			</div>
-			<div className="flex flex-col gap-4">
 			<div>
 				<h1 className="text-lg font-semibold">AI System Prompt</h1>
 				<p className="text-sm text-muted-foreground">
@@ -26,6 +14,5 @@ export default async function SystemPromptPage() {
 			</div>
 			<SystemPromptForm initialValue={prompt} />
 		</div>
-		</div>
 	)
 }

src/app/api/chat/route.ts

@@ -32,7 +32,6 @@ export async function POST(req: Request) {
 	if (!session) return new Response('Session not found', { status: 404 })
 
 	const systemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
-	const model = await servTrpc.chat.getModel()
 
 	// Save the latest user message
 	const lastMessage = messages[messages.length - 1]
@@ -47,7 +46,7 @@ export async function POST(req: Request) {
 	}
 
 	const result = streamText({
-		model: openai(model),
+		model: openai('gpt-5-mini'),
 		system: systemPrompt,
 		messages: await convertToModelMessages(messages),
 		tools: {

src/app/cv/_components/CvCategory.tsx

@@ -1,35 +1,35 @@
 'use client'
-import { trpc } from "~/app/_trpc/Client"
 import CvEntry from "./CvEntry"
 import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils"
 import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
 import { ScrollArea } from "~/components/ui/scroll-area";
+
+export type CvCategoryData = ArrayElement<RouterOutputs['categoryv2']['listAllWithEntries']>
+
 type CvCategoryProps = {
-  initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
+  category: CvCategoryData,
-  layout: "row"|"col",
+  layout: "row" | "col",
   position?: number,
-  children?: React.ReactElement<Parameters<typeof CvEntry>>
 }
-export default function CvCategory(props:CvCategoryProps)  {
+export default function CvCategory({ category, layout, position = 0 }: CvCategoryProps) {
-  const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
+  const entries = category.cvEntry
-  const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
-  const position = props.position ?? 0
   return (
-			<AnimatedCard position={position} className={cn(props.layout == "row" ? "w-full" : "", "h-screen")}>
+    <AnimatedCard position={position} className={cn(layout == "row" ? "w-full" : "", "h-screen")}>
       <CardHeader>
-					<CardTitle>
+        <AnimateTextIn position={position + 0.2} animation="slide">
-						{category.data?.name}
+          <CardTitle>{category.name}</CardTitle>
-					</CardTitle>
+        </AnimateTextIn>
       </CardHeader>
-				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
+      {entries.length > 0 ?
-					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
+        <CardContent className={cn(layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col", "gap-4", "overflow-scroll")}>
           <ScrollArea>
-						{entries.data?.map((entry,i) => (
+            {entries.map((entry, i) => (
               <AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
+                <CvEntry position={position + 0.4 + i * 0.2} entry={entry} className={layout == "row" ? "w-full lg:w-fit" : undefined} />
               </AnimatePopUp>
             ))}
           </ScrollArea>

src/app/cv/_components/CvEntry.tsx

@@ -1,68 +1,49 @@
-import { trpc } from "~/app/_trpc/Client"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
-import { Skeleton } from "~/components/ui/skeleton"
+import { cn } from "~/lib/utils"
-import { cn, type Defined } from "~/lib/utils"
 import Markdown from 'react-markdown'
 import { format } from 'date-fns'
 import rehypeHighlight from 'rehype-highlight'
 import rehypeRaw from 'rehype-raw'
-import type { RouterOutputs } from "~/server/routers/_app"
 import type { ArrayElement } from "type-fest"
-export default function CvEntry(params: {
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
-	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
-	className?: string
+import type { CvCategoryData } from "./CvCategory"
+
+export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
+
+export default function CvEntry({ entry, className, position = 0 }: {
+	entry: CvEntryData,
+	className?: string,
+	position?: number
 }) {
-	const query = trpc.entryv2.getById.useQuery(params.initialData.id);
-	const { data, isError, error } = query
 	return (
-		<>
+		<Card className={className ? cn("w-fit", className) : "w-fit"}>
-			{
+			{entry.title ?
-				data ?
-					<>
-						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
-							{
-								data.title ?
 				<CardHeader>
-										<CardTitle> {data.title} </CardTitle>
+					<AnimateTextIn position={position} animation="slide">
+						<CardTitle> {entry.title} </CardTitle>
+					</AnimateTextIn>
 				</CardHeader> :
 				<></>
 			}
-							{
+			{entry.description ?
-								data.description ?
 				<CardContent className="text-sm lg:text-base">
+					<AnimatePopUp position={position + 0.2}>
 						<article className="prose prose-zinc dark:prose-invert max-w-none">
-											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
+							<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{entry.description}</Markdown>
 						</article>
+					</AnimatePopUp>
 				</CardContent> :
 				<></>
 			}
-							{
+			{!entry.hideDates ?
-								!data.hideDates ?
 				<CardFooter className="text-sm">
-										{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
+					<AnimateTextIn position={position + 0.4}>
+						{`von ${format(new Date(entry.fromTime), 'M. yyyy')} bis zum ${format(new Date(entry.toTime), 'M. yyyy')}`}
+					</AnimateTextIn>
 				</CardFooter> :
 				<></>
 			}
 		</Card>
-					</> :
-					<>
-						<Card>
-							<CardHeader>
-								<div className="flex flex-row">
-									<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
-									<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
-								</div>
-							</CardHeader>
-							<CardContent>
-								<div>
-									<Skeleton className="h-4 w-60" />
-									<Skeleton className="h-4 w-50" />
-									<Skeleton className="h-4 w-50" />
-								</div>
-							</CardContent>
-						</Card>
-					</>
-			}
-		</>
 	)
 }

src/app/cv/page.tsx

@@ -5,26 +5,25 @@ import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sideba
 import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
 export default function CvPage() {
-  const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
+  const cv = trpc.categoryv2.listAllWithEntries.useQuery();
-  const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
+  useTimeLine(cv.data)
-  const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
+  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
-  const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
+    cv.data?.filter((c) => c.layoutPosition === pos) ?? []
-  useTimeLine(col2Categories.data)
+  const sidebarCategories = byPosition("sidebar")
+  const headerCategories = byPosition("header")
+  const col1Categories = byPosition("col1")
+  const col2Categories = byPosition("col2")
   return (
     <>
       <SidebarProvider>
-        {sidebarCategories.data &&
+        {sidebarCategories.length > 0 &&
           <>
             <SidebarTriggerDisappearsOnMobile />
             <Sidebar>
               <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat, i) => {
+                {sidebarCategories.map((cat, i) => (
-                  if (cat !== undefined) {
+                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
-                    return (
+                ))}
-                      <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
-                    )
-                  }
-                })}
               </SidebarContent>
             </Sidebar>
           </>
@@ -32,19 +31,19 @@ export default function CvPage() {
         <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
           <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
             <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.data?.map((cat, i) => (
+              {headerCategories.map((cat, i) => (
-                <CvCategory layout="row" position={i} initialData={cat} key={cat.id} />
+                <CvCategory layout="row" position={i} category={cat} key={cat.id} />
               ))}
             </div>
             <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
-              <div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
+              <div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat, i) => (
+                {col1Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
+                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
                 ))}
               </div>
-              <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
+              <div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat, i) => (
+                {col2Categories.map((cat, i) => (
-                  <CvCategory layout="col" position={i} initialData={cat} key={cat.id} />
+                  <CvCategory layout="col" position={i} category={cat} key={cat.id} />
                 ))}
               </div>
             </div>

src/app/layout.tsx

@@ -12,7 +12,6 @@ import TrpcProvider from "./_trpc/TrpcProvider";
 import ThemeProvider from './_providers/ThemeProvider'
 import GsapProvider from "./_providers/GsapProvicer";
 import {MessagesProvider} from "./_providers/MessagesProvider";
-import { MusicPlayerProvider } from "./music/_components/MusicPlayerProvider";
 import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
 import { cn } from "~/lib/utils";
 import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
@@ -50,7 +49,6 @@ export default async function RootLayout({
 						<body className="flex flex-col bg-background text-foreground">
 							<ThemeProvider>
 							<MessagesProvider>
-								<MusicPlayerProvider>
 								<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
 									<TopNav />
 									<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
@@ -59,7 +57,6 @@ export default async function RootLayout({
 									{modal}
 								</AnimatedBackGroundContainer>
 								<ChatFAB />
-								</MusicPlayerProvider>
 								</MessagesProvider>
 							</ThemeProvider>
 						</body>

src/app/music/_components/AudioPlayer.tsx

@@ -6,7 +6,6 @@ import type WaveSurfer from "wavesurfer.js";
 import { Download, Loader2, Pause, Play } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { toast } from "sonner";
-import { useMusicPlayer } from "./MusicPlayerProvider";
 
 function formatTime(seconds: number) {
 	if (!Number.isFinite(seconds)) return "0:00";
@@ -29,46 +28,32 @@ function waveColors() {
 	};
 }
 
-/**
- * Per-track waveform. Playback itself is owned by the shared MusicPlayer engine
- * (so it keeps running across navigation); this wavesurfer instance is only a
- * visual + seek surface that mirrors the engine when its track is active.
- */
 export default function AudioPlayer(props: {
-	id: string;
+	/** Streaming-friendly source the player actually plays. */
 	src: string;
+	/** Original high-quality file offered via the download button. */
 	downloadUrl: string;
 	downloadName: string;
 }) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const wsRef = useRef<WaveSurfer | null>(null);
-	const [ready, setReady] = useState(false);
+	const [playing, setPlaying] = useState(false);
+	const [current, setCurrent] = useState(0);
 	const [duration, setDuration] = useState(0);
+	const [ready, setReady] = useState(false);
 	const [downloading, setDownloading] = useState(false);
 	const { resolvedTheme } = useTheme();
 
-	const { currentId, isPlaying, currentTime, toggle, seek, subscribeTime } = useMusicPlayer();
-	const isActive = currentId === props.id;
-
-	// Reach live values from the once-created wavesurfer callbacks.
-	const isActiveRef = useRef(isActive);
-	isActiveRef.current = isActive;
-	const currentTimeRef = useRef(currentTime);
-	currentTimeRef.current = currentTime;
-	const toggleRef = useRef(toggle);
-	toggleRef.current = toggle;
-	const seekRef = useRef(seek);
-	seekRef.current = seek;
-
 	useEffect(() => {
 		let ws: WaveSurfer | null = null;
 		let cancelled = false;
 		setReady(false);
+		setCurrent(0);
 
 		(async () => {
 			const WaveSurferClass = (await import("wavesurfer.js")).default;
 			if (cancelled || !containerRef.current) return;
-			const instance = WaveSurferClass.create({
+			ws = WaveSurferClass.create({
 				container: containerRef.current,
 				url: props.src,
 				height: 44,
@@ -79,20 +64,15 @@ export default function AudioPlayer(props: {
 				cursorWidth: 1,
 				...waveColors(),
 			});
-			ws = instance;
+			wsRef.current = ws;
-			wsRef.current = instance;
+			ws.on("ready", () => {
-			instance.on("ready", () => {
-				// This media is for drawing only — never let it make sound.
-				instance.setMuted(true);
 				setReady(true);
-				setDuration(instance.getDuration());
+				setDuration(ws?.getDuration() ?? 0);
-				if (isActiveRef.current) instance.setTime(currentTimeRef.current);
-			});
-			// Clicking the waveform: start this track if it isn't playing, then seek.
-			instance.on("interaction", (time: number) => {
-				if (!isActiveRef.current) toggleRef.current(props.id);
-				seekRef.current(time);
 			});
+			ws.on("play", () => setPlaying(true));
+			ws.on("pause", () => setPlaying(false));
+			ws.on("finish", () => setPlaying(false));
+			ws.on("timeupdate", (t) => setCurrent(t));
 		})();
 
 		return () => {
@@ -102,23 +82,15 @@ export default function AudioPlayer(props: {
 		};
 	}, [props.src]);
 
-	// Mirror the engine's playback position onto the cursor while active.
-	useEffect(() => {
-		const ws = wsRef.current;
-		if (!ws || !ready) return;
-		if (!isActive) {
-			ws.setTime(0);
-			return;
-		}
-		ws.setTime(currentTimeRef.current);
-		return subscribeTime((t) => wsRef.current?.setTime(t));
-	}, [isActive, ready, subscribeTime]);
-
 	// Re-tint the waveform when the user toggles light/dark.
 	useEffect(() => {
 		wsRef.current?.setOptions(waveColors());
 	}, [resolvedTheme]);
 
+	function togglePlay() {
+		wsRef.current?.playPause();
+	}
+
 	async function handleDownload() {
 		setDownloading(true);
 		try {
@@ -142,8 +114,6 @@ export default function AudioPlayer(props: {
 		}
 	}
 
-	const playing = isActive && isPlaying;
-
 	return (
 		<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
 			<Button
@@ -152,13 +122,13 @@ export default function AudioPlayer(props: {
 				variant="ghost"
 				aria-label={playing ? "Pause" : "Play"}
 				disabled={!ready}
-				onClick={() => toggle(props.id)}
+				onClick={togglePlay}
 			>
 				{playing ? <Pause /> : <Play />}
 			</Button>
 
 			<span className="w-10 shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums">
-				{formatTime(isActive ? currentTime : 0)}
+				{formatTime(current)}
 			</span>
 
 			<div className="relative flex-1">

src/app/music/_components/MusicMiniPlayer.tsx

@@ -1,73 +0,0 @@
-'use client'
-
-import { useState } from "react";
-import { Music } from "lucide-react";
-import {
-	Drawer,
-	DrawerContent,
-	DrawerHeader,
-	DrawerTitle,
-	DrawerTrigger,
-} from "~/components/ui/drawer";
-import { Slider } from "~/components/ui/slider";
-import { useMusicPlayer } from "./MusicPlayerProvider";
-import PlayerControls from "./PlayerControls";
-
-function formatTime(seconds: number) {
-	if (!Number.isFinite(seconds)) return "0:00";
-	const m = Math.floor(seconds / 60);
-	const s = Math.floor(seconds % 60);
-	return `${m}:${s.toString().padStart(2, "0")}`;
-}
-
-/**
- * Global, persistent mini-player: a floating button (shown once something is
- * loaded) that opens a drawer with the transport controls and a scrubber, so
- * playback can be controlled from any page while it keeps running in the
- * background.
- */
-export default function MusicMiniPlayer() {
-	const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
-	const [open, setOpen] = useState(false);
-
-	if (!currentTrack) return null;
-
-	return (
-		<Drawer open={open} onOpenChange={setOpen}>
-			<DrawerTrigger asChild>
-				<button
-					type="button"
-					aria-label="Open player"
-					className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
-				>
-					<Music className={isPlaying ? "animate-pulse" : ""} />
-					<span className="truncate text-sm">{currentTrack.title}</span>
-				</button>
-			</DrawerTrigger>
-			<DrawerContent>
-				<DrawerHeader>
-					<DrawerTitle>{currentTrack.title}</DrawerTitle>
-				</DrawerHeader>
-				<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
-					<div className="flex items-center gap-2">
-						<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
-							{formatTime(currentTime)}
-						</span>
-						<Slider
-							className="flex-1"
-							min={0}
-							max={duration || 1}
-							step={0.1}
-							value={[currentTime]}
-							onValueChange={([v]) => seek(v ?? 0)}
-						/>
-						<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
-							{formatTime(duration)}
-						</span>
-					</div>
-					<PlayerControls />
-				</div>
-			</DrawerContent>
-		</Drawer>
-	);
-}

src/app/music/_components/MusicPlayerProvider.tsx

@@ -1,314 +0,0 @@
-'use client'
-
-import {
-	createContext,
-	useCallback,
-	useContext,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-	type ReactNode,
-} from "react";
-import { trpc } from "~/app/_trpc/Client";
-import MusicMiniPlayer from "./MusicMiniPlayer";
-
-export type PlayerTrack = {
-	id: string;
-	title: string;
-	/** Streaming-friendly source actually played. */
-	src: string;
-	/** Original high-quality file for the download button. */
-	downloadUrl: string;
-	downloadName: string;
-};
-
-type MusicPlayerValue = {
-	tracks: PlayerTrack[];
-	currentId: string | null;
-	currentTrack: PlayerTrack | null;
-	isPlaying: boolean;
-	shuffle: boolean;
-	currentTime: number;
-	duration: number;
-	/** Play button on a track: start it, or toggle play/pause if already current. */
-	toggle: (id: string) => void;
-	/** Global play/pause — acts on the current track (or starts the first one). */
-	togglePlayCurrent: () => void;
-	next: () => void;
-	previous: () => void;
-	toggleShuffle: () => void;
-	seek: (seconds: number) => void;
-	/** Subscribe to playback time updates (for waveform cursors). */
-	subscribeTime: (cb: (time: number) => void) => () => void;
-};
-
-const MusicPlayerContext = createContext<MusicPlayerValue | null>(null);
-
-export function useMusicPlayer() {
-	const ctx = useContext(MusicPlayerContext);
-	if (!ctx) throw new Error("useMusicPlayer must be used within a MusicPlayerProvider");
-	return ctx;
-}
-
-export function MusicPlayerProvider({ children }: { children: ReactNode }) {
-	// The provider owns the playlist so playback survives navigating away from
-	// the music page. The query is cached, so the music page shares this request.
-	const { data } = trpc.music.list.useQuery();
-	const tracks = useMemo<PlayerTrack[]>(
-		() =>
-			(data ?? []).map((t) => ({
-				id: t.id,
-				title: t.title,
-				src: t.streamUrl ?? t.fileUrl,
-				downloadUrl: t.fileUrl,
-				downloadName: t.fileName,
-			})),
-		[data],
-	);
-
-	const [currentId, setCurrentId] = useState<string | null>(null);
-	const [isPlaying, setIsPlaying] = useState(false);
-	const [shuffle, setShuffle] = useState(false);
-	const [currentTime, setCurrentTime] = useState(0);
-	const [duration, setDuration] = useState(0);
-
-	const audioRef = useRef<HTMLAudioElement | null>(null);
-	const tracksRef = useRef(tracks);
-	tracksRef.current = tracks;
-
-	// Lightweight pub/sub so each waveform can follow playback time without every
-	// player re-rendering on the audio element's frequent timeupdate.
-	const timeSubs = useRef<Set<(t: number) => void>>(new Set());
-	const subscribeTime = useCallback((cb: (t: number) => void) => {
-		timeSubs.current.add(cb);
-		return () => {
-			timeSubs.current.delete(cb);
-		};
-	}, []);
-	const emitTime = useCallback((t: number) => {
-		timeSubs.current.forEach((cb) => cb(t));
-	}, []);
-
-	const currentTrack = useMemo(
-		() => tracks.find((t) => t.id === currentId) ?? null,
-		[tracks, currentId],
-	);
-
-	const toggle = useCallback((id: string) => {
-		setCurrentId((prev) => {
-			if (prev === id) {
-				setIsPlaying((p) => !p);
-				return prev;
-			}
-			setIsPlaying(true);
-			return id;
-		});
-	}, []);
-
-	const togglePlayCurrent = useCallback(() => {
-		setCurrentId((prev) => {
-			if (prev) {
-				setIsPlaying((p) => !p);
-				return prev;
-			}
-			const first = tracksRef.current[0]?.id ?? null;
-			if (first) setIsPlaying(true);
-			return first;
-		});
-	}, []);
-
-	const step = useCallback((dir: 1 | -1) => {
-		const ids = tracksRef.current.map((t) => t.id);
-		if (ids.length === 0) return;
-		setCurrentId((prev) => {
-			let nextId: string;
-			if (shuffle && dir === 1 && ids.length > 1) {
-				do {
-					nextId = ids[Math.floor(Math.random() * ids.length)]!;
-				} while (nextId === prev);
-			} else {
-				const idx = prev ? ids.indexOf(prev) : -1;
-				nextId = ids[(idx + dir + ids.length) % ids.length]!;
-			}
-			setIsPlaying(true);
-			return nextId;
-		});
-	}, [shuffle]);
-	const next = useCallback(() => step(1), [step]);
-	const previous = useCallback(() => step(-1), [step]);
-	const toggleShuffle = useCallback(() => setShuffle((s) => !s), []);
-
-	const stepRef = useRef(step);
-	stepRef.current = step;
-
-	const seek = useCallback(
-		(s: number) => {
-			if (audioRef.current) audioRef.current.currentTime = s;
-			setCurrentTime(s);
-			emitTime(s);
-		},
-		[emitTime],
-	);
-
-	// Persistent audio element + listeners, created once on the client.
-	useEffect(() => {
-		const audio = new Audio();
-		audio.preload = "metadata";
-		audioRef.current = audio;
-		const onTime = () => {
-			setCurrentTime(audio.currentTime);
-			emitTime(audio.currentTime);
-		};
-		const onMeta = () => setDuration(audio.duration || 0);
-		const onEnded = () => stepRef.current(1);
-		audio.addEventListener("timeupdate", onTime);
-		audio.addEventListener("loadedmetadata", onMeta);
-		audio.addEventListener("ended", onEnded);
-		return () => {
-			audio.pause();
-			audio.removeEventListener("timeupdate", onTime);
-			audio.removeEventListener("loadedmetadata", onMeta);
-			audio.removeEventListener("ended", onEnded);
-			audioRef.current = null;
-		};
-	}, [emitTime]);
-
-	// Swap the source when the current track changes.
-	useEffect(() => {
-		const audio = audioRef.current;
-		if (!audio) return;
-		if (!currentTrack) {
-			audio.removeAttribute("src");
-			audio.load();
-			return;
-		}
-		if (audio.src !== currentTrack.src) {
-			audio.src = currentTrack.src;
-			audio.load();
-			setCurrentTime(0);
-			setDuration(0);
-		}
-	}, [currentTrack]);
-
-	// Reflect the desired play state onto the element.
-	useEffect(() => {
-		const audio = audioRef.current;
-		if (!audio || !currentTrack) return;
-		if (isPlaying) audio.play().catch(() => {});
-		else audio.pause();
-	}, [isPlaying, currentTrack]);
-
-	// OS-level media controls (lock screen, notification shade, media keys, etc.)
-	// via the Media Session API. Wire the transport actions to our state.
-	useEffect(() => {
-		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
-		const ms = navigator.mediaSession;
-		const handlers: [MediaSessionAction, MediaSessionActionHandler][] = [
-			["play", () => setIsPlaying(true)],
-			["pause", () => setIsPlaying(false)],
-			["previoustrack", () => stepRef.current(-1)],
-			["nexttrack", () => stepRef.current(1)],
-			[
-				"seekto",
-				(details) => {
-					if (typeof details.seekTime === "number") seek(details.seekTime);
-				},
-			],
-			[
-				"seekbackward",
-				(details) => seek((audioRef.current?.currentTime ?? 0) - (details.seekOffset ?? 10)),
-			],
-			[
-				"seekforward",
-				(details) => seek((audioRef.current?.currentTime ?? 0) + (details.seekOffset ?? 10)),
-			],
-		];
-		for (const [action, handler] of handlers) {
-			try {
-				ms.setActionHandler(action, handler);
-			} catch {
-				// Action unsupported by this browser — ignore.
-			}
-		}
-		return () => {
-			for (const [action] of handlers) {
-				try {
-					ms.setActionHandler(action, null);
-				} catch {
-					// ignore
-				}
-			}
-		};
-	}, [seek]);
-
-	// Keep the OS-visible metadata in sync with the current track.
-	useEffect(() => {
-		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
-		navigator.mediaSession.metadata = currentTrack
-			? new MediaMetadata({
-					title: currentTrack.title,
-					artist: "Gregor Lohaus",
-				})
-			: null;
-	}, [currentTrack]);
-
-	// Reflect play/pause state to the OS so the right button is shown.
-	useEffect(() => {
-		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
-		navigator.mediaSession.playbackState = currentTrack
-			? isPlaying
-				? "playing"
-				: "paused"
-			: "none";
-	}, [isPlaying, currentTrack]);
-
-	// Keep the scrubber position on the OS controls in sync.
-	useEffect(() => {
-		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
-		if (!("setPositionState" in navigator.mediaSession)) return;
-		try {
-			if (duration > 0 && Number.isFinite(duration)) {
-				navigator.mediaSession.setPositionState({
-					duration,
-					position: Math.min(currentTime, duration),
-					playbackRate: audioRef.current?.playbackRate ?? 1,
-				});
-			} else {
-				navigator.mediaSession.setPositionState();
-			}
-		} catch {
-			// Some browsers throw on invalid state — ignore.
-		}
-	}, [currentTime, duration]);
-
-	const value = useMemo<MusicPlayerValue>(
-		() => ({
-			tracks,
-			currentId,
-			currentTrack,
-			isPlaying,
-			shuffle,
-			currentTime,
-			duration,
-			toggle,
-			togglePlayCurrent,
-			next,
-			previous,
-			toggleShuffle,
-			seek,
-			subscribeTime,
-		}),
-		[
-			tracks, currentId, currentTrack, isPlaying, shuffle, currentTime, duration,
-			toggle, togglePlayCurrent, next, previous, toggleShuffle, seek, subscribeTime,
-		],
-	);
-
-	return (
-		<MusicPlayerContext.Provider value={value}>
-			{children}
-			<MusicMiniPlayer />
-		</MusicPlayerContext.Provider>
-	);
-}

src/app/music/_components/PlayerControls.tsx

@@ -1,40 +0,0 @@
-'use client'
-
-import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
-import { Button } from "~/components/ui/button";
-import { useMusicPlayer } from "./MusicPlayerProvider";
-
-export default function PlayerControls() {
-	const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
-		useMusicPlayer();
-
-	return (
-		<div className="flex items-center justify-center gap-1">
-			<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
-				<SkipBack />
-			</Button>
-			<Button
-				type="button"
-				size="icon-lg"
-				variant="secondary"
-				aria-label={isPlaying ? "Pause" : "Play"}
-				onClick={togglePlayCurrent}
-			>
-				{isPlaying ? <Pause /> : <Play />}
-			</Button>
-			<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
-				<SkipForward />
-			</Button>
-			<Button
-				type="button"
-				size="icon"
-				variant={shuffle ? "secondary" : "ghost"}
-				aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
-				aria-pressed={shuffle}
-				onClick={toggleShuffle}
-			>
-				<Shuffle />
-			</Button>
-		</div>
-	);
-}

src/app/music/page.tsx

@@ -15,11 +15,11 @@ export default function MusicPage() {
     <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
 			<AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
 			<div className="flex flex-wrap h-fit content-center">
-				<AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
+				<AnimateTextIn className="flex flex-wrap mr-[1em]" position={0.5}>
 					<div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
 					<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
 				</AnimateTextIn>
-				<AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
+				<AnimatePopUp position={2} className="items-center content-center">
 					<div className="flex flex-row">
 						<img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
 						<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
@@ -33,7 +33,7 @@ export default function MusicPage() {
 				<div key={track.id}>
 					<Card.AnimatedCard position={i + 1}>
 						<Card.CardHeader>
-							<AnimateTextIn once position={i + 1.2} animation="slide">
+							<AnimateTextIn position={i + 1.2} animation="slide">
 								<Card.CardTitle>{track.title}</Card.CardTitle>
 							</AnimateTextIn>
 						</Card.CardHeader>
@@ -41,9 +41,8 @@ export default function MusicPage() {
 							{track.description && (
 								<p className="text-sm text-muted-foreground gsapant">{track.description}</p>
 							)}
-							<AnimatePopUp duration={2} ease='elastic.inOut'  position={i + 1.3} once>
+							<AnimatePopUp position={i + 1.3}>
 								<AudioPlayer
-									id={track.id}
 									src={track.streamUrl ?? track.fileUrl}
 									downloadUrl={track.fileUrl}
 									downloadName={track.fileName}

src/server/dbschema/schema.ts

@@ -175,7 +175,6 @@ export const chatMessageRelations = relations(chatMessage, ({ one }) => ({
 export const systemSettings = createTable(
 	"systemSetting",
 	(d) => ({
-		systemPropmt: d.text(),
+		systemPropmt: d.text()
-		model: d.text()
 	})
 )

src/server/routers/chat.ts

@@ -7,26 +7,6 @@ import { isAdmin } from '~/app/actions';
 import { z } from 'zod';
 import { eq } from 'drizzle-orm';
 import { clerkClient, auth } from '@clerk/nextjs/server'
-import { env } from '~/env'
-
-export const DEFAULT_MODEL = 'gpt-5-mini'
-
-// Models returned by the OpenAI API that aren't usable for chat completions.
-const NON_CHAT_MODEL = /embedding|image|audio|realtime|transcribe|tts|whisper|moderation|dall-e|search|codex|instruct/
-
-async function readSettings() {
-	return db.select().from(systemSettings).limit(1).then((r) => r[0])
-}
-
-async function writeSettings(values: { systemPropmt?: string | null; model?: string | null }) {
-	const current = await readSettings()
-	await db.delete(systemSettings)
-	await db.insert(systemSettings).values({
-		systemPropmt: values.systemPropmt ?? current?.systemPropmt ?? null,
-		model: values.model ?? current?.model ?? null,
-	})
-}
-
 export const chatRouter = router({
   getSession: publicProcedure.query(async () => {
     const { userId } = await auth();
@@ -86,34 +66,13 @@ export const chatRouter = router({
 
   }),
   getSystemPrompt: publicProcedure.query(async () => {
-    const row = await readSettings()
+    const row = await db.select().from(systemSettings).limit(1).then((r) => r[0])
     return row?.systemPropmt ?? ''
   }),
   updateSystemPrompt: publicProcedure.input(z.object({ prompt: z.string() })).mutation(async ({ input }) => {
     if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await writeSettings({ systemPropmt: input.prompt })
+    await db.delete(systemSettings)
-  }),
+    await db.insert(systemSettings).values({ systemPropmt: input.prompt })
-  getModel: publicProcedure.query(async () => {
-    const row = await readSettings()
-    return row?.model ?? DEFAULT_MODEL
-  }),
-  listModels: publicProcedure.query(async () => {
-    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    const res = await fetch('https://api.openai.com/v1/models', {
-      headers: { Authorization: `Bearer ${env.OPENAI_API_KEY}` },
-    })
-    if (!res.ok) {
-      throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: `failed to fetch models (${res.status})` })
-    }
-    const json = (await res.json()) as { data: { id: string }[] }
-    return json.data
-      .map((m) => m.id)
-      .filter((id) => (id.startsWith('gpt') || /^o\d/.test(id) || id.startsWith('chatgpt')) && !NON_CHAT_MODEL.test(id))
-      .sort()
-  }),
-  updateModel: publicProcedure.input(z.object({ model: z.string() })).mutation(async ({ input }) => {
-    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await writeSettings({ model: input.model })
   }),
 })
 

src/server/routers/cvCategory.ts

@@ -13,6 +13,20 @@ export const cvCategoryRouter = router({
     console.log(res);
     return res;
   }),
+  // Single round-trip for the whole CV page: every category (across all layout
+  // positions) with its entries already populated. Lets the page fetch-then-render
+  // instead of waterfalling per-category/per-entry queries, so all content is
+  // present before the entrance animation runs.
+  listAllWithEntries: publicProcedure.query(async () => {
+    const res = await db.query.cvCategory.findMany({
+      with: {
+        cvEntry: {
+          orderBy: (t, { desc }) => desc(t.toTime),
+        },
+      },
+    })
+    return res;
+  }),
   getById: publicProcedure.input(z.string()).query(async ({input}) => {
     const res = await db.query.cvCategory.findFirst({
       where(fields, operators) {