feat(app): refactor App component and add Settings page

- Refactored the App component to utilize a new SearchCard component for rendering search results.
- Introduced a Settings page with FolderPicker and Shortcuts components for user configuration.
- Removed the ImagePage component as it was no longer needed.
- Updated routing to include the new Settings page and adjusted imports accordingly.
- Added a settings button to the main interface for easy access to the new settings functionality.

frontend/src/components/search-card/SearchCard.tsx

@@ -0,0 +1,22 @@
+import type { UserImage } from "../../network";
+import { SearchCardContact } from "./SearchCardContact";
+import { SearchCardEvent } from "./SearchCardEvent";
+import { SearchCardLocation } from "./SearchCardLocation";
+import { SearchCardNote } from "./SearchCardNote";
+
+export const SearchCard = (props: { item: UserImage }) => {
+    const { item } = props;
+
+    switch (item.type) {
+        case "location":
+            return <SearchCardLocation item={item} />;
+        case "event":
+            return <SearchCardEvent item={item} />;
+        case "note":
+            return <SearchCardNote item={item} />;
+        case "contact":
+            return <SearchCardContact item={item} />;
+        default:
+            return null;
+    }
+};

frontend/src/components/search-card/SearchCardContact.tsx

@@ -19,10 +19,6 @@ export const SearchCardContact = ({ item }: Props) => {
             <p class="text-xs text-neutral-500">{data.PhoneNumber}</p>
             <Separator class="my-2" />
             <p class="text-xs text-neutral-500">{data.Email}</p>
-            <Separator class="my-2" />
-            <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.Description}
-            </p>
         </div>
     );
 };

frontend/src/components/search-card/SearchCardEvent.tsx

@@ -1,5 +1,3 @@
-import { Separator } from "@kobalte/core/separator";
-
 import { IconCalendar } from "@tabler/icons-solidjs";
 import type { UserImage } from "../../network";
 
@@ -18,15 +16,13 @@ export const SearchCardEvent = ({ item }: Props) => {
             </div>
             <p class="text-xs text-neutral-500">
                 Organized by {data.Organizer?.Name ?? "unknown"} on{" "}
-                {new Date(data.StartDateTime).toLocaleDateString("en-US", {
-                    month: "long",
-                    day: "numeric",
-                    year: "numeric",
-                })}
-            </p>
-            <Separator class="my-2" />
-            <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.Description}
+                {data.StartDateTime
+                    ? new Date(data.StartDateTime).toLocaleDateString("en-US", {
+                          month: "long",
+                          day: "numeric",
+                          year: "numeric",
+                      })
+                    : "unknown date"}
             </p>
         </div>
     );

frontend/src/components/search-card/SearchCardLocation.tsx

@@ -1,5 +1,3 @@
-import { Separator } from "@kobalte/core/separator";
-
 import { IconMapPin } from "@tabler/icons-solidjs";
 import type { UserImage } from "../../network";
 
@@ -17,10 +15,6 @@ export const SearchCardLocation = ({ item }: Props) => {
                 <IconMapPin size={20} class="text-neutral-500 mt-1" />
             </div>
             <p class="text-xs text-neutral-500">{data.Address}</p>
-            <Separator class="my-2" />
-            <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.Description}
-            </p>
         </div>
     );
 };

frontend/src/components/search-card/SearchCardNote.tsx

@@ -16,11 +16,7 @@ export const SearchCardNote = ({ item }: Props) => {
                 <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
                 <IconNote size={20} class="text-neutral-500 mt-1" />
             </div>
-            <p class="text-xs text-neutral-500">Keywords TODO</p>
-            <Separator class="my-2" />
-            <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.Content}
-            </p>
+            <p class="text-xs text-neutral-500">Note</p>
         </div>
     );
 };