Search panel on WEB

cypress/component/features/mobile/MobileLayout.cy.tsx

@@ -22,6 +22,8 @@ describe('Mobile Layout Adaptation', () => {
       selectedNote: null,
       isEditing: false,
       setIsEditing: cy.stub(),
+      isSearchPanelOpen: false,
+      setIsSearchPanelOpen: cy.stub(),
       searchQuery: '',
       filterByTag: null,
       deleteDialogOpen: false,
@@ -34,10 +36,16 @@ describe('Mobile Layout Adaptation', () => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ftsSearchResult: { isLoading: false, data: [] } as any,
       showFTSResults: false,
+      showTagOnlyResults: false,
       ftsData: undefined,
       ftsResults: [],
       ftsHasMore: false,
       ftsLoadingMore: false,
+      tagOnlyResults: [],
+      tagOnlyTotal: 0,
+      tagOnlyLoading: false,
+      tagOnlyHasMore: false,
+      tagOnlyLoadingMore: false,
       ftsObserverTarget: { current: null },
       observerTarget: { current: null },
       deleteAccountLoading: false,
@@ -66,6 +74,8 @@ describe('Mobile Layout Adaptation', () => {
       selectAllVisible: cy.stub(),
       clearSelection: cy.stub(),
       loadMoreFts: cy.stub(),
+      loadMoreTagOnly: cy.stub(),
+      loadMoreAI: cy.stub(),
       toggleNoteSelection: cy.stub(),
       deleteSelectedNotes: cy.stub(),
       totalNotes: 0,
@@ -82,6 +92,10 @@ describe('Mobile Layout Adaptation', () => {
 
       // Required by controller type (used by NotesShell to register editor ref)
       registerNoteEditorRef: overrides.registerNoteEditorRef ?? cy.stub(),
+      resetFtsResults: overrides.resetFtsResults ?? cy.stub(),
+      resetAIResults: overrides.resetAIResults ?? cy.stub(),
+      registerAIPaginationControls: overrides.registerAIPaginationControls ?? cy.stub(),
+      deleteNotesByIds: overrides.deleteNotesByIds ?? cy.stub().resolves({ total: 0, failed: 0, queuedOffline: false }),
     })
 
     mockSupabase = {

cypress/component/features/notes/Sidebar.cy.tsx

@@ -52,8 +52,7 @@ describe('Sidebar Component', () => {
     const props = {
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter: cy.stub(),
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),
@@ -77,8 +76,7 @@ describe('Sidebar Component', () => {
     const props = {
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter: cy.stub(),
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),
@@ -100,8 +98,7 @@ describe('Sidebar Component', () => {
     const props = {
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter: cy.stub(),
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),
@@ -119,13 +116,12 @@ describe('Sidebar Component', () => {
     cy.contains('Notes displayed: 5 out of unknown').should('be.visible')
   })
 
-  it('handles search input', () => {
-    const onSearch = cy.spy().as('onSearch')
+  it('opens search panel when trigger is clicked', () => {
+    const onOpenSearch = cy.spy().as('onOpenSearch')
     const props = {
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch,
+      onOpenSearch,
       onClearTagFilter: cy.stub(),
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),
@@ -138,17 +134,16 @@ describe('Sidebar Component', () => {
     }
     cy.mount(wrapWithProvider(<Sidebar {...props} />))
 
-    cy.get('input[placeholder="Search notes..."]').type('test query')
-    cy.get('@onSearch').should('have.been.called')
+    cy.contains('Search notes...').click()
+    cy.get('@onOpenSearch').should('have.been.calledOnce')
   })
 
   it('shows tag filter when active', () => {
     const onClearTagFilter = cy.spy().as('onClearTagFilter')
     const props = {
       user: mockUser,
       filterByTag: "work",
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter,
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),
@@ -164,58 +159,7 @@ describe('Sidebar Component', () => {
     cy.contains('work').should('be.visible')
     cy.contains('Clear Tags').click()
     cy.get('@onClearTagFilter').should('have.been.called')
-    cy.get('input').should('have.attr', 'placeholder', 'Search in "work" notes...')
-  })
-
-  it('handles clear search button', () => {
-    const onSearch = cy.spy().as('onSearch')
-    const props = {
-      user: mockUser,
-      filterByTag: null,
-      searchQuery: 'test query',
-      onSearch,
-      onClearTagFilter: cy.stub(),
-      onCreateNote: cy.stub(),
-      onSignOut: cy.stub(),
-      onDeleteAccount: cy.stub(),
-      deleteAccountLoading: false,
-      onImportComplete: cy.stub(),
-      onExportComplete: cy.stub(),
-      ...createSelectionProps(),
-      children: <div data-testid="note-list">Note List Content</div>
-    }
-    cy.mount(wrapWithProvider(<Sidebar {...props} />))
-
-    // Button should be visible when there is a query
-    cy.get('button').find('.lucide-x').should('exist')
-
-    // Tooltip check (might need trigger)
-    cy.get('button').find('.lucide-x').parent().trigger('mouseenter')
-    cy.contains('Clear Search').should('exist')
-
-    cy.get('button').find('.lucide-x').parent().click()
-    cy.get('@onSearch').should('have.been.calledWith', '')
-  })
-
-  it('does not show clear search button when query is empty', () => {
-    const props = {
-      user: mockUser,
-      filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
-      onClearTagFilter: cy.stub(),
-      onCreateNote: cy.stub(),
-      onSignOut: cy.stub(),
-      onDeleteAccount: cy.stub(),
-      deleteAccountLoading: false,
-      onImportComplete: cy.stub(),
-      onExportComplete: cy.stub(),
-      ...createSelectionProps(),
-      children: <div data-testid="note-list">Note List Content</div>
-    }
-    cy.mount(wrapWithProvider(<Sidebar {...props} />))
-
-    cy.get('button').find('.lucide-x').should('not.exist')
+    cy.contains('Search in "work" notes...').should('be.visible')
   })
 
   it('handles actions', () => {
@@ -224,8 +168,7 @@ describe('Sidebar Component', () => {
     const props = {
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter: cy.stub(),
       onCreateNote,
       onSignOut,
@@ -250,8 +193,7 @@ describe('Sidebar Component', () => {
     const createBaseProps = () => ({
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter: cy.stub(),
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),
@@ -348,8 +290,7 @@ describe('Sidebar Component', () => {
     const props = {
       user: mockUser,
       filterByTag: null,
-      searchQuery: '',
-      onSearch: cy.stub(),
+      onOpenSearch: cy.stub(),
       onClearTagFilter: cy.stub(),
       onCreateNote: cy.stub(),
       onSignOut: cy.stub(),

cypress/component/ui/web/hooks/useNoteData.cy.tsx

@@ -12,15 +12,13 @@ type SinonStub = any
 interface TestComponentProps {
   offlineOverlay?: CachedNote[]
   selectedNoteIds?: Set<string>
-  showFTSResults?: boolean
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   aggregatedFtsData?: any
 }
 
 const TestComponent = ({
   offlineOverlay = [],
   selectedNoteIds = new Set(),
-  showFTSResults = false,
   aggregatedFtsData = undefined,
 }: TestComponentProps) => {
   const notesQuery = useNotesQuery({ userId: 'test-user', searchQuery: '', selectedTag: null, enabled: true })
@@ -30,7 +28,6 @@ const TestComponent = ({
     offlineOverlay,
     aggregatedFtsData,
     selectedNoteIds,
-    showFTSResults,
   })
 
   return (
@@ -152,7 +149,7 @@ describe('useNoteData', () => {
     cy.get('[data-cy="selected-count"]').should('contain', '3')
   })
 
-  it('uses notes.length for notesDisplayed when showFTSResults is false', () => {
+  it('uses notes.length for notesDisplayed', () => {
     const serverNotes = [
       { id: 'note-1', title: 'Note 1', description: '', tags: [], user_id: 'test-user', created_at: '2024-01-01', updated_at: '2024-01-01' },
     ]
@@ -161,15 +158,15 @@ describe('useNoteData', () => {
     cy.mount(
       <SupabaseTestProvider supabase={mockSupabase}>
         <QueryProvider>
-          <TestComponent showFTSResults={false} />
+          <TestComponent />
         </QueryProvider>
       </SupabaseTestProvider>
     )
 
     cy.get('[data-cy="notes-displayed"]').should('contain', '1')
   })
 
-  it('uses FTS result count for notesDisplayed when showFTSResults is true', () => {
+  it('keeps merged FTS data while notesDisplayed stays tied to regular notes list', () => {
     const ftsData = {
       results: [
         { id: 'note-1', title: 'Note 1', description: '', tags: [], user_id: 'test-user', created_at: '2024-01-01', updated_at: '2024-01-01', rank: 1, headline: '' },
@@ -184,20 +181,20 @@ describe('useNoteData', () => {
     cy.mount(
       <SupabaseTestProvider supabase={mockSupabase}>
         <QueryProvider>
-          <TestComponent showFTSResults aggregatedFtsData={ftsData} />
+          <TestComponent aggregatedFtsData={ftsData} />
         </QueryProvider>
       </SupabaseTestProvider>
     )
 
-    cy.get('[data-cy="notes-displayed"]').should('contain', '2')
+    cy.get('[data-cy="notes-displayed"]').should('contain', '0')
     cy.get('[data-cy="merged-fts-count"]').should('contain', '2')
   })
 
   it('returns undefined mergedFtsData when aggregatedFtsData is undefined', () => {
     cy.mount(
       <SupabaseTestProvider supabase={mockSupabase}>
         <QueryProvider>
-          <TestComponent showFTSResults={false} aggregatedFtsData={undefined} />
+          <TestComponent aggregatedFtsData={undefined} />
         </QueryProvider>
       </SupabaseTestProvider>
     )
@@ -231,7 +228,7 @@ describe('useNoteData', () => {
     cy.mount(
       <SupabaseTestProvider supabase={mockSupabase}>
         <QueryProvider>
-          <TestComponent showFTSResults offlineOverlay={overlay} aggregatedFtsData={ftsData} />
+          <TestComponent offlineOverlay={overlay} aggregatedFtsData={ftsData} />
         </QueryProvider>
       </SupabaseTestProvider>
     )