diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json index a8ccb96cd..37a10c9a6 100644 --- a/apps/client/src/translations/en/translation.json +++ b/apps/client/src/translations/en/translation.json @@ -2282,6 +2282,7 @@ "drop_images_here": "Drop Images Here", "back_to_parent": "Back To Parent", "image_count": "{{count}} image", - "image_count_other": "{{count}} images" + "image_count_other": "{{count}} images", + "empty_gallery": "This gallery is empty. Upload images to make them appear." } } diff --git a/apps/client/src/widgets/collections/gallery/index.css b/apps/client/src/widgets/collections/gallery/index.css index 043a34aa6..b948e67e1 100644 --- a/apps/client/src/widgets/collections/gallery/index.css +++ b/apps/client/src/widgets/collections/gallery/index.css @@ -223,3 +223,18 @@ font-size: 0.85em; opacity: 0.7; } + +.gallery-empty-help { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 48px 24px; + margin: 24px; + border-radius: 8px; + background-color: var(--accented-background-color); + border: 2px dashed var(--main-border-color); + color: var(--muted-text-color); + font-size: 14px; +} diff --git a/apps/client/src/widgets/collections/gallery/index.tsx b/apps/client/src/widgets/collections/gallery/index.tsx index d0b0aedf0..5349e7c84 100644 --- a/apps/client/src/widgets/collections/gallery/index.tsx +++ b/apps/client/src/widgets/collections/gallery/index.tsx @@ -15,6 +15,7 @@ import server from "../../../services/server"; import toast from "../../../services/toast"; import tree from "../../../services/tree"; import ActionButton from "../../react/ActionButton"; +import Alert from "../../react/Alert"; import { FormFileUploadActionButton } from "../../react/FormFileUpload"; import type { ViewModeProps } from "../interface"; import { useFilteredNoteIds } from "../legacy/utils"; @@ -232,6 +233,8 @@ export default function GalleryView({ note, noteIds: unfilteredNoteIds }: ViewMo } }; + const isEmpty = sortedNotes.length === 0; + return (