rename Box to Card

add cringe home message
add titles to homepage
2026-07-29 22:22:41 +01:00 · 2026-07-29 21:28:34 +01:00 · 2026-07-29 21:23:34 +01:00 · 2026-07-29 20:53:13 +01:00 · 2026-07-29 20:20:26 +01:00 · 2026-07-29 19:14:20 +01:00
21 changed files with 311 additions and 371 deletions
--- a/frontend/index.html
+++ b/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>
--- a/frontend/src/App.css
+++ b/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;
-}
--- a/frontend/src/components/Box.tsx
+++ b/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;
--- a/frontend/src/components/Card.tsx
+++ b/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;
--- a/frontend/src/components/NoAccessPage.tsx
+++ b/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;
--- a/frontend/src/components/Sidebar.tsx
+++ b/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 type {User} from "../utils/types.ts";
+import { Plus, Film, Home, Video, Radio } from 'lucide-react';
+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)}>
-            <div className="px-4 pt-5 pb-3">
-                <img
-                    className="w-36 mx-auto"
-                    src="../../public/logo.png"
-                    alt="VoD System Logo"
-                />
-            </div>
-            <nav className="flex flex-col flex-1 px-2 pb-4">
-                <div className="flex flex-col gap-0.5">
+        <aside className={clsx("h-screen flex flex-col bg-sidebar border-r border-hairline p-2 items-center gap-1", className)}>
+            <h2 className={"font-heading text-3xl"}>The VoD System</h2>
+
+            <nav className="flex flex-col flex-1 items-center">
+                <Divider />
+                <div className="flex flex-col gap-0.5 w-full">
                    <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 && (
-                    <>
-                        <Divider />
-                        <div className="flex flex-col gap-0.5">
+                    <div className="flex flex-col gap-0.5 w-full">
+                        <div>
                            <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 && (
-                    <>
-                        <Divider />
-                        <SidebarButton url="/profile" logo={<UserIcon size={18}/>} label="Profile" />
-                    </>
-                )}
+                <div className={"p-2"}>
+                    {user ? (
+                        <div>
+                            <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>
    );
--- a/frontend/src/components/Topbar.tsx
+++ b/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;
--- a/frontend/src/components/buttons/MenuButton.tsx
+++ b/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;
--- a/frontend/src/components/buttons/SidebarButton.tsx
+++ b/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>
    )
 }
--- a/frontend/src/index.css
+++ b/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 */
-    --breakpoint-3xl: 1920px;
+    /* Colours */
+    --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);
-    --color-primary-pressed: oklch(0.45 0.21 254);
-    --color-secondary: oklch(0.94 0.01 250);
-    --color-accent: oklch(0.68 0.20 288);
-    --color-text: oklch(0.17 0.01 270);
-    --color-background: oklch(0.97 0.005 250);
-    --color-surface: oklch(1 0 0);
-    --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);
+    /* Colour Fonts */
+    --color-text-primary: #2B2620;
+    --color-text-strong: #35302A;
+    --color-faint-mono: #A79C8E;
+    --color-muted: #9A9084;
+    --color-hover: #E7E0D2;
+    --color-hairline: #F0EBE2;
 }

 :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;
+}
--- a/frontend/src/layouts/MainLayout.tsx
+++ b/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 type {User} from "../utils/types";
-import { getUser } from "../utils/api/users";
-import { getStreamStatus } from "../utils/api/stream";
+import { useState } from "react";

 const MainLayout = () => {
-    const [sidebarToggled, setSidebarToggled] = 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]);
+    const [sidebarToggled] = useState(false);

    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
-                className={"transition-all duration-300"}
-                sidebarToggled={sidebarToggled}
-                setSidebarToggled={setSidebarToggled}
-                user={user}
-                fetchUser={fetchUser}
-                isStreaming={isStreaming}/>
-            <div className="overflow-auto bg-background">
+            <div>
                <Outlet />
            </div>
        </div>
--- a/frontend/src/main.tsx
+++ b/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>,
 )
--- a/frontend/src/pages/ClipEdit.tsx
+++ b/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>
    );
 };
--- a/frontend/src/pages/ClipUpload.tsx
+++ b/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>
    )
 };
--- a/frontend/src/pages/EditClip.tsx
+++ b/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>
    );
--- a/frontend/src/pages/EditVod.tsx
+++ b/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>
    );
--- a/frontend/src/pages/Home.tsx
+++ b/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 = [
-    {
-        icon: Upload,
-        title: "Upload & compress",
-        description: "Drop in a video file, set your clip range and export settings, then compress.",
-    },
-    {
-        icon: Scissors,
-        title: "Trim",
-        description: "Set start and end points with a range slider. Preview as you go.",
-    },
-    {
-        icon: SlidersHorizontal,
-        title: "Export settings",
-        description: "Choose resolution, frame rate, and an optional file size cap.",
-    },
-    {
-        icon: Radio,
-        title: "RTMP streaming",
-        description: "Point OBS at your stream key and go live. Find the key in your profile.",
-    },
-    {
-        icon: LayoutGrid,
-        title: "Clip library",
-        description: "Browse all your clips. Watch, rename, edit the description, or delete.",
-    },
-    {
-        icon: Play,
-        title: "Built-in player",
-        description: "Scrub, adjust volume, go fullscreen. Runs in the browser.",
-    },
-];
+type TimeOfDay = "morning" | "afternoon" | "evening" | "night";
+
+function getTimeOfDay(date: Date = new Date()): TimeOfDay {
+    const hour = date.getHours();
+
+    if (hour >= 5 && hour < 12) return "morning";
+    if (hour >= 12 && hour < 17) return "afternoon";
+    if (hour >= 17 && hour < 22) return "evening";
+    return "night";
+}
+
+function getGreetingSubtext(date: Date = new Date()): string {
+    const timeOfDay = getTimeOfDay(date);
+
+    const messages: Record<TimeOfDay, string[]> = {
+        morning: [
+            "Good morning.",
+            "Coffee first, then clips.",
+            "Here's what's waiting for you.",
+        ],
+        afternoon: [
+            "Good afternoon.",
+            "A quiet moment for your clips.",
+            "Catching up?",
+        ],
+        evening: [
+            "Good evening.",
+            "Settle in.",
+            "Time to unwind.",
+        ],
+        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">
-            {/* Hero */}
-            <div className="flex flex-col items-center text-center max-w-2xl mb-14">
-                <img
-                    src="/logo.png"
-                    alt="VoD System Logo"
-                    className="h-24 mb-6 object-contain"
-                />
-                <h1 className="text-4xl font-semibold text-gray-900 mb-3 leading-tight">
-                    A home for your clips.
-                </h1>
-                <p className="text-base text-gray-500 leading-relaxed">
-                    Upload, trim, and export video clips. Stream live if you need to.
-                </p>
+        <div className={"w-10/12 m-auto pt-10"}>
+            <div className={"flex flex-row justify-between items-start pb-10"}>
+                <div>
+                    <p className={"font-data text-faint-mono text-sm tracking-widest"}>{formatted.toLocaleUpperCase()}</p>
+                    <h1 className={"font-heading font text-5xl text-text-strong tracking-[-0.015em]"}>{getGreetingSubtext(new Date())}</h1>
+                </div>
+
+                <Link to={"/stream"} className={"bg-accent rounded-md text-hover text-sm p-2 hover:bg-accent-hover shadow-md"}>
+                     Open Stream Panel
+                </Link>
            </div>

-            {/* Feature grid */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 w-full max-w-4xl mb-10">
-                {features.map(({ icon: Icon, title, description }) => (
-                    <div
-                        key={title}
-                        className="bg-white border border-gray-200 rounded-xl p-5 flex flex-col gap-3 shadow-sm"
-                    >
-                        <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>
-                ))}
+            <Card className={"bg-live-card pb-10"}>
+                <p></p>
+            </Card>
+
+            <div>
+                <h2 className={"font-heading text-2xl"}>Recent VoDs</h2>
            </div>

-            {/* Format note */}
-            <p className="text-xs text-gray-400">
-                Supports MP4, MOV, WebM, and OGG.
-            </p>
        </div>
    );
 };
--- a/frontend/src/pages/MediaPlayer.tsx
+++ b/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>
    );
 };
--- a/frontend/src/pages/Profile.tsx
+++ b/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>
    );
 };
--- a/frontend/src/pages/StreamControl.tsx
+++ b/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>
--- a/frontend/src/utils/AuthContext.tsx
+++ b/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;
+}
Author	SHA1	Message	Date
Dylan De Faoite	bb771e630b	rename Box to Card All checks were successful CI / Maven unit tests (push) Successful in 14s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 22:22:41 +01:00
Dylan De Faoite	3c50d6aaf4	add cringe home message All checks were successful CI / Maven unit tests (push) Successful in 20s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 21:28:34 +01:00
Dylan De Faoite	9dcab44465	add titles to homepage All checks were successful CI / Maven unit tests (push) Successful in 13s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 21:23:34 +01:00
Dylan De Faoite	6ddffd8e2b	fix sidebar spacing issues All checks were successful CI / Maven unit tests (push) Successful in 13s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 20:53:13 +01:00
Dylan De Faoite	c86e5e5568	add colour and remove topbar All checks were successful CI / Maven unit tests (push) Successful in 14s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 20:20:26 +01:00
Dylan De Faoite	2f9ddadb91	add new fonts All checks were successful CI / Maven unit tests (push) Successful in 14s Details CI / Build and push images (push) Has been skipped Details CI / Deploy to server (push) Has been skipped Details	2026-07-29 19:14:20 +01:00