Restructured the Discover page to prevent the entire page from
refreshing when selecting categories or updating settings
1. Component Separation
-Split the page into three main components:
-DiscoverHeader: Contains the title, settings button, and category navigation
-DiscoverContent: Contains the grid of articles with its own loading state
-PreferencesModal: Manages the settings modal with temporary state
2. Optimized Rendering
-Used React.memo for all components to prevent unnecessary re-renders
-Each component only receives the props it needs
-The header remains stable while only the content area updates
3. Improved Loading States
3.1. Added separate loading states:
-Initial loading for the first page load
-Content-only loading when changing categories or preferences
-Loading spinners now only appear in the content area when changing
categories
3.2. Better State Management
-Main state is managed in the parent component
-Modal uses temporary state that only updates the main state after saving
-Clear separation of concerns between components
These changes create a more polished user experience where the header
and sidebar remain stable while only the content area refreshes when
needed. The page now feels more responsive and app-like, rather than
having the entire page refresh on every interaction
Enhanced the Discover section with personalization f
eatures and category navigation
1. Backend Enhancements
1.1. Database Schema Updates
-Added a user Preferences table to store user
category preferences
-Set default preferences to AI and Technology
1.2. Category-Based Search
-Created a comprehensive category system with specialized search queries
for each category
-Implemented 11 categories: AI, Technology, Current News, Sports, Money,
Gaming, Weather, Entertainment, Art & Culture, Science, Health, and Travel
-Each category searches relevant websites with appropriate keywords
-Updated the search sources for each category with more reputable websites
1.3. New API Endpoints
-Enhanced the main /discover endpoint to support category filtering and
preference-based content
-Added /discover/preferences endpoints for getting and saving user
preferences
2. Frontend Improvements
2.1 Category Navigation Bar
-Added a horizontal scrollable category bar at the top of the Discover
page
-Active category is highlighted with the primary color with smooth
scrolling animation via tight/left buttons
"For You" category shows personalised content based on saved preferences.
2.2 Personalization Feature
- Added a Settings button in the top-right corner
- Implemented a personalisation modal that allows users to select their
preferred categories
- Implemented language checkboxes grid for 12 major languages that allow
users to select multiple languages for their preferred language in the
results
-Updated the backend to filter search results by the selected language
- Preferences are saved to the backend and persist between sessions
3.2 UI Enhancements
Improved layout with better spacing and transitions
Added hover effects for better interactivity
Ensured the design is responsive across different screen sizes
How It Works
-Users can click on category tabs to view news specific to that category
The "For You" tab shows a personalized feed based on the user's saved
preferences
-Users can customize their preferences by clicking the Settings icon and
selecting categories and preferered language(s).
-When preferences are saved, the "For You" feed automatically updates to
reflect those preferences
-These improvements make the Discover section more engaging and
personalized, allowing users to easily find content that interests
them across a wide range of categories.
1. Search Functionality:
-Added a search box with search icon and "Search your threads..." placeholder
-Real-time filtering of threads as you type
-Clear button (X) when text is entered
2. Thread Count Display:
-Added "You have X threads in Perplexica" below the search box
-Only shows in normal mode (hidden during selection)
3. Multiple delete functionality:
-"Select" button in the top right below Search Box
-Checkboxes that appear on hover and when in selection mode
-Selection mode header showing count and actions
-When in selection mode, shows "X selected thread(s)" on the left
-Action buttons (Select all, Cancel, Delete Selected) on the right
-Disabled Delete Selected button when no threads are selected
-Confirmation dialog using the new BatchDeleteChats component
4. Terminology Update:
-Changed all instances of "chats" to "threads" throughout the interface
