feat: add BackgroundJobsSidebar and Sidebar components for background job management

Author: nickytonline

src/components/BackgroundJobsSidebar.tsx

@@ -0,0 +1,65 @@
+import { Sidebar } from './ui/sidebar'
+import { useHasMounted } from '@/hooks/useHasMounted'
+import { useBackgroundJobs } from '@/hooks/useBackgroundJobs'
+import { Clock } from 'lucide-react'
+import { BackgroundJobItem } from './BackgroundJobItem'
+
+interface BackgroundJobsSidebarProps {
+  isOpen: boolean
+  onClose: () => void
+  onLoadResponse?: (jobId: string, response: string) => void
+  onCancelJob?: (jobId: string) => void
+}
+
+export function BackgroundJobsSidebar({
+  isOpen,
+  onClose,
+  onLoadResponse,
+  onCancelJob,
+}: BackgroundJobsSidebarProps) {
+  const { jobs, updateJob, removeJob } = useBackgroundJobs()
+  const hasMounted = useHasMounted()
+
+  if (!hasMounted) {
+    return null
+  }
+
+  return (
+    <Sidebar
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Background Jobs"
+      className="w-96"
+    >
+      <div className="space-y-4">
+        {jobs.length === 0 ? (
+          <div
+            className="text-center text-muted-foreground py-8"
+            aria-live="polite"
+          >
+            <Clock
+              className="h-8 w-8 mx-auto mb-2 opacity-50"
+              aria-hidden="true"
+            />
+            <p>No background jobs</p>
+          </div>
+        ) : (
+          <ul aria-label="Background jobs" className="grid gap-2">
+            {jobs.map((job) => (
+              <li>
+                <BackgroundJobItem
+                  key={job.id}
+                  job={job}
+                  onLoadResponse={onLoadResponse}
+                  onCancelJob={onCancelJob}
+                  updateJob={updateJob}
+                  removeJob={removeJob}
+                />
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </Sidebar>
+  )
+}

src/components/ui/sidebar.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+import { Button } from './button'
+import { X } from 'lucide-react'
+
+interface SidebarProps {
+  children: React.ReactNode
+  isOpen: boolean
+  onClose: () => void
+  title: string
+  className?: string
+}
+
+export function Sidebar({ 
+  children, 
+  isOpen, 
+  onClose, 
+  title, 
+  className 
+}: SidebarProps) {
+  return (
+    <>
+      {/* Overlay */}
+      {isOpen && (
+        <div 
+          className="fixed inset-0 bg-black/50 z-40"
+          onClick={onClose}
+        />
+      )}
+      
+      {/* Sidebar */}
+      <div
+        className={cn(
+          'fixed right-0 top-0 h-full w-80 bg-background border-l shadow-lg transform transition-transform duration-200 ease-in-out z-50',
+          isOpen ? 'translate-x-0' : 'translate-x-full',
+          className
+        )}
+      >
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">{title}</h2>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onClose}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+        <div className="p-4 overflow-y-auto h-[calc(100vh-4rem)]">
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}