From 547728b6ec793c83eeeddfe08a0e312483515039 Mon Sep 17 00:00:00 2001
From: Stephanie Gredell <s.raide@gmail.com>
Date: Sun, 7 Dec 2025 19:47:16 -0800
Subject: [PATCH] only show navbar in video app

---
 frontend/src/App.tsx                      | 12 +++++++--
 frontend/src/components/Navbar/Navbar.tsx | 11 ++++++--
 frontend/src/config/apps.ts               | 32 +++++++++++++++++++++++
 frontend/src/pages/LandingPage.tsx        | 31 ++--------------------
 4 files changed, 53 insertions(+), 33 deletions(-)
 create mode 100644 frontend/src/config/apps.ts

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 0f16462..ff422a3 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -4,9 +4,9 @@ import { ErrorBoundary } from './components/ErrorBoundary';
 import { Navbar } from './components/Navbar/Navbar';
 import { ProtectedRoute } from './components/ProtectedRoute';
 import { LandingPage } from './pages/LandingPage';
-import { VideoApp } from './pages/VideoApp';
 import { AdminPage } from './pages/AdminPage';
 import { LoginPage } from './pages/LoginPage';
+import { APPS } from './config/apps';
 import './App.css';
 
 function App() {
@@ -19,7 +19,15 @@ function App() {
             <main className="main-content">
               <Routes>
                 <Route path="/" element={<LandingPage />} />
-                <Route path="/videos" element={<VideoApp />} />
+                {/* Dynamically generate routes for enabled apps */}
+                {APPS.filter(app => !app.disabled).map(app => (
+                  <Route 
+                    key={app.id} 
+                    path={app.link} 
+                    element={<app.component />} 
+                  />
+                ))}
+                {/* Keep non-app routes separate */}
                 <Route path="/login" element={<LoginPage />} />
                 <Route
                   path="/admin"
diff --git a/frontend/src/components/Navbar/Navbar.tsx b/frontend/src/components/Navbar/Navbar.tsx
index 0dc54ca..fa4bacc 100644
--- a/frontend/src/components/Navbar/Navbar.tsx
+++ b/frontend/src/components/Navbar/Navbar.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link, useLocation, useSearchParams } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
 import { useChannels } from '../../hooks/useChannels';
+import { APPS } from '../../config/apps';
 import './Navbar.css';
 
 export function Navbar() {
@@ -10,7 +11,13 @@ export function Navbar() {
   const [searchParams, setSearchParams] = useSearchParams();
   const { channels } = useChannels();
   
-  const isVideoPage = location.pathname.startsWith('/videos');
+  // Detect current app from registry
+  const getCurrentApp = (pathname: string) => {
+    return APPS.find(app => pathname === app.link || pathname.startsWith(app.link + '/'));
+  };
+  
+  const currentApp = getCurrentApp(location.pathname);
+  const isVideoApp = currentApp?.id === 'videos';
   const [searchInput, setSearchInput] = useState(searchParams.get('search') || '');
   
   // Sync search input with URL params
@@ -92,7 +99,7 @@ export function Navbar() {
         </div>
       </div>
       
-      {isVideoPage && (
+      {isVideoApp && (
         <div className="navbar-filters">
           <div className="navbar-filters-container">
             <form onSubmit={handleSearchSubmit} className="navbar-search-form">
diff --git a/frontend/src/config/apps.ts b/frontend/src/config/apps.ts
new file mode 100644
index 0000000..57d6324
--- /dev/null
+++ b/frontend/src/config/apps.ts
@@ -0,0 +1,32 @@
+import React from 'react';
+import { VideoApp } from '../pages/VideoApp';
+
+export type App = {
+  id: string;
+  name: string;
+  description: string;
+  cta: string;
+  link: string;
+} & (
+  | { disabled: true; component?: never }
+  | { disabled?: false; component: React.ComponentType }
+);
+
+export const APPS: App[] = [
+  {
+    id: 'videos',
+    name: 'Video Library',
+    description: 'Browse long-form videos from your trusted kid-friendly channels, already filtered to longer than ten minutes.',
+    cta: 'Open Videos',
+    link: '/videos',
+    component: VideoApp
+  },
+  {
+    id: 'storytime',
+    name: 'Story Time (Coming Soon)',
+    description: 'Narrated stories and audio adventures for quiet time.',
+    cta: 'In Development',
+    link: '/stories',
+    disabled: true
+  }
+];
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index 091ead6..8fe60fa 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,40 +1,13 @@
 import { Link } from 'react-router-dom';
+import { APPS } from '../config/apps';
 import './LandingPage.css';
 
-type App = {
-  id: string;
-  name: string;
-  description: string;
-  cta: string;
-} & (
-  | { disabled: true; link?: never }
-  | { disabled?: false; link: string }
-);
-
-const APPS: App[] = [
-  {
-    id: 'videos',
-    name: 'Video Library',
-    description: 'Browse long-form videos from your trusted kid-friendly channels, already filtered to longer than ten minutes.',
-    cta: 'Open Videos',
-    link: '/videos'
-  },
-  {
-    id: 'soon',
-    name: 'Story Time (Coming Soon)',
-    description: 'Narrated stories and audio adventures for quiet time.',
-    cta: 'In Development',
-    disabled: true
-  }
-];
-
 export function LandingPage() {
   return (
     <div className="landing-page menu">
       <header className="menu-header">
-        <p className="eyebrow">Choose an experience</p>
         <h1>Welcome to Kiddos</h1>
-        <p>Select an app below to get started. We’ll keep adding more experiences over time.</p>
+        <p>Select an app below to get started.</p>
       </header>
 
       <section className="app-grid">