From 22a6ad9818b3e341d7a6a3469828510d31c6a915 Mon Sep 17 00:00:00 2001
From: Dmytro Kondakov <dmytro@attio.com>
Date: Mon, 14 Apr 2025 08:55:36 +0200
Subject: [PATCH] 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                                | 9 ++++-----
 frontend/src/components/ImageViewer.tsx                  | 4 ++--
 .../src/components/{ => folder-picker}/FolderPicker.tsx  | 0
 3 files changed, 6 insertions(+), 7 deletions(-)
 rename frontend/src/components/{ => folder-picker}/FolderPicker.tsx (100%)

diff --git a/frontend/src/Settings.tsx b/frontend/src/Settings.tsx
index b9269af..518b302 100644
--- a/frontend/src/Settings.tsx
+++ b/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>
-                </div>
-                <div class="flex flex-col px-4 gap-2">
+                    <h1 class="text-3xl font-bold">Settings</h1>
+
                     <FolderPicker />
                     <Shortcuts />
                 </div>
diff --git a/frontend/src/components/ImageViewer.tsx b/frontend/src/components/ImageViewer.tsx
index 50c3563..b7b0a34 100644
--- a/frontend/src/components/ImageViewer.tsx
+++ b/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);
diff --git a/frontend/src/components/FolderPicker.tsx b/frontend/src/components/folder-picker/FolderPicker.tsx
similarity index 100%
rename from frontend/src/components/FolderPicker.tsx
rename to frontend/src/components/folder-picker/FolderPicker.tsx