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>
2025-11-09 16:35:46 +00:00
parent 2b47231e16
commit b51cb1b516
7 changed files with 103 additions and 50 deletions
--- a/app/chat/page.tsx
+++ b/app/chat/page.tsx
@@ -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 || ''}`;
-          }
-          return `${m.role}: ${(m as any).content || ''}`;
-        }).join('\n'),
-      };
+      // 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;
+      }

-      appActor.send({
-        type: 'CREATE_NODE_FROM_CONVERSATION',
-        draft: emptyDraft,
-      });
+      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,
+        });
+
+        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>
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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>
--- a/app/theme.ts
+++ b/app/theme.ts
@@ -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: {