rename Box to Card

ethos.md

@@ -0,0 +1,138 @@
+# The VoD System — Frontend Design Reference
+
+Warm, editorial, low-key. Soft shadows instead of borders, cream surfaces, one terracotta and one olive accent. No dark-dashboard chrome.
+
+---
+
+## 1. Typography
+
+| Role | Family | Usage |
+| --- | --- | --- |
+| Display / headings | **Newsreader** (serif, weight 400) | Page titles, card headings, item titles, greeting, logo wordmark. Always regular weight — never bold. |
+| UI / body | **IBM Plex Sans** (400, 500) | Nav, labels, buttons, body copy, table cells. 500 only for the active nav item. |
+| Data / mono | **IBM Plex Mono** (400, 500) | Timecodes, stream key, ingest URL, durations, bitrates, file facts, kickers, job stages. |
+
+Fallbacks: `system-ui, sans-serif` for Plex Sans; `serif` for Newsreader; `monospace` for Plex Mono.
+
+### Type scale
+
+| Element | Size | Family | Notes |
+| --- | --- | --- | --- |
+| Greeting (dashboard h1) | 40px | Newsreader | `letter-spacing: -0.015em` |
+| Page h1 | 36px | Newsreader | -0.015em |
+| Detail title | 31px | Newsreader | -0.015em |
+| Drop-zone headline | 25px | Newsreader | |
+| Section h2 | 23px | Newsreader | |
+| Logo wordmark | 22px | Newsreader | -0.01em |
+| Card heading (in-panel) | 20–22px | Newsreader | |
+| Status headline | 27px | Newsreader | line-height 1.25 |
+| VOD tile title | 17.5–18px | Newsreader | line-height 1.3 |
+| Big metric | 21px | Plex Mono | elapsed, marker count, bitrate |
+| Range length | 15px | Plex Mono | |
+| Body paragraph | 14.5px | Plex Sans | line-height 1.65, `text-wrap: pretty`, max 62ch |
+| Primary button | 13.5–14px | Plex Sans | |
+| Field value | 13.5–14px | Plex Sans / Mono | mono for timecodes and sizes |
+| Table cell | 13.5px | Plex Sans | mono for numeric columns |
+| Clip tile title | 13.5px | Plex Sans | |
+| Meta line | 12–13px | Plex Sans | muted ink |
+| Field label | 11.5px | Plex Sans | muted ink |
+| Kicker / eyebrow | 10.5–11px | Plex Mono | `letter-spacing: 0.10–0.14em`, uppercase |
+| Ruler / tick caption | 10–10.5px | Plex Mono | |
+
+---
+
+## 2. Colour
+
+### Surfaces
+| Token | Hex | Where |
+| --- | --- | --- |
+| Canvas | `#F7F4EE` | Page background |
+| Sidebar | `#F2EEE6` | Nav column and collapsed rail |
+| Card | `#FDFBF7` | Cards, library tiles, active nav pill |
+| Field well | `#F4F0E8` | Inputs, credential wells, timeline track |
+| Muted panel | `#F1ECE3` / `#F1EDE4` | Secondary buttons, "how it works", clip-cutter panel |
+| Drop zone (idle) | `#F9F6EF` | Upload empty state |
+| Armed / selected | `#F6EFE6` | Selected marker row, filled range card |
+| Live card | `#F0EBE1` | Dashboard status block when live |
+| Player body | `#2B2620` | Video chrome, also the dark button |
+| Player stripes | `#3A342C` / `#332E27` | Placeholder frame texture |
+
+### Ink
+| Token | Hex | Where |
+| --- | --- | --- |
+| Primary | `#2B2620` | Headings, metrics |
+| Strong | `#35302A` | Field values, tile titles |
+| Body | `#554D44` | Paragraph copy |
+| Control label | `#4A423A` | Secondary button text |
+| Secondary | `#6E6559` | Supporting copy |
+| Table value | `#7A7166` | History rows |
+| Muted | `#9A9084` | Labels, meta, kickers |
+| Faint | `#A79C8E` | Mono captions, ruler ticks, hints |
+| On dark | `#FBF8F2` | Text on player / dark button |
+| On accent | `#FDFBF7` | Text on terracotta / olive |
+
+### Accents
+| Token | Hex | Where |
+| --- | --- | --- |
+| Terracotta | `#A85A38` | Logo mark, primary CTA, links, marker timecodes, playheads |
+| Terracotta hover | `#94492A` | Primary button hover |
+| Terracotta light | `#C87A52` | Progress bars, scrubber fill, selected marker ring |
+| Terracotta disabled | `#C9AE9C` | "Waiting for a file" button |
+| Olive | `#6E7A50` | Clip actions, trim in/out handles |
+| Olive hover | `#5D6843` | |
+| Olive light | `#8A9668` | Completed job bar |
+| Live red | `#B5432E` | Live dot and "LIVE NOW" label |
+
+### Lines, chips, placeholders
+| Token | Hex | Where |
+| --- | --- | --- |
+| Hairline | `#F0EBE2` | Row dividers (1px) |
+| Chip fill | `#EAE3D7`, `#EFE9DE`, `#E4DDD0` | Progress track, toggles, nav-hide button |
+| Chip hover | `#E7E0D2`, `#DAD1C0`, `#EAE4D9` | |
+| Drop-zone ring | `#E2DACB` | `inset 0 0 0 1.5px` |
+| Inactive marks | `#DED7CA`, `#C4BAA9` | Unchecked boxes, unselected ticks |
+| Zoom window outline | `#8E8577` | Overview strip frame |
+| VOD thumbnail | `#E3DACB` / `#DAD0BF` | 135° stripes, 9px |
+| Clip thumbnail | `#DFE0D2` / `#D6D8C7` | 135° stripes, 9px |
+| Avatar | `#D9C9AE` on `#5C4A32` | Google account chip |
+
+---
+
+## 3. Elevation & shape
+
+- **Card**: `0 1px 2px rgba(60,48,32,.05), 0 10px 26px -18px rgba(60,48,32,.35)`
+- **Card hover**: `0 2px 4px rgba(60,48,32,.07), 0 18px 34px -18px rgba(60,48,32,.45)`
+- **Panel (heavier)**: `0 1px 2px rgba(60,48,32,.05), 0 16px 36px -22px rgba(60,48,32,.3)`
+- **Player**: `0 1px 2px rgba(60,48,32,.08), 0 22px 46px -26px rgba(60,48,32,.5)`
+- **Terracotta button**: `0 1px 2px rgba(90,40,20,.2), 0 12px 22px -14px rgba(90,40,20,.55)`
+- **Olive button**: `0 1px 2px rgba(50,60,30,.18), 0 10px 20px -14px rgba(50,60,30,.55)`
+- **Inset ring** (used instead of borders): `inset 0 0 0 1px rgba(60,48,32,.08)`
+
+Radii: 16px hero/status blocks · 15px panels · 13px tiles · 12px thumbnails/player · 10px inputs & dark buttons · 9px buttons, nav pills, logo mark · 8px chips and fields · 5–6px overlay badges · 50% avatars and play button.
+
+Media ratios: 16/9 VOD thumbnails and player · 4/3 clip thumbnails · 16/7 upload drop zone.
+
+---
+
+## 4. Layout
+
+- Shell: `252px` sidebar + fluid main; collapsed rail is `62px`.
+- Main padding `40px 52px 72px`, content max-width `1060–1180px`.
+- Library grids: 3 columns for VODs (gap 22px), 4 for clips (gap 18–20px).
+- Detail and stream pages: content column + `330–340px` sticky side panel, gap 26px.
+- Spacing rhythm: 26–34px between sections, 14–20px inside cards, 6–10px label-to-field. Always flex/grid with `gap`.
+
+---
+
+## 5. Motion & state
+
+- `livePulse` — 2.2s ease-in-out infinite opacity/scale pulse, live dot only. Nothing else animates decoratively.
+- Hover: background shifts one step darker within the same family; cards deepen their shadow. No transforms.
+- Selection: `#F6EFE6` fill plus a `1.5px` terracotta inset ring.
+- Progress is always a bar with a stage word and remaining time (`queued → reading source → encoding → writing file → complete`) — never a spinner.
+
+---
+
+## 6. Copy tone
+
+Lowercase mono for machine facts, sentence case for everything else. Personal and specific ("Cat walks across the patch bay"), never marketing voice. Durations as `h:mm:ss`, timecodes as `hh:mm:ss`, sizes in MB/GB.

frontend/index.html

@@ -3,8 +3,13 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/small_icon.png" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@100;200;300;400;500;600;700&family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
+
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>The VoD System</title>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/components/Box.tsx

@@ -1,14 +0,0 @@
-import clsx from "clsx";
-
-type Props = {
-    children: React.ReactNode;
-    className?: string;
-};
-
-const Box = ({ children, className }: Props) => (
-    <div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
-        {children}
-    </div>
-);
-
-export default Box;

frontend/src/components/Card.tsx

@@ -0,0 +1,14 @@
+import clsx from "clsx";
+
+type Props = {
+    children: React.ReactNode;
+    className?: string;
+};
+
+const Card = ({ children, className }: Props) => (
+    <div className={clsx("bg-card shadow-md rounded-lg", className)}>
+        {children}
+    </div>
+);
+
+export default Card;

frontend/src/components/NoAccessPage.tsx

@@ -0,0 +1,17 @@
+import {Lock} from "lucide-react";
+
+const NoAccessPage = () => {
+    return (
+        <div className="w-full min-h-screen flex flex-col items-center justify-center gap-3 text-center px-6">
+            <Lock className="w-8 h-8 text-faint-mono/60 mb-1" strokeWidth={1.5} />
+            <h2 className="font-heading text-2xl md:text-3xl text-faint-mono">
+                Log in to see this page
+            </h2>
+            <p className="text-sm text-faint-mono/70 max-w-xs">
+                Sign in with Google to view your clips and account details.
+            </p>
+        </div>
+    );
+}
+
+export default NoAccessPage;

frontend/src/components/Sidebar.tsx

@@ -1,50 +1,106 @@
 import clsx from "clsx";
 import SidebarButton from "./buttons/SidebarButton.tsx";
-import { Plus, Film, Home, User as UserIcon, Video, Radio } from 'lucide-react';
+import { Plus, Film, Home, Video, Radio } from 'lucide-react';
-import type {User} from "../utils/types.ts";
+import {useAuth} from "../utils/AuthContext.tsx";
+import {type CredentialResponse, GoogleLogin} from "@react-oauth/google";
+import {getUser, login, logout} from "../utils/api/users.ts";
 
 type props = {
-    user: User | null;
     className?: string
 }
 
-const Divider = () => <hr className="my-1.5 mx-2 border-gray-100" />;
+const Divider = () => <hr className="w-full my-1.5 mx-2 border-hover" />;
+
+const Sidebar = ({ className }: props) => {
+    const { user, setUser } = useAuth()
+
+    const handleLogin = (response: CredentialResponse) => {
+        if (!response.credential) {
+            console.error("No credential received from Google login.");
+            return;
+        }
+
+        login(response.credential)
+            .then(() => {
+                getUser().then(userData => setUser(userData))
+            })
+            .catch((error) => {
+                console.error("Login failed:", error);
+            });
+    }
+
+    const handleLogout = () => {
+        logout()
+            .then(() =>
+                setUser(null)
+            )
+            .catch((error) => {
+                console.error("Logout failed:", error);
+            });
+    }
 
-const Sidebar = ({user, className}: props) => {
     return (
-        <aside className={clsx("h-screen flex flex-col bg-white border-r border-gray-200", className)}>
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
-            <div className="px-4 pt-5 pb-3">
+            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
-                <img
+
-                    className="w-36 mx-auto"
+            <nav className="flex flex-col flex-1 items-center">
-                    src="../../public/logo.png"
+                <Divider />
-                    alt="VoD System Logo"
+                <div className="flex flex-col gap-0.5 w-full">
-                />
-            </div>
-            <nav className="flex flex-col flex-1 px-2 pb-4">
-                <div className="flex flex-col gap-0.5">
                     <SidebarButton url="/" logo={<Home size={18}/>} label="Home" />
-                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Create Clip" />
+                    <SidebarButton url="/create" logo={<Plus size={18}/>} label="Upload" />
                 </div>
+                <Divider />
 
                 {user && (
-                    <>
+                    <div className="flex flex-col gap-0.5 w-full">
-                        <Divider />
+                        <div>
-                        <div className="flex flex-col gap-0.5">
                             <SidebarButton url="/stream" logo={<Radio size={18}/>} label="Stream" />
                             <SidebarButton url="/my-clips" logo={<Film size={18}/>} label="Clips" />
                             <SidebarButton url="/my-vods" logo={<Video size={18}/>} label="VoDs" />
                         </div>
-                    </>
+                    </div>
                 )}
 
                 <div className="flex-1" />
 
-                {user && (
+                <div className={"p-2"}>
-                    <>
+                    {user ? (
-                        <Divider />
+                        <div>
-                        <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
+                            <Divider />
-                    </>
+                            <div className={"flex gap-2 items-center pt-1"}>
-                )}
+                                <img
+                                    className={"w-8 h-8 rounded-full inline-block"}
+                                    src={user.profilePictureUrl}
+                                    referrerPolicy="no-referrer"
+                                    alt={"Profile Picture"}
+                                />
+
+                                <label className={"font-body text-text-strong text-sm"}>
+                                    {user.name}
+                                </label>
+
+                                <button
+                                    className={"font-body text-muted text-xs hover:bg-hover p-1 pt-1.5 rounded"}
+                                    onClick={handleLogout}
+                                >
+                                    Sign Out
+                                </button>
+
+                            </div>
+                        </div>
+                    ) : (
+                        <div>
+                            <Divider />
+                            <GoogleLogin
+                                shape={"pill"}
+                                useOneTap={false}
+                                onSuccess={
+                                (credentialResponse) => handleLogin(credentialResponse
+                                )}
+                            />
+                        </div>
+                    )}
+                </div>
             </nav>
         </aside>
     );

frontend/src/components/Topbar.tsx

@@ -1,103 +0,0 @@
-import { Menu, X } from 'lucide-react';
-import { login, logout } from "../utils/api/users.ts";
-import { Dropdown, DropdownItem } from "./Dropdown.tsx";
-import { GoogleLogin } from '@react-oauth/google';
-
-import type { User } from "../utils/types.ts";
-import type { CredentialResponse } from '@react-oauth/google';
-
-import MenuButton from "./buttons/MenuButton.tsx";
-import clsx from "clsx";
-import {useNavigate} from "react-router-dom";
-
-
-type props = {
-    sidebarToggled: boolean;
-    setSidebarToggled: (toggled: boolean) => void;
-    user: User | null;
-    fetchUser: () => void;
-    isStreaming: boolean;
-    className?: string;
-}
-
-const Topbar = ({
-                    sidebarToggled,
-                    setSidebarToggled,
-                    user,
-                    fetchUser,
-                    isStreaming,
-                    className}: props) => {
-
-    const navigate = useNavigate();
-
-    const handleLogin = (response: CredentialResponse) => {
-        if (!response.credential) {
-            console.error("No credential received from Google login.");
-            return;
-        }
-
-        login(response.credential)
-            .then(() => {
-                fetchUser();
-                navigate(0);
-            })
-            .catch((error) => {
-                console.error("Login failed:", error);
-            });
-    }
-
-    const handleLogout = () => {
-        logout()
-            .then(() => {
-                fetchUser();
-                navigate("/");
-            })
-            .catch((error) => {
-                console.error("Logout failed:", error);
-            });
-    }
-
-    return (
-        <div className={clsx(className, "flex justify-between items-center px-4 py-2 bg-white border-b border-gray-200")}>
-            <MenuButton onClick={() => setSidebarToggled(!sidebarToggled)}>
-                {sidebarToggled ? <Menu size={24}/> :  <X size={24}/>}
-            </MenuButton>
-
-            { user ? (
-                <div>
-                    <img
-                        className={"w-8 h-8 rounded-full inline-block"}
-                        src={user.profilePictureUrl}
-                        referrerPolicy="no-referrer"
-                    />
-
-                    <Dropdown label={
-                        <span className="flex items-center gap-1.5">
-                            {user.name}
-                            {isStreaming && (
-                                <span className="relative flex h-2 w-2">
-                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-500 opacity-75" />
-                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-red-500" />
-                                </span>
-                            )}
-                        </span>
-                    }>
-                        <DropdownItem item="Profile"
-                                      onClick={() => navigate("/profile")} />
-                        <DropdownItem item="Logout"
-                                      onClick={() => handleLogout()}
-                                      className={"text-red-500 font-medium"} />
-                    </Dropdown>
-                </div>
-            ) :
-            (
-                <GoogleLogin
-                    shape={"pill"}
-                    useOneTap={false}
-                    onSuccess={(credentialResponse) => handleLogin(credentialResponse)} />
-            )}
-        </div>
-    )
-}
-
-export default Topbar;

frontend/src/components/buttons/MenuButton.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-
-type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-const MenuButton: React.FC<Props> = ({ className = "", ...props }) => {
-    return (
-        <button
-            className={clsx("p-2 rounded-md text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors duration-150", className)}
-            {...props}
-        />
-    );
-};
-
-export default MenuButton;

frontend/src/components/buttons/SidebarButton.tsx

@@ -1,5 +1,5 @@
-import MenuButton from "./MenuButton.tsx";
 import { Link, useLocation } from "react-router-dom";
+import React from "react";
 
 type Props = {
     url: string;
@@ -13,9 +13,15 @@ const SidebarButton = ({url, logo, label}: Props) => {
 
     return (
         <Link className="w-full" to={url}>
-            <MenuButton className={`flex items-center gap-2.5 w-full px-3 py-2 text-sm font-medium rounded-md ${isActive ? "bg-gray-100 text-gray-900" : "text-gray-600"}`}>
+            <button className={`flex items-center gap-2.5 w-full text-sm 
+            font-body p-2 hover:bg-hover hover:text-text-strong
+            rounded-md 
+            ${isActive ? 
+                "bg-card text-text-strong font-medium shadow-sm"
+                : 
+                "text-text-primary"}`}>
                 {logo}{label}
-            </MenuButton>
+            </button>
         </Link>
     )
 }

frontend/src/index.css

@@ -1,33 +1,27 @@
 @import "tailwindcss";
 @plugin "flowbite-react/plugin/tailwindcss";
-@source "../.flowbite-react/class-list.json";
 
 @theme {
-    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    /* Fonts */
+    /*--font-heading: "Newsreader", serif; */
+    --font-body: "IBM Plex Sans", sans-serif;
+    --font-data: "IBM Plex Mono", monospace;
 
-    /* Breakpoints */
+    /* Colours */
-    --breakpoint-3xl: 1920px;
+    --color-background: #F7F4EE;
+    --color-sidebar: #F2EEE6;
+    --color-card: #FDFBF7;
+    --color-accent: #A85A38;
+    --color-accent-hover: #94492A;
+    --color-live-card: #F0EBE1;
 
-    --color-primary: oklch(0.55 0.21 254);
+    /* Colour Fonts */
-    --color-primary-pressed: oklch(0.45 0.21 254);
+    --color-text-primary: #2B2620;
-    --color-secondary: oklch(0.94 0.01 250);
+    --color-text-strong: #35302A;
-    --color-accent: oklch(0.68 0.20 288);
+    --color-faint-mono: #A79C8E;
-    --color-text: oklch(0.17 0.01 270);
+    --color-muted: #9A9084;
-    --color-background: oklch(0.97 0.005 250);
+    --color-hover: #E7E0D2;
-    --color-surface: oklch(1 0 0);
+    --color-hairline: #F0EBE2;
-    --color-border: oklch(0.91 0.008 250);
-
-    /* Easing */
-    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
-    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
-}
-
-#range-slider .range-slider__range {
-    background: var(--color-primary);
-}
-
-#range-slider .range-slider__thumb {
-    background: var(--color-primary);
 }
 
 :root {
@@ -42,4 +36,10 @@
 
 body {
     background-color: var(--color-background);
+    font-family: "IBM Plex Sans", sans-serif;
 }
+
+@utility font-heading {
+    font-family: "Newsreader", serif;
+    font-weight: 400;
+}

frontend/src/layouts/MainLayout.tsx

@@ -1,51 +1,16 @@
 // layout/MainLayout.jsx
 import Sidebar from '../components/Sidebar'
-import Topbar from '../components/Topbar'
 import { Outlet } from 'react-router-dom';
-import {useEffect, useState} from "react";
+import { useState } from "react";
-import type {User} from "../utils/types";
-import { getUser } from "../utils/api/users";
-import { getStreamStatus } from "../utils/api/stream";
 
 const MainLayout = () => {
-    const [sidebarToggled, setSidebarToggled] = useState(false);
+    const [sidebarToggled] = useState(false);
-    const [user, setUser] = useState<null | User>(null);
-    const [isStreaming, setIsStreaming] = useState(false);
-
-    const fetchUser = async () => {
-        try {
-            const userData = await getUser();
-            setUser(userData);
-        } catch (error) {
-            console.error('Failed to fetch user:', error);
-        }
-    };
-
-    useEffect(() => {
-        fetchUser();
-    }, []);
-
-    useEffect(() => {
-        if (!user) return;
-        const poll = () => getStreamStatus().then(setIsStreaming).catch(() => {});
-        poll();
-        const interval = setInterval(poll, 10000);
-        return () => clearInterval(interval);
-    }, [user]);
 
     return (
-        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[240px_1fr]"} grid-rows-[auto_1fr]`}>
+        <div className={`transition-all duration-300 grid h-screen ${sidebarToggled ? "grid-cols-[0px_1fr]" : "grid-cols-[280px_1fr]"} grid-rows-[auto_1fr]`}>
             <Sidebar
-                user={user}
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
-            <Topbar
+            <div>
-                className={"transition-all duration-300"}
-                sidebarToggled={sidebarToggled}
-                setSidebarToggled={setSidebarToggled}
-                user={user}
-                fetchUser={fetchUser}
-                isStreaming={isStreaming}/>
-            <div className="overflow-auto bg-background">
                 <Outlet />
             </div>
         </div>

frontend/src/main.tsx

@@ -1,10 +1,13 @@
+import './index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import App from './App.tsx'
+import {AuthProvider} from "./utils/AuthContext.tsx";
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+      <AuthProvider>
+          <App />
+      </AuthProvider>
   </StrictMode>,
 )

frontend/src/pages/ClipEdit.tsx

@@ -8,7 +8,7 @@ import ExportWidget from "../components/video/ExportWidget.tsx";
 import { compress } from "../utils/api/media"
 import { getJob } from "../utils/api/jobs"
 import type { VideoMetadata } from "../utils/types.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";
 
 const API_URL = import.meta.env.VITE_API_URL;
@@ -132,13 +132,13 @@ const ClipEdit = () => {
                 onLoadedMetadata={handleVideoMetadataLoaded}
             />
 
-            <Box className={"w-4/5 h-full m-auto"}>
+            <Card className={"w-4/5 h-full m-auto"}>
                 <MetadataBox setMetadata={setOutputMetadata} />
                 <ConfigBox setMetadata={setOutputMetadata} />
-            </Box>
+            </Card>
 
             {metadata &&
-                <Box className={"mt-4 p-5"}>
+                <Card className={"mt-4 p-5"}>
                     <Playbar
                         video={videoRef.current}
                         videoMetadata={metadata}
@@ -166,10 +166,10 @@ const ClipEdit = () => {
                             {error}
                         </div>
                     )}
-                </Box>
+                </Card>
             }
 
-            <Box className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
+            <Card className={"flex flex-col gap-2 w-4/5 m-auto mt-4 p-5"}>
                 <ExportWidget
                     dataSend={sendData}
                     handleDownload={handleDownload}
@@ -177,7 +177,7 @@ const ClipEdit = () => {
                     progress={progress}
                     uploading={uploading}
                 />
-            </Box>
+            </Card>
         </div>
     );
 };

frontend/src/pages/ClipUpload.tsx

@@ -1,7 +1,7 @@
 import {useState} from "react";
 import {useNavigate} from "react-router-dom";
 import BlueButton from "../components/buttons/BlueButton.tsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 
 const ClipUpload = () => {
     const [file, setFile] = useState<File | null>(null);
@@ -18,7 +18,7 @@ const ClipUpload = () => {
 
     return (
         <div className="flex items-start justify-center p-8 min-h-full">
-            <Box className="flex flex-col gap-4 p-6 w-full max-w-md">
+            <Card className="flex flex-col gap-4 p-6 w-full max-w-md">
                 <h1 className="text-lg font-semibold text-gray-900">Upload Clip</h1>
 
                 <input
@@ -34,7 +34,7 @@ const ClipUpload = () => {
                 <BlueButton onClick={press}>Upload</BlueButton>
 
                 {error && <p className="text-sm text-red-500 text-center">{error}</p>}
-            </Box>
+            </Card>
         </div>
     )
 };

frontend/src/pages/EditClip.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getClipById, patchClip } from "../utils/api/clips.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditClip = () => {
             {loading ? (
                 <div className="text-gray-400 text-sm">Loading...</div>
             ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                     <div className="flex flex-col gap-1.5">
                         <label className="text-sm font-medium text-gray-700">Title</label>
                         <input
@@ -99,7 +99,7 @@ const EditClip = () => {
                             Cancel
                         </button>
                     </div>
-                </Box>
+                </Card>
             )}
         </div>
     );

frontend/src/pages/EditVod.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { getVodById, patchVod } from "../utils/api/vods.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 
 const inputClass = "border border-gray-300 bg-white rounded-md w-full p-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-colors";
@@ -61,7 +61,7 @@ const EditVod = () => {
             {loading ? (
                 <div className="text-gray-400 text-sm">Loading...</div>
             ) : (
-                <Box className="p-6 flex flex-col gap-4">
+                <Card className="p-6 flex flex-col gap-4">
                     <div className="flex flex-col gap-1.5">
                         <label className="text-sm font-medium text-gray-700">Title</label>
                         <input
@@ -99,7 +99,7 @@ const EditVod = () => {
                             Cancel
                         </button>
                     </div>
-                </Box>
+                </Card>
             )}
         </div>
     );

frontend/src/pages/Home.tsx

@@ -1,78 +1,84 @@
-import { Upload, Scissors, SlidersHorizontal, Radio, LayoutGrid, Play } from "lucide-react";
+import {useAuth} from "../utils/AuthContext.tsx";
+import NoAccessPage from "../components/NoAccessPage.tsx";
+import {Link} from "react-router-dom";
+import Card from "../components/Card.tsx";
 
-const features = [
+type TimeOfDay = "morning" | "afternoon" | "evening" | "night";
-    {
+
-        icon: Upload,
+function getTimeOfDay(date: Date = new Date()): TimeOfDay {
-        title: "Upload & compress",
+    const hour = date.getHours();
-        description: "Drop in a video file, set your clip range and export settings, then compress.",
+
-    },
+    if (hour >= 5 && hour < 12) return "morning";
-    {
+    if (hour >= 12 && hour < 17) return "afternoon";
-        icon: Scissors,
+    if (hour >= 17 && hour < 22) return "evening";
-        title: "Trim",
+    return "night";
-        description: "Set start and end points with a range slider. Preview as you go.",
+}
-    },
+
-    {
+function getGreetingSubtext(date: Date = new Date()): string {
-        icon: SlidersHorizontal,
+    const timeOfDay = getTimeOfDay(date);
-        title: "Export settings",
+
-        description: "Choose resolution, frame rate, and an optional file size cap.",
+    const messages: Record<TimeOfDay, string[]> = {
-    },
+        morning: [
-    {
+            "Good morning.",
-        icon: Radio,
+            "Coffee first, then clips.",
-        title: "RTMP streaming",
+            "Here's what's waiting for you.",
-        description: "Point OBS at your stream key and go live. Find the key in your profile.",
+        ],
-    },
+        afternoon: [
-    {
+            "Good afternoon.",
-        icon: LayoutGrid,
+            "A quiet moment for your clips.",
-        title: "Clip library",
+            "Catching up?",
-        description: "Browse all your clips. Watch, rename, edit the description, or delete.",
+        ],
-    },
+        evening: [
-    {
+            "Good evening.",
-        icon: Play,
+            "Settle in.",
-        title: "Built-in player",
+            "Time to unwind.",
-        description: "Scrub, adjust volume, go fullscreen. Runs in the browser.",
+        ],
-    },
+        night: [
-];
+            "Still up?",
+            "Quiet night for it.",
+            "Good night, when you're ready.",
+        ]
+    }
+
+    const options = messages[timeOfDay];
+    return options[Math.floor(Math.random() * options.length)];
+}
 
 const Home = () => {
+    const { user } = useAuth();
+    const now = new Date();
+
+    const formatted: string = new Intl.DateTimeFormat('en-IE', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+    }).format(now);
+
+    if (user == null) {
+        return (<NoAccessPage />)
+    }
+
     return (
-        <div className="flex flex-col items-center px-8 py-12 min-h-full">
+        <div className={"w-10/12 m-auto pt-10"}>
-            {/* Hero */}
+            <div className={"flex flex-row justify-between items-start pb-10"}>
-            <div className="flex flex-col items-center text-center max-w-2xl mb-14">
+                <div>
-                <img
+                    <p className={"font-data text-faint-mono text-sm tracking-widest"}>{formatted.toLocaleUpperCase()}</p>
-                    src="/logo.png"
+                    <h1 className={"font-heading font text-5xl text-text-strong tracking-[-0.015em]"}>{getGreetingSubtext(new Date())}</h1>
-                    alt="VoD System Logo"
+                </div>
-                    className="h-24 mb-6 object-contain"
+
-                />
+                <Link to={"/stream"} className={"bg-accent rounded-md text-hover text-sm p-2 hover:bg-accent-hover shadow-md"}>
-                <h1 className="text-4xl font-semibold text-gray-900 mb-3 leading-tight">
+                     Open Stream Panel
-                    A home for your clips.
+                </Link>
-                </h1>
-                <p className="text-base text-gray-500 leading-relaxed">
-                    Upload, trim, and export video clips. Stream live if you need to.
-                </p>
             </div>
 
-            {/* Feature grid */}
+            <Card className={"bg-live-card pb-10"}>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-4xl mb-10">
+                <p></p>
-                {features.map(({ icon: Icon, title, description }) => (
+            </Card>
-                    <div
+
-                        key={title}
+            <div>
-                        className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-3 shadow-sm"
+                <h2 className={"font-heading text-2xl"}>Recent VoDs</h2>
-                    >
-                        <div className="w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center flex-shrink-0">
-                            <Icon size={18} className="text-primary" />
-                        </div>
-                        <div>
-                            <p className="font-semibold text-gray-900 text-sm mb-1">{title}</p>
-                            <p className="text-sm text-gray-500 leading-relaxed">{description}</p>
-                        </div>
-                    </div>
-                ))}
             </div>
 
-            {/* Format note */}
-            <p className="text-xs text-gray-400">
-                Supports MP4, MOV, WebM, and OGG.
-            </p>
         </div>
     );
 };

frontend/src/pages/MediaPlayer.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { ArrowLeft, Lock, Maximize, Minimize, Pause, Play, Volume1, Volume2, VolumeX } from "lucide-react";
 import { AuthError } from "../utils/api/client.ts";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import { dateToTimeAgo, formatTime, stringToDate } from "../utils/utils.ts";
 
 // Both VoDs and clips share the same on-screen shape.
@@ -339,10 +339,10 @@ const MediaPlayer = ({ noun, getMediaUrl, fetchDetails }: MediaPlayerProps) => {
                 </div>
             )}
 
-            <Box className="p-4 flex-shrink-0">
+            <Card className="p-4 flex-shrink-0">
                 <p className="text-xl font-semibold text-gray-900">{item?.title || "(No Title)"}</p>
                 <p className="text-sm text-gray-500 mt-1">{timeAgo}</p>
-            </Box>
+            </Card>
         </div>
     );
 };

frontend/src/pages/Profile.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { Eye, EyeOff, Copy, Check } from "lucide-react";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import { getUser } from "../utils/api/users.ts";
 import type { User } from "../utils/types.ts";
 import { formatLocalDate } from "../utils/utils.ts";
@@ -33,7 +33,7 @@ const Profile = () => {
         <div className="px-8 py-10 max-w-2xl mx-auto">
             <h1 className="text-2xl font-semibold text-gray-900 mb-6">Profile</h1>
 
-            <Box className="p-6 mb-4 flex items-center gap-5">
+            <Card className="p-6 mb-4 flex items-center gap-5">
                 <img
                     src={user.profilePictureUrl}
                     referrerPolicy="no-referrer"
@@ -48,9 +48,9 @@ const Profile = () => {
                         Member since {formatLocalDate(user.createdAt)}
                     </p>
                 </div>
-            </Box>
+            </Card>
 
-            <Box className="p-6">
+            <Card className="p-6">
                 <h2 className="text-sm font-semibold text-gray-800 mb-1">Stream Key</h2>
                 <p className="text-sm text-gray-500 mb-4">
                     Use this key in OBS or any RTMP-compatible software to start streaming.
@@ -78,7 +78,7 @@ const Profile = () => {
                         {copied ? <Check size={16} className="text-green-600" /> : <Copy size={16} />}
                     </button>
                 </div>
-            </Box>
+            </Card>
         </div>
     );
 };

frontend/src/pages/StreamControl.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Radio, Check, Bookmark, Scissors, Film, Activity, Loader2, X } from "lucide-react";
 import clsx from "clsx";
-import Box from "../components/Box.tsx";
+import Card from "../components/Card.tsx";
 import BlueButton from "../components/buttons/BlueButton.tsx";
 import { getUser } from "../utils/api/users.ts";
 import { getCurrentStream, getStreamHistory } from "../utils/api/stream.ts";
@@ -244,7 +244,7 @@ const StreamControl = () => {
             <h1 className="text-2xl font-semibold text-gray-900">Stream Control</h1>
 
             {/* Hero status bar */}
-            <Box className={clsx(
+            <Card className={clsx(
                 "p-6 flex items-center justify-between gap-6 border-l-4",
                 isStreaming ? "border-l-red-500" : "border-l-gray-200"
             )}>
@@ -271,12 +271,12 @@ const StreamControl = () => {
                 ) : (
                     <Radio size={28} className="text-gray-200" />
                 )}
-            </Box>
+            </Card>
 
             {isStreaming && (
                 <>
                     {/* Quick mark toolbar */}
-                    <Box className="p-4 flex flex-col gap-3">
+                    <Card className="p-4 flex flex-col gap-3">
                         <div className="flex items-center gap-3">
                             <Bookmark size={18} className="text-accent flex-shrink-0" />
                             <input
@@ -328,11 +328,11 @@ const StreamControl = () => {
                                 })}
                             </div>
                         )}
-                    </Box>
+                    </Card>
 
                     {/* Forefront actions */}
                     <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-stretch">
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Scissors} title="Clip the last few seconds" />
                             <div className="flex flex-col gap-1.5">
                                 <label className={labelClass}>Duration (seconds)</label>
@@ -348,9 +348,9 @@ const StreamControl = () => {
                             <textarea placeholder="Description" value={clipDescription} onChange={(e) => setClipDescription(e.target.value)} rows={2} className={inputClass + " resize-none"} />
                             {clipError && <p className="text-sm text-red-500">{clipError}</p>}
                             <BlueButton onClick={handleClip} className="self-start mt-auto">Clip</BlueButton>
-                        </Box>
+                        </Card>
 
-                        <Box className="p-6 flex flex-col gap-3">
+                        <Card className="p-6 flex flex-col gap-3">
                             <CardHeader icon={Film} title="Save between two markers" accent="accent" />
                             {markers.length < 2 ? (
                                 <p className="text-sm text-gray-400">Add at least two markers above to save a section between them.</p>
@@ -377,10 +377,10 @@ const StreamControl = () => {
                                 </>
                             )}
                             <BlueButton onClick={handleSaveByMarkers} disabled={markers.length < 2} className="self-start mt-auto">Save</BlueButton>
-                        </Box>
+                        </Card>
                     </div>
 
-                    <Box className="p-5 flex flex-col gap-3">
+                    <Card className="p-5 flex flex-col gap-3">
                         <CardHeader icon={Activity} title="Recent actions" />
                         {jobs.length === 0 ? (
                             <p className="text-sm text-gray-400">Clip and save actions will show up here.</p>
@@ -389,7 +389,7 @@ const StreamControl = () => {
                                 {jobs.map((job) => <JobStatus key={job.uuid} job={job} />)}
                             </div>
                         )}
-                    </Box>
+                    </Card>
                 </>
             )}
         </div>

frontend/src/utils/AuthContext.tsx

@@ -0,0 +1,42 @@
+import React, {createContext, useContext, useState, useEffect, type ReactNode} from 'react';
+import { getUser } from "./api/users.ts";
+import type {User} from "./types.ts";
+
+// for what the Auth object will look like
+interface AuthContextValue {
+    user: User | null;
+    setUser: React.Dispatch<React.SetStateAction<User | null>>;
+    loading: boolean;
+}
+
+interface AuthProviderProps {
+    children: ReactNode;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export function AuthProvider({children}: AuthProviderProps) {
+    const [user, setUser] = useState<User | null>(null);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        getUser()
+            .then(setUser)
+            .catch(() => setUser(null))
+            .finally(() => setLoading(false));
+    }, []);
+
+    return (
+        <AuthContext.Provider value={{ user, setUser, loading }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth(): AuthContextValue {
+    const context = useContext(AuthContext);
+    if (context === undefined) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+}