feat: Improve UI navigation and logo visibility

- Update navigation labels: 'Navigation' → 'Ponderants', 'Edit Node' → 'Manual', 'Conversation' → 'Convo', 'Galaxy View' → 'Galaxy'
- Improve logo visibility with CSS transform scale(3.5) and higher contrast colors (#E0E0E0, #909296)
- Make logo square (viewBox 60x60) for better favicon display
- Enhance mobile UX with vertical navigation buttons and text labels
- Add 'Profile' label to user menu in navigation
- Improve sidebar highlighting with blue color, bold font, and rounded corners
- Fix layout issues: adjust chat padding for sidebar (260px) and bottom bar (90px)
- Make borders more subtle (#373A40 instead of #dee2e6)
- Increase sidebar width to 260px to accommodate logo and text
- Remove desktop top bar for cleaner layout
- Use IconChartBubbleFilled for galaxy navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/AppLayout.tsx

@@ -26,7 +26,7 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
 
       <AppShell
         navbar={{
-          width: isMobile ? 0 : 200,
+          width: isMobile ? 0 : 260,
           breakpoint: 'sm',
         }}
         padding={isMobile ? 0 : 'md'}
@@ -44,8 +44,8 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
           style={{
             height: '100vh',
             overflow: 'auto',
-            paddingTop: isMobile ? '64px' : '0', // Space for mobile header
-            paddingBottom: isMobile ? '80px' : '0', // Space for mobile bottom bar
+            paddingTop: isMobile ? '72px' : '0', // Space for mobile header
+            paddingBottom: isMobile ? '90px' : '0', // Space for mobile bottom bar
           }}
         >
           {children}

components/Navigation/DesktopSidebar.tsx

@@ -9,7 +9,7 @@
  */
 
 import { Stack, NavLink, Box, Text, Group, Image, Divider } from '@mantine/core';
-import { IconMessageCircle, IconEdit, IconUniverse } from '@tabler/icons-react';
+import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { useAppMachine } from '@/hooks/useAppMachine';
 import { UserMenu } from '@/components/UserMenu';
@@ -46,20 +46,20 @@ export function DesktopSidebar() {
       style={{
         width: '100%',
         height: '100%',
-        borderRight: '1px solid #dee2e6',
+        borderRight: '1px solid #373A40',
         padding: '1rem',
       }}
     >
       <Stack gap="xs">
-        <Group gap="sm" mb="md" align="center">
-          <Image
-            src="/logo.svg"
-            alt="Ponderants logo"
-            w={48}
-            h={48}
-            style={{ flexShrink: 0 }}
-          />
-          <Text fw={700} size="md" c="dimmed">
+        <Group gap="sm" mb="lg" align="center" wrap="nowrap">
+          <Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Image
+              src="/logo.svg"
+              alt="Ponderants logo"
+              style={{ width: '100%', height: '100%', transform: 'scale(3.5)' }}
+            />
+          </Box>
+          <Text fw={700} size="xl" style={{ lineHeight: 1 }}>
             Ponderants
           </Text>
         </Group>
@@ -70,6 +70,13 @@ export function DesktopSidebar() {
           active={isConvo}
           onClick={() => handleNavigation('convo')}
           variant="filled"
+          color="blue"
+          styles={{
+            root: {
+              borderRadius: '8px',
+              fontWeight: isConvo ? 600 : 400,
+            },
+          }}
         />
 
         <NavLink
@@ -78,21 +85,37 @@ export function DesktopSidebar() {
           active={isEdit}
           onClick={() => handleNavigation('edit')}
           variant="filled"
+          color="blue"
+          styles={{
+            root: {
+              borderRadius: '8px',
+              fontWeight: isEdit ? 600 : 400,
+            },
+          }}
         />
 
         <NavLink
           label="Galaxy"
-          leftSection={<IconUniverse size={20} />}
+          leftSection={<IconChartBubbleFilled size={20} />}
           active={isGalaxy}
           onClick={() => handleNavigation('galaxy')}
           variant="filled"
+          color="blue"
+          styles={{
+            root: {
+              borderRadius: '8px',
+              fontWeight: isGalaxy ? 600 : 400,
+            },
+          }}
         />
 
-        <Divider my="md" />
+        <Divider my="md" color="#373A40" />
 
-        <Box style={{ padding: '0.5rem' }}>
-          <UserMenu />
-        </Box>
+        <NavLink
+          label="Profile"
+          leftSection={<Box style={{ width: '40px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><UserMenu /></Box>}
+          variant="filled"
+        />
 
         {/* Development state panel */}
         {process.env.NODE_ENV === 'development' && (

components/Navigation/MobileBottomBar.tsx

@@ -8,16 +8,38 @@
  * Highlights the active mode based on app state machine.
  */
 
-import { Group, Button, Paper, ActionIcon, Box } from '@mantine/core';
-import { IconMessageCircle, IconEdit, IconUniverse, IconUser } from '@tabler/icons-react';
+import { Group, Button, Paper, ActionIcon, Box, Stack, Text } from '@mantine/core';
+import { IconMessageCircle, IconEdit, IconChartBubbleFilled, IconUser } from '@tabler/icons-react';
 import { useSelector } from '@xstate/react';
 import { useAppMachine } from '@/hooks/useAppMachine';
 import { UserMenu } from '@/components/UserMenu';
+import { useState, useEffect } from 'react';
+
+interface UserProfile {
+  did: string;
+  handle: string;
+  displayName: string | null;
+  avatar: string | null;
+}
 
 export function MobileBottomBar() {
   const actor = useAppMachine();
   const state = useSelector(actor, (state) => state);
   const send = actor.send;
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+
+  useEffect(() => {
+    fetch('/api/user/profile')
+      .then((res) => res.json())
+      .then((data) => {
+        if (!data.error) {
+          setProfile(data);
+        }
+      })
+      .catch((error) => {
+        console.error('Failed to fetch profile:', error);
+      });
+  }, []);
 
   const handleNavigation = (target: 'convo' | 'edit' | 'galaxy') => {
     console.log('[Mobile Nav] Navigating to:', target);
@@ -52,42 +74,49 @@ export function MobileBottomBar() {
         left: 0,
         right: 0,
         zIndex: 100,
-        borderTop: '1px solid #dee2e6',
+        borderTop: '1px solid #373A40',
       }}
     >
       <Group justify="space-around" grow>
-        <ActionIcon
-          variant={isConvo ? 'filled' : 'subtle'}
-          color={isConvo ? 'blue' : 'gray'}
-          onClick={() => handleNavigation('convo')}
-          size={48}
-          radius="md"
-        >
-          <IconMessageCircle size={24} />
-        </ActionIcon>
+        <Stack gap={4} align="center" onClick={() => handleNavigation('convo')} style={{ cursor: 'pointer' }}>
+          <ActionIcon
+            variant={isConvo ? 'filled' : 'subtle'}
+            color={isConvo ? 'blue' : 'gray'}
+            size={40}
+            radius="md"
+          >
+            <IconMessageCircle size={20} />
+          </ActionIcon>
+          <Text size="xs" c={isConvo ? 'blue' : 'dimmed'}>Convo</Text>
+        </Stack>
 
-        <ActionIcon
-          variant={isEdit ? 'filled' : 'subtle'}
-          color={isEdit ? 'blue' : 'gray'}
-          onClick={() => handleNavigation('edit')}
-          size={48}
-          radius="md"
-        >
-          <IconEdit size={24} />
-        </ActionIcon>
+        <Stack gap={4} align="center" onClick={() => handleNavigation('edit')} style={{ cursor: 'pointer' }}>
+          <ActionIcon
+            variant={isEdit ? 'filled' : 'subtle'}
+            color={isEdit ? 'blue' : 'gray'}
+            size={40}
+            radius="md"
+          >
+            <IconEdit size={20} />
+          </ActionIcon>
+          <Text size="xs" c={isEdit ? 'blue' : 'dimmed'}>Manual</Text>
+        </Stack>
 
-        <ActionIcon
-          variant={isGalaxy ? 'filled' : 'subtle'}
-          color={isGalaxy ? 'blue' : 'gray'}
-          onClick={() => handleNavigation('galaxy')}
-          size={48}
-          radius="md"
-        >
-          <IconUniverse size={24} />
-        </ActionIcon>
+        <Stack gap={4} align="center" onClick={() => handleNavigation('galaxy')} style={{ cursor: 'pointer' }}>
+          <ActionIcon
+            variant={isGalaxy ? 'filled' : 'subtle'}
+            color={isGalaxy ? 'blue' : 'gray'}
+            size={40}
+            radius="md"
+          >
+            <IconChartBubbleFilled size={20} />
+          </ActionIcon>
+          <Text size="xs" c={isGalaxy ? 'blue' : 'dimmed'}>Galaxy</Text>
+        </Stack>
 
-        <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
           <UserMenu />
+          <Text size="xs" c="dimmed">Profile</Text>
         </Box>
       </Group>
     </Paper>

components/Navigation/MobileHeader.tsx

@@ -6,13 +6,13 @@
  * Fixed header for mobile devices showing the Ponderants logo.
  */
 
-import { Group, Image, Text, Paper } from '@mantine/core';
+import { Group, Image, Text, Paper, Box } from '@mantine/core';
 
 export function MobileHeader() {
   return (
     <Paper
       withBorder
-      p="md"
+      p="sm"
       radius={0}
       style={{
         position: 'fixed',
@@ -20,18 +20,18 @@ export function MobileHeader() {
         left: 0,
         right: 0,
         zIndex: 100,
-        borderBottom: '1px solid #dee2e6',
+        borderBottom: '1px solid #373A40',
       }}
     >
       <Group gap="sm" align="center">
-        <Image
-          src="/logo.svg"
-          alt="Ponderants logo"
-          w={56}
-          h={56}
-          style={{ flexShrink: 0 }}
-        />
-        <Text fw={700} size="xl">
+        <Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <Image
+            src="/logo.svg"
+            alt="Ponderants logo"
+            style={{ width: '100%', height: '100%', transform: 'scale(3.5)' }}
+          />
+        </Box>
+        <Text fw={700} size="lg">
           Ponderants
         </Text>
       </Group>