[theming]: fixes dark theme + adds new changelog ui

frontend/package.json

@@ -10,27 +10,27 @@
   },
   "dependencies": {
     "@headlessui/react": "2.2.10",
-    "@tanstack/react-query": "5.101.0",
+    "@tanstack/react-query": "5.104.0",
     "date-fns": "4.4.0",
-    "react": "19.2.7",
-    "react-date-picker": "12.0.2",
-    "react-dom": "19.2.7",
-    "react-hook-form": "7.79.0",
-    "react-icons": "5.6.0",
-    "react-router": "7.17.0",
-    "react-router-dom": "7.17.0",
+    "react": "19.3.0",
+    "react-date-picker": "12.1.0",
+    "react-dom": "19.3.0",
+    "react-hook-form": "7.89.0",
+    "react-icons": "5.7.0",
+    "react-router": "8.4.0",
+    "react-router-dom": "7.18.4",
     "react-toastify": "11.1.0",
     "reconnecting-websocket": "4.4.0",
-    "tailwindcss": "4.3.1",
-    "use-local-storage-state": "19.5.0",
+    "tailwindcss": "4.3.3",
+    "use-local-storage-state": "20.0.0",
     "use-sound": "5.0.0"
   },
   "devDependencies": {
-    "@types/react": "19.2.17",
-    "@types/react-dom": "19.2.3",
-    "@vitejs/plugin-react": "6.0.2",
-    "@tailwindcss/vite": "4.3.1",
-    "typescript": "6.0.3",
-    "vite": "8.0.16"
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.1",
+    "@tailwindcss/vite": "4.3.3",
+    "typescript": "7.0.2",
+    "vite": "8.3.1"
   }
 }

frontend/src/App.tsx

@@ -16,7 +16,6 @@ const EditParty = lazy(() => import('./party/edit/EditParty'));
 const OwnSubmissions = lazy(() => import('./party/submissions/OwnSubmissions'));
 const EditProfile = lazy(() => import('./user/EditProfile'));
 const Home = lazy(() => import('./home/Home'));
-const Collage = lazy(() => import('./collage/Collage'));
 
 const WithUser: FC = () => {
   return (
@@ -29,7 +28,6 @@ const WithUser: FC = () => {
           <Route path="edit/:id" element={<EditParty />} />
           <Route path="my-submissions/:id" element={<OwnSubmissions />} />
         </Route>
-        <Route path="/collage" element={<Collage />} />
         <Route path="/profile" element={<EditProfile />} />
         <Route path="/*" element={<Home />} />
       </Routes>

frontend/src/Changelog.tsx

@@ -1,21 +1,95 @@
-import { CHANGES } from './version';
+import { CHANGES, type Change, type ChangeItem } from './version';
+
+// Extract the union of type values from ChangeItem
+type ChangeType = ChangeItem['type'];
+
+interface TypeStyle {
+  bg: string;
+  text: string;
+  label: string;
+}
+
+// Map each ChangeType to a badge style — must cover ALL union members.
+// Each style includes light + dark variants.
+const typeStyles: Record<ChangeType, TypeStyle> = {
+  feature: {
+    bg: 'bg-emerald-100 dark:bg-emerald-500/10',
+    text: 'text-emerald-800 dark:text-emerald-300',
+    label: 'Feature',
+  },
+  fix: {
+    bg: 'bg-amber-100 dark:bg-amber-500/10',
+    text: 'text-amber-800 dark:text-amber-300',
+    label: 'Fix',
+  },
+  note: {
+    bg: 'bg-sky-100 dark:bg-sky-500/10',
+    text: 'text-sky-800 dark:text-sky-300',
+    label: 'Note',
+  },
+  beta: {
+    bg: 'bg-violet-100 dark:bg-violet-500/10',
+    text: 'text-violet-800 dark:text-violet-300',
+    label: 'Beta',
+  },
+};
 
 export function Changelog() {
-  return (
-    <div>
-      <h1 className="text-2xl">Changelog</h1>
-      {CHANGES.map((change) => (
-        <div key={change.name} className="my-5">
-          <h2 className="text-xl">{change.name}</h2>
-          <ul className="list-disc">
-            {change.changes.map((changeItem, i) => (
-              <li key={i}>
-                <b>{changeItem.type}</b>: {changeItem.description}
-              </li>
-            ))}
-          </ul>
+  if (CHANGES.length === 0) {
+    return (
+      <div className="max-w-3xl mx-auto py-4 px-4">
+        <div className="text-center p-8 bg-gray-50 dark:bg-gray-800/50 rounded-xl border border-dashed border-gray-300 dark:border-gray-700">
+          <p className="text-gray-500 dark:text-gray-400">No changelog entries yet.</p>
         </div>
-      ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto py-4 px-4 sm:px-6">
+      {/* Header */}
+      <div className="mb-10">
+        <p className="text-xs uppercase tracking-[0.2em] text-gray-400 dark:text-gray-500 mb-2">Changelog</p>
+      </div>
+
+      {/* Timeline */}
+      <div className="relative border-l-2 border-gray-200 dark:border-gray-700 pl-6 ml-4 space-y-12">
+        {CHANGES.map((release: Change) => (
+          <div key={release.name} className="relative">
+            {/* Timeline dot — ring matches page background in both themes */}
+            <div className="absolute -left-7.75 top-1.5 w-3 h-3 rounded-full bg-blue-500 dark:bg-blue-400 ring-4 ring-white dark:ring-gray-900" />
+
+            {/* Version header */}
+            <div className="mb-4">
+              <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100">{release.name}</h2>
+            </div>
+
+            {/* Changes card */}
+            <div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm dark:shadow-none border border-gray-200 dark:border-gray-700 overflow-hidden">
+              <ul className="divide-y divide-gray-100 dark:divide-gray-700">
+                {release.changes.map((changeItem: ChangeItem, i: number) => {
+                  const style = typeStyles[changeItem.type];
+                  return (
+                    <li
+                      key={i}
+                      className="flex items-start gap-3 p-4 hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors"
+                    >
+                      <span
+                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${style.bg} ${style.text} whitespace-nowrap`}
+                      >
+                        {style.label}
+                      </span>
+                      <span className="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
+                        {changeItem.description}
+                      </span>
+                    </li>
+                  );
+                })}
+              </ul>
+            </div>
+          </div>
+        ))}
+      </div>
     </div>
   );
 }

frontend/src/api/api-websockets.ts

@@ -55,7 +55,7 @@ export function useWebSocket({
     (event: GCWebSocketEvent) => {
       webSocket.send(JSON.stringify(event));
     },
-    [webSocket]
+    [webSocket],
   );
 
   useEffect(() => {

frontend/src/components/EmojiBar.tsx

@@ -1,23 +1,28 @@
 const EMOJIS = [
+  '🐙',
+  '🍕',
+  '🚀',
+  '🧊',
+  '🎩',
+  '🦖',
+  '🌵',
+  '🪐',
+  '🐝',
+  '🧠',
+  '🎸',
+  '🍄',
+  '🦩',
+  '⛵',
+  '🔮',
+  '🐼',
+  '🌈',
+  '🦴',
+  '💎',
   '🥳',
   '😎',
   '🦄',
   '👻',
   '🙃',
-  '😡',
-  '📸',
-  '🌞',
-  '🤦‍♂️',
-  '🦋',
-  '😃',
-  '👩‍🎨',
-  '😷',
-  '🤡',
-  '🤖',
-  '👀',
-  '🐱',
-  '🤹‍♀️',
-  '🦦',
 ];
 
 function EmojiBar({ count }: { count: number }) {

frontend/src/home/Home.tsx

@@ -20,12 +20,7 @@ export function Home() {
   return (
     <div className="flex flex-col justify-between">
       <div className="flex flex-col space-y-28">
-        {highlightedParty && (
-          <div>
-            <h2 className="font-bold text-2xl mb-4 dark:text-slate-300">Next up:</h2>
-            <HighlightedParty party={highlightedParty} />
-          </div>
-        )}
+        {highlightedParty && <HighlightedParty party={highlightedParty} />}
         {!highlightedParty && (
           <Link
             to={'/party/create'}

frontend/src/index.css

@@ -1,2 +1,4 @@
 @import 'react-toastify/dist/ReactToastify.css';
 @import 'tailwindcss';
+
+@custom-variant dark (&:where(.dark, .dark *));

frontend/src/main.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { BrowserRouter } from 'react-router';
 import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
-  </React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
 );