Add sync now button to pending operations dialog (#27)

Adds a 'Sync now' button below the pending operations list in the
dialog, allowing users to manually trigger a sync directly from the
dialog.

## Changes
- Added new props to `PendingOperationsDialog`: `onSyncNow`,
`syncStatus`, and `isOnline`
- Added a button at the bottom of the dialog that triggers the sync
process
- Button shows loading state with spinning icon while syncing
- Button is disabled when offline or when sync is already in progress

resources/js/components/pending-operations-dialog.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@/components/ui/button';
 import {
     Dialog,
     DialogContent,
@@ -13,13 +14,18 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table';
+import type { SyncStatus } from '@/contexts/sync-context';
 import type { PendingChange } from '@/lib/dexie-db';
 import { formatDistanceToNow } from 'date-fns';
+import { RefreshCw } from 'lucide-react';
 
 interface PendingOperationsDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     operations: PendingChange[];
+    onSyncNow: () => void;
+    syncStatus: SyncStatus;
+    isOnline: boolean;
 }
 
 function getOperationBadgeClass(operation: PendingChange['operation']): string {
@@ -53,10 +59,15 @@ export function PendingOperationsDialog({
     open,
     onOpenChange,
     operations,
+    onSyncNow,
+    syncStatus,
+    isOnline,
 }: PendingOperationsDialogProps) {
+    const isSyncing = syncStatus === 'syncing';
+    const canSync = isOnline && !isSyncing;
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-2xl">
+            <DialogContent>
                 <DialogHeader>
                     <DialogTitle>Pending Operations</DialogTitle>
                     <DialogDescription>
@@ -107,6 +118,18 @@ export function PendingOperationsDialog({
                         </Table>
                     )}
                 </div>
+                <div className="flex justify-end pt-2">
+                    <Button
+                        onClick={onSyncNow}
+                        disabled={!canSync}
+                        className="gap-2"
+                    >
+                        <RefreshCw
+                            className={`h-4 w-4 ${isSyncing ? 'animate-spin' : ''}`}
+                        />
+                        {isSyncing ? 'Syncing...' : 'Sync now'}
+                    </Button>
+                </div>
             </DialogContent>
         </Dialog>
     );

resources/js/components/sync-status-button.tsx

@@ -131,6 +131,9 @@ export function SyncStatusButton() {
                 open={showPendingDialog}
                 onOpenChange={setShowPendingDialog}
                 operations={pendingOperations}
+                onSyncNow={handleSyncNow}
+                syncStatus={syncStatus}
+                isOnline={isOnline}
             />
         </>
     );

resources/js/components/ui/dialog.tsx

@@ -7,137 +7,137 @@ import { XIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 
 function Dialog({
-  ...props
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+    return <DialogPrimitive.Root data-slot="dialog" {...props} />
 }
 
 function DialogTrigger({
-  ...props
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+    return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
 }
 
 function DialogPortal({
-  ...props
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+    return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
 }
 
 function DialogClose({
-  ...props
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+    return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
 }
 
 function DialogOverlay({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <DialogPrimitive.Overlay
+            data-slot="dialog-overlay"
+            className={cn(
+                "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+                className
+            )}
+            {...props}
+        />
+    )
 }
 
 function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
+    className,
+    children,
+    showCloseButton = true,
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
+    showCloseButton?: boolean
 }) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[95vh] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 overflow-y-auto sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
+    return (
+        <DialogPortal data-slot="dialog-portal">
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                data-slot="dialog-content"
+                className={cn(
+                    "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-1.5rem)] max-h-[95vh] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 overflow-y-auto sm:max-w-lg",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <DialogPrimitive.Close
+                        data-slot="dialog-close"
+                        className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+                    >
+                        <XIcon />
+                        <span className="sr-only">Close</span>
+                    </DialogPrimitive.Close>
+                )}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    )
 }
 
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
+    return (
+        <div
+            data-slot="dialog-header"
+            className={cn("flex flex-col gap-2 text-left", className)}
+            {...props}
+        />
+    )
 }
 
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
+    return (
+        <div
+            data-slot="dialog-footer"
+            className={cn(
+                "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+                className
+            )}
+            {...props}
+        />
+    )
 }
 
 function DialogTitle({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
+    return (
+        <DialogPrimitive.Title
+            data-slot="dialog-title"
+            className={cn("text-lg leading-none font-semibold", className)}
+            {...props}
+        />
+    )
 }
 
 function DialogDescription({
-  className,
-  ...props
+    className,
+    ...props
 }: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
+    return (
+        <DialogPrimitive.Description
+            data-slot="dialog-description"
+            className={cn("text-muted-foreground text-sm", className)}
+            {...props}
+        />
+    )
 }
 
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogOverlay,
+    DialogPortal,
+    DialogTitle,
+    DialogTrigger,
 }