[PR #260] [MERGED] feat: Add persistent whitelist with export/import functionality #389

New issue

Closed

opened 2026-03-07 20:16:46 +03:00 by kerem · 0 comments

kerem commented

2026-03-07 20:16:46 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/davidarroyo1234/InstagramUnfollowers/pull/260
Author: @Kl4rkx
Created: 12/7/2025
Status: ✅ Merged
Merged: 12/14/2025
Merged by: @davidarroyo1234

Base: master ← Head: whitelistExportable

📝 Commits (4)

86b85b3 fix: Resolve select all checkbox bug and progress bar display issues
ceca1f1 Merge pull request #2 from Kl4rkx/fixSelectAllBug
fbc10c9 feat: Add persistent whitelist with export/import functionality
fc39f82 Merge branch 'master' into whitelistExportable

📊 Changes

12 files changed (+1311 additions, -152 deletions)

View changed files

📝 README.md (+22 -2)
📝 assets/settings.png (+0 -0)
➕ assets/settings_whitelist.png (+0 -0)
📝 public/index.html (+1 -1)
📝 src/components/Searching.tsx (+36 -31)
📝 src/components/SettingMenu.tsx (+81 -56)
📝 src/components/Toolbar.tsx (+7 -0)
➕ src/components/WhitelistManager.tsx (+152 -0)
📝 src/main.tsx (+15 -4)
📝 src/styles/_helpers.scss (+268 -43)
📝 src/styles/main.scss (+619 -15)
➕ src/utils/whitelist-manager.ts (+110 -0)

📄 Description

🎯 Overview

This PR adds a comprehensive whitelist management system that allows users to persist, export, and import their whitelisted accounts across sessions.

✨ New Features

Whitelist Management

Persistent Storage: Whitelist automatically saves to localStorage and persists between sessions
Export Functionality: Download whitelist as JSON file for backup purposes
Import Options:
- Merge mode: Add imported users to existing whitelist (skips duplicates)
- Replace mode: Completely replace current whitelist with imported data
Clear Whitelist: Remove all whitelisted users with confirmation dialog
Visual Counter: Shows number of whitelisted users in sidebar during scanning

UI/UX Improvements

WhitelistManager component integrated into Settings menu
Success/error messages with smooth animations
Fully responsive design across all screen sizes (desktop, tablet, mobile)
Optimized sidebar spacing to ensure all controls are visible without excessive scrolling
Custom scrollbar styling for better aesthetics

🔧 Technical Details

New Files

src/components/WhitelistManager.tsx - Whitelist management UI component
src/utils/whitelist-manager.ts - Core whitelist utility functions (export, import, clear, merge)

Modified Files

src/components/SettingMenu.tsx - Integrated WhitelistManager component
src/components/Toolbar.tsx - Added whitelist state management props
src/components/Searching.tsx - Added whitelist counter display
src/main.tsx - Connected whitelist state and persistence logic
src/styles/_helpers.scss - Enhanced Settings modal styles with responsive design
src/styles/main.scss - Added WhitelistManager styles and sidebar optimizations
README.md - Updated documentation with new features

🎨 Design Principles

No artificial gradients or shadows - Clean, flat design
Consistent color scheme using colors (#007aff, #34c759, #ff3b30)
Proper spacing and typography with negative letter-spacing for readability
Accessible touch targets with appropriate padding and sizing
Smooth transitions (0.15s) without distracting animations

📱 Responsive Breakpoints

Desktop (≥1920x1080): Full-sized components with optimal spacing
Laptop (≤1440px): Slightly reduced sizes
Tablet Landscape (≤1024px): Compact layout
Tablet Portrait (≤768px): Stacked elements
Mobile (≤480px): Ultra-compact with full-width buttons

🧪 Testing

Tested on:

✅ Chrome/Edge (Desktop & Mobile)
✅ Firefox (Desktop & Mobile)
✅ Screen resolutions: 1920x1080, 1440x900, 768x1024, 375x667

📝 Usage

Click Settings (⚙️) button
Scroll to "Whitelist Management" section
Use Export/Import/Clear buttons as needed
Whitelist persists automatically between sessions

🔒 Privacy

All data is stored locally in the browser's localStorage. No external servers or APIs are used for whitelist management.

🤝 Contribution

This is a quality-of-life improvement that enhances the user experience by allowing users to:

Backup their whitelist data
Transfer whitelist between devices/browsers
Recover from accidental clearing
Maintain consistent whitelists across sessions

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/davidarroyo1234/InstagramUnfollowers/pull/260 **Author:** [@Kl4rkx](https://github.com/Kl4rkx) **Created:** 12/7/2025 **Status:** ✅ Merged **Merged:** 12/14/2025 **Merged by:** [@davidarroyo1234](https://github.com/davidarroyo1234) **Base:** `master` ← **Head:** `whitelistExportable` --- ### 📝 Commits (4) - [`86b85b3`](https://github.com/davidarroyo1234/InstagramUnfollowers/commit/86b85b33d5567d0734364a1a9024a428b5f27f32) fix: Resolve select all checkbox bug and progress bar display issues - [`ceca1f1`](https://github.com/davidarroyo1234/InstagramUnfollowers/commit/ceca1f1a98e01ee6e74b8f57cd0fa932db711686) Merge pull request #2 from Kl4rkx/fixSelectAllBug - [`fbc10c9`](https://github.com/davidarroyo1234/InstagramUnfollowers/commit/fbc10c955a9f087b0006b3c3bd93143fcae5ba6e) feat: Add persistent whitelist with export/import functionality - [`fc39f82`](https://github.com/davidarroyo1234/InstagramUnfollowers/commit/fc39f82a44f87c6494a4c822418837cf3c071a01) Merge branch 'master' into whitelistExportable ### 📊 Changes **12 files changed** (+1311 additions, -152 deletions) <details> <summary>View changed files</summary> 📝 `README.md` (+22 -2) 📝 `assets/settings.png` (+0 -0) ➕ `assets/settings_whitelist.png` (+0 -0) 📝 `public/index.html` (+1 -1) 📝 `src/components/Searching.tsx` (+36 -31) 📝 `src/components/SettingMenu.tsx` (+81 -56) 📝 `src/components/Toolbar.tsx` (+7 -0) ➕ `src/components/WhitelistManager.tsx` (+152 -0) 📝 `src/main.tsx` (+15 -4) 📝 `src/styles/_helpers.scss` (+268 -43) 📝 `src/styles/main.scss` (+619 -15) ➕ `src/utils/whitelist-manager.ts` (+110 -0) </details> ### 📄 Description ## 🎯 Overview This PR adds a comprehensive whitelist management system that allows users to persist, export, and import their whitelisted accounts across sessions. ## ✨ New Features ### Whitelist Management - **Persistent Storage**: Whitelist automatically saves to localStorage and persists between sessions - **Export Functionality**: Download whitelist as JSON file for backup purposes - **Import Options**: - Merge mode: Add imported users to existing whitelist (skips duplicates) - Replace mode: Completely replace current whitelist with imported data - **Clear Whitelist**: Remove all whitelisted users with confirmation dialog - **Visual Counter**: Shows number of whitelisted users in sidebar during scanning ### UI/UX Improvements - WhitelistManager component integrated into Settings menu - Success/error messages with smooth animations - Fully responsive design across all screen sizes (desktop, tablet, mobile) - Optimized sidebar spacing to ensure all controls are visible without excessive scrolling - Custom scrollbar styling for better aesthetics ## 🔧 Technical Details ### New Files - `src/components/WhitelistManager.tsx` - Whitelist management UI component - `src/utils/whitelist-manager.ts` - Core whitelist utility functions (export, import, clear, merge) ### Modified Files - `src/components/SettingMenu.tsx` - Integrated WhitelistManager component - `src/components/Toolbar.tsx` - Added whitelist state management props - `src/components/Searching.tsx` - Added whitelist counter display - `src/main.tsx` - Connected whitelist state and persistence logic - `src/styles/_helpers.scss` - Enhanced Settings modal styles with responsive design - `src/styles/main.scss` - Added WhitelistManager styles and sidebar optimizations - `README.md` - Updated documentation with new features ## 🎨 Design Principles - **No artificial gradients or shadows** - Clean, flat design - **Consistent color scheme** using colors (#007aff, #34c759, #ff3b30) - **Proper spacing and typography** with negative letter-spacing for readability - **Accessible touch targets** with appropriate padding and sizing - **Smooth transitions** (0.15s) without distracting animations ## 📱 Responsive Breakpoints - Desktop (≥1920x1080): Full-sized components with optimal spacing - Laptop (≤1440px): Slightly reduced sizes - Tablet Landscape (≤1024px): Compact layout - Tablet Portrait (≤768px): Stacked elements - Mobile (≤480px): Ultra-compact with full-width buttons ## 🧪 Testing Tested on: - ✅ Chrome/Edge (Desktop & Mobile) - ✅ Firefox (Desktop & Mobile) - ✅ Screen resolutions: 1920x1080, 1440x900, 768x1024, 375x667 ## 📝 Usage 1. Click Settings (⚙️) button 2. Scroll to "Whitelist Management" section 3. Use Export/Import/Clear buttons as needed 4. Whitelist persists automatically between sessions ## 🔒 Privacy All data is stored locally in the browser's localStorage. No external servers or APIs are used for whitelist management. ## 🤝 Contribution This is a quality-of-life improvement that enhances the user experience by allowing users to: - Backup their whitelist data - Transfer whitelist between devices/browsers - Recover from accidental clearing - Maintain consistent whitelists across sessions --- --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>