Welcome Page - Project Panels

phenoxtract-ui/src/app/app.component.html

@@ -63,7 +63,18 @@
     </ng-template>
   </app-sidebar>
   <div class="content-wrapper">
-    <app-menubar />
+    <app-menubar (searchChange)="searchQuery.set($event)" />
+    <div class="main-content">
+      @for (panel of filteredPanels(); track $index) {
+        <app-project-panel
+          [name]="panel.name"
+          [directory]="panel.directory"
+          [squareColor]="panel.squareColor"
+        />
+      } @empty {
+        <p>No projects match your search.</p>
+      }
+    </div>
   </div>
 </div>
 

phenoxtract-ui/src/app/app.component.ts

@@ -1,25 +1,33 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, computed, EventEmitter, OnInit, Output, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { FormsModule } from '@angular/forms';
 
 import { Button, ButtonModule } from 'primeng/button';
 import { Sidebar } from './shared/components/sidebar/sidebar.component';
 import { BrandComponent } from './shared/components/brand/brand.component';
-import { MenubarModule } from 'primeng/menubar';
+import { Menubar } from 'primeng/menubar';
 import { MenuItem } from 'primeng/api';
 import { IconField } from 'primeng/iconfield';
 import { InputIcon } from 'primeng/inputicon';
 import { InputText } from 'primeng/inputtext';
+import { ProjectPanelComponent } from './shared/components/project-panel/project-panel.component';
+import { invoke } from '@tauri-apps/api/core';
 
 @Component({
   selector: 'app-menubar',
+  imports: [Menubar, IconField, InputIcon, InputText, Button],
   template: `
     <div class="card">
       <p-menubar [model]="items" class="custom-menubar">
         <ng-template #start>
           <p-iconfield>
             <p-inputicon class="bi bi-search" />
-            <input type="text" pInputText placeholder="Search" />
+            <input
+              type="text"
+              pInputText
+              placeholder="Search projects"
+              (input)="onSearch($event)"
+            />
           </p-iconfield>
         </ng-template>
         <ng-template #end>
@@ -42,21 +50,70 @@ import { InputText } from 'primeng/inputtext';
     `,
   ],
   standalone: true,
-  imports: [MenubarModule, IconField, InputIcon, InputText, Button],
 })
 export class MenubarBasic implements OnInit {
   items: MenuItem[] | undefined;
 
+  @Output() searchChange = new EventEmitter<string>();
+
+  onSearch(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+    this.searchChange.emit(inputElement.value);
+  }
+
   ngOnInit() {
     this.items = [];
   }
 }
 
+interface ProjectPanel {
+  name: string;
+  directory: string;
+  squareColor: string;
+}
+
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, FormsModule, ButtonModule, Sidebar, BrandComponent, MenubarBasic],
+  imports: [
+    RouterOutlet,
+    FormsModule,
+    ButtonModule,
+    Sidebar,
+    BrandComponent,
+    MenubarBasic,
+    ProjectPanelComponent,
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
-export class AppComponent {}
+export class AppComponent implements OnInit {
+  panels = signal<ProjectPanel[]>([]);
+
+  searchQuery = signal('');
+
+  filteredPanels = computed(() => {
+    const query = this.searchQuery().toLowerCase();
+    const currentPanels = this.panels();
+
+    if (!query) {
+      return currentPanels;
+    }
+
+    return currentPanels.filter((panel) => {
+      const safeName = (panel.name.toLowerCase() ?? '').toLowerCase();
+      const safeDir = (panel.directory ?? '').toLowerCase();
+
+      return safeName.includes(query) || safeDir.includes(query);
+    });
+  });
+
+  async ngOnInit(): Promise<void> {
+    try {
+      const data = await invoke<ProjectPanel[]>('get_project_panels');
+      this.panels.set(data);
+    } catch (error) {
+      console.error('Failed to get project panels:', error);
+    }
+  }
+}