gjermund/tessera
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign: Linear-inspired dark mode frontend

Browse Source 
Complete rewrite of all pages:
- layout.tsx: App shell with 240px sidebar (saved views, queue list, admin link)
- app-shell.tsx: Client sidebar component with route highlighting + counts
- page.tsx: Sleek ticket list with filter chips (All/Open/In progress/Resolved), search bar, status dots, assignee avatars, skeleton loading
- tickets/[id]/page.tsx: Two-panel conversation layout — message thread (left) + properties sidebar (right) with status change, scrip preview, reply box
- admin/page.tsx: Suspense-wrapped admin with tabs in sheet panels
- command-palette.tsx: Cmd+K search with keyboard navigation

Design tokens from Linear:
- bg-[#08090a] canvas, bg-[#0f1011] panels, bg-[#191a1b] cards
- text-[#f7f8f8] primary, text-[#d0d6e0] secondary, text-[#8a8f98] tertiary
- borders: rgba(255,255,255,0.08) standard, rgba(255,255,255,0.05) subtle
- accent: #5e6ad2 primary, #7170ff interactive
- status colors: new=gray, open=indigo, in_progress=amber, resolved=green
- Inter font, weights 400/510/590, no pure white

Fixed: Suspense boundaries for useSearchParams in layout and admin pages
Build: passes with zero errors
This commit is contained in:
Gjermund Høsøien Wiggen
2026-06-07 22:16:18 +02:00
parent df677cb37f
commit 77860eb6c4
7 changed files with 2118 additions and 1256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/app/layout.tsx
View File

@@ -1,49 +1,30 @@
"use client";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { Suspense } from "react";
import "./globals.css";
import { AppShell } from "@/components/app-shell";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
const pathname = usePathname();
const isActive = pathname === href || (href !== "/" && pathname.startsWith(href));
return (
<Link
href={href}
className={`text-sm font-medium transition-colors ${
isActive ? "text-white" : "text-neutral-400 hover:text-neutral-200"
}`}
>
{children}
</Link>
);
}
export const metadata: Metadata = {
title: "Tessera",
description: "Ticket management system",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en" className={`dark ${inter.variable} h-full antialiased`}>
<body className="min-h-full flex flex-col bg-neutral-950 text-neutral-100">
<nav className="sticky top-0 z-40 h-14 bg-neutral-900/80 backdrop-blur-md border-b border-neutral-800 px-6 flex items-center justify-between">
<Link href="/" className="font-bold text-lg text-white">
Tessera
</Link>
<div className="flex items-center gap-6">
<NavLink href="/">Tickets</NavLink>
<NavLink href="/admin">Admin</NavLink>
</div>
</nav>
<main className="container mx-auto px-6 py-8 flex-1">{children}</main>
<html lang="en" className="dark">
<body
className={`${inter.variable} font-sans antialiased bg-[#08090a] text-[#f7f8f8]`}
>
<Suspense fallback={<div className="flex items-center justify-center h-screen text-[#8a8f98]">Loading...</div>}>
<AppShell>{children}</AppShell>
</Suspense>
</body>
</html>
);