Fix annotation types and author utils

client/src/components/annotation/AnnotationSystem.tsx

@@ -47,7 +47,7 @@ export function AnnotationSystem({
 
 	// Mock user data - in a real app this would come from auth
 	const currentUser = {
-		id: 1,
+		id: "1",
 		name: "Anonymous",
 		avatar: null,
 	};
@@ -72,13 +72,13 @@ export function AnnotationSystem({
 						name: "Literary Scholar",
 						avatar: undefined,
 					},
-					likes: 5,
-					liked: false,
 					content:
 						"This line demonstrates the poet's use of alliteration, creating a rhythmic pattern that emphasizes the emotional tone.",
 					type: "analysis",
 					isOfficial: false,
 					createdAt: new Date(Date.now() - 1000000).toISOString(),
+					likes: 5,
+					liked: false,
 				},
 				{
 					id: "2",
@@ -90,13 +90,13 @@ export function AnnotationSystem({
 						name: "Translator",
 						avatar: undefined,
 					},
-					likes: 3,
-					liked: false,
 					content:
 						"The original meaning in Russian contains a wordplay that is difficult to capture in English. A more literal translation might read as...",
 					type: "translation",
 					isOfficial: false,
 					createdAt: new Date(Date.now() - 5000000).toISOString(),
+					likes: 3,
+					liked: false,
 				},
 			];
 

client/src/components/annotation/annotation-browser.tsx

@@ -27,16 +27,16 @@ export function AnnotationBrowser({
 					<CardHeader className="flex flex-row items-center gap-3 p-4">
 						<Avatar>
 							<AvatarImage
-								src={annotation.userAvatar || ""}
+								src={annotation.user.avatar || ""}
-								alt={annotation.userName}
+								alt={annotation.user.name}
 							/>
 							<AvatarFallback>
-								{annotation.userName.charAt(0).toUpperCase()}
+								{annotation.user.name.charAt(0).toUpperCase()}
 							</AvatarFallback>
 						</Avatar>
 						<div>
 							<Heading level="h4" className="mb-1">
-								{annotation.userName}
+								{annotation.user.name}
 							</Heading>
 							<Paragraph size="xs" variant="muted">
 								{new Date(annotation.createdAt).toLocaleString()}

client/src/components/authors/types.ts

@@ -101,12 +101,12 @@ export interface AuthorDisplayUtils {
   /**
    * Format numbers for display
    */
-  formatNumber: (num: number, format?: 'numbers' | 'abbreviated' | 'full') => string;
+  formatNumber: (num: number | undefined, format?: 'numbers' | 'abbreviated' | 'full') => string;
 
   /**
    * Format rating for display
    */
-  formatRating: (rating: number) => string;
+  formatRating: (rating: number | undefined) => string;
 }
 
 // Timeline event for author pages

client/src/components/authors/utils.ts

@@ -33,7 +33,8 @@ export const authorUtils: AuthorDisplayUtils = {
   /**
    * Format numbers for display
    */
-  formatNumber: (num: number, format: 'numbers' | 'abbreviated' | 'full' = 'full'): string => {
+  formatNumber: (num: number | undefined, format: 'numbers' | 'abbreviated' | 'full' = 'numbers'): string => {
+    if (num === undefined) return '';
     if (format === 'abbreviated') {
       if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
       if (num >= 1000) return `${(num / 1000).toFixed(1)}K`;
@@ -48,7 +49,8 @@ export const authorUtils: AuthorDisplayUtils = {
   /**
    * Format rating for display
    */
-  formatRating: (rating: number): string => {
+  formatRating: (rating: number | undefined): string => {
+    if (rating === undefined) return '';
     return rating.toFixed(1);
   },
 

client/src/components/reading/AnnotationSystem.tsx

@@ -1,12 +1,3 @@
-import {
-	Edit,
-	MessageCircle,
-	MessageSquare,
-	ThumbsUp,
-	Trash,
-	X,
-} from "lucide-react";
-import { useEffect, useRef, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -19,6 +10,15 @@ import {
 import { Textarea } from "@/components/ui/textarea";
 import { useToast } from "@/hooks/use-toast";
 import type { AnnotationWithUser } from "@shared/schema";
+import {
+	Edit,
+	MessageCircle,
+	MessageSquare,
+	ThumbsUp,
+	Trash,
+	X,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
 interface AnnotationSystemProps {
 	workId: string;
@@ -47,7 +47,7 @@ export function AnnotationSystem({
 
 	// Mock user data - in a real app this would come from auth
 	const currentUser = {
-		id: 1,
+		id: "1",
 		name: "Anonymous",
 		avatar: null,
 	};
@@ -72,13 +72,13 @@ export function AnnotationSystem({
 						name: "Literary Scholar",
 						avatar: undefined,
 					},
+					likes: 5,
+					liked: false,
 					content:
 						"This line demonstrates the poet's use of alliteration, creating a rhythmic pattern that emphasizes the emotional tone.",
 					type: "analysis",
 					isOfficial: false,
 					createdAt: new Date(Date.now() - 1000000).toISOString(),
-					likes: 5,
-					liked: false,
 				},
 				{
 					id: "2",
@@ -90,13 +90,13 @@ export function AnnotationSystem({
 						name: "Translator",
 						avatar: undefined,
 					},
+					likes: 3,
+					liked: false,
 					content:
 						"The original meaning in Russian contains a wordplay that is difficult to capture in English. A more literal translation might read as...",
 					type: "translation",
 					isOfficial: false,
 					createdAt: new Date(Date.now() - 5000000).toISOString(),
-					likes: 3,
-					liked: false,
 				},
 			];