mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
fix: wire up URL import to home page dropzone and prevent click-through
Pass onUrlImport handler through AppLayout to Dropzone so URL-imported files are loaded on the home page. Add stopPropagation on the modal overlay to prevent clicks from reaching elements underneath.
This commit is contained in:
@@ -88,7 +88,10 @@ export function UrlImportModal({ onClose, onImport }: UrlImportModalProps) {
|
|||||||
}, [handleClose]);
|
}, [handleClose]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
<div
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
{/* Overlay */}
|
{/* Overlay */}
|
||||||
<div
|
<div
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
|
|||||||
@@ -18,9 +18,15 @@ interface AppLayoutProps {
|
|||||||
children?: React.ReactNode;
|
children?: React.ReactNode;
|
||||||
showToolPanel?: boolean;
|
showToolPanel?: boolean;
|
||||||
onFiles?: (files: File[]) => void;
|
onFiles?: (files: File[]) => void;
|
||||||
|
onUrlImport?: (file: File) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayoutProps) {
|
export function AppLayout({
|
||||||
|
children,
|
||||||
|
showToolPanel = true,
|
||||||
|
onFiles,
|
||||||
|
onUrlImport,
|
||||||
|
}: AppLayoutProps) {
|
||||||
const [settingsOpen, setSettingsOpen] = useState(false);
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
||||||
const [helpOpen, setHelpOpen] = useState(false);
|
const [helpOpen, setHelpOpen] = useState(false);
|
||||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||||
@@ -111,7 +117,7 @@ export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayout
|
|||||||
|
|
||||||
<main className={cn("flex-1 flex flex-col overflow-hidden", isMobile && "pt-12 pb-16")}>
|
<main className={cn("flex-1 flex flex-col overflow-hidden", isMobile && "pt-12 pb-16")}>
|
||||||
<div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
|
<div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
|
||||||
{children || <Dropzone onFiles={onFiles} accept="image/*" />}
|
{children || <Dropzone onFiles={onFiles} onUrlImport={onUrlImport} accept="image/*" />}
|
||||||
</div>
|
</div>
|
||||||
{!isMobile && (
|
{!isMobile && (
|
||||||
<div className="text-center text-xs text-muted-foreground py-2 border-t border-border">
|
<div className="text-center text-xs text-muted-foreground py-2 border-t border-border">
|
||||||
|
|||||||
@@ -71,11 +71,18 @@ export function HomePage() {
|
|||||||
[setFiles, reset],
|
[setFiles, reset],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const handleUrlImport = useCallback(
|
||||||
|
(file: File) => {
|
||||||
|
setFiles([file]);
|
||||||
|
},
|
||||||
|
[setFiles],
|
||||||
|
);
|
||||||
|
|
||||||
const hasFile = files.length > 0;
|
const hasFile = files.length > 0;
|
||||||
|
|
||||||
// If no file uploaded, show default layout (tool panel + dropzone)
|
// If no file uploaded, show default layout (tool panel + dropzone)
|
||||||
if (!hasFile) {
|
if (!hasFile) {
|
||||||
return <AppLayout onFiles={handleFiles} />;
|
return <AppLayout onFiles={handleFiles} onUrlImport={handleUrlImport} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
// File uploaded — show tool selector on left, image preview on right
|
// File uploaded — show tool selector on left, image preview on right
|
||||||
|
|||||||
Vendored
+30
@@ -0,0 +1,30 @@
|
|||||||
|
https://picsum.photos/id/10/800/600
|
||||||
|
https://picsum.photos/id/20/1024/768
|
||||||
|
https://picsum.photos/id/37/800/600
|
||||||
|
https://picsum.photos/id/42/640/480
|
||||||
|
https://picsum.photos/id/55/1280/720
|
||||||
|
https://picsum.photos/id/100/800/800
|
||||||
|
https://picsum.photos/id/119/500/500
|
||||||
|
https://picsum.photos/id/137/1920/1080
|
||||||
|
https://picsum.photos/id/160/600/400
|
||||||
|
https://picsum.photos/id/180/300/300
|
||||||
|
https://picsum.photos/id/200/800/600
|
||||||
|
https://picsum.photos/id/237/400/300
|
||||||
|
https://picsum.photos/id/256/1024/768
|
||||||
|
https://picsum.photos/id/292/800/600
|
||||||
|
https://picsum.photos/id/338/640/480
|
||||||
|
https://picsum.photos/id/366/1280/720
|
||||||
|
https://picsum.photos/id/399/800/800
|
||||||
|
https://picsum.photos/id/433/500/500
|
||||||
|
https://picsum.photos/id/501/1920/1080
|
||||||
|
https://picsum.photos/id/550/600/400
|
||||||
|
https://picsum.photos/seed/snapotter1/800/600
|
||||||
|
https://picsum.photos/seed/snapotter2/1024/768
|
||||||
|
https://picsum.photos/seed/snapotter3/640/480
|
||||||
|
https://picsum.photos/id/670/800/600?grayscale
|
||||||
|
https://picsum.photos/id/700/1024/768?blur=2
|
||||||
|
https://picsum.photos/id/870/800/600?grayscale&blur=2
|
||||||
|
https://picsum.photos/id/1002/400/400
|
||||||
|
https://picsum.photos/id/1015/800/600
|
||||||
|
https://picsum.photos/id/1025/1280/720
|
||||||
|
https://picsum.photos/id/1043/1920/1080
|
||||||
Reference in New Issue
Block a user