feat: add empty search message component

Author: geromegrignon

src/app/components/message.ts

@@ -81,3 +81,39 @@ export class NoEventsMessage {
   title = input.required<string>();
   description = input.required<string>();
 }
+
+@Component({
+  selector: 'app-empty-search-communities-message',
+  template: `
+    <div
+      class="flex flex-col items-center justify-center py-12 px-6 text-center max-w-md mx-auto"
+    >
+      <div class="w-16 h-16 mb-4 text-gray-400">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+          <path d="M16 11a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"></path>
+        </svg>
+      </div>
+      <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ title() }}</h3>
+      <p class="text-gray-600 mb-4">{{ description() }}</p>
+      <div class="flex flex-col sm:flex-row gap-2 text-sm text-gray-500">
+        <span>Try adjusting your search terms</span>
+        <span class="hidden sm:inline">•</span>
+        <span>or browse all communities above</span>
+      </div>
+    </div>
+  `,
+  standalone: true,
+})
+export class EmptySearchCommunitiesMessage {
+  title = input.required<string>();
+  description = input.required<string>();
+}

src/app/pages/communities-page.ts

@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { Community } from '../../models/community.model';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { HttpClient } from '@angular/common/http';
+import { EmptySearchCommunitiesMessage } from '../components/message';
 
 export const routeMeta = {
   meta: [
@@ -17,7 +18,7 @@ export const routeMeta = {
 };
 
 @Component({
-  imports: [CommunityCard, FormsModule],
+  imports: [CommunityCard, FormsModule, EmptySearchCommunitiesMessage],
   template: `
     <section class="max-w-screen-xl mx-auto px-6">
       <input
@@ -26,13 +27,29 @@ export const routeMeta = {
         placeholder="Search communities"
         [(ngModel)]="search"
       />
-      <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mt-6">
-        @for (community of filteredCommunities(); track community) {
-          <li>
-            <app-community-card class="h-full" [community]="community" />
-          </li>
-        }
-      </ul>
+      @if (filteredCommunities().length) {
+        <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mt-6">
+          @for (community of filteredCommunities(); track community) {
+            <li>
+              <app-community-card class="h-full" [community]="community" />
+            </li>
+          }
+        </ul>
+      }
+
+      <!-- Show message when search has no results -->
+      @if (
+        search().length &&
+        !filteredCommunities().length &&
+        communities().length > 0
+      ) {
+        <app-empty-search-communities-message
+          [title]="'No communities found'"
+          [description]="
+            'We could not find any communities matching your search criteria. Try different keywords or browse all available communities.'
+          "
+        />
+      }
     </section>
   `,
 })

src/server-elysia.ts

@@ -67,8 +67,7 @@ export function app() {
         try {
           // parse(CommunityListSchema, communities);
           return (organizers as Community[]).filter(
-            (community) =>
-              community.type !== 'workshop' && community.type !== 'other',
+            (community) => community.type === 'angular-community',
           );
         } catch (error) {
           throw new Error('Invalid community data format');