will/flynn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(gateway-ui): rewrite HTML shell with Tailwind responsive layout

Browse Source 
Add Tailwind CSS via CDN with Inter/JetBrains Mono font config, Google
Fonts preconnect, and a three-breakpoint responsive shell: desktop sidebar
(224px with labels), tablet icon strip (64px), and mobile top bar with
pill navigation. Update manifest and meta theme-color to zinc-950.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
William Valentin
2026-02-18 12:52:01 -08:00
parent 7480c67338
commit 9d01441acd
2 changed files with 78 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gateway/ui/index.html
+76 -20
View File
@@ -3,46 +3,102 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#101216">
<meta name="theme-color" content="#09090b">
<title>Flynn</title>
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" type="image/svg+xml" href="flynn-icon.svg">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
},
},
},
};
</script>
<!-- Google Fonts: Inter -->
<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Existing: app styles, markdown, syntax highlighting -->
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div class="app-shell">
<nav class="sidebar">
<div class="sidebar-header">
<h1 class="logo">Flynn</h1>
<body class="bg-zinc-950 text-zinc-50 font-sans antialiased h-screen w-screen overflow-hidden">
<div id="app-shell" class="flex h-screen overflow-hidden">
<!-- Desktop / Tablet sidebar -->
<nav id="sidebar" class="hidden md:flex w-16 lg:w-56 flex-col bg-zinc-900 border-r border-zinc-800 shrink-0">
<div class="flex items-center h-14 px-4">
<span class="text-blue-500 font-bold text-lg hidden lg:block">Flynn</span>
<span class="text-blue-500 font-bold text-lg lg:hidden">F</span>
</div>
<div class="nav-links">
<a href="#/" class="nav-link active" data-page="dashboard">
<span class="nav-icon">&#9632;</span> Dashboard
<div class="flex flex-col flex-1 gap-0.5 px-2 py-2">
<a href="#/" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="dashboard">
<span class="nav-icon text-base">&#9632;</span>
<span class="hidden lg:inline">Dashboard</span>
</a>
<a href="#/chat" class="nav-link" data-page="chat">
<span class="nav-icon">&#9993;</span> Chat
<a href="#/chat" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="chat">
<span class="nav-icon text-base">&#9993;</span>
<span class="hidden lg:inline">Chat</span>
</a>
<a href="#/sessions" class="nav-link" data-page="sessions">
<span class="nav-icon">&#9776;</span> Sessions
<a href="#/sessions" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="sessions">
<span class="nav-icon text-base">&#9776;</span>
<span class="hidden lg:inline">Sessions</span>
</a>
<a href="#/usage" class="nav-link" data-page="usage">
<span class="nav-icon">&#9733;</span> Usage
<a href="#/usage" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="usage">
<span class="nav-icon text-base">&#9733;</span>
<span class="hidden lg:inline">Usage</span>
</a>
<a href="#/settings" class="nav-link" data-page="settings">
<span class="nav-icon">&#9881;</span> Settings
<a href="#/settings" class="nav-link flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-zinc-400 hover:text-zinc-50 hover:bg-zinc-800 border-l-2 border-transparent transition-colors" data-page="settings">
<span class="nav-icon text-base">&#9881;</span>
<span class="hidden lg:inline">Settings</span>
</a>
</div>
<div class="sidebar-footer">
<span id="conn-status" class="conn-status disconnected">Disconnected</span>
<div class="px-4 py-3 border-t border-zinc-800">
<span id="conn-status" class="conn-status flex items-center gap-2 text-xs text-zinc-500">
<span id="conn-dot" class="w-2 h-2 rounded-full bg-zinc-600 shrink-0"></span>
<span id="conn-text" class="hidden lg:inline">Disconnected</span>
</span>
</div>
</nav>
<main id="content" class="content">
<!-- Mobile chrome: top bar + pill row -->
<div id="mobile-chrome" class="md:hidden fixed top-0 left-0 right-0 z-50 bg-zinc-900 border-b border-zinc-800">
<div class="flex items-center justify-between h-12 px-4">
<span class="text-blue-500 font-bold text-lg">Flynn</span>
<span id="conn-status-mobile" class="flex items-center">
<span id="conn-dot-mobile" class="w-2 h-2 rounded-full bg-zinc-600"></span>
</span>
</div>
<div class="flex gap-1.5 px-3 pb-2 overflow-x-auto">
<button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/">Dashboard</button>
<button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/chat">Chat</button>
<button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/sessions">Sessions</button>
<button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/usage">Usage</button>
<button class="page-pill px-3 py-1 rounded-full text-xs font-medium text-zinc-400 bg-zinc-800 whitespace-nowrap transition-colors" data-hash="#/settings">Settings</button>
</div>
</div>
<!-- Main content area -->
<main id="content" class="flex-1 overflow-y-auto md:p-6 pt-24 md:pt-6">
<!-- Pages rendered here by router -->
</main>
</div>
<script type="module">
import { registerPage, initRouter, initStatusIndicator } from './app.js';
import { DashboardPage } from './pages/dashboard.js';
src/gateway/ui/manifest.webmanifest
+2 -2
View File
@@ -3,8 +3,8 @@
"short_name": "Flynn",
"start_url": "/#/chat",
"display": "standalone",
"background_color": "#101216",
"theme_color": "#101216",
"background_color": "#09090b",
"theme_color": "#09090b",
"description": "Flynn WebChat companion UI",
"icons": [
{