feat: Gallery Search & Filter - Find Images Easily

[yadavchiragg]

Summary

Added search and filter functionality to gallery for easier image discovery and organization.

Features Added

🔍 Search

• Search images by title or description
• Case-insensitive search
• Highlights matching terms in results
• Shows result count
• Clear search button

🎯 Sort Options

• Newest First - Most recent uploads
• Oldest First - Earliest uploads
• Name (A-Z) - Alphabetical by title
• Largest First - By file size

🎨 UI Improvements

• Clean search bar with icon
• Dropdown sort selector
• Active filter indicators
• Clear all filters button
• No results state with helpful message
• Responsive design (mobile-friendly)

Screenshots

Technical Implementation

Backend (app.py)

# Search with SQLAlchemy ilike
query.filter(db.or_(
    Image.title.ilike(f"%{search_query}%"),
    Image.description.ilike(f"%{search_query}%")
))

# Dynamic sorting
if sort_by == 'newest':
    query.order_by(Image.uploaded_at.desc())

Frontend (gallery.html)

• Form-based search with GET parameters
• Auto-submit on sort change
• Search term highlighting with <mark> tag
• Clean, modern UI

User Benefits

Before:

• Had to scroll through all images
• No way to find specific images
• No organization options

After:

• Find images instantly by search
• Organize by date, name, or size
• See result counts
• Clear visual feedback

Testing

Tested scenarios:

• ✅ Search with results
• ✅ Search with no results
• ✅ Empty search (shows all)
• ✅ Sort without search
• ✅ Search + sort combined
• ✅ Special characters in search
• ✅ Case-insensitive matching
• ✅ Clear filters
• ✅ Mobile responsiveness

Performance

• Maintains 50 image limit for performance
• Efficient database queries with filters
• No JavaScript required (works with JS disabled)
• Fast page loads

Future Enhancements

Possible additions:

• Advanced filters (date range, file type)
• Save search preferences
• Search autocomplete
• Filter by tags
• Pagination for large results

Addresses Mentor Feedback

Improves existing gallery feature with practical, user-requested functionality - quality improvement over new feature.

[gemini-code-assist]

Summary of Changes

Hello @yadavchiragg, 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 significantly upgrades the application's core functionality by introducing advanced image management features for users and administrators. It also streamlines the deployment process through Dockerization and enhances overall application stability and user feedback with improved error handling and a comprehensive testing suite.

Highlights

• Enhanced Gallery Functionality: Implemented robust search capabilities allowing users to find images by title or description (case-insensitive) and introduced multiple sorting options (Newest First, Oldest First, Name A-Z, Largest First) for better image organization.
• Admin Dashboard: Added a comprehensive admin dashboard with routes for managing users and images, including viewing user details, toggling admin status, and deleting users or images. This provides powerful administrative control over the application's content and users.
• Docker Integration & Deployment: Introduced full Docker support with a Dockerfile and docker-compose.yml for easy local development and production deployment. A detailed DOCKER.md guide covers setup, persistent data, health checks, and production best practices.
• Improved User Experience & UI: Refined the user interface with a clean search bar, dropdown sort selector, active filter indicators, and a 'clear all filters' button. Responsive design ensures a mobile-friendly experience, and a 'no results' state provides helpful messages.
• Comprehensive Testing & Error Handling: Expanded the test suite with pytest to cover authentication, image uploads, admin features, and security aspects. Custom error pages (403, 404, 413, 500) have been added for a more user-friendly experience during unexpected events.

🧠 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.

Ignored Files

• Ignored by pattern: .github/workflows/** (1)
  • .github/workflows/tests.yml

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

The pull request introduces valuable features such as Docker support, a comprehensive admin dashboard, and search/filter functionality for the gallery. The Docker deployment guide is well-documented, and the new admin features significantly enhance the application's manageability. However, several critical and high-severity issues related to code organization, security, and efficiency need to be addressed. Key areas for improvement include refactoring the application's configuration to use the dedicated config.py file, eliminating duplicated code for admin routes and decorators, addressing a potential XSS vulnerability in the gallery's search highlighting, and optimizing database queries for performance.

[mdxabu]

@yadavchiragg, Please direct your PR to the dev branch!

[yadavchiragg]

@mdxabu Done Sir...