Configure Docker publishing with correct GitHub username

frontend/src/components/ui/BookmarkModal.tsx

@@ -2,6 +2,7 @@ import { createSignal, createEffect } from 'solid-js';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { TagPicker } from '@/components/ui/TagPicker';
+import { ModalPortal } from '@/components/ui/ModalPortal';
 import { IconX } from '@tabler/icons-solidjs';
 
 interface BookmarkModalProps {
@@ -52,92 +53,94 @@ export const BookmarkModal = (props: BookmarkModalProps) => {
   };
 
   return (
-    <>
-      {/* Backdrop */}
-      {props.isOpen && (
-        <div class="fixed inset-0 bg-black/50 z-[60] mt-0" onClick={props.onClose} />
-      )}
+    <ModalPortal>
+      <>
+        {/* Backdrop */}
+        {props.isOpen && (
+          <div class="fixed inset-0 bg-black/50 z-[60]" onClick={props.onClose} />
+        )}
 
-      {/* Modal */}
-      <div class={`fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-xl transition-all duration-300 z-[70] ${
-        props.isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'
-      }`} style="width: min(500px, 90vw); max-height: min(80vh, 600px); overflow-y: auto;">
-        {/* Header */}
-        <div class="flex items-center justify-between p-4 sm:p-6 border-b border-border">
-          <h3 class="text-lg font-semibold">Add New Bookmark</h3>
-          <button
-            onClick={props.onClose}
-            class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-shadow focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-inherit hover:bg-accent/50 hover:text-accent-foreground h-8 w-8"
-          >
-            <IconX class="size-4" />
-          </button>
-        </div>
+        {/* Modal */}
+        <div class={`fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-card border border-border rounded-lg shadow-xl transition-all duration-300 z-[70] ${
+          props.isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'
+        }`} style="width: min(500px, 90vw); max-height: min(80vh, 600px); overflow-y: auto;">
+          {/* Header */}
+          <div class="flex items-center justify-between p-4 sm:p-6 border-b border-border">
+            <h3 class="text-lg font-semibold">Add New Bookmark</h3>
+            <button
+              onClick={props.onClose}
+              class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-shadow focus-visible:outline-none focus-visible:ring-1.5 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-inherit hover:bg-accent/50 hover:text-accent-foreground h-8 w-8"
+            >
+              <IconX class="size-4" />
+            </button>
+          </div>
 
-        {/* Content */}
-        <div class="p-4 sm:p-6 space-y-4">
-          <div class="relative">
+          {/* Content */}
+          <div class="p-4 sm:p-6 space-y-4">
+            <div class="relative">
+              <Input
+                type="url"
+                placeholder="URL *"
+                value={newBookmark().url}
+                onInput={(e) => {
+                  const target = e.currentTarget as HTMLInputElement;
+                  if (target) setNewBookmark(prev => ({ ...prev, url: target.value }));
+                }}
+                required
+                class="pr-12"
+              />
+              {faviconPreview() && (
+                <div class="absolute right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-muted rounded flex items-center justify-center overflow-hidden">
+                  <img
+                    src={faviconPreview()}
+                    alt="Site favicon"
+                    class="w-4 h-4 object-contain"
+                    onError={(e) => { e.currentTarget.style.display = 'none'; }}
+                  />
+                </div>
+              )}
+            </div>
             <Input
-              type="url"
-              placeholder="URL *"
-              value={newBookmark().url}
+              type="text"
+              placeholder="Title (optional)"
+              value={newBookmark().title}
               onInput={(e) => {
                 const target = e.currentTarget as HTMLInputElement;
-                if (target) setNewBookmark(prev => ({ ...prev, url: target.value }));
+                if (target) setNewBookmark(prev => ({ ...prev, title: target.value }));
               }}
-              required
-              class="pr-12"
             />
-            {faviconPreview() && (
-              <div class="absolute right-3 top-1/2 transform -translate-y-1/2 w-6 h-6 bg-muted rounded flex items-center justify-center overflow-hidden">
-                <img 
-                  src={faviconPreview()} 
-                  alt="Site favicon" 
-                  class="w-4 h-4 object-contain"
-                  onError={(e) => { e.currentTarget.style.display = 'none'; }}
-                />
-              </div>
-            )}
-          </div>
-          <Input
-            type="text"
-            placeholder="Title (optional)"
-            value={newBookmark().title}
-            onInput={(e) => {
-              const target = e.currentTarget as HTMLInputElement;
-              if (target) setNewBookmark(prev => ({ ...prev, title: target.value }));
-            }}
-          />
-          <Input
-            type="text"
-            placeholder="Description (optional)"
-            value={newBookmark().description}
-            onInput={(e) => {
-              const target = e.currentTarget as HTMLInputElement;
-              if (target) setNewBookmark(prev => ({ ...prev, description: target.value }));
-            }}
-          />
-          <div class="space-y-2">
-            <label class="text-sm font-medium text-muted-foreground">Tags</label>
-            <TagPicker
-              availableTags={availableTags()}
-              selectedTags={tags()}
-              onTagsChange={(next) => setTags(next)}
-              placeholder="Add tags..."
-              allowNew={true}
+            <Input
+              type="text"
+              placeholder="Description (optional)"
+              value={newBookmark().description}
+              onInput={(e) => {
+                const target = e.currentTarget as HTMLInputElement;
+                if (target) setNewBookmark(prev => ({ ...prev, description: target.value }));
+              }}
             />
+            <div class="space-y-2">
+              <label class="text-sm font-medium text-muted-foreground">Tags</label>
+              <TagPicker
+                availableTags={availableTags()}
+                selectedTags={tags()}
+                onTagsChange={(next) => setTags(next)}
+                placeholder="Add tags..."
+                allowNew={true}
+              />
+            </div>
           </div>
-        </div>
 
-        {/* Footer */}
-        <div class="flex flex-col sm:flex-row justify-end gap-2 p-4 sm:p-6 border-t border-border">
-          <Button variant="outline" onClick={props.onClose}>
-            Cancel
-          </Button>
-          <Button onClick={handleSubmit} disabled={!newBookmark().url.trim()}>
-            Save Bookmark
-          </Button>
+          {/* Footer */}
+          <div class="flex flex-col sm:flex-row justify-end gap-2 p-4 sm:p-6 border-t border-border">
+            <Button variant="outline" onClick={props.onClose}>
+              Cancel
+            </Button>
+            <Button onClick={handleSubmit} disabled={!newBookmark().url.trim()}>
+              Save Bookmark
+            </Button>
+          </div>
         </div>
-      </div>
-    </>
+      </>
+    </ModalPortal>
   );
 };