Update stuff

apps/next/src/components/spoons/spoon-clone-panel.tsx

@@ -13,6 +13,13 @@ import {
   CardContent,
   CardHeader,
   CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
   Input,
   Label,
 } from '@spoon/ui';
@@ -102,6 +109,7 @@ export const SpoonClonePanel = ({ spoon }: { spoon: Doc<'spoons'> }) => {
   const [remoteName, setRemoteName] = useState('');
   const [url, setUrl] = useState('');
   const [submitting, setSubmitting] = useState(false);
+  const [remoteDialogOpen, setRemoteDialogOpen] = useState(false);
   const cloneUrl = spoon.forkUrl;
 
   const addRemote = async (event: React.FormEvent<HTMLFormElement>) => {
@@ -117,6 +125,7 @@ export const SpoonClonePanel = ({ spoon }: { spoon: Doc<'spoons'> }) => {
       setLabel('');
       setRemoteName('');
       setUrl('');
+      setRemoteDialogOpen(false);
       toast.success('Remote added.');
     } catch (error) {
       console.error(error);
@@ -128,8 +137,64 @@ export const SpoonClonePanel = ({ spoon }: { spoon: Doc<'spoons'> }) => {
 
   return (
     <Card className='shadow-none'>
-      <CardHeader className='pb-3'>
+      <CardHeader className='flex-row items-center justify-between gap-4 pb-3'>
         <CardTitle className='text-base'>Clone your fork</CardTitle>
+        <Dialog open={remoteDialogOpen} onOpenChange={setRemoteDialogOpen}>
+          <DialogTrigger asChild>
+            <Button type='button' variant='outline' size='sm'>
+              <Plus className='size-4' />
+              Add remote
+            </Button>
+          </DialogTrigger>
+          <DialogContent className='sm:max-w-lg'>
+            <DialogHeader>
+              <DialogTitle>Add git remote</DialogTitle>
+              <DialogDescription>
+                Store another repository URL to copy from this Spoon. GitHub
+                remains the source of truth for upstream maintenance.
+              </DialogDescription>
+            </DialogHeader>
+            <form onSubmit={addRemote} className='space-y-4'>
+              <div className='grid gap-3 md:grid-cols-[1fr_0.7fr]'>
+                <div className='grid gap-2'>
+                  <Label htmlFor='remote-label'>Label</Label>
+                  <Input
+                    id='remote-label'
+                    value={label}
+                    placeholder='Gitea mirror'
+                    required
+                    onChange={(event) => setLabel(event.target.value)}
+                  />
+                </div>
+                <div className='grid gap-2'>
+                  <Label htmlFor='remote-name'>Git remote name</Label>
+                  <Input
+                    id='remote-name'
+                    value={remoteName}
+                    placeholder='gitea'
+                    onChange={(event) => setRemoteName(event.target.value)}
+                  />
+                </div>
+              </div>
+              <div className='grid gap-2'>
+                <Label htmlFor='remote-url'>Repository URL</Label>
+                <Input
+                  id='remote-url'
+                  value={url}
+                  placeholder='https://git.example.com/you/project.git'
+                  required
+                  onChange={(event) => setUrl(event.target.value)}
+                />
+              </div>
+              <DialogFooter className='mt-2'>
+                <Button type='submit' disabled={submitting}>
+                  <Plus className='size-4' />
+                  {submitting ? 'Adding...' : 'Add remote'}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
       </CardHeader>
       <CardContent className='space-y-3'>
         {cloneUrl ? (
@@ -165,46 +230,6 @@ export const SpoonClonePanel = ({ spoon }: { spoon: Doc<'spoons'> }) => {
             ))}
           </div>
         ) : null}
-        <form
-          onSubmit={addRemote}
-          className='border-border space-y-3 border-t pt-4'
-        >
-          <div className='grid gap-3 md:grid-cols-[1fr_0.7fr]'>
-            <div className='grid gap-2'>
-              <Label htmlFor='remote-label'>Label</Label>
-              <Input
-                id='remote-label'
-                value={label}
-                placeholder='Gitea mirror'
-                required
-                onChange={(event) => setLabel(event.target.value)}
-              />
-            </div>
-            <div className='grid gap-2'>
-              <Label htmlFor='remote-name'>Git remote name</Label>
-              <Input
-                id='remote-name'
-                value={remoteName}
-                placeholder='gitea'
-                onChange={(event) => setRemoteName(event.target.value)}
-              />
-            </div>
-          </div>
-          <div className='grid gap-2'>
-            <Label htmlFor='remote-url'>Repository URL</Label>
-            <Input
-              id='remote-url'
-              value={url}
-              placeholder='https://git.example.com/you/project.git'
-              required
-              onChange={(event) => setUrl(event.target.value)}
-            />
-          </div>
-          <Button type='submit' variant='outline' disabled={submitting}>
-            <Plus className='size-4' />
-            {submitting ? 'Adding...' : 'Add remote'}
-          </Button>
-        </form>
       </CardContent>
     </Card>
   );