From 3f66b97416f5351202c120359975ba0cfd56746c Mon Sep 17 00:00:00 2001
From: Muhammad Haris Awan <an25mbbs026.student@fui.edu.pk>
Date: Tue, 1 Sep 2026 13:27:32 +0500
Subject: [PATCH] feat: add empty state for zero-results searches

When search or filters return no matches, show a clear message
instead of blank space. Applies to both RepositoryList and
OrganizationList tabs.

Fixes github/forgoodfirstissue#550

Co-authored-by: Haris Awan <an25mbbs026.student@fui.edu.pk>
---
 components/OrganizationList.tsx | 35 +++++++++++++++++++++++++++++++++
 components/RepositoryList.tsx   | 28 ++++++++++++++++++++++++++
 styles/globals.scss             | 13 ++++++++++++
 3 files changed, 76 insertions(+)

diff --git a/components/OrganizationList.tsx b/components/OrganizationList.tsx
index be9de6dd..636e9c8b 100644
--- a/components/OrganizationList.tsx
+++ b/components/OrganizationList.tsx
@@ -42,6 +42,41 @@ export const OrganizationList = ({ organizations }: OrganizationListProps) => {
   const loadMoreItems = () => setItems(items + itemsPerScroll);
   const hasMoreItems = items < filteredOrganizations.length;
 
+  if (filteredOrganizations.length === 0) {
+    return (
+      <main className="repoWrap">
+        <div className="grid-wrap">
+          <Grid>
+            <Grid.Column span={{ xsmall: 12, small: 12, medium: 12, large: 5, xlarge: 3 }}>
+              <Stack className="stack">
+                <div className="search-wrap">
+                  <GeneralFilter
+                    filter={filter}
+                    setFilter={
+                      setFilter as (filter: string | number | readonly string[] | undefined) => void
+                    }
+                  />
+                </div>
+                <LanguageFilter
+                  setSelectedLanguages={setSelectedLanguages}
+                  languageOptions={languageOptions}
+                />
+              </Stack>
+            </Grid.Column>
+            <Grid.Column
+              className="org-list-wrap"
+              span={{ xsmall: 12, small: 12, medium: 12, large: 7, xlarge: 9 }}
+            >
+              <div className="empty-state">
+                <p>No results found. Try changing your search term or filters.</p>
+              </div>
+            </Grid.Column>
+          </Grid>
+        </div>
+      </main>
+    );
+  }
+
   return (
     <main className="repoWrap">
       <div className="grid-wrap">
diff --git a/components/RepositoryList.tsx b/components/RepositoryList.tsx
index 34bc5488..87b75192 100644
--- a/components/RepositoryList.tsx
+++ b/components/RepositoryList.tsx
@@ -61,6 +61,34 @@ export const RepositoryList = ({ repositories, filter }: RepositoryListProps) =>
   const loadMoreItems = () => setItems(items + itemsPerScroll);
   const hasMoreItems = items < filteredRepositories.length;
 
+  if (filteredRepositories.length === 0) {
+    return (
+      <main className="repoWrap">
+        <div className="grid-wrap">
+          <Grid>
+            <Grid.Column span={{ xsmall: 12, small: 12, medium: 12, large: 5, xlarge: 3 }}>
+              <Stack className="stack">
+                <LanguageFilter
+                  setSelectedLanguages={setSelectedLanguages}
+                  languageOptions={languageOptions}
+                />
+                <SDGFilter setSelectedTopics={setSelectedTopics} topicOptions={topicOptions} />
+              </Stack>
+            </Grid.Column>
+            <Grid.Column
+              className="repo-list-wrap"
+              span={{ xsmall: 12, small: 12, medium: 12, large: 7, xlarge: 9 }}
+            >
+              <div className="empty-state">
+                <p>No results found. Try changing your search term or filters.</p>
+              </div>
+            </Grid.Column>
+          </Grid>
+        </div>
+      </main>
+    );
+  }
+
   return (
     <main className="repoWrap">
       <div className="grid-wrap">
diff --git a/styles/globals.scss b/styles/globals.scss
index 899fee3b..e9fc8cf8 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -321,4 +321,17 @@ base, html {
     color: #57606a;
     pointer-events: none;
   }
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 16px;
+  text-align: center;
+  color: var(--light-text-secondary, #57606A);
+  font-size: 16px;
+  border: 1px dashed var(--light-border, #B7BFC7);
+  border-radius: 6px;
+  background: var(--light-bg-primary, #FFF);
 }
\ No newline at end of file