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>
This commit is contained in:
2025-11-09 15:00:52 +00:00
parent 0ed2d6c0b3
commit 032f6bc4be
6 changed files with 125 additions and 121 deletions

View File

@@ -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' && (