AOSSIE-Org / AOSSIE-Org/PictoPy

Feat:Add View Mode Toggle (Grid / List / Masonry) for Home page

Open
#633 7 comments 0 reactions 1 assignee Claimed by @JaYRaNa213 View on GitHub
enhancement frontend UI
Dominant language
Python
Stars
283
Forks
679
Avg merge
7d 2h
Merged PRs (30d)
3

Description

### ****Describe** the feature**

hello @rahulharpal1603 sir

### **Description**

Currently, the gallery displays images in only one default layout.
To improve user experience and introduce more flexibility, I implemented a View Mode Toggle that allows users to switch between:

1. Grid View

2. List View

3. Masonry View

This enhancement gives users more control over how they browse images, especially for large galleries.

### What This Feature Includes
##### **1. New Redux Slice: viewMode**

File added:
```
frontend/src/features/viewMode/viewModeSlice.ts

This slice stores the selected view mode and updates the UI instantly.
```
##### 2. New Component: ViewModeToggle

###### File added:
```
frontend/src/components/ViewModeToggle.tsx

This component displays three toggle buttons (Grid, List, Masonry) and allows switching between layouts.
```
##### **3. Updated Gallery Renderer: GalleryView.tsx**

###### File updated:
```
frontend/src/components/GalleryView.tsx

This file now renders images based on the selected view mode:
```

##### **4. Updated Home Page Integration**

###### File updated:
```
frontend/src/pages/Home/Home.tsx

The view mode toggle is added above the gallery, and layout switches smoothly without affecting existing chronological mode.
```
### Why This Feature Is Useful
```
Adds flexibility and improves overall user experience

Provides multiple ways to view large image collections

Masonry layout works better for mixed aspect ratios

List layout is useful for viewing filenames and metadata

Does not interfere with the existing chronological view
```
### Files Involved
```
frontend/src/features/viewMode/viewModeSlice.ts

frontend/src/components/ViewModeToggle.tsx

frontend/src/components/GalleryView.tsx

frontend/src/pages/Home/Home.tsx ( some updates)

frontend/src/app/store.ts (reducer added)
```

### Add ScreenShots

#### Grid View

Image

#### List View

Image

#### Masonry View

Image

### Record

- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue

### Checklist before Submitting.

- [x] Have you updated docs for it?.
- [ ] Have you added unit tests?.
- [ ] Have you made sure unit tests pass?
- [x] Have you made sure code formatting is correct?
- [x] Does it contain any style related issues?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.