Implement search and filter functionality across all screens

[SahilKumar75]

Problem

Users cannot easily find specific content within screens that display large amounts of data. Search and filtering capabilities are limited or missing entirely.

Issues Identified

1. HomeScreen - Timetable Search

• No search: Can't search for specific classes, teachers, or rooms
• No filters: Can't filter by subject, teacher, room, or class type
• No date range: Can't view timetable for custom date ranges
• No quick jump: Can't quickly jump to a specific date

2. MyspaceScreen - Limited Search

• Basic text search only: No advanced filters
• No filter by type: Can't filter by notes, photos, links, files
• No date range filter: Can't search within specific time periods
• No tag filtering: Tags exist but can't filter by them
• No sort options: Can't sort by date, relevance, or subject

3. CalorieScreen - No Search

• No meal history search: Can't find past meals
• No date picker: Can't view previous days' logs
• No meal templates: Can't search saved meal presets
• No nutrition search: Can't search by macro content

4. HangoutScreen - Limited Discovery

• No room search: Can't search room list by name or type
• No filter by type: Can't filter Study/Watch/Call rooms
• No friend search: Friend list not searchable
• No room history: Can't see past rooms joined

Proposed Solutions

1. HomeScreen Enhancements

Search Bar

<View style={styles.searchBar}>
  <Ionicons name="search" size={18} color={theme.colors.textMuted} />
  <TextInput
    placeholder="Search classes, teachers, rooms..."
    value={searchQuery}
    onChangeText={setSearchQuery}
  />
</View>

Filter Chips

• Subject filter (DBMS, Math, Physics, etc.)
• Teacher filter
• Room filter
• Class type (Lecture, Lab, Tutorial)
• Time range (Morning, Afternoon, Evening)

Quick Actions

• Jump to date picker
• View week/month selector
• Filter by campus/pattern

2. MyspaceScreen Enhancements

Advanced Search Panel

<View style={styles.advancedSearch}>
  <FilterChip label="Type" options={['All', 'Photo', 'Note', 'Link', 'File']} />
  <FilterChip label="Subject" options={subjects} />
  <FilterChip label="Date" onPress={openDateRangePicker} />
  <FilterChip label="Tags" options={allTags} />
</View>

Sort Options

• Relevance (default for search)
• Date added (newest/oldest)
• Subject (alphabetical)
• Recently viewed

Saved Searches

• Save frequent search queries
• Quick access to saved searches
• Search history with suggestions

3. CalorieScreen Enhancements

Date Navigation

<View style={styles.dateNav}>
  <Pressable onPress={goToPreviousDay}>
    <Ionicons name="chevron-back" />
  </Pressable>
  <Pressable onPress={openDatePicker}>
    <Text>{formatDate(selectedDate)}</Text>
  </Pressable>
  <Pressable onPress={goToNextDay}>
    <Ionicons name="chevron-forward" />
  </Pressable>
</View>

Meal History Search

• Search past meals by name
• Filter by date range
• View weekly/monthly summaries
• Export meal logs

Meal Templates

• Save frequent meals as templates
• Search and reuse templates
• Share templates with friends

4. HangoutScreen Enhancements

Room Discovery

<View style={styles.roomFilters}>
  <SearchBar placeholder="Search rooms..." />
  <FilterRow>
    <FilterChip label="All" active />
    <FilterChip label="Study" />
    <FilterChip label="Watch" />
    <FilterChip label="Call" />
  </FilterRow>
</View>

Friend Management

• Search friends by name
• Filter by online/offline status
• Sort by recent activity
• Add to favorites

Room History

• View recently joined rooms
• Rejoin past rooms quickly
• See room statistics

Implementation Details

Search Component

Create reusable SearchBar component:

export function SearchBar({
  value,
  onChangeText,
  placeholder,
  onClear,
  autoFocus = false,
}) {
  return (
    <View style={styles.searchBar}>
      <Ionicons name="search" size={18} color={theme.colors.textMuted} />
      <TextInput
        value={value}
        onChangeText={onChangeText}
        placeholder={placeholder}
        style={styles.searchInput}
        autoFocus={autoFocus}
        returnKeyType="search"
      />
      {value ? (
        <Pressable onPress={onClear}>
          <Ionicons name="close-circle" size={18} />
        </Pressable>
      ) : null}
    </View>
  );
}

Filter Chip Component

Create reusable FilterChip component:

export function FilterChip({
  label,
  active = false,
  onPress,
  count,
}) {
  return (
    <Pressable
      style={[styles.filterChip, active && styles.filterChipActive]}
      onPress={onPress}
    >
      <Text style={[styles.filterChipText, active && styles.filterChipTextActive]}>
        {label}
      </Text>
      {count ? (
        <View style={styles.filterCount}>
          <Text style={styles.filterCountText}>{count}</Text>
        </View>
      ) : null}
    </Pressable>
  );
}

Date Range Picker

Implement date range selection:

• Start date picker
• End date picker
• Quick ranges (Today, This Week, This Month, Custom)
• Visual calendar view

Search Performance

Optimization Strategies

1. Debounce search input (300ms delay)
2. Index content for faster searching
3. Cache search results for recent queries
4. Lazy load results (paginate if needed)
5. Show search suggestions as user types

Search Algorithm

• Fuzzy matching for typos
• Weighted results (title > body > tags)
• Highlight matching terms
• Show match context

User Experience

Search States

1. Empty state: Show search tips and suggestions
2. Searching: Show loading indicator
3. Results: Show count and results
4. No results: Suggest alternatives or clear filters

Filter UX

• Show active filter count badge
• Clear all filters button
• Persist filters in session
• Animate filter application

Acceptance Criteria

HomeScreen

• Search bar filters timetable entries
• Filter by subject, teacher, room, type
• Quick date navigation
• Search highlights matching text

MyspaceScreen

• Advanced search with multiple filters
• Sort options implemented
• Filter by type, subject, date, tags
• Saved searches functionality

CalorieScreen

• Date navigation (prev/next/picker)
• Meal history search
• Meal templates with search
• Weekly/monthly view

HangoutScreen

• Room search and filters
• Friend search
• Room history view
• Filter by room type

Priority

High - Search is fundamental for content-heavy apps

Related Issues

• Implement consistent empty states across all screens #117 (Empty states for no search results)
• Add loading states and skeleton screens for better perceived performance #114 (Loading states for search)
• Improve error handling and user feedback mechanisms #115 (Error handling for search failures)

[SahilKumar75]

⏳ PARTIALLY RESOLVED

Created search and filter components, integration pending:

What was done:

• ✅ Created SearchBar component with clear functionality
• ✅ Created FilterChip component with count badges
• ✅ Both components fully accessible
• ✅ Proper touch targets (44x44pt minimum)
• ✅ Screen reader support

Components created:

SearchBar:

<SearchBar
  value={searchQuery}
  onChangeText={setSearchQuery}
  placeholder="Search classes, teachers, rooms..."
  onClear={() => setSearchQuery('')}
/>

FilterChip:

<FilterChip
  label="Study"
  active={activeFilter === 'study'}
  onPress={() => setActiveFilter('study')}
  count={12}
/>

Still needed for full resolution:

• Integrate SearchBar into HomeScreen
• Integrate SearchBar into MyspaceScreen
• Integrate SearchBar into CalorieScreen
• Add filter logic to HangoutScreen
• Implement search algorithms
• Add debouncing (300ms)
• Implement search history
• Add saved searches

The foundation is complete. Next step is screen integration and search logic implementation.

See RESOLVED_ISSUES.md for integration examples.

Commit: 8f084ad