@mostrom/app-shell 0.1.0

package/src/components/section-drawer/section-drawer.tsx

@@ -0,0 +1,467 @@
+import * as React from "react";
+import {
+  Check,
+  ThumbsUp,
+  Paperclip,
+  ListTodo,
+  Maximize2,
+  MoreHorizontal,
+  Plus,
+  ArrowRight,
+  Link as LinkIcon,
+  Pencil,
+} from "lucide-react";
+import {
+  Sheet,
+  SheetContent,
+} from "@/components/ui/sheet";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarGroup,
+} from "@/components/ui/avatar";
+import "./section-drawer.css";
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface SectionDrawerUser {
+  id: string;
+  name: string;
+  avatar?: string;
+}
+
+export interface SectionDrawerActivity {
+  id: string;
+  user: SectionDrawerUser;
+  action: string;
+  timestamp: string;
+}
+
+export interface SectionDrawerProps {
+  /** Whether the drawer is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Drawer title */
+  title: string;
+  /** Whether the item is marked complete */
+  isCompleted?: boolean;
+  /** Which side the drawer opens from */
+  side?: "right" | "left";
+  /** Drawer width */
+  width?: number | string;
+  /** Domain-specific content to render in the main area */
+  children: React.ReactNode;
+  /** Activity items to display */
+  activities?: SectionDrawerActivity[];
+  /** Collaborators to display in footer */
+  collaborators?: SectionDrawerUser[];
+  /** Current user for comment input */
+  currentUser?: SectionDrawerUser;
+  /** Callback when mark complete is toggled */
+  onMarkComplete?: (completed: boolean) => void;
+  /** Callback when title is changed (enables title editing when provided) */
+  onTitleChange?: (title: string) => void;
+  /** Callback when a comment is added */
+  onAddComment?: (comment: string) => void;
+  /** Callback when attachment button is clicked */
+  onAddAttachment?: () => void;
+  /** Callback when leave task is clicked */
+  onLeaveTask?: () => void;
+  /** Callback when copy link is clicked */
+  onCopyLink?: () => void;
+  /** Callback when fullscreen is clicked */
+  onFullScreen?: () => void;
+  /** Whether to show the activity section (default: true) */
+  showActivity?: boolean;
+  /** Whether to show the mark complete button (default: true) */
+  showMarkComplete?: boolean;
+  /** Callback when delete is clicked */
+  onDelete?: () => void;
+  /** Callback when duplicate is clicked */
+  onDuplicate?: () => void;
+  /** Callback when print is clicked */
+  onPrint?: () => void;
+  /** Callback when add collaborator is clicked */
+  onAddCollaborator?: () => void;
+  /** Callback when like/thumbs up is clicked */
+  onLike?: () => void;
+  /** Callback when subtasks header icon is clicked */
+  onSubtasksClick?: () => void;
+  /** Callback when sort order is toggled */
+  onSortToggle?: () => void;
+  /** Current sort order for activities */
+  sortOrder?: "oldest" | "newest";
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function getInitials(name: string): string {
+  return name
+    .split(" ")
+    .map((n) => n[0])
+    .join("")
+    .toUpperCase()
+    .slice(0, 2);
+}
+
+// ============================================================================
+// SectionDrawer Component (Shell)
+// ============================================================================
+
+export function SectionDrawer({
+  open,
+  onOpenChange,
+  title,
+  isCompleted = false,
+  side = "right",
+  width = 500,
+  children,
+  activities = [],
+  collaborators = [],
+  currentUser,
+  onMarkComplete,
+  onTitleChange,
+  onAddComment,
+  onAddAttachment,
+  onLeaveTask,
+  onCopyLink,
+  onFullScreen,
+  showActivity = true,
+  showMarkComplete = true,
+  onDelete,
+  onDuplicate,
+  onPrint,
+  onAddCollaborator,
+  onLike,
+  onSubtasksClick,
+  onSortToggle,
+  sortOrder = "oldest",
+}: SectionDrawerProps) {
+  // Title editing state
+  const [isEditingTitle, setIsEditingTitle] = React.useState(false);
+  const [editedTitle, setEditedTitle] = React.useState(title);
+  const titleInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Comment state
+  const [comment, setComment] = React.useState("");
+
+  React.useEffect(() => {
+    setEditedTitle(title);
+  }, [title]);
+
+  React.useEffect(() => {
+    if (isEditingTitle && titleInputRef.current) {
+      titleInputRef.current.focus();
+      titleInputRef.current.select();
+    }
+  }, [isEditingTitle]);
+
+  const handleTitleDoubleClick = () => {
+    if (onTitleChange) {
+      setIsEditingTitle(true);
+    }
+  };
+
+  const handleTitleBlur = () => {
+    setIsEditingTitle(false);
+    if (editedTitle.trim() && editedTitle !== title) {
+      onTitleChange?.(editedTitle.trim());
+    }
+  };
+
+  const handleTitleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleTitleBlur();
+    } else if (e.key === "Escape") {
+      setIsEditingTitle(false);
+      setEditedTitle(title);
+    }
+  };
+
+  const handleCommentSubmit = () => {
+    if (comment.trim()) {
+      onAddComment?.(comment.trim());
+      setComment("");
+    }
+  };
+
+  const handleCopyLink = () => {
+    if (onCopyLink) {
+      onCopyLink();
+    } else if (typeof navigator !== "undefined" && navigator.clipboard) {
+      void navigator.clipboard.writeText(window.location.href);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side={side}
+        showCloseButton={false}
+        className="section-drawer !max-w-none p-0 flex flex-col gap-0"
+        style={{ width, maxWidth: "100vw" }}
+      >
+        {/* Header */}
+        <div className="section-drawer-header">
+          <div className="section-drawer-header-actions">
+            {showMarkComplete && onMarkComplete && (
+              <Button
+                variant={isCompleted ? "default" : "outline"}
+                size="sm"
+                onClick={() => onMarkComplete(!isCompleted)}
+                className="section-drawer-complete-btn"
+              >
+                <Check className="size-4" />
+                <span>{isCompleted ? "Completed" : "Mark complete"}</span>
+              </Button>
+            )}
+            {!showMarkComplete && <div />}
+
+            <div className="section-drawer-header-icons">
+              <Button variant="ghost" size="icon-sm" title="Like" onClick={onLike}>
+                <ThumbsUp className="size-4" />
+              </Button>
+              {onAddAttachment && (
+                <Button variant="ghost" size="icon-sm" title="Add attachment" onClick={onAddAttachment}>
+                  <Paperclip className="size-4" />
+                </Button>
+              )}
+              <Button variant="ghost" size="icon-sm" title="Subtasks" onClick={onSubtasksClick}>
+                <ListTodo className="size-4" />
+              </Button>
+              <Button variant="ghost" size="icon-sm" title="Copy link" onClick={handleCopyLink}>
+                <LinkIcon className="size-4" />
+              </Button>
+              {onFullScreen && (
+                <Button variant="ghost" size="icon-sm" title="Full screen" onClick={onFullScreen}>
+                  <Maximize2 className="size-4" />
+                </Button>
+              )}
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="ghost" size="icon-sm" title="More actions">
+                    <MoreHorizontal className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {onDuplicate && (
+                    <DropdownMenuItem onClick={onDuplicate}>
+                      Duplicate
+                    </DropdownMenuItem>
+                  )}
+                  {onPrint && (
+                    <DropdownMenuItem onClick={onPrint}>
+                      Print
+                    </DropdownMenuItem>
+                  )}
+                  <DropdownMenuItem onClick={handleCopyLink}>
+                    Copy link
+                  </DropdownMenuItem>
+                  {onDelete && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={onDelete} className="text-destructive">
+                        Delete
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={() => onOpenChange(false)}
+                title="Close"
+              >
+                <ArrowRight className="size-4" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        {/* Main Content - Scrollable */}
+        <div className="section-drawer-content">
+          {/* Title */}
+          <div className="section-drawer-title-section">
+            {isEditingTitle ? (
+              <input
+                ref={titleInputRef}
+                type="text"
+                value={editedTitle}
+                onChange={(e) => setEditedTitle(e.target.value)}
+                onBlur={handleTitleBlur}
+                onKeyDown={handleTitleKeyDown}
+                className="section-drawer-title-input"
+              />
+            ) : (
+              <div className="section-drawer-title-wrapper">
+                <h2
+                  className="section-drawer-title"
+                  onClick={onTitleChange ? handleTitleDoubleClick : undefined}
+                  title={onTitleChange ? "Click to edit" : undefined}
+                  style={{ cursor: onTitleChange ? "text" : "default" }}
+                >
+                  {title}
+                </h2>
+                {onTitleChange && (
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    className="section-drawer-title-edit-btn"
+                    onClick={handleTitleDoubleClick}
+                    title="Edit title"
+                  >
+                    <Pencil className="size-3" />
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Domain-specific content slot */}
+          {children}
+        </div>
+
+        {/* Activity Section - Fixed at bottom */}
+        {showActivity && (
+          <div className="section-drawer-activity">
+            <Separator />
+
+            {/* Tabs */}
+            <Tabs defaultValue="comments" className="section-drawer-tabs">
+              <div className="section-drawer-tabs-header">
+                <TabsList variant="line">
+                  <TabsTrigger value="comments">Comments</TabsTrigger>
+                  <TabsTrigger value="activity">All activity</TabsTrigger>
+                </TabsList>
+                <Button variant="ghost" size="xs" className="section-drawer-sort-btn" onClick={onSortToggle}>
+                  ↕ {sortOrder === "oldest" ? "Oldest" : "Newest"}
+                </Button>
+              </div>
+
+              <TabsContent value="comments" className="section-drawer-tabs-content">
+                <div className="section-drawer-activity-list">
+                  {activities.map((activity) => (
+                    <div key={activity.id} className="section-drawer-activity-item">
+                      <Avatar size="sm">
+                        {activity.user.avatar ? (
+                          <AvatarImage src={activity.user.avatar} alt={activity.user.name} />
+                        ) : null}
+                        <AvatarFallback>{getInitials(activity.user.name)}</AvatarFallback>
+                      </Avatar>
+                      <div className="section-drawer-activity-content">
+                        <span className="font-medium">{activity.user.name}</span>
+                        <span className="text-muted-foreground"> {activity.action}</span>
+                        <span className="text-muted-foreground"> · {activity.timestamp}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </TabsContent>
+
+              <TabsContent value="activity" className="section-drawer-tabs-content">
+                <div className="section-drawer-activity-list">
+                  {activities.map((activity) => (
+                    <div key={activity.id} className="section-drawer-activity-item">
+                      <Avatar size="sm">
+                        {activity.user.avatar ? (
+                          <AvatarImage src={activity.user.avatar} alt={activity.user.name} />
+                        ) : null}
+                        <AvatarFallback>{getInitials(activity.user.name)}</AvatarFallback>
+                      </Avatar>
+                      <div className="section-drawer-activity-content">
+                        <span className="font-medium">{activity.user.name}</span>
+                        <span className="text-muted-foreground"> {activity.action}</span>
+                        <span className="text-muted-foreground"> · {activity.timestamp}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </TabsContent>
+            </Tabs>
+
+            {/* Comment Input */}
+            {onAddComment && (
+              <div className="section-drawer-comment-input">
+                <Avatar size="sm">
+                  {currentUser?.avatar ? (
+                    <AvatarImage src={currentUser.avatar} alt={currentUser.name} />
+                  ) : null}
+                  <AvatarFallback>
+                    {currentUser ? getInitials(currentUser.name) : "?"}
+                  </AvatarFallback>
+                </Avatar>
+                <Textarea
+                  placeholder="Add a comment"
+                  value={comment}
+                  onChange={(e) => setComment(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" && !e.shiftKey) {
+                      e.preventDefault();
+                      handleCommentSubmit();
+                    }
+                  }}
+                  className="section-drawer-comment-textarea"
+                />
+              </div>
+            )}
+
+            {/* Footer */}
+            <div className="section-drawer-footer">
+              <div className="section-drawer-collaborators">
+                <span className="section-drawer-collaborators-label">Collaborators</span>
+                <AvatarGroup>
+                  {collaborators.slice(0, 3).map((collab) => (
+                    <Avatar key={collab.id} size="sm">
+                      {collab.avatar ? (
+                        <AvatarImage src={collab.avatar} alt={collab.name} />
+                      ) : null}
+                      <AvatarFallback>{getInitials(collab.name)}</AvatarFallback>
+                    </Avatar>
+                  ))}
+                </AvatarGroup>
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={onAddCollaborator}
+                  title="Add collaborator"
+                >
+                  <Plus className="size-3" />
+                </Button>
+              </div>
+              {onLeaveTask && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onLeaveTask}
+                  className="section-drawer-leave-btn"
+                >
+                  🔔 Leave task
+                </Button>
+              )}
+            </div>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/components/sectioned-list-board/README.md

@@ -0,0 +1,78 @@
+# Sectioned List Board
+
+Data-driven, reusable kanban-style board with draggable sections and cards.
+
+## Goal
+
+`SectionedListBoard` is **bring your own data only**:
+- Consumers provide `sections`, identity, and mutation handlers.
+- Consumers configure card rendering with `cardConfig`.
+- Consumers do **not** provide card JSX/render functions.
+
+## Usage
+
+```tsx
+import {
+  SectionedListBoard,
+  type BoardSection,
+  type BoardCardConfig,
+  type SortState,
+  type FilterState,
+} from "~/components/shared/sectioned-list-board";
+
+type Deal = {
+  id: string;
+  name: string;
+  assignee: string;
+  dueDate: string;
+  status: "incomplete" | "complete";
+  priority: "High" | "Medium" | "Low";
+};
+
+const cardConfig: BoardCardConfig<Deal> = {
+  titleField: "name",
+  badgeField: {
+    field: "priority",
+    colorMap: { High: "red", Medium: "blue", Low: "green" },
+  },
+  avatarField: { field: "assignee" },
+  dateField: { field: "dueDate", editable: true },
+};
+
+function ExampleBoard({ sections }: { sections: BoardSection<Deal>[] }) {
+  const [sort, setSort] = React.useState<SortState>({ field: null, direction: null });
+  const [filter, setFilter] = React.useState<FilterState>({ field: null, value: null });
+
+  return (
+    <SectionedListBoard
+      sections={sections}
+      getItemId={(item) => item.id}
+      cardConfig={cardConfig}
+      isItemCompleted={(item) => item.status === "complete"}
+      onItemFieldChange={(sectionId, itemId, field, value) => {
+        // Persist field updates (e.g. dueDate changes)
+      }}
+      onItemTitleEdit={(sectionId, itemId, title) => {
+        // Persist title updates
+      }}
+      sort={sort}
+      filter={filter}
+      onSortChange={setSort}
+      onFilterChange={setFilter}
+    />
+  );
+}
+```
+
+## Card Config
+
+- `titleField`: Primary card text.
+- `badgeField`: Optional badge from a data field, with optional color mapping.
+- `avatarField`: Optional initials avatar from a data field.
+- `dateField`: Optional date field; if `editable: true`, date picker is enabled.
+
+## Notes
+
+- Dragging cards is disabled when sort or filter is active.
+- Inline title editing uses `onItemTitleEdit`.
+- Date edits use `onItemFieldChange`.