(feat) Image Gallery/Collection

[lzinga]

Adds #7895 but I also removed the documentation for now since I somehow caused some conflict/merge issues with it in the previous PR. I opened this one instead and documentation can be added later since I was struggling to deal with the meta.json file since it was all one one line. (old one #8210)

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 "Image Gallery/Collection" view. It enables users to transform any note into a dynamic image gallery, supporting the upload and organization of visual content. The implementation focuses on a user-friendly experience with features like multi-selection for efficient management, infinite scrolling for performance with large collections, and the ability to create nested galleries for structured organization. This enhancement greatly improves the visual content management capabilities within the application.

Highlights

• New Image Gallery Feature: Introduces a dedicated "Gallery" view type for notes, allowing users to create and manage collections of images and nested galleries.
• Interactive Gallery Management: Implements multi-select operations (Ctrl+Click, Shift+Click, Select All), bulk deletion of selected items, and a "Create New Gallery" button for nested organization.
• Efficient Image Handling: Supports multi-file image uploads with progress tracking and per-file error handling, along with infinite scrolling using virtualized loading (50 items at a time) and IntersectionObserver for smooth performance.
• Enhanced Navigation and Display: Includes a "Back to Parent" button for navigating nested galleries, displays child count badges on gallery folders, and provides context menus for individual gallery items (rename, share, delete).

🧠 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 view for collections, a significant and well-implemented feature. It includes multi-select capabilities, infinite scrolling for performance, image uploading with progress tracking, and support for nested galleries. The code is generally well-structured and uses modern React/Preact patterns effectively. I've identified a potential issue regarding stale data in the UI and a few areas where the code can be simplified and maintainability improved. Overall, this is a great addition to the project.