routing fixes

Author: gallayl

frontend/src/components/ai/ai-icon.tsx

@@ -1,6 +1,7 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { AppBarLink } from '@furystack/shades-common-components'
 import { SessionService } from '../../services/session.js'
+import { aiPageRoute } from '../routes/ai-routes.js'
 
 export const AiIcon = Shade({
   shadowDomName: 'shade-app-ai-icon',
@@ -13,7 +14,7 @@ export const AiIcon = Shade({
     }
 
     return (
-      <AppBarLink title="Ai" href="/ai">
+      <AppBarLink title="Ai" href={aiPageRoute.url}>
         {sessionState === 'authenticated' ? '🤖' : '🔒 Login to Ai'}
       </AppBarLink>
     )

frontend/src/components/chat/chat-icon.tsx

@@ -1,6 +1,7 @@
 import { createComponent, Shade } from '@furystack/shades'
 import { AppBarLink } from '@furystack/shades-common-components'
 import { SessionService } from '../../services/session.js'
+import { chatPageRoute } from '../routes/chat-routes.js'
 
 export const ChatIcon = Shade({
   shadowDomName: 'shade-app-chat-icon',
@@ -13,7 +14,7 @@ export const ChatIcon = Shade({
     }
 
     return (
-      <AppBarLink title="Chat" href="/chat">
+      <AppBarLink title="Chat" href={chatPageRoute.url}>
         {sessionState === 'authenticated' ? '💬' : '🔒 Login to chat'}
       </AppBarLink>
     )

frontend/src/components/dashboard/app-shortcut-widget.tsx

@@ -1,21 +1,25 @@
 import { Shade, createComponent } from '@furystack/shades'
 import type { AppShortcutWidget as AppShortcutWidgetData } from 'common'
+import { defaultDashboardRoute } from '../routes/dashboard-routes.js'
+import { fileBrowserRoute } from '../routes/file-browser-routes.js'
+import { iotDeviceListRoute } from '../routes/iot-routes.js'
+import { movieListRoute, seriesListRoute } from '../routes/movie-routes.js'
 import { IconUrlWidget } from './icon-url-widget.js'
 export const AppShortcutWidget = Shade<AppShortcutWidgetData>({
   shadowDomName: 'pi-rat-app-shortcut-widget',
   render: ({ props }) => {
     const { appName, ...rest } = props
     switch (props.appName) {
       case 'home':
-        return <IconUrlWidget {...rest} name="Home" url="/" icon={<>🐀</>} />
+        return <IconUrlWidget {...rest} name="Home" url={defaultDashboardRoute.url} icon={<>🐀</>} />
       case 'browser':
-        return <IconUrlWidget {...rest} name="File Browser" url="/file-browser" icon={<>📂</>} />
+        return <IconUrlWidget {...rest} name="File Browser" url={fileBrowserRoute.url} icon={<>📂</>} />
       case 'movies':
-        return <IconUrlWidget {...rest} name="Movies" url="/movies" icon={<>🎥</>} />
+        return <IconUrlWidget {...rest} name="Movies" url={movieListRoute.url} icon={<>🎥</>} />
       case 'series':
-        return <IconUrlWidget {...rest} name="Series" url="/series" icon={<>📺</>} />
+        return <IconUrlWidget {...rest} name="Series" url={seriesListRoute.url} icon={<>📺</>} />
       case 'iot':
-        return <IconUrlWidget {...rest} name="IOT Devices" url="/iot/devices" icon={<>📡</>} />
+        return <IconUrlWidget {...rest} name="IOT Devices" url={iotDeviceListRoute.url} icon={<>📡</>} />
       default:
         return <IconUrlWidget {...rest} name={appName} url={`/${appName}`} icon={<>🚫</>} />
     }

frontend/src/components/header.tsx

@@ -6,6 +6,9 @@ import { AiIcon } from './ai/ai-icon.js'
 import { ChatIcon } from './chat/chat-icon.js'
 import { PiRatCommandPalette } from './command-palette/index.js'
 import { GithubLogo } from './github-logo/index.js'
+import { defaultDashboardRoute } from './routes/dashboard-routes.js'
+import { fileBrowserRoute } from './routes/file-browser-routes.js'
+import { movieListRoute, seriesListRoute } from './routes/movie-routes.js'
 import { ThemeSwitch } from './theme-switch/index.js'
 
 export interface HeaderProps {
@@ -22,7 +25,7 @@ const AdminLinks = Shade({
 
     return isAdmin ? (
       <div style={{ display: 'flex', placeContent: 'center', gap: '8px' }}>
-        <AppBarLink href="/file-browser" title="Drives">
+        <AppBarLink href={fileBrowserRoute.url} title="Drives">
           📂 Files
         </AppBarLink>
       </div>
@@ -39,18 +42,18 @@ export const Header = Shade<HeaderProps>({
 
     return (
       <AppBar id="header">
-        <AppBarLink title={props.title} href="/">
+        <AppBarLink title={props.title} href={defaultDashboardRoute.url}>
           {props.title}
         </AppBarLink>
         {sessionState === 'authenticated' ? (
           <>
             {currentUser?.roles?.includes('admin') ? <AdminLinks /> : null}
 
-            <AppBarLink title="Movies" href="/movies">
+            <AppBarLink title="Movies" href={movieListRoute.url}>
               🎥 Movies
             </AppBarLink>
 
-            <AppBarLink title="Movies" href="/series">
+            <AppBarLink title="Series" href={seriesListRoute.url}>
               📺 Series
             </AppBarLink>
           </>