@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/setlist/setlist-web/app/components/sidebar/helpers.ts

@@ -0,0 +1,73 @@
+import type { AreaSchemas, ProjectSchemas } from '@setlist/schemas'
+import type { ContextMenuPosition } from '../context-menu'
+
+export type Area = AreaSchemas.areaModel
+export type Project = ProjectSchemas.projectModel
+
+export interface SidebarItem {
+  type: 'area' | 'project'
+  id: number
+  title: string
+  position: string
+  area?: Area
+  project?: Project
+}
+
+export interface ContextMenuTarget {
+  type: 'area' | 'project'
+  id: number
+  title: string
+  position: ContextMenuPosition
+  project?: Project
+}
+
+export interface EditingTarget {
+  type: 'area' | 'project'
+  id: number
+  title: string
+}
+
+export interface DeletingTarget {
+  type: 'area' | 'project'
+  id: number
+  title: string
+}
+
+export function buildSidebarItems(
+  areas: Area[],
+  projects: Project[]
+): { items: SidebarItem[]; childProjects: Map<number, Project[]> } {
+  const childProjects = new Map<number, Project[]>()
+  const items: SidebarItem[] = []
+
+  for (const area of areas) {
+    items.push({ type: 'area', id: area.id, title: area.title, position: area.position, area })
+  }
+
+  for (const project of projects) {
+    if (project.areaId !== null) {
+      const children = childProjects.get(project.areaId) ?? []
+      children.push(project)
+      childProjects.set(project.areaId, children)
+    } else {
+      items.push({ type: 'project', id: project.id, title: project.title, position: project.position, project })
+    }
+  }
+
+  items.sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0))
+
+  for (const [, children] of childProjects) {
+    children.sort((a, b) => (a.position < b.position ? -1 : a.position > b.position ? 1 : 0))
+  }
+
+  return { items, childProjects }
+}
+
+export function parseDndId(dndId: string): { type: 'area' | 'project'; id: number } {
+  const dashIdx = dndId.indexOf('-')
+  return { type: dndId.slice(0, dashIdx) as 'area' | 'project', id: Number(dndId.slice(dashIdx + 1)) }
+}
+
+export function toDndId(type: 'area' | 'project', id: number): string {
+  return `${type}-${id}`
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/sidebar/index.ts

@@ -0,0 +1,6 @@
+export { Sidebar } from './sidebar'
+export { InlineCreateInput, InlineEditInput } from './inline-inputs'
+export { SortableAreaRow, SortableChildProject, SortableTopLevelProject } from './sortable-rows'
+export { useSidebarDnd } from './use-sidebar-dnd'
+export { buildSidebarItems, parseDndId, toDndId } from './helpers'
+export type { Area, Project, SidebarItem, ContextMenuTarget, EditingTarget, DeletingTarget } from './helpers'

package/skills/maestro-examples/references/setlist/setlist-web/app/components/sidebar/inline-inputs.tsx

@@ -0,0 +1,128 @@
+import * as React from 'react'
+import { useFetcher } from 'react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import { useEditArea } from '~/hooks/use-area-actions'
+import { useEditProject } from '~/hooks/use-project-actions'
+import { Icon } from '../icon'
+import { useFetcherComplete } from '~/utils/use-fetcher-complete'
+
+export function InlineCreateInput({
+  type,
+  areaId,
+  onCancel
+}: {
+  type: 'area' | 'project'
+  areaId?: number
+  onCancel: () => void
+}) {
+  const fetcher = useFetcher()
+  const isSubmitting = fetcher.state !== 'idle'
+
+  useFetcherComplete(fetcher, onCancel)
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      onCancel()
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    const formData = new FormData(e.currentTarget)
+    const title = formData.get('title')
+    if (typeof title !== 'string' || title.trim().length === 0) {
+      e.preventDefault()
+      onCancel()
+    }
+  }
+
+  return (
+    <div className="sidebar-item">
+      {type === 'project' && <Icon name="folder" className="h-3.5 w-3.5 shrink-0 text-neutral-400" />}
+      <HeadlessForm
+        as={fetcher.Form}
+        method="post"
+        action={type === 'area' ? '/api/areas' : '/api/projects'}
+        onSubmit={handleSubmit}
+        className="min-w-0 flex-1"
+      >
+        {areaId != null && <input type="hidden" name="areaId" value={areaId} />}
+        <input
+          type="text"
+          name="title"
+          placeholder={type === 'area' ? 'New area...' : 'New project...'}
+          className="w-full bg-transparent text-sm text-neutral-900 placeholder-neutral-400 outline-none"
+          onKeyDown={handleKeyDown}
+          onBlur={onCancel}
+          disabled={isSubmitting}
+          autoComplete="off"
+          autoFocus
+        />
+      </HeadlessForm>
+    </div>
+  )
+}
+
+export function InlineEditInput({
+  type,
+  id,
+  initialTitle,
+  onDone
+}: {
+  type: 'area' | 'project'
+  id: number
+  initialTitle: string
+  onDone: () => void
+}) {
+  const editArea = useEditArea(id)
+  const editProject = useEditProject(id)
+  const edit = type === 'area' ? editArea : editProject
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const isSubmitting = edit.state !== 'idle'
+
+  React.useEffect(() => {
+    inputRef.current?.select()
+  }, [])
+
+  useFetcherComplete(edit, onDone)
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      onDone()
+    }
+  }
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    const formData = new FormData(e.currentTarget)
+    const title = formData.get('title')
+    if (typeof title !== 'string' || title.trim().length === 0 || title.trim() === initialTitle) {
+      e.preventDefault()
+      onDone()
+    }
+  }
+
+  return (
+    <HeadlessForm as={edit.Form} method="post" action={edit.action} onSubmit={handleSubmit} className="min-w-0 flex-1">
+      <input
+        ref={inputRef}
+        type="text"
+        name="title"
+        defaultValue={initialTitle}
+        className="w-full bg-transparent text-sm text-neutral-900 outline-none"
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          const input = inputRef.current
+          if (input && input.value.trim() !== '' && input.value.trim() !== initialTitle) {
+            input.form?.requestSubmit()
+          } else {
+            onDone()
+          }
+        }}
+        disabled={isSubmitting}
+        autoComplete="off"
+        autoFocus
+      />
+    </HeadlessForm>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/sidebar/sidebar.tsx

@@ -0,0 +1,333 @@
+import * as React from 'react'
+import { NavLink, useFetcher } from 'react-router'
+import { useFetcherComplete } from '~/utils/use-fetcher-complete'
+import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
+import { tw } from '~/utils/tw'
+import { useCsrfToken } from '~/hooks/use-csrf-token'
+import { Form } from '~/components/form'
+import { useAppDnd } from '../app-dnd-provider'
+import { ContextMenu, ContextMenuItem, ContextMenuSeparator } from '../context-menu'
+import { AlertDialog } from '../alert-dialog'
+import { Button } from '../button'
+import { Icon } from '../icon'
+import { InlineCreateInput } from './inline-inputs'
+import { SortableAreaRow, SortableTopLevelProject } from './sortable-rows'
+import { useSidebarDnd } from './use-sidebar-dnd'
+import type { Area, Project, ContextMenuTarget, EditingTarget, DeletingTarget } from './helpers'
+
+function CountBadge({ count }: { count: number }) {
+  if (count === 0) return null
+  return (
+    <span className="ml-auto inline-flex min-w-[20px] items-center justify-center rounded-full bg-neutral-200 px-1.5 py-0.5 text-xs font-medium text-neutral-600">
+      {count}
+    </span>
+  )
+}
+
+function SidebarNavLink({ to, children }: { to: string; children: React.ReactNode }) {
+  return (
+    <NavLink to={to} className={({ isActive }) => tw('sidebar-item', isActive && 'active')}>
+      {children}
+    </NavLink>
+  )
+}
+
+interface SidebarProps {
+  areas: Area[]
+  projects: Project[]
+  inboxCount: number
+  todayCount: number
+}
+
+export function Sidebar({ areas, projects, inboxCount, todayCount }: SidebarProps) {
+  const [expandedAreas, setExpandedAreas] = React.useState<Record<number, boolean>>(() => {
+    if (typeof window === 'undefined') return {}
+    try {
+      const stored = localStorage.getItem('sidebar-expanded-areas')
+      return stored ? JSON.parse(stored) : {}
+    } catch {
+      return {}
+    }
+  })
+
+  const [creatingType, setCreatingType] = React.useState<'area' | 'project' | null>(null)
+  const [contextMenu, setContextMenu] = React.useState<ContextMenuTarget | null>(null)
+  const [editingItem, setEditingItem] = React.useState<EditingTarget | null>(null)
+  const [deletingItem, setDeletingItem] = React.useState<DeletingTarget | null>(null)
+
+  const deleteFetcher = useFetcher()
+  const completeFetcher = useFetcher()
+  const csrfToken = useCsrfToken()
+  const { activeDrag, overDroppableId } = useAppDnd()
+
+  const { items, childProjects, topLevelIds, childProjectIds } = useSidebarDnd({
+    areas,
+    projects,
+    expandedAreas,
+    setExpandedAreas
+  })
+
+  const cancelCreation = React.useCallback(() => {
+    setCreatingType(null)
+  }, [])
+
+  const toggleArea = React.useCallback((areaId: number) => {
+    setExpandedAreas((prev) => {
+      const next = { ...prev, [areaId]: !prev[areaId] }
+      try {
+        localStorage.setItem('sidebar-expanded-areas', JSON.stringify(next))
+      } catch {
+        // ignore
+      }
+      return next
+    })
+  }, [])
+
+  const handleAreaContextMenu = React.useCallback((e: React.MouseEvent, area: Area) => {
+    e.preventDefault()
+    setContextMenu({
+      type: 'area',
+      id: area.id,
+      title: area.title,
+      position: { x: e.clientX, y: e.clientY }
+    })
+  }, [])
+
+  const handleProjectContextMenu = React.useCallback((e: React.MouseEvent, project: Project) => {
+    e.preventDefault()
+    setContextMenu({
+      type: 'project',
+      id: project.id,
+      title: project.title,
+      position: { x: e.clientX, y: e.clientY },
+      project
+    })
+  }, [])
+
+  useFetcherComplete(deleteFetcher, () => setDeletingItem(null))
+
+  const editDone = React.useCallback(() => {
+    setEditingItem(null)
+  }, [])
+
+  // Inbox droppable target for cross-container task drag
+  const { setNodeRef: inboxDropRef, isOver: isInboxOver } = useDroppable({ id: 'droppable-inbox' })
+  const isInboxTaskDropTarget = activeDrag?.type === 'task' && isInboxOver
+
+  return (
+    <aside className="flex w-64 shrink-0 flex-col border-r border-neutral-200 bg-neutral-50 overflow-y-auto">
+      <nav className="flex flex-1 flex-col px-2 py-3">
+        {/* Built-in views */}
+        <div className="space-y-0.5">
+          <NavLink
+            ref={inboxDropRef}
+            to="/inbox"
+            className={({ isActive }) =>
+              tw(
+                'sidebar-item',
+                isActive && 'active',
+                isInboxTaskDropTarget && 'rounded bg-primary-100 ring-2 ring-primary-400'
+              )
+            }
+          >
+            <Icon name="inbox" className="h-4 w-4 shrink-0 text-primary-500" />
+            <span>Inbox</span>
+            <CountBadge count={inboxCount} />
+          </NavLink>
+          <SidebarNavLink to="/today">
+            <Icon name="clock" className="h-4 w-4 shrink-0 text-amber-500" />
+            <span>Today</span>
+            <CountBadge count={todayCount} />
+          </SidebarNavLink>
+          <SidebarNavLink to="/upcoming">
+            <Icon name="calendar-days" className="h-4 w-4 shrink-0 text-violet-500" />
+            <span>Upcoming</span>
+          </SidebarNavLink>
+          <SidebarNavLink to="/completed">
+            <Icon name="check-circle" className="h-4 w-4 shrink-0 text-positive-500" />
+            <span>Completed</span>
+          </SidebarNavLink>
+        </div>
+
+        {/* Separator */}
+        <div className="my-3 border-t border-neutral-200" />
+
+        {/* User content: areas and top-level projects with DnD */}
+        <SortableContext items={topLevelIds} strategy={verticalListSortingStrategy}>
+          <div className="flex-1 space-y-0.5">
+            {items.map((item) => {
+              if (item.type === 'area' && item.area) {
+                const areaChildProjects = childProjects.get(item.id) ?? []
+                const areaChildIds = childProjectIds.get(item.id) ?? []
+                return (
+                  <SortableAreaRow
+                    key={`area-${item.id}`}
+                    area={item.area}
+                    childProjects={areaChildProjects}
+                    childProjectIds={areaChildIds}
+                    expanded={expandedAreas[item.id] ?? false}
+                    onToggle={() => toggleArea(item.id)}
+                    editingItem={editingItem}
+                    onEditDone={editDone}
+                    onContextMenu={handleAreaContextMenu}
+                    onProjectContextMenu={handleProjectContextMenu}
+                  />
+                )
+              }
+
+              if (item.project) {
+                return (
+                  <SortableTopLevelProject
+                    key={`project-${item.id}`}
+                    project={item.project}
+                    editingItem={editingItem}
+                    onEditDone={editDone}
+                    onContextMenu={handleProjectContextMenu}
+                  />
+                )
+              }
+
+              return null
+            })}
+
+            {/* Inline creation input */}
+            {creatingType && <InlineCreateInput type={creatingType} onCancel={cancelCreation} />}
+          </div>
+        </SortableContext>
+
+        {/* Add buttons */}
+        <div className="mt-1 space-y-0.5">
+          <button
+            onClick={() => setCreatingType('area')}
+            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-400 hover:bg-neutral-200/60 hover:text-neutral-600"
+            aria-label="New area"
+          >
+            <Icon name="plus" className="h-4 w-4 shrink-0" />
+            <span>New area</span>
+          </button>
+          <button
+            onClick={() => setCreatingType('project')}
+            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-400 hover:bg-neutral-200/60 hover:text-neutral-600"
+            aria-label="New project"
+          >
+            <Icon name="plus" className="h-4 w-4 shrink-0" />
+            <span>New project</span>
+          </button>
+        </div>
+
+        {/* Logout */}
+        <div className="mt-3 border-t border-neutral-200 pt-3">
+          <Form method="post" action="/auth/logout">
+            <button type="submit" className="sidebar-item w-full text-neutral-500 hover:text-neutral-700">
+              <Icon name="arrow-right-start-on-rectangle" className="h-4 w-4 shrink-0" />
+              <span>Log out</span>
+            </button>
+          </Form>
+        </div>
+      </nav>
+
+      {/* Context Menu */}
+      <ContextMenu
+        isOpen={contextMenu !== null}
+        onOpenChange={(open) => {
+          if (!open) setContextMenu(null)
+        }}
+        position={contextMenu?.position ?? null}
+      >
+        {contextMenu?.type === 'area' && (
+          <>
+            <ContextMenuItem
+              onAction={() => {
+                setEditingItem({ type: 'area', id: contextMenu.id, title: contextMenu.title })
+              }}
+            >
+              Edit
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              variant="danger"
+              onAction={() => {
+                setDeletingItem({ type: 'area', id: contextMenu.id, title: contextMenu.title })
+              }}
+            >
+              Delete
+            </ContextMenuItem>
+          </>
+        )}
+        {contextMenu?.type === 'project' && (
+          <>
+            <ContextMenuItem
+              onAction={() => {
+                setEditingItem({ type: 'project', id: contextMenu.id, title: contextMenu.title })
+              }}
+            >
+              Edit
+            </ContextMenuItem>
+            <ContextMenuItem
+              onAction={() => {
+                const action = contextMenu.project?.completedDate ? 'uncomplete' : 'complete'
+                completeFetcher.submit(
+                  { __csrfToken: csrfToken },
+                  { method: 'post', action: `/api/projects/${contextMenu.id}/${action}` }
+                )
+              }}
+            >
+              {contextMenu.project?.completedDate ? 'Uncomplete' : 'Complete'}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem
+              variant="danger"
+              onAction={() => {
+                setDeletingItem({ type: 'project', id: contextMenu.id, title: contextMenu.title })
+              }}
+            >
+              Delete
+            </ContextMenuItem>
+          </>
+        )}
+      </ContextMenu>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog
+        title={`Delete ${deletingItem?.type === 'area' ? 'area' : 'project'}?`}
+        description={`"${deletingItem?.title}" will be deleted. This action cannot be undone.`}
+        variant="negative"
+        isOpen={deletingItem !== null}
+        onOpenChange={(isOpen) => {
+          if (!isOpen) setDeletingItem(null)
+        }}
+      >
+        {({ close }) => (
+          <div className="flex w-full gap-3">
+            <Button color="neutral" variant="soft" shape="rectangle" fullWidth onClick={close}>
+              Cancel
+            </Button>
+            <Button
+              color="negative"
+              variant="contained"
+              shape="rectangle"
+              fullWidth
+              isPending={deleteFetcher.state !== 'idle'}
+              onClick={() => {
+                if (!deletingItem) return
+                deleteFetcher.submit(
+                  { __csrfToken: csrfToken },
+                  {
+                    method: 'post',
+                    action:
+                      deletingItem.type === 'area'
+                        ? `/api/areas/${deletingItem.id}/delete`
+                        : `/api/projects/${deletingItem.id}/delete`
+                  }
+                )
+              }}
+            >
+              Delete
+            </Button>
+          </div>
+        )}
+      </AlertDialog>
+    </aside>
+  )
+}