(feat) Image Gallery/Collection

[lzinga]

Adds #7895

To make a gallery all you do is make a new note set the collection type to gallery and you can upload images to it which will create child notes as file type and display them in the gallery. For any child gallery it will show up as a folder type in the parent gallery.

Multi-Select Operations

• Ctrl+Click: Toggle items
• Shift+Click: Range selection
• Select All button
• Bulk deletes with confirmation

Infinite Scroll

• Virtual scrolling (loads 50 items at a time) (loads the data but only shows it when scrolling down)
• IntersectionObserver for smooth performance

Image Upload

• Multi-file upload with progress tracking
• Per-file error handling
• Toast notifications for status

Nested Galleries

• "New Gallery" button creates child galleries
• Uses _template_gallery template
• Back button for parent navigation
• Child count badges on folders

I kept it somewhat light weight to make the possibility of expanding on it in the future easier depending what people may like or dislike about it.

What it looks like in the tree

what it looks like in the note itself.

As note some changes are small eslint updates that kept getting forced. I tried to undo them but eventually thought it would probably be better to keep them.

[gemini-code-assist]

Summary of Changes

Hello @lzinga, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request delivers a significant new feature: an interactive Image Gallery/Collection. It allows users to transform any note into a gallery, where they can upload, view, and organize images and nested galleries. The implementation focuses on a smooth user experience with features like infinite scrolling for large collections, robust multi-selection and bulk deletion capabilities, and intuitive image upload with progress feedback. This enhancement greatly improves the application's ability to manage and display visual content.

Highlights

• New Gallery View Type: Introduces a dedicated "Gallery" view for notes, allowing users to create image collections and manage them visually.
• Multi-Select Operations: Implements advanced selection capabilities including Ctrl+Click for toggling items, Shift+Click for range selection, a "Select All" button, and bulk deletion with confirmation.
• Infinite Scroll: Features virtualized scrolling that loads items in batches (50 at a time) and uses IntersectionObserver for smooth performance when browsing large galleries.
• Image Upload Functionality: Supports multi-file uploads with progress tracking, per-file error handling, and toast notifications for status updates, making it easy to add multiple images at once.
• Nested Galleries: Enables the creation of child galleries within a parent gallery, complete with a "New Gallery" button, usage of a _template_gallery template, back navigation to parent galleries, and child count badges on folder icons for better organization.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new gallery/collection view, which is a significant and well-implemented feature. The implementation includes multi-select, infinite scroll, image uploads, and support for nested galleries. The code is generally clean and follows existing patterns in the application.

I've provided a few suggestions to improve performance by using useMemo for derived data, refactoring some duplicated logic for deletion to improve maintainability, and addressing minor issues like inline styles and hardcoded strings.

Overall, this is a great addition to the project.

[lzinga]

• Updated it so the toolbar does not show beneath the default empty collection.
• Updated translations.
• Updated inline css to classes.
• Added that it shows subchild mindmap/mermaid/etc attachments as images in the gallery.
• Added the share badge which tells you if the item is shared or not.
• Added the share toggle in the context menu when right clicking an item.
• Added badges onto the items to show what kind of note they are. Image/canvas/mermaid/mindmap

[lzinga]

/gemini review

[gemini-code-assist]

Code Review

This pull request introduces a new and comprehensive gallery/collection feature. The implementation is well-structured, covering multi-select operations, infinite scrolling, image uploads, and support for nested galleries. The code is generally of high quality. I have identified a couple of areas for improvement, one related to CSS maintainability and a potential bug regarding stale data in gallery cards, for which I've provided suggestions.