refactor(settings): reorganize FolderPicker component and update layout

- Moved FolderPicker to a new folder structure for better organization.
- Updated the Settings page layout to enhance visual hierarchy by increasing the title size.
- Removed the old FolderPicker component file after restructuring.

frontend/src/Settings.tsx

@@ -1,18 +1,17 @@
 import { Button } from "@kobalte/core/button";
-import { FolderPicker } from "./components/FolderPicker";
+import { FolderPicker } from "./components/folder-picker/FolderPicker";
 import { Shortcuts } from "./components/shortcuts/Shortcuts";
 
 export const Settings = () => {
     return (
         <>
             <main class="container pt-2">
-                <div class="flex px-4 gap-2 items-center">
+                <div class="flex flex-col px-4 gap-2">
                     <Button as="a" href="/">
                         Back to home
                     </Button>
-                    <h1 class="text-2xl font-bold">Settings</h1>
+                    <h1 class="text-3xl font-bold">Settings</h1>
-                </div>
+
-                <div class="flex flex-col px-4 gap-2">
                     <FolderPicker />
                     <Shortcuts />
                 </div>

frontend/src/components/ImageViewer.tsx

@@ -1,7 +1,7 @@
-import { createEffect, createSignal } from "solid-js";
 import { listen } from "@tauri-apps/api/event";
-import { FolderPicker } from "./FolderPicker";
+import { createEffect, createSignal } from "solid-js";
 import { sendImage } from "../network";
+import { FolderPicker } from "./folder-picker/FolderPicker";
 
 export function ImageViewer() {
     const [latestImage, setLatestImage] = createSignal<string | null>(null);