Fix: Settings bar

frontend/components/ui-header/app-header.tsx

@@ -16,20 +16,20 @@ export default function AppHeader() {
     const [isOpen, setIsOpen] = useState<boolean>(false);
 
     return (
-        <header className="flex justify-between items-center p-2 border-b h-16">
+        <header className="flex justify-between items-center p-2 border-b h-25">
             {/* logo */}
             <div className="flex items-center">
                 <Image
                     src="/mint-logo.png"
                     alt="Logo"
                     width={56}
-                    height={56}
-                    className="h-14"
+                    height={50}
+                    className="h-14 w-auto object-contain pt-2 ml-2"
                 />
             </div>
 
             {/* update, issues */}
-            <div className="flex items-center space-x-4">
+            <div className="flex h-full items-center pt-2 space-x-4">
                 <Button
                     variant="link"
                     className="flex items-center space-x-1 px-3 py-2"

frontend/components/ui-header/settings-bar.tsx

@@ -21,25 +21,31 @@ export default function SettingsBar() {
     const [leftTimerSeconds, setLeftTimerSeconds] = useState(0);
     const intervalRef = useRef<NodeJS.Timeout | null>(null);
     const [isResetDialogOpen, setIsResetDialogOpen] = useState(false);
-    const [sessionId, setSessionId] = useState<string | null>(null);
+    const [sessionId, setSessionId] = useState<number | null>(null);
 
     useEffect(() => {
-        async function fetchSessions() {
+        async function fetchOrCreateSession() {
             try {
                 const res = await fetch('/api/sessions');
                 const sessions = await res.json();
 
-                console.log('sessions response:', sessions);
-
                 if (sessions.length > 0) {
                     setSessionId(sessions[0].id);
+                } else {
+                    const created = await fetch('/api/sessions', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify('New Session'),
+                    });
+                    const session = await created.json();
+                    setSessionId(session.id);
                 }
             } catch (err) {
-                console.error('Failed to fetch sessions', err);
+                console.error('Failed to fetch or create session', err);
             }
         }
-    
-        fetchSessions();
+
+        fetchOrCreateSession();
     }, []);
 
     // useEffect(() => {
@@ -106,15 +112,13 @@ export default function SettingsBar() {
 
     return (
         <div className="flex justify-between items-center p-4 bg-white border-b">
-            {/* System Control Panel, Filters, Settings */}
+            {/* Session ID, Tutorial */}
             <Menubar>
+                <span className="px-3 py-1 text-sm">
+                    Session {sessionId ?? 'ID'}
+                </span>
                 <MenubarMenu>
-                    <MenubarTrigger>
-                        Session {sessionId ? sessionId.slice(0, 8) : 'ID'}
-                    </MenubarTrigger>
-                </MenubarMenu>
-                <MenubarMenu>
-                    <MenubarTrigger>Tutorials</MenubarTrigger>
+                    <MenubarTrigger className="hover:cursor-pointer hover:underline">Tutorials</MenubarTrigger>
                 </MenubarMenu>
             </Menubar>