From 989aa7958e1b1c95772265923f9e947a43dce075 Mon Sep 17 00:00:00 2001
From: Yihao Wang <yesiamyihao@gmail.com>
Date: Mon, 14 Jul 2025 00:11:17 +1200
Subject: [PATCH] Fix bookmarked tools retrieval

---
 src/components/Hero.tsx | 21 +++++++++++++++------
 src/utils/bookmark.ts   | 18 +++++++++++++-----
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index e1acc51..0508014 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -148,12 +148,21 @@ export default function Hero() {
             {...props}
             onClick={() => navigate('/' + option.path)}
           >
-            <Stack direction={'row'} spacing={2} alignItems={'center'}>
-              <Icon fontSize={20} icon={option.icon} />
-              <Box>
-                <Typography fontWeight={'bold'}>{option.name}</Typography>
-                <Typography fontSize={12}>{option.shortDescription}</Typography>
-              </Box>
+            <Stack
+              direction={'row'}
+              alignItems={'center'}
+              justifyContent={'stretch'}
+              width={'100%'}
+            >
+              <Stack direction={'row'} spacing={2} alignItems={'center'}>
+                <Icon fontSize={20} icon={option.icon} />
+                <Box>
+                  <Typography fontWeight={'bold'}>{option.name}</Typography>
+                  <Typography fontSize={12}>
+                    {option.shortDescription}
+                  </Typography>
+                </Box>
+              </Stack>
               <Icon
                 fontSize={20}
                 onClick={(e) => {
diff --git a/src/utils/bookmark.ts b/src/utils/bookmark.ts
index eb33ea9..9877973 100644
--- a/src/utils/bookmark.ts
+++ b/src/utils/bookmark.ts
@@ -3,7 +3,12 @@ import { DefinedTool } from '@tools/defineTool';
 const bookmarkedToolsKey = 'bookmarkedTools';
 
 export function getBookmarkedToolPaths(): string[] {
-  return localStorage.getItem(bookmarkedToolsKey)?.split(',') ?? [];
+  return (
+    localStorage
+      .getItem(bookmarkedToolsKey)
+      ?.split(',')
+      ?.filter((path) => path) ?? []
+  );
 }
 
 export function isBookmarked(tool: DefinedTool): boolean {
@@ -21,12 +26,15 @@ export function toggleBookmarked(tool: DefinedTool) {
 function bookmark(tool: DefinedTool) {
   localStorage.setItem(
     bookmarkedToolsKey,
-    tool.path + ',' + (localStorage.getItem(bookmarkedToolsKey) ?? '')
+    [tool.path, ...getBookmarkedToolPaths()].join(',')
   );
 }
 
 function unbookmark(tool: DefinedTool) {
-  const bookmarked = localStorage.getItem(bookmarkedToolsKey)?.split(',') ?? [];
-  const unbookmarked = bookmarked.filter((path) => path != tool.path);
-  localStorage.setItem(bookmarkedToolsKey, unbookmarked.join(','));
+  localStorage.setItem(
+    bookmarkedToolsKey,
+    getBookmarkedToolPaths()
+      .filter((path) => path !== tool.path)
+      .join(',')
+  );
 }