default_emoji

src/client/index.tsx

@@ -9,6 +9,8 @@ import { openEmojiPicker } from './tags/emoji-picker'
 let selectedApp: string | null = localStorage.getItem('selectedApp')
 let sidebarCollapsed: boolean = localStorage.getItem('sidebarCollapsed') === 'true'
 
+const DEFAULT_EMOJI = '🖥️'
+
 // Server state (from SSE)
 let apps: App[] = []
 
@@ -380,7 +382,7 @@ const AppDetail = ({ app }: { app: App }) => (
   <>
     <MainHeader>
       <MainTitle>
-        <OpenEmojiPicker app={app}>{app.icon ?? <StatusDot state={app.state} />}</OpenEmojiPicker>
+        <OpenEmojiPicker app={app}>{app.icon ?? DEFAULT_EMOJI}</OpenEmojiPicker>
         &nbsp;
         {app.name}
       </MainTitle>
@@ -400,7 +402,6 @@ const AppDetail = ({ app }: { app: App }) => (
             <InfoValue>
               <StatusDot state={app.state} />
               {stateLabels[app.state]}
-              {app.port ? ` on :${app.port}` : ''}
             </InfoValue>
           </InfoRow>
           {app.state === 'running' && app.port && (
@@ -413,6 +414,14 @@ const AppDetail = ({ app }: { app: App }) => (
               </InfoValue>
             </InfoRow>
           )}
+          {app.state === 'running' && app.port && (
+            <InfoRow>
+              <InfoLabel>Port</InfoLabel>
+              <InfoValue>
+                {app.port}
+              </InfoValue>
+            </InfoRow>
+          )}
           {app.started && (
             <InfoRow>
               <InfoLabel>Started</InfoLabel>
@@ -500,12 +509,15 @@ const Dashboard = () => {
               style={sidebarCollapsed ? { justifyContent: 'center', padding: '10px 12px' } : undefined}
               title={sidebarCollapsed ? app.name : undefined}
             >
-              {app.state === 'running' && app.icon ? (
+              {sidebarCollapsed ? (
-                <span style={{ fontSize: sidebarCollapsed ? 18 : 14 }}>{app.icon}</span>
+                <span style={{ fontSize: 18 }}>{app.icon ?? DEFAULT_EMOJI}</span>
               ) : (
-                <StatusDot state={app.state} />
+                <>
+                  <span style={{ fontSize: 14 }}>{app.icon ?? DEFAULT_EMOJI}</span>
+                  {app.name}
+                  <StatusDot state={app.state} style={{ marginLeft: 'auto' }} />
+                </>
               )}
-              {!sidebarCollapsed && app.name}
             </AppItem>
           ))}
         </AppList>