Add service duplicate action

components/admin/admin-client.tsx

@@ -43,7 +43,8 @@ import { DownloadIcon } from '@/components/ui/animated-icons/download';
 import { FilePenLineIcon } from '@/components/ui/animated-icons/file-pen-line';
 import { UploadIcon } from '@/components/ui/animated-icons/upload';
 import { importConfig } from '@/lib/actions';
-import { DEFAULT_APP_TITLE, type Category, type Service, type Preferences, type IconConfig } from '@/lib/types';
+import { createServiceDuplicateDraft } from '@/lib/service-duplicate';
+import { DEFAULT_APP_TITLE, type Category, type Service, type Preferences, type IconConfig, type ServiceFormData } from '@/lib/types';
 import { AppSettingsCard } from '@/components/admin/app-settings/app-settings-card';
 import { ConfigEditorDialog } from '@/components/admin/config-editor/config-editor-dialog';
 import { PageFooter } from '@/components/layout/footer/page-footer';
@@ -72,6 +73,7 @@ export function AdminClient({ appTitle, appLogo, categories: initialCategories,
   const [serviceModalOpen, setServiceModalOpen] = useState(false);
   const [editingCategory, setEditingCategory] = useState<Category | undefined>();
   const [editingService, setEditingService] = useState<Service | undefined>();
+  const [serviceDraft, setServiceDraft] = useState<ServiceFormData | undefined>();
   const [searchQuery, setSearchQuery] = useState('');
   const [refreshKey, setRefreshKey] = useState(0);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -159,11 +161,19 @@ export function AdminClient({ appTitle, appLogo, categories: initialCategories,
 
   const handleAddService = () => {
     setEditingService(undefined);
+    setServiceDraft(undefined);
     setServiceModalOpen(true);
   };
 
   const handleEditService = (service: Service) => {
     setEditingService(service);
+    setServiceDraft(undefined);
+    setServiceModalOpen(true);
+  };
+
+  const handleDuplicateService = (service: Service) => {
+    setEditingService(undefined);
+    setServiceDraft(createServiceDuplicateDraft(service, services));
     setServiceModalOpen(true);
   };
 
@@ -178,6 +188,7 @@ export function AdminClient({ appTitle, appLogo, categories: initialCategories,
     setServiceModalOpen(open);
     if (!open) {
       setEditingService(undefined);
+      setServiceDraft(undefined);
     }
   };
 
@@ -422,6 +433,7 @@ export function AdminClient({ appTitle, appLogo, categories: initialCategories,
                 services={filteredData.services}
                 categories={categories}
                 onEdit={handleEditService}
+                onDuplicate={handleDuplicateService}
                 onDeleted={handleRefresh}
                 cacheKey={refreshKey}
               />
@@ -442,6 +454,8 @@ export function AdminClient({ appTitle, appLogo, categories: initialCategories,
           open={serviceModalOpen}
           onOpenChange={handleServiceModalClose}
           service={editingService}
+          initialValues={serviceDraft}
+          mode={editingService ? 'edit' : serviceDraft ? 'duplicate' : 'create'}
           categories={categories}
           onSuccess={handleRefresh}
           cacheKey={refreshKey}

components/admin/services/service-form-modal.tsx

@@ -7,12 +7,14 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { ServiceForm } from './service-form';
-import type { Category, Service } from '@/lib/types';
+import type { Category, Service, ServiceFormData } from '@/lib/types';
 
 interface ServiceFormModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   service?: Service;
+  initialValues?: ServiceFormData;
+  mode?: 'create' | 'duplicate' | 'edit';
   categories: Category[];
   onSuccess: () => void;
   cacheKey?: number;
@@ -22,6 +24,8 @@ export function ServiceFormModal({
   open,
   onOpenChange,
   service,
+  initialValues,
+  mode,
   categories,
   onSuccess,
   cacheKey,
@@ -30,15 +34,28 @@ export function ServiceFormModal({
     onSuccess();
     onOpenChange(false);
   };
+  const resolvedMode = mode ?? (service ? 'edit' : 'create');
+  const formKey = service
+    ? `edit:${service.id}`
+    : initialValues
+      ? `draft:${initialValues.name}:${initialValues.url}:${initialValues.categoryId}`
+      : 'create';
+  const title = resolvedMode === 'edit'
+    ? 'Edit Service'
+    : resolvedMode === 'duplicate'
+      ? 'Duplicate Service'
+      : 'Add Service';
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[500px]" aria-describedby={undefined}>
         <DialogHeader>
-          <DialogTitle>{service ? 'Edit Service' : 'Add Service'}</DialogTitle>
+          <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
         <ServiceForm
+          key={formKey}
           service={service}
+          initialValues={initialValues}
           categories={categories}
           onSuccess={handleSuccess}
           onCancel={() => onOpenChange(false)}

components/admin/services/service-form.tsx

@@ -26,10 +26,11 @@ import {
   type ServiceMetadataApplyMode,
 } from '@/lib/service-metadata-apply';
 import { cn, slugify } from '@/lib/utils';
-import { ICON_TYPES, type Category, type IconConfig, type Service } from '@/lib/types';
+import { ICON_TYPES, type Category, type IconConfig, type Service, type ServiceFormData } from '@/lib/types';
 
 interface ServiceFormProps {
   service?: Service;
+  initialValues?: ServiceFormData;
   categories: Category[];
   onSuccess?: () => void;
   onCancel?: () => void;
@@ -73,25 +74,29 @@ function getIconFetchId(serviceId: string, serviceUrl: string): string {
   }
 }
 
-export function ServiceForm({ service, categories, onSuccess, onCancel, cacheKey }: ServiceFormProps) {
-  const [name, setName] = useState(service?.name || '');
-  const [description, setDescription] = useState(service?.description || '');
-  const [url, setUrl] = useState(service?.url || '');
-  const [categoryId, setCategoryId] = useState(service?.categoryId || '');
-  const [icon, setIcon] = useState<IconConfig | undefined>(service?.icon);
+export function ServiceForm({ service, initialValues, categories, onSuccess, onCancel, cacheKey }: ServiceFormProps) {
+  const formValues = service ?? initialValues;
+  const hasSeededValues = !!formValues;
+  const [name, setName] = useState(formValues?.name || '');
+  const [description, setDescription] = useState(formValues?.description || '');
+  const [url, setUrl] = useState(formValues?.url || '');
+  const [categoryId, setCategoryId] = useState(formValues?.categoryId || '');
+  const [icon, setIcon] = useState<IconConfig | undefined>(formValues?.icon);
   const [pendingIconFile, setPendingIconFile] = useState<File | null>(null);
-  const [active, setActive] = useState(service?.active ?? true);
+  const [active, setActive] = useState(formValues?.active ?? true);
   const [errors, setErrors] = useState<Record<string, string>>({});
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isFetchingIcon, setIsFetchingIcon] = useState(false);
   const [isFetchingMetadata, setIsFetchingMetadata] = useState(false);
   const [iconVersion, setIconVersion] = useState(0);
-  const [iconControl, setIconControl] = useState<'auto' | 'manual'>(service ? 'manual' : 'auto');
+  const [iconControl, setIconControl] = useState<'auto' | 'manual'>(
+    hasSeededValues ? 'manual' : 'auto'
+  );
   const urlRef = useRef(url);
   const nameRef = useRef(name);
   const descriptionRef = useRef(description);
-  const hasUserEditedNameRef = useRef(!!service);
-  const hasUserEditedDescriptionRef = useRef(!!service);
+  const hasUserEditedNameRef = useRef(hasSeededValues);
+  const hasUserEditedDescriptionRef = useRef(hasSeededValues);
   const lastAutoFetchKeyRef = useRef<string | null>(null);
   const lastAutoMetadataFetchKeyRef = useRef<string | null>(null);
   const autoFetchRequestRef = useRef(0);

components/admin/services/service-list.tsx

@@ -8,7 +8,7 @@ import { Button } from '@/components/ui/button';
 import { CornerRibbon } from '@/components/ui/corner-ribbon';
 import { CategoryIcon } from '@/components/common/icons/category-icon';
 import { SortableList, SortableItem } from '@/components/ui/sortable';
-import { Pencil, Trash2, ExternalLink } from 'lucide-react';
+import { ExternalLink, Pencil, Trash2 } from 'lucide-react';
 import { ServiceIcon } from '@/components/common/icons/service-icon';
 import { DeleteConfirmDialog } from '../delete-confirm-dialog';
 import { deleteService, reorderServices } from '@/lib/actions';
@@ -20,11 +20,12 @@ interface ServiceListProps {
   services: Service[];
   categories: Category[];
   onEdit: (service: Service) => void;
+  onDuplicate: (service: Service) => void;
   onDeleted: () => void;
   cacheKey?: number;
 }
 
-export function ServiceList({ services, categories, onEdit, onDeleted, cacheKey }: ServiceListProps) {
+export function ServiceList({ services, categories, onEdit, onDuplicate, onDeleted, cacheKey }: ServiceListProps) {
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [serviceToDelete, setServiceToDelete] = useState<Service | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
@@ -218,6 +219,7 @@ export function ServiceList({ services, categories, onEdit, onDeleted, cacheKey
                       <ServiceCardContext
                         service={service}
                         onEdit={onEdit}
+                        onDuplicate={onDuplicate}
                         onDelete={handleDeleteClick}
                         index={index}
                       >

components/common/context-menus/service-card-context.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Copy, ExternalLink, Pencil, Trash2 } from 'lucide-react';
+import { Clipboard, CopyPlus, ExternalLink, Pencil, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
   ContextMenu,
@@ -16,6 +16,7 @@ interface ServiceCardContextProps {
   service: Service;
   children: React.ReactNode;
   onEdit: (service: Service) => void;
+  onDuplicate?: (service: Service) => void;
   onDelete: (service: Service) => void;
   index: number;
 }
@@ -28,6 +29,7 @@ export function ServiceCardContext({
   service,
   children,
   onEdit,
+  onDuplicate,
   onDelete,
   index,
 }: ServiceCardContextProps) {
@@ -75,9 +77,15 @@ export function ServiceCardContext({
           <Pencil />
           Edit
         </ContextMenuItem>
+        {onDuplicate && (
+          <ContextMenuItem onClick={() => onDuplicate(service)}>
+            <CopyPlus />
+            Duplicate
+          </ContextMenuItem>
+        )}
         <ContextMenuSeparator />
         <ContextMenuItem onClick={handleCopyUrl}>
-          <Copy />
+          <Clipboard />
           Copy URL
         </ContextMenuItem>
         <ContextMenuItem onClick={handleOpenInNewTab}>