feat: add entry list empty state (#28)

* Added empty state messages * moved no entries overlay component to page components * removed inline styling * Made NoEntriesOverlay into a separate component * chore: apply nits * chore: wrap text with Text component --------- Co-authored-by: ayoung19 <andyluyoung@gmail.com>
ayoung19 · Oct 17, 2024 · 03997aa · 03997aa
1 parent 39fbc72
commit 03997aa
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 11 deletions.
diff --git a/popup/components/EntryList.tsx b/popup/components/EntryList.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Box, Checkbox, Divider, Group, Text } from "@mantine/core";
 import { useSet } from "@mantine/hooks";
 import { IconStar, IconTrash } from "@tabler/icons-react";
 import { useAtomValue } from "jotai";
-import { useEffect, useMemo, type CSSProperties } from "react";
+import { useEffect, useMemo, type CSSProperties, type ReactNode } from "react";
 import { FixedSizeList } from "react-window";
 
 import { favoriteEntryIdsSetAtom } from "~popup/states/atoms";
@@ -15,6 +15,7 @@ import { EntryRow } from "./EntryRow";
 
 interface Props {
   entries: Entry[];
+  noEntriesOverlay: ReactNode;
 }
 
 const EntryRowRenderer = ({
@@ -38,7 +39,7 @@ const EntryRowRenderer = ({
   );
 };
 
-export const EntryList = ({ entries }: Props) => {
+export const EntryList = ({ entries, noEntriesOverlay }: Props) => {
   const favoriteEntryIdsSet = useAtomValue(favoriteEntryIdsSetAtom);
 
   const selectedEntryIds = useSet<string>();
@@ -106,15 +107,21 @@ export const EntryList = ({ entries }: Props) => {
         </Group>
       </Group>
       <Divider sx={(theme) => ({ borderColor: defaultBorderColor(theme) })} />
-      <FixedSizeList
-        height={450}
-        width={700}
-        itemData={{ entries, selectedEntryIds }}
-        itemCount={entries.length}
-        itemSize={33}
-      >
-        {EntryRowRenderer}
-      </FixedSizeList>
+      {entries.length === 0 ? (
+        <Box h={450} w={700}>
+          {noEntriesOverlay}
+        </Box>
+      ) : (
+        <FixedSizeList
+          height={450}
+          width={700}
+          itemData={{ entries, selectedEntryIds }}
+          itemCount={entries.length}
+          itemSize={33}
+        >
+          {EntryRowRenderer}
+        </FixedSizeList>
+      )}
     </Box>
   );
 };
diff --git a/popup/components/NoEntriesOverlay.tsx b/popup/components/NoEntriesOverlay.tsx
@@ -0,0 +1,26 @@
+import { Stack, Text } from "@mantine/core";
+import type { ReactNode } from "react";
+
+interface Props {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+}
+
+export const NoEntriesOverlay = ({ title, subtitle, description }: Props) => {
+  return (
+    <Stack align="center" spacing={0} p="xl">
+      <Text size="md">{title}</Text>
+      {subtitle && (
+        <Text size="sm" color="dimmed">
+          {subtitle}
+        </Text>
+      )}
+      {description && (
+        <Text size="xs" color="dimmed">
+          {description}
+        </Text>
+      )}
+    </Stack>
+  );
+};
diff --git a/popup/pages/AllPage.tsx b/popup/pages/AllPage.tsx
@@ -1,6 +1,7 @@
 import { useAtomValue } from "jotai";
 
 import { EntryList } from "~popup/components/EntryList";
+import { NoEntriesOverlay } from "~popup/components/NoEntriesOverlay";
 import { entryIdToTagsAtom, reversedEntriesAtom, searchAtom } from "~popup/states/atoms";
 
 export const AllPage = () => {
@@ -10,6 +11,16 @@ export const AllPage = () => {
 
   return (
     <EntryList
+      noEntriesOverlay={
+        search.length === 0 ? (
+          <NoEntriesOverlay
+            title="Your clipboard history is empty"
+            subtitle="Copy any text to see it here"
+          />
+        ) : (
+          <NoEntriesOverlay title={`No items found for "${search}"`} />
+        )
+      }
       entries={reversedEntries.filter(
         (entry) =>
           search.length === 0 ||

diff --git a/popup/pages/FavoritesPage.tsx b/popup/pages/FavoritesPage.tsx
@@ -1,12 +1,16 @@
+import { ActionIcon, Group, Text } from "@mantine/core";
+import { IconStar } from "@tabler/icons-react";
 import { useAtomValue } from "jotai";
 
 import { EntryList } from "~popup/components/EntryList";
+import { NoEntriesOverlay } from "~popup/components/NoEntriesOverlay";
 import {
   entryIdToTagsAtom,
   favoriteEntryIdsSetAtom,
   reversedEntriesAtom,
   searchAtom,
 } from "~popup/states/atoms";
+import { commonActionIconSx } from "~utils/sx";
 
 export const FavoritesPage = () => {
   const reversedEntries = useAtomValue(reversedEntriesAtom);
@@ -16,6 +20,24 @@ export const FavoritesPage = () => {
 
   return (
     <EntryList
+      noEntriesOverlay={
+        search.length === 0 ? (
+          <NoEntriesOverlay
+            title="You have no favorite items"
+            subtitle={
+              <Group align="center" spacing={0}>
+                <Text>Mark an item as favorite by clicking on</Text>
+                <ActionIcon sx={(theme) => commonActionIconSx({ theme })}>
+                  <IconStar size="1rem" />
+                </ActionIcon>
+              </Group>
+            }
+            description="Favorite items are protected from deletion"
+          />
+        ) : (
+          <NoEntriesOverlay title={`No items found for "${search}"`} />
+        )
+      }
       entries={reversedEntries.filter(
         (entry) =>
           favoriteEntryIdsSet.has(entry.id) &&