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/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>