wip: Font and logo fixes in progress

- Reverted logo SVG to original viewBox
- Applied forum.variable to body for CSS variable
- Updated Save button to generate draft from conversation
- Logo size and font variables still need fixes

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-09 16:35:46 +00:00
parent 2b47231e16
commit b51cb1b516
7 changed files with 103 additions and 50 deletions

View File

@@ -128,7 +128,7 @@ export default function ChatPage() {
};
// Handler for Manual/Save button
const handleManualOrSave = () => {
const handleManualOrSave = async () => {
if (hasPendingDraft && pendingNodeDraft) {
// If we have a draft, navigate to edit with it
appActor.send({
@@ -136,22 +136,53 @@ export default function ChatPage() {
draft: pendingNodeDraft,
});
} else {
// Create an empty draft for manual entry
const emptyDraft = {
title: '',
content: '',
conversationContext: messages.map((m) => {
if ('parts' in m && Array.isArray((m as any).parts)) {
return `${m.role}: ${(m as any).parts.find((p: any) => p.type === 'text')?.text || ''}`;
// Generate a draft from the conversation
if (messages.length === 0) {
notifications.show({
title: 'No conversation',
message: 'Start a conversation before creating a node',
color: 'red',
});
return;
}
return `${m.role}: ${(m as any).content || ''}`;
}).join('\n'),
};
setIsCreatingNode(true);
try {
const response = await fetch('/api/generate-node-draft', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
credentials: 'include',
body: JSON.stringify({ messages }),
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to generate node draft');
}
const { draft } = await response.json();
appActor.send({
type: 'CREATE_NODE_FROM_CONVERSATION',
draft: emptyDraft,
draft,
});
notifications.show({
title: 'Node draft created',
message: 'Review and edit your node before publishing',
color: 'green',
});
} catch (error) {
console.error('[Create Node] Error:', error);
notifications.show({
title: 'Error',
message: error instanceof Error ? error.message : 'Failed to create node draft',
color: 'red',
});
} finally {
setIsCreatingNode(false);
}
}
};
@@ -416,6 +447,8 @@ export default function ChatPage() {
variant={hasPendingDraft ? 'filled' : 'light'}
color={hasPendingDraft ? 'blue' : 'gray'}
leftSection={<IconDeviceFloppy size={20} />}
loading={isCreatingNode}
disabled={isCreatingNode}
>
{hasPendingDraft ? 'Save Draft' : 'Save'}
</Button>

View File

@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Forum } from "next/font/google";
import "./globals.css";
import { MantineProvider, ColorSchemeScript } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
@@ -7,7 +7,12 @@ import "@mantine/notifications/styles.css";
import { theme } from "./theme";
import { AppLayout } from "@/components/AppLayout";
const inter = Inter({ subsets: ["latin"] });
// Forum for headings/titles
const forum = Forum({
weight: '400',
subsets: ["latin"],
variable: '--font-forum',
});
export const metadata: Metadata = {
title: "Ponderants",
@@ -28,8 +33,12 @@ export default function RootLayout({
<head>
{/* Enforce dark scheme as per our theme */}
<ColorSchemeScript defaultColorScheme="dark" />
{/* Load Zalando Sans from Google Fonts */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Zalando+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body className={inter.className} suppressHydrationWarning>
<body className={forum.variable} suppressHydrationWarning>
<MantineProvider theme={theme} defaultColorScheme="dark">
<Notifications />
<AppLayout>{children}</AppLayout>

View File

@@ -24,7 +24,12 @@ export const theme = createTheme({
},
// Set default dark mode and grayscale for the "minimalist" look
defaultRadius: 'md',
fontFamily: 'Inter, sans-serif',
// Body text font (Zalando Sans from Google Fonts via link tag)
fontFamily: '"Zalando Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
// Headings font (Forum from Google Fonts via next/font)
headings: {
fontFamily: 'var(--font-forum), serif',
},
// Set default component props for a consistent look
components: {

View File

@@ -8,7 +8,7 @@
* Highlights the active mode based on app state machine.
*/
import { Stack, NavLink, Box, Text, Group, Image, Divider } from '@mantine/core';
import { Stack, NavLink, Box, Title, Group, Divider, Text } from '@mantine/core';
import { IconMessageCircle, IconEdit, IconChartBubbleFilled } from '@tabler/icons-react';
import { useSelector } from '@xstate/react';
import { useAppMachine } from '@/hooks/useAppMachine';
@@ -51,17 +51,17 @@ export function DesktopSidebar() {
}}
>
<Stack gap="xs">
<Group gap="sm" mb="lg" align="center" wrap="nowrap">
<Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Image
<Group gap="md" mb="lg" align="center" wrap="nowrap">
<img
src="/logo.svg"
alt="Ponderants logo"
style={{ width: '100%', height: '100%', transform: 'scale(1.5)' }}
width={48}
height={48}
style={{ flexShrink: 0, display: 'block' }}
/>
</Box>
<Text fw={700} size="xl" style={{ lineHeight: 1 }}>
<Title order={3} style={{ margin: 0 }}>
Ponderants
</Text>
</Title>
</Group>
<NavLink

View File

@@ -6,7 +6,7 @@
* Fixed header for mobile devices showing the Ponderants logo.
*/
import { Group, Image, Text, Paper, Box } from '@mantine/core';
import { Group, Title, Paper } from '@mantine/core';
export function MobileHeader() {
return (
@@ -23,17 +23,17 @@ export function MobileHeader() {
borderBottom: '1px solid #373A40',
}}
>
<Group gap="sm" align="center">
<Box w={32} h={32} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<Image
<Group gap="md" align="center" wrap="nowrap">
<img
src="/logo.svg"
alt="Ponderants logo"
style={{ width: '100%', height: '100%', transform: 'scale(1.5)' }}
width={48}
height={48}
style={{ flexShrink: 0, display: 'block' }}
/>
</Box>
<Text fw={700} size="lg">
<Title order={3} style={{ margin: 0 }}>
Ponderants
</Text>
</Title>
</Group>
</Paper>
);

View File

@@ -83,15 +83,19 @@ async function applySchema() {
if (result) {
console.log(`[Schema] Executed ${result.length} queries`);
// Log any errors
// Log any errors (if results have status property)
if (Array.isArray(result)) {
result.forEach((r, i) => {
if (r && typeof r === 'object') {
if (r.status === 'ERR') {
console.error(`[Schema] Error in query ${i + 1}:`, r.result);
} else {
} else if (r.status === 'OK') {
console.log(`[Schema] ✓ Query ${i + 1} succeeded`);
}
}
});
}
}
console.log('[Schema] ✓ Schema applied successfully!');
} catch (error) {

View File

@@ -10,3 +10,5 @@ Upcoming items that should be implemented (time-permitting):
maybe four simple shapes max)
- let's have, in the top-center, something that indicates we're in "Convo" mode
- let's stream the AI output to deepgram for faster synthesis
- we should link bluesky posts back to ponderants
- long posts should be broken up into threads