Add searchable category inputs for filter and add-resource flow

Author: thughari

frontend/src/app/components/resources/resources.component.html

@@ -61,13 +61,18 @@ <h2 class="text-lg font-semibold text-white">Search & filter resources</h2>
         </label>
 
         <label>
-          <span class="sr-only">Filter by category</span>
-          <select [ngModel]="selectedCategoryFilter()" (ngModelChange)="onCategoryFilterChange($event)"
-            class="w-full rounded-lg border border-gray-700 bg-[#0B0E14] px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500">
+          <span class="sr-only">Search by category</span>
+          <div class="relative">
+            <i class="ph ph-funnel absolute left-3 top-1/2 -translate-y-1/2 text-gray-500"></i>
+            <input [ngModel]="selectedCategoryFilter()" (ngModelChange)="onCategoryFilterChange($event)" list="resource-category-filter-list"
+              placeholder="All categories (type to search)"
+              class="w-full rounded-lg border border-gray-700 bg-[#0B0E14] pl-10 pr-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500" />
+          </div>
+          <datalist id="resource-category-filter-list">
             @for (categoryOption of categoryOptions(); track categoryOption) {
               <option [value]="categoryOption">{{ categoryOption === 'all' ? 'All categories' : categoryOption }}</option>
             }
-          </select>
+          </datalist>
         </label>
 
         <label>
@@ -180,9 +185,16 @@ <h2 class="text-lg sm:text-xl font-bold text-white">Add a resource</h2>
         <div class="grid gap-3 sm:gap-4 md:grid-cols-2">
           <input [(ngModel)]="title" type="text" placeholder="Resource title"
             class="w-full rounded-lg border border-gray-700 bg-[#0B0E14] px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500" />
-          <input [(ngModel)]="category" type="text" placeholder="Category (e.g., DSA, Resume, Sheets)"
+          <input [(ngModel)]="category" type="text" list="resource-category-add-list" placeholder="Choose category"
             class="w-full rounded-lg border border-gray-700 bg-[#0B0E14] px-3 py-2.5 text-sm focus:outline-none focus:border-indigo-500" />
         </div>
+        <datalist id="resource-category-add-list">
+          @for (categoryOption of categoryOptions(); track categoryOption) {
+            @if (categoryOption !== 'all') {
+              <option [value]="categoryOption"></option>
+            }
+          }
+        </datalist>
 
         @if (contributionMode === 'link') {
           <input [(ngModel)]="url" type="url" placeholder="https://..."

frontend/src/app/components/resources/resources.component.ts

@@ -9,6 +9,16 @@ import { LogoComponent } from '../ui/logo/logo.component';
 
 const PAGE_SIZE = 20;
 const MAX_FILE_SIZE_BYTES = 10 * 1024 * 1024;
+const DEFAULT_RESOURCE_CATEGORIES = [
+  'DSA',
+  'Resume',
+  'System Design',
+  'Interview Prep',
+  'Job Boards',
+  'Roadmaps',
+  'Mock Interviews',
+  'Portfolio'
+];
 
 type ResourceTypeFilter = 'all' | 'LINK' | 'FILE';
 
@@ -49,6 +59,9 @@ export class ResourcesComponent {
 
   readonly categoryOptions = computed(() => {
     const categories = new Set<string>();
+    for (const category of DEFAULT_RESOURCE_CATEGORIES) {
+      categories.add(category);
+    }
     for (const resource of this.resources()) {
       categories.add(resource.category?.trim() || 'General');
     }
@@ -69,7 +82,9 @@ export class ResourcesComponent {
         resource.submittedByName.toLowerCase().includes(normalizedQuery);
 
       const resourceCategory = resource.category?.trim() || 'General';
-      const matchesCategory = categoryFilter === 'all' || resourceCategory === categoryFilter;
+      const matchesCategory =
+        categoryFilter === 'all' ||
+        resourceCategory.toLowerCase().includes(categoryFilter.toLowerCase());
       const matchesType = typeFilter === 'all' || resource.resourceType === typeFilter;
 
       return matchesQuery && matchesCategory && matchesType;
@@ -81,7 +96,8 @@ export class ResourcesComponent {
   }
 
   onCategoryFilterChange(value: string) {
-    this.selectedCategoryFilter.set(value);
+    const normalized = value.trim();
+    this.selectedCategoryFilter.set(normalized ? normalized : 'all');
   }
 
   onTypeFilterChange(value: ResourceTypeFilter) {