bun.lock

@@ -27,7 +27,7 @@
 
     "hono": ["hono@4.11.7", "", {}, "sha512-l7qMiNee7t82bH3SeyUCt9UF15EVmaBvsppY2zQtrbIhl/yzBTny+YUxsVjSjQ6gaqaeVtZmGocom8TzBlA4Yw=="],
 
-    "hype": ["hype@git+https://git.nose.space/defunkt/hype#1a8d4228347a47b696b4c6918179cda94fc1b0cd", { "dependencies": { "hono": "^4.10.4", "kleur": "^4.1.5" }, "peerDependencies": { "typescript": "^5" } }, "1a8d4228347a47b696b4c6918179cda94fc1b0cd"],
+    "hype": ["hype@git+https://git.nose.space/defunkt/hype#a8d3a8203e145df7a222ea409588c2ea3a1ee4e6", { "dependencies": { "hono": "^4.10.4", "kleur": "^4.1.5" }, "peerDependencies": { "typescript": "^5" } }, "a8d3a8203e145df7a222ea409588c2ea3a1ee4e6"],
 
     "kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
 

src/client/index.tsx

@@ -5,7 +5,6 @@ import { theme } from './themes'
 
 // UI state (survives re-renders)
 let selectedApp: string | null = localStorage.getItem('selectedApp')
-let sidebarCollapsed: boolean = localStorage.getItem('sidebarCollapsed') === 'true'
 
 // Server state (from SSE)
 let apps: App[] = []
@@ -31,36 +30,12 @@ const Logo = define('Logo', {
   height: 64,
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'space-between',
   padding: '0 16px',
   fontSize: 20,
   fontWeight: 'bold',
   borderBottom: `1px solid ${theme('colors-border')}`,
 })
 
-const HamburgerButton = define('HamburgerButton', {
-  base: 'button',
-  background: 'none',
-  border: 'none',
-  cursor: 'pointer',
-  padding: 4,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  gap: 4,
-  selectors: {
-    '&:hover span': { background: theme('colors-text') },
-  },
-})
-
-const HamburgerLine = define('HamburgerLine', {
-  width: 18,
-  height: 2,
-  background: theme('colors-textMuted'),
-  borderRadius: 1,
-  transition: 'background 0.15s',
-})
-
 const SectionLabel = define('SectionLabel', {
   padding: '16px 16px 8px',
   fontSize: 12,
@@ -166,7 +141,7 @@ const HeaderActions = define('HeaderActions', {
 
 const MainContent = define('MainContent', {
   flex: 1,
-  padding: '10px 24px',
+  padding: 24,
   overflow: 'auto',
 })
 
@@ -273,43 +248,8 @@ const LogLine = define('LogLine', {
 const LogTime = define('LogTime', {
   color: theme('colors-textFaintest'),
   marginRight: 12,
-  display: 'inline',
 })
 
-let selectedTab: 'overview' | 'todo' = 'overview'
-
-const TabContent = define('TabContent', {
-  display: 'none',
-
-  variants: {
-    active: {
-      display: 'block'
-    }
-  }
-})
-
-const NavButton = define('NavButton', {
-  render({ props }) {
-    return (
-      <Button onClick={props.onClick} style={{ marginRight: 10, marginBottom: 20 }}>
-        {props.children}
-      </Button>
-    )
-  }
-})
-
-function setSelectedTab(tab: 'overview' | 'todo') {
-  selectedTab = tab
-  render()
-}
-
-const Nav = () => {
-  return <>
-    <NavButton onClick={() => setSelectedTab('overview')}>Overview</NavButton>
-    <NavButton onClick={() => setSelectedTab('todo')}>TODO</NavButton>
-  </>
-}
-
 const stateLabels: Record<AppState, string> = {
   invalid: 'Invalid',
   stopped: 'Stopped',
@@ -329,17 +269,13 @@ const selectApp = (name: string) => {
   render()
 }
 
-const toggleSidebar = () => {
-  sidebarCollapsed = !sidebarCollapsed
-  localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed))
-  render()
-}
-
 const AppDetail = ({ app }: { app: App }) => (
   <>
     <MainHeader>
       <MainTitle>
-        {app.icon ?? <StatusDot state={app.state} />}
+        {app.state === 'running' && app.icon ? <>{app.icon}</> : (
+          <StatusDot state={app.state} />
+        )}
         &nbsp;
         {app.name}
       </MainTitle>
@@ -349,9 +285,6 @@ const AppDetail = ({ app }: { app: App }) => (
       </HeaderActions>
     </MainHeader>
     <MainContent>
-      <Nav />
-
-      <TabContent active={selectedTab === 'overview'}>
       <Section>
         <SectionTitle>Status</SectionTitle>
         <InfoRow>
@@ -425,11 +358,6 @@ const AppDetail = ({ app }: { app: App }) => (
           <Button disabled>{stateLabels[app.state]}...</Button>
         )}
       </ActionBar>
-      </TabContent>
-
-      <TabContent active={selectedTab === 'todo'}>
-        <h1>hardy har har</h1>
-      </TabContent>
     </MainContent>
   </>
 )
@@ -440,39 +368,28 @@ const Dashboard = () => {
   return (
     <Layout>
       <Styles />
-      <Sidebar style={sidebarCollapsed ? { width: 'auto' } : undefined}>
-        <Logo>
-          {!sidebarCollapsed && <span>🐾 Toes</span>}
-          <HamburgerButton onClick={toggleSidebar} title={sidebarCollapsed ? 'Show sidebar' : 'Hide sidebar'}>
-            <HamburgerLine />
-            <HamburgerLine />
-            <HamburgerLine />
-          </HamburgerButton>
-        </Logo>
-        {!sidebarCollapsed && <SectionLabel>Apps</SectionLabel>}
+      <Sidebar>
+        <Logo>🐾 Toes</Logo>
+        <SectionLabel>Apps</SectionLabel>
         <AppList>
           {apps.map(app => (
             <AppItem
               key={app.name}
               onClick={() => selectApp(app.name)}
               selected={app.name === selectedApp ? true : undefined}
-              style={sidebarCollapsed ? { justifyContent: 'center', padding: '10px 12px' } : undefined}
-              title={sidebarCollapsed ? app.name : undefined}
             >
               {app.state === 'running' && app.icon ? (
-                <span style={{ fontSize: sidebarCollapsed ? 18 : 14 }}>{app.icon}</span>
+                <span style={{ fontSize: 14 }}>{app.icon}</span>
               ) : (
                 <StatusDot state={app.state} />
               )}
-              {!sidebarCollapsed && app.name}
+              {app.name}
             </AppItem>
           ))}
         </AppList>
-        {!sidebarCollapsed && (
         <SidebarFooter>
           <NewAppButton>+ New App</NewAppButton>
         </SidebarFooter>
-        )}
       </Sidebar>
       <Main>
         {selected ? (

src/server/apps.ts

@@ -196,7 +196,6 @@ export const stopApp = (dir: string) => {
 const watchAppsDir = () => {
   watch(APPS_DIR, { recursive: true }, (_event, filename) => {
     if (!filename) return
-    if (!filename.includes('/')) return
 
     // Extract the app directory name from the path (e.g., "myapp/package.json" -> "myapp")
     const dir = filename.split('/')[0]!