deepspace 0.7.0 → 0.8.1

package/features/items/src/ItemsPage.tsx

@@ -8,17 +8,25 @@
  * - Role-based UI elements
  */
 
-import { useState, useMemo } from 'react'
-import { useUser } from 'deepspace'
-import { useQuery } from 'deepspace'
-import { useMutations } from 'deepspace'
-import { Button, Modal, EmptyState, Badge } from '@/components/ui'
-import { ROLES, type Role } from 'deepspace'
-import { ITEM_STATUS } from '../components/items/items-constants'
-
-// ============================================================================
-// Types
-// ============================================================================
+import { useMemo, useState } from 'react'
+import { Archive, ArchiveRestore, Inbox, Plus, Trash2 } from 'lucide-react'
+import { ROLES, useMutations, useQuery, useUser, type Role } from 'deepspace'
+import {
+  Badge,
+  Button,
+  ConfirmModal,
+  EmptyState,
+  Input,
+  Label,
+  Modal,
+  Textarea,
+  useToast,
+} from '@/components/ui'
+
+const ITEM_STATUS = {
+  ACTIVE: 'active',
+  ARCHIVED: 'archived',
+} as const
 
 interface Item {
   title: string
@@ -27,134 +35,157 @@ interface Item {
   ownerId: string
 }
 
+type ItemRecord = {
+  recordId: string
+  data: Item
+  createdAt: string
+}
+
 interface ItemsPageProps {
   className?: string
 }
 
-// ============================================================================
-// Create Item Modal
-// ============================================================================
-
 interface CreateItemModalProps {
   isOpen: boolean
   onClose: () => void
-  onCreate: (title: string, description: string) => void
+  onCreate: (title: string, description: string) => Promise<boolean>
 }
 
 function CreateItemModal({ isOpen, onClose, onCreate }: CreateItemModalProps) {
   const [title, setTitle] = useState('')
   const [description, setDescription] = useState('')
+  const [creating, setCreating] = useState(false)
 
-  const handleSubmit = () => {
-    if (title.trim()) {
-      onCreate(title.trim(), description.trim())
+  const handleSubmit = async () => {
+    const nextTitle = title.trim()
+    if (!nextTitle || creating) return
+
+    setCreating(true)
+    try {
+      const created = await onCreate(nextTitle, description.trim())
+      if (!created) return
       setTitle('')
       setDescription('')
       onClose()
+    } finally {
+      setCreating(false)
     }
   }
 
   return (
-    <Modal open={isOpen} onClose={onClose} size="sm">
-      <Modal.Header onClose={onClose}>
+    <Modal open={isOpen} onClose={creating ? () => undefined : onClose} size="sm">
+      <Modal.Header>
         <Modal.Title>Create Item</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div className="space-y-4">
           <div>
-            <label className="block text-sm font-medium text-muted-foreground mb-2">Title</label>
-            <input
+            <Label htmlFor="item-title" className="mb-2 block">
+              Title
+            </Label>
+            <Input
+              id="item-title"
               type="text"
               value={title}
-              onChange={(e) => setTitle(e.target.value)}
+              onChange={(event) => setTitle(event.target.value)}
               placeholder="Enter item title"
-              className="w-full px-3 py-2 bg-transparent border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-ring"
               autoFocus
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-muted-foreground mb-2">Description</label>
-            <textarea
+            <Label htmlFor="item-description" className="mb-2 block">
+              Description
+            </Label>
+            <Textarea
+              id="item-description"
               value={description}
-              onChange={(e) => setDescription(e.target.value)}
+              onChange={(event) => setDescription(event.target.value)}
               placeholder="Enter description (optional)"
               rows={3}
-              className="w-full px-3 py-2 bg-transparent border border-border rounded-lg text-foreground placeholder-muted-foreground focus:outline-none focus:ring-ring resize-none"
+              className="resize-none"
             />
           </div>
         </div>
       </Modal.Body>
       <Modal.Footer>
-        <Button variant="secondary" onClick={onClose}>Cancel</Button>
-        <Button onClick={handleSubmit} disabled={!title.trim()}>Create</Button>
+        <Button variant="secondary" onClick={onClose} disabled={creating}>
+          Cancel
+        </Button>
+        <Button onClick={() => void handleSubmit()} disabled={!title.trim()} loading={creating}>
+          Create
+        </Button>
       </Modal.Footer>
     </Modal>
   )
 }
 
-// ============================================================================
-// Item Card Component
-// ============================================================================
-
 interface ItemCardProps {
-  item: { recordId: string; data: Item; createdAt: string }
+  item: ItemRecord
   isOwner: boolean
+  isToggling?: boolean
   onToggleStatus: () => void
   onDelete: () => void
 }
 
-function ItemCard({ item, isOwner, onToggleStatus, onDelete }: ItemCardProps) {
+function ItemCard({ item, isOwner, isToggling = false, onToggleStatus, onDelete }: ItemCardProps) {
   const isArchived = item.data.status === ITEM_STATUS.ARCHIVED
+  const statusAction = isArchived ? 'Restore' : 'Archive'
 
   return (
-    <div className={`p-4 bg-card/60 rounded-xl border ${isArchived ? 'border-border/30 opacity-60' : 'border-border'}`}>
+    <div
+      className={`rounded-xl border bg-card/60 p-4 ${
+        isArchived ? 'border-border/30 opacity-60' : 'border-border'
+      }`}
+    >
       <div className="flex items-start justify-between gap-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <h3 className={`font-medium ${isArchived ? 'text-muted-foreground line-through' : 'text-foreground'}`}>
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex items-center gap-2">
+            <h3
+              className={`font-medium ${
+                isArchived ? 'text-muted-foreground line-through' : 'text-foreground'
+              }`}
+            >
               {item.data.title}
             </h3>
-            <Badge
-              variant={isArchived ? 'secondary' : 'success'}
-              size="sm"
-            >
+            <Badge variant={isArchived ? 'secondary' : 'success'} size="sm">
               {isArchived ? 'Archived' : 'Active'}
             </Badge>
           </div>
           {item.data.description && (
-            <p className="text-sm text-muted-foreground line-clamp-2">{item.data.description}</p>
+            <p className="line-clamp-2 text-sm text-muted-foreground">{item.data.description}</p>
           )}
-          <p className="text-xs text-muted-foreground mt-2">
+          <p className="mt-2 text-xs text-muted-foreground">
             {new Date(item.createdAt).toLocaleDateString()}
           </p>
         </div>
 
         {isOwner && (
           <div className="flex items-center gap-1">
-            <button
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 text-muted-foreground"
               onClick={onToggleStatus}
-              className="p-2 text-muted-foreground hover:text-foreground hover:bg-muted/60 rounded-lg transition-colors"
-              title={isArchived ? 'Restore' : 'Archive'}
+              aria-label={`${statusAction} ${item.data.title}`}
+              loading={isToggling}
             >
-              {isArchived ? (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-                </svg>
-              ) : (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
-                </svg>
-              )}
-            </button>
-            <button
+              {!isToggling &&
+                (isArchived ? (
+                  <ArchiveRestore aria-hidden="true" />
+                ) : (
+                  <Archive aria-hidden="true" />
+                ))}
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8 text-muted-foreground hover:bg-destructive/20 hover:text-destructive"
               onClick={onDelete}
-              className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/20 rounded-lg transition-colors"
-              title="Delete"
+              disabled={isToggling}
+              aria-label={`Delete ${item.data.title}`}
             >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-              </svg>
-            </button>
+              <Trash2 aria-hidden="true" />
+            </Button>
           </div>
         )}
       </div>
@@ -162,91 +193,120 @@ function ItemCard({ item, isOwner, onToggleStatus, onDelete }: ItemCardProps) {
   )
 }
 
-// ============================================================================
-// Main Page
-// ============================================================================
-
 export default function ItemsPage({ className }: ItemsPageProps) {
   const { user } = useUser()
   const userRole = (user?.role ?? ROLES.VIEWER) as Role
   const canCreate = userRole === ROLES.MEMBER || userRole === ROLES.ADMIN
+  const toast = useToast()
 
   const [showCreateModal, setShowCreateModal] = useState(false)
+  const [togglingId, setTogglingId] = useState<string | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<ItemRecord | null>(null)
+  const [deleting, setDeleting] = useState(false)
 
-  // Query all items
   const { records: items, status } = useQuery<Item>('items', {
     orderBy: 'createdAt',
     orderDir: 'desc',
   })
+  const { createConfirmed, putConfirmed, removeConfirmed } = useMutations<Item>('items')
 
-  // Mutations for items
-  const { create, put, remove } = useMutations<Item>('items')
-
-  // Separate own items and others
   const { myItems, otherItems } = useMemo(() => {
     const my: typeof items = []
     const other: typeof items = []
 
-    items.forEach(item => {
-      if (item.data.ownerId === user?.id) {
-        my.push(item)
-      } else {
-        other.push(item)
-      }
+    items.forEach((item) => {
+      if (item.data.ownerId === user?.id) my.push(item)
+      else other.push(item)
     })
 
     return { myItems: my, otherItems: other }
   }, [items, user?.id])
 
-  const handleCreate = async (title: string, description: string) => {
-    await create({
-      title,
-      description,
-      status: ITEM_STATUS.ACTIVE,
-      ownerId: user!.id,
-    })
+  const handleCreate = async (title: string, description: string): Promise<boolean> => {
+    if (!user) {
+      toast.error('Could not create item', 'Sign in and try again.')
+      return false
+    }
+
+    try {
+      await createConfirmed({
+        title,
+        description,
+        status: ITEM_STATUS.ACTIVE,
+        ownerId: user.id,
+      })
+      toast.success('Item created', `"${title}" is ready.`)
+      return true
+    } catch (error) {
+      toast.error(
+        'Could not create item',
+        error instanceof Error ? error.message : 'Please try again.',
+      )
+      return false
+    }
   }
 
   const handleToggleStatus = async (itemId: string, currentStatus: string) => {
-    const newStatus = currentStatus === ITEM_STATUS.ACTIVE
-      ? ITEM_STATUS.ARCHIVED
-      : ITEM_STATUS.ACTIVE
-
-    const item = items.find(i => i.recordId === itemId)
-    if (item) {
-      await put(itemId, { ...item.data, status: newStatus })
+    const item = items.find((candidate) => candidate.recordId === itemId)
+    if (!item || togglingId) return
+
+    const newStatus =
+      currentStatus === ITEM_STATUS.ACTIVE ? ITEM_STATUS.ARCHIVED : ITEM_STATUS.ACTIVE
+    setTogglingId(itemId)
+    try {
+      await putConfirmed(itemId, { status: newStatus })
+      if (newStatus === ITEM_STATUS.ARCHIVED) {
+        toast.success('Item archived', `"${item.data.title}" moved to the archive.`)
+      } else {
+        toast.success('Item restored', `"${item.data.title}" is active again.`)
+      }
+    } catch (error) {
+      toast.error(
+        'Could not update item',
+        error instanceof Error ? error.message : 'Please try again.',
+      )
+    } finally {
+      setTogglingId(null)
     }
   }
 
-  const handleDelete = async (itemId: string) => {
-    if (confirm('Are you sure you want to delete this item?')) {
-      await remove(itemId)
+  const handleDelete = async () => {
+    if (!deleteTarget || deleting) return
+
+    setDeleting(true)
+    try {
+      await removeConfirmed(deleteTarget.recordId)
+      toast.success('Item deleted', `"${deleteTarget.data.title}" was deleted.`)
+      setDeleteTarget(null)
+    } catch (error) {
+      toast.error(
+        'Could not delete item',
+        error instanceof Error ? error.message : 'Please try again.',
+      )
+    } finally {
+      setDeleting(false)
     }
   }
 
   const isLoading = status === 'loading'
 
   return (
-    <div className={`h-full bg-background overflow-y-auto ${className ?? ''}`}>
-      {/* Header */}
-      <div className="bg-card/60 backdrop-blur-md border-b border-border sticky top-0 z-10">
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+    <div className={`h-full overflow-y-auto bg-background ${className ?? ''}`}>
+      <div className="sticky top-0 z-10 border-b border-border bg-card/60 backdrop-blur-md">
+        <div className="mx-auto max-w-4xl px-4 py-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between">
             <div>
-              <h1 className="text-2xl font-bold text-foreground">Welcome, {user?.name ?? 'Guest'}</h1>
-              <p className="text-muted-foreground mt-1">
-                {canCreate
-                  ? 'Create and manage your items below'
-                  : 'You can view items but need member access to create'
-                }
+              <h1 className="text-2xl font-bold text-foreground">Items</h1>
+              <p className="mt-1 text-muted-foreground">
+                {isLoading
+                  ? 'Loading items...'
+                  : `${items.length} ${items.length === 1 ? 'item' : 'items'} in this workspace`}
               </p>
             </div>
 
             {canCreate && (
               <Button onClick={() => setShowCreateModal(true)}>
-                <svg className="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                </svg>
+                <Plus aria-hidden="true" />
                 New Item
               </Button>
             )}
@@ -254,57 +314,58 @@ export default function ItemsPage({ className }: ItemsPageProps) {
         </div>
       </div>
 
-      {/* Content */}
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+      <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 lg:px-8">
         {isLoading ? (
-          <div className="flex items-center justify-center py-16">
-            <div className="w-8 h-8 border-2 border-primary/20 border-t-primary rounded-full animate-spin" />
+          <div className="grid gap-4 sm:grid-cols-2" aria-label="Loading items" aria-busy="true">
+            <div className="h-32 animate-pulse rounded-xl border border-border bg-muted/40" />
+            <div className="h-32 animate-pulse rounded-xl border border-border bg-muted/40" />
           </div>
         ) : items.length === 0 ? (
           <EmptyState
             title="No items yet"
-            description={canCreate
-              ? "Create your first item to get started"
-              : "No items have been created yet"
+            description={
+              canCreate
+                ? 'Create your first item to get started.'
+                : 'No items have been created yet.'
             }
-            icon={
-              <svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4" />
-              </svg>
+            icon={<Inbox aria-hidden="true" />}
+            action={
+              canCreate ? { label: 'New item', onClick: () => setShowCreateModal(true) } : undefined
             }
           />
         ) : (
           <div className="space-y-8">
-            {/* My Items */}
             {myItems.length > 0 && (
               <section>
-                <h2 className="text-lg font-semibold text-foreground mb-4">My Items</h2>
+                <h2 className="mb-4 text-lg font-semibold text-foreground">My Items</h2>
                 <div className="grid gap-4 sm:grid-cols-2">
-                  {myItems.map(item => (
+                  {myItems.map((item) => (
                     <ItemCard
                       key={item.recordId}
                       item={item}
-                      isOwner={true}
-                      onToggleStatus={() => handleToggleStatus(item.recordId, item.data.status)}
-                      onDelete={() => handleDelete(item.recordId)}
+                      isOwner
+                      isToggling={togglingId === item.recordId}
+                      onToggleStatus={() =>
+                        void handleToggleStatus(item.recordId, item.data.status)
+                      }
+                      onDelete={() => setDeleteTarget(item)}
                     />
                   ))}
                 </div>
               </section>
             )}
 
-            {/* Other Items */}
             {otherItems.length > 0 && (
               <section>
-                <h2 className="text-lg font-semibold text-foreground mb-4">All Items</h2>
+                <h2 className="mb-4 text-lg font-semibold text-foreground">All Items</h2>
                 <div className="grid gap-4 sm:grid-cols-2">
-                  {otherItems.map(item => (
+                  {otherItems.map((item) => (
                     <ItemCard
                       key={item.recordId}
                       item={item}
                       isOwner={false}
-                      onToggleStatus={() => {}}
-                      onDelete={() => {}}
+                      onToggleStatus={() => undefined}
+                      onDelete={() => undefined}
                     />
                   ))}
                 </div>
@@ -314,12 +375,23 @@ export default function ItemsPage({ className }: ItemsPageProps) {
         )}
       </div>
 
-      {/* Create Modal */}
       <CreateItemModal
         isOpen={showCreateModal}
         onClose={() => setShowCreateModal(false)}
         onCreate={handleCreate}
       />
+
+      <ConfirmModal
+        open={deleteTarget !== null}
+        onClose={() => {
+          if (!deleting) setDeleteTarget(null)
+        }}
+        onConfirm={() => void handleDelete()}
+        title={deleteTarget ? `Delete "${deleteTarget.data.title}"?` : 'Delete item?'}
+        description="This cannot be undone."
+        confirmText="Delete"
+        loading={deleting}
+      />
     </div>
   )
 }

package/features/landing/feature.json

@@ -55,6 +55,9 @@
     "protected": false
   },
   "requires": [],
+  "dependencies": {
+    "framer-motion": "^12.38.0"
+  },
   "instructions": [
     "Configure APP_NAME, HERO_HEADLINE, HERO_SUBHEADLINE, FAQ_ITEMS etc. in LandingPage.tsx"
   ],

package/features/landing/src/LandingPage.tsx

@@ -110,20 +110,6 @@ function useLandingCSS() {
   }, [])
 }
 
-// ============================================================================
-// Landing page "seen" flag
-// ============================================================================
-
-const LANDING_SEEN_KEY = 'app-landing-seen'
-
-export function hasSeenLanding(): boolean {
-  try { return localStorage.getItem(LANDING_SEEN_KEY) === 'true' } catch { return false }
-}
-
-export function markLandingSeen(): void {
-  try { localStorage.setItem(LANDING_SEEN_KEY, 'true') } catch { /* storage unavailable (private mode/quota): non-critical */ }
-}
-
 // ============================================================================
 // Configuration
 // ============================================================================
@@ -265,7 +251,7 @@ function LandingNav({ isScrolled, scrollRoot }: {
             })}
             <div className="h-px bg-foreground/[0.08] my-1" />
             <button
-              onClick={() => { markLandingSeen(); navigate('/home') }}
+              onClick={() => navigate('/home')}
               className="px-4 py-2.5 rounded-xl text-sm font-medium text-left text-primary hover:bg-foreground/[0.08] transition-colors"
             >
               Get Started
@@ -298,7 +284,7 @@ function LandingNav({ isScrolled, scrollRoot }: {
                 )
               })}
             </div>
-            <Button size="sm" onClick={() => { markLandingSeen(); navigate('/home') }} className="hidden md:inline-flex">
+            <Button size="sm" onClick={() => navigate('/home')} className="hidden md:inline-flex">
               Get Started
             </Button>
             <button className="md:hidden transition-colors text-muted-foreground hover:text-foreground" onClick={() => setMobileOpen(prev => !prev)} aria-label="Toggle menu">
@@ -377,7 +363,7 @@ function HeroSection() {
           </motion.p>
 
           <motion.div initial={{ opacity: 0, y: 20 }} animate={typewriterDone ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }} transition={{ duration: 0.7, delay: 0.15, ease: [0.25, 0.4, 0.25, 1] }} className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
-            <Button size="lg" onClick={() => { markLandingSeen(); navigate('/home') }} className="min-w-[180px] group">
+            <Button size="lg" onClick={() => navigate('/home')} className="min-w-[180px] group">
               Get Started
               <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
             </Button>
@@ -509,7 +495,7 @@ function CTASection() {
               <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold text-foreground leading-tight tracking-[-0.02em]">Ready to get started?</h2>
               <p className="mt-5 text-muted-foreground text-lg max-w-md mx-auto leading-relaxed">Jump in and start exploring. No setup required.</p>
               <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
-                <Button size="lg" onClick={() => { markLandingSeen(); navigate('/home') }} className="min-w-[200px] group">
+                <Button size="lg" onClick={() => navigate('/home')} className="min-w-[200px] group">
                   Launch App
                   <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
                 </Button>

package/features/leaderboard/feature.json

@@ -3,7 +3,7 @@
   "name": "Leaderboard",
   "category": "data",
   "description": "Score-based leaderboard with categories, rankings, and admin editing",
-  "details": "Ranked leaderboard table with score submission, category filtering, medal badges for top 3, and admin score editing. Uses useQuery with ordering for real-time rankings and useMutations for CRUD.",
+  "details": "Ranked leaderboard table with score submission, category labels, medal badges for the top 3, and admin score editing. Uses useQuery with ordering for real-time rankings and confirmed mutations for persisted CRUD feedback.",
   "files": [
     {
       "src": "src/LeaderboardPage.tsx",
@@ -12,10 +12,6 @@
     {
       "src": "src/leaderboard-schema.ts",
       "dest": "src/schemas/leaderboard-schema.ts"
-    },
-    {
-      "src": "src/leaderboard-constants.ts",
-      "dest": "src/components/leaderboard/leaderboard-constants.ts"
     }
   ],
   "schema": {