From de2111f987eeda61b6deb2facce684afd8df5f5b Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Wed, 21 Jan 2026 22:55:50 +0000
Subject: [PATCH] Add placeholder message for empty search results

Display an informative message when no accounts match the current search
or filter criteria, improving UX by providing clear feedback to users.

Fixes #31

Co-authored-by: Callum McIntyre <mcintyre94@users.noreply.github.com>
---
 entrypoints/sidepanel/routes/Home.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/entrypoints/sidepanel/routes/Home.tsx b/entrypoints/sidepanel/routes/Home.tsx
index e6fb20e..cab2d01 100644
--- a/entrypoints/sidepanel/routes/Home.tsx
+++ b/entrypoints/sidepanel/routes/Home.tsx
@@ -1,5 +1,5 @@
 import { FetcherWithComponents, Link, useFetcher, useRouteLoaderData } from "react-router-dom";
-import { Box, Button, Group, Stack, Menu, ActionIcon } from "@mantine/core";
+import { Box, Button, Group, Stack, Menu, ActionIcon, Text } from "@mantine/core";
 import { IconPlus, IconSettings } from "@tabler/icons-react";
 import { useEffect } from "react";
 import TagFilters from "../components/TagFilters";
@@ -57,13 +57,21 @@ export default function Home() {
             <TagFilters tags={tags} filtersEnabled={filtersEnabled} searchQuery={searchQuery} fetcher={fetcher} />
 
             <Stack align="flex-start" w="100%" gap={0}>
-                {accounts.map(account => (
-                    <Box w="100%" key={account.address}>
-                        <Link to={`/accounts/${account.address}`}>
-                            <AccountDisplay account={account} />
-                        </Link>
-                    </Box>
-                ))}
+                {accounts.length === 0 ? (
+                    <Text c="dimmed" size="sm">
+                        {searchQuery || filtersEnabled
+                            ? 'No accounts match your search or filter criteria'
+                            : 'No accounts yet. Click "Add Account" to get started.'}
+                    </Text>
+                ) : (
+                    accounts.map(account => (
+                        <Box w="100%" key={account.address}>
+                            <Link to={`/accounts/${account.address}`}>
+                                <AccountDisplay account={account} />
+                            </Link>
+                        </Box>
+                    ))
+                )}
             </Stack>
         </Stack>
     )