@hydralms/components 0.1.3 → 0.3.0

package/src/sections/AnnouncementFeed/AnnouncementFeed.tsx

@@ -1,26 +1,15 @@
 import { useMemo, useState } from "react";
-import { Pin } from "lucide-react";
+import { AlertCircle, Pin } from "lucide-react";
 import { UserAvatar } from "../../social";
 import { EmptyState } from "../../common";
+import { Skeleton } from "../../ui/skeleton";
 import { Badge } from "../../ui/badge";
 import { Button } from "../../ui/button";
 import { Card, CardContent } from "../../ui/card";
 import type { AnnouncementFeedProps } from "./types";
 import { cn } from "../../lib/utils";
-
-function formatTimestamp(iso: string): string {
-  const date = new Date(iso);
-  const now = new Date();
-  const diffMs = now.getTime() - date.getTime();
-  const diffMins = Math.floor(diffMs / 60000);
-  if (diffMins < 1) return "Just now";
-  if (diffMins < 60) return `${diffMins}m ago`;
-  const diffHours = Math.floor(diffMins / 60);
-  if (diffHours < 24) return `${diffHours}h ago`;
-  const diffDays = Math.floor(diffHours / 24);
-  if (diffDays < 7) return `${diffDays}d ago`;
-  return date.toLocaleDateString();
-}
+import { formatTimestamp } from "../../utils/format-timestamp";
+import { Pagination } from "../../common/pagination";
 
 export function AnnouncementFeed({
   announcements,
@@ -30,6 +19,13 @@ export function AnnouncementFeed({
   previewLines = 3,
   emptyMessage = "No announcements yet",
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
+  pageSize,
+  currentPage = 1,
+  totalItems,
+  onPageChange,
   className,
   style,
 }: AnnouncementFeedProps) {
@@ -54,6 +50,42 @@ export function AnnouncementFeed({
     }
   }
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        {Array.from({ length: 3 }).map((_, i) => (
+          <div key={i} className="flex gap-3 items-start">
+            <Skeleton className="h-10 w-10 rounded-full shrink-0" />
+            <div className="flex-1 space-y-2">
+              <Skeleton className="h-5 w-48" />
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-full" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("py-12", className)} style={style}>
+        <EmptyState
+          icon={<AlertCircle className="size-10 text-destructive" />}
+          title="Something went wrong"
+          description={error}
+          action={
+            onRetry ? (
+              <Button variant="outline" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
   if (sorted.length === 0) {
     return (
       <div className={className} style={style}>
@@ -64,7 +96,10 @@ export function AnnouncementFeed({
 
   return (
     <div className={cn("flex flex-col gap-2", className)} style={style}>
-      {sorted.map((a) => {
+      {(onPageChange && pageSize
+        ? sorted.slice((currentPage - 1) * pageSize, currentPage * pageSize)
+        : sorted
+      ).map((a) => {
         const isExpanded = expandedUids.has(a.uid);
 
         return (
@@ -77,7 +112,7 @@ export function AnnouncementFeed({
             )}
             onClick={() => onSelect && !readOnly ? onSelect(a) : toggleExpand(a.uid)}
           >
-            <CardContent className="pt-4 pb-4">
+            <CardContent className="py-4">
               <div className="flex gap-1.5 items-start">
                 {showAvatars && (
                   <UserAvatar
@@ -104,9 +139,9 @@ export function AnnouncementFeed({
                   <span className="block text-xs text-muted-foreground mb-1">
                     {a.author.displayName} · {formatTimestamp(a.createdAt)}
                   </span>
-                  <span
+                  <div
                     className={cn(
-                      "text-sm text-foreground",
+                      "text-sm text-foreground [&_p]:mb-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5",
                       !isExpanded && "line-clamp-(--preview-lines) overflow-hidden",
                     )}
                     style={
@@ -114,10 +149,9 @@ export function AnnouncementFeed({
                         ? { "--preview-lines": previewLines } as React.CSSProperties
                         : undefined
                     }
-                  >
-                    {a.content}
-                  </span>
-                  {!isExpanded && a.content.length > 200 && (
+                    dangerouslySetInnerHTML={{ __html: a.content }}
+                  />
+                  {!isExpanded && a.content.replace(/<[^>]*>/g, "").length > 200 && (
                     <Button
                       variant="link"
                       size="xs"
@@ -136,6 +170,15 @@ export function AnnouncementFeed({
           </Card>
         );
       })}
+
+      {onPageChange && pageSize && sorted.length > 0 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.ceil((totalItems ?? sorted.length) / pageSize)}
+          onPageChange={onPageChange}
+          className="mt-4"
+        />
+      )}
     </div>
   );
 }

package/src/sections/AnnouncementFeed/types.ts

@@ -26,6 +26,20 @@ export interface AnnouncementFeedProps {
   emptyMessage?: string;
   /** When true, disables interactions */
   readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
+  /** Number of items per page (enables pagination when set with onPageChange) */
+  pageSize?: number;
+  /** Current page (1-indexed) */
+  currentPage?: number;
+  /** Total number of items (for server-side pagination) */
+  totalItems?: number;
+  /** Called when the user navigates to a different page */
+  onPageChange?: (page: number) => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */
@@ -37,7 +51,7 @@ export interface Announcement {
   uid: string;
   /** Announcement title */
   title: string;
-  /** Announcement body content */
+  /** Announcement body content. May contain HTML from a rich-text editor. */
   content: string;
   /** Author information */
   author: { displayName: string; avatarUrl?: string; role?: string };

package/src/sections/AssessmentReview/AssessmentReview.tsx

@@ -1,8 +1,13 @@
+import { useMemo } from "react";
+import { AlertCircle } from "lucide-react";
 import { QuestionRenderer } from "../../questions";
 import type { QuestionData, SessionAnswer } from "../../questions/types";
 import { Badge } from "../../ui/badge";
 import { Card, CardContent } from "../../ui/card";
 import { Separator } from "../../ui/separator";
+import { Skeleton } from "../../ui/skeleton";
+import { Button } from "../../ui/button";
+import { EmptyState } from "../../common/empty-state";
 import { cn } from "../../lib/utils";
 import type {
   AssessmentReviewProps,
@@ -25,7 +30,7 @@ function ScoreHeader({
     <Card className="mb-3">
       <CardContent className="pt-6">
         <div className="flex flex-wrap items-center gap-2">
-          <div>
+          <div className="flex items-baseline gap-2">
             <span className="text-2xl font-bold leading-none text-foreground">{pct}%</span>
             <span className="text-sm text-muted-foreground">
               {score.correct} of {score.total} correct
@@ -56,6 +61,16 @@ function QuestionList({
   sessionAnswers: SessionAnswer[];
   showCorrectAnswers: boolean;
 }) {
+  const answersByQuestion = useMemo(() => {
+    const map = new Map<string, SessionAnswer[]>();
+    for (const a of sessionAnswers) {
+      const list = map.get(a.uid);
+      if (list) list.push(a);
+      else map.set(a.uid, [a]);
+    }
+    return map;
+  }, [sessionAnswers]);
+
   return (
     <div className="flex flex-col gap-3">
       {questions.map((question, idx) => (
@@ -69,7 +84,7 @@ function QuestionList({
           <CardContent className="pt-4 pb-4">
             <QuestionRenderer
               question={question}
-              sessionAnswers={sessionAnswers.filter((a) => a.uid === question.uid)}
+              sessionAnswers={answersByQuestion.get(question.uid) ?? []}
               readOnly
               showCorrectAnswers={showCorrectAnswers}
             />
@@ -129,9 +144,42 @@ export function AssessmentReview({
   score,
   questionGroups,
   showCorrectAnswers = true,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: AssessmentReviewProps) {
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-16 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-24 w-full" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("py-12", className)} style={style}>
+        <EmptyState
+          icon={<AlertCircle className="size-10 text-destructive" />}
+          title="Something went wrong"
+          description={error}
+          action={
+            onRetry ? (
+              <Button variant="outline" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
   return (
     <div className={cn(className)} style={style}>
       {score && <ScoreHeader score={score} />}

package/src/sections/AssessmentReview/types.ts

@@ -34,6 +34,12 @@ export interface AssessmentReviewProps {
    * @default true
    */
   showCorrectAnswers?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */

package/src/sections/AssignmentSubmission/AssignmentSubmission.tsx

@@ -1,14 +1,17 @@
 import { useState } from "react";
-import { Send, Save } from "lucide-react";
+import { Send, Save, AlertCircle } from "lucide-react";
 import { StatusBadge, DueDateDisplay } from "../../common";
 import { FileUploadZone } from "../../content";
 import { Button } from "../../ui/button";
-import { Textarea } from "../../ui/textarea";
+import { RichTextEditor } from "../../ui/rich-text-editor";
 import { Input } from "../../ui/input";
 import { Separator } from "../../ui/separator";
 import { Card, CardContent } from "../../ui/card";
 import { Alert, AlertDescription } from "../../ui/alert";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../ui/tabs";
+import { Skeleton } from "../../ui/skeleton";
+import { EmptyState } from "../../common/empty-state";
+import { cn } from "../../lib/utils";
 import type { AssignmentSubmissionProps, SubmissionData } from "./types";
 
 export function AssignmentSubmission({
@@ -25,6 +28,9 @@ export function AssignmentSubmission({
   grade,
   isSubmitting = false,
   readOnly = false,
+  isLoading,
+  error,
+  onRetry,
   className,
   style,
 }: AssignmentSubmissionProps) {
@@ -33,6 +39,36 @@ export function AssignmentSubmission({
   const [url, setUrl] = useState(existingSubmission?.url ?? "");
   const [activeTab, setActiveTab] = useState<"text" | "file" | "url">(submissionTypes[0]);
 
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} style={style}>
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-6 w-20" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-10 w-32" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={cn("py-12", className)} style={style}>
+        <EmptyState
+          icon={<AlertCircle className="size-10 text-destructive" />}
+          title="Something went wrong"
+          description={error}
+          action={
+            onRetry ? (
+              <Button variant="outline" onClick={onRetry}>
+                Retry
+              </Button>
+            ) : undefined
+          }
+        />
+      </div>
+    );
+  }
+
   const isEditable = !readOnly && !["submitted", "graded"].includes(status);
 
   function getSubmissionData(): SubmissionData {
@@ -99,11 +135,12 @@ export function AssignmentSubmission({
               </TabsList>
               {submissionTypes.includes("text") && (
                 <TabsContent value="text">
-                  <Textarea
+                  <RichTextEditor
                     className="min-h-45"
                     placeholder="Type your submission..."
                     value={textContent}
-                    onChange={(e) => setTextContent(e.target.value)}
+                    onChange={(html) => setTextContent(html)}
+                    variant="default"
                   />
                 </TabsContent>
               )}
@@ -132,11 +169,12 @@ export function AssignmentSubmission({
           ) : (
             <>
               {submissionTypes.includes("text") && (
-                <Textarea
+                <RichTextEditor
                   className="min-h-45 mb-2"
                   placeholder="Type your submission..."
                   value={textContent}
-                  onChange={(e) => setTextContent(e.target.value)}
+                  onChange={(html) => setTextContent(html)}
+                  variant="default"
                 />
               )}
               {submissionTypes.includes("file") && (

package/src/sections/AssignmentSubmission/types.ts

@@ -44,6 +44,12 @@ export interface AssignmentSubmissionProps {
   isSubmitting?: boolean;
   /** When true, disables all interactions */
   readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
   /** CSS class name for the root element */
   className?: string;
   /** Inline styles for the root element */