From 79c4d00c303ec675ecf9438101985efcebebdfb7 Mon Sep 17 00:00:00 2001
From: Ku6epXBOCTuK <Ku6epXBOCTuK@gmail.com>
Date: Wed, 4 Feb 2026 16:16:28 +0500
Subject: [PATCH] refactor: separate components into folders

---
 docs/COMPONENT_ORGANIZATION.md                | 154 ++++++++++++++++++
 .../{ => feedback}/ErrorMessage.svelte        |   0
 .../{ => image}/BackgroundPreview.svelte      |   2 +-
 .../{ => image}/ImageCropper.svelte           |   8 +-
 .../{ => image}/ImageManager.svelte           |   0
 src/components/{ => image}/ImageUpload.svelte |  12 +-
 .../{ => layout}/AppContainer.svelte          |   2 +-
 src/components/{ => layout}/AppContent.svelte |   0
 src/components/{ => layout}/AppHeader.svelte  |   2 +-
 .../{ => layout}/MainSection.svelte           |   6 +-
 src/components/{ => layout}/Sidebar.svelte    |   6 +-
 src/components/{ => panel}/PanelList.svelte   |   8 +-
 .../{ => panel}/PanelPreview.svelte           |   6 +-
 src/components/{ => panel}/PanelsList.svelte  |   4 +-
 src/components/{ => text}/TextManager.svelte  |   2 +-
 src/components/{ => text}/TextPreview.svelte  |   4 +-
 src/components/{ => text}/TextSection.svelte  |   0
 src/routes/+page.svelte                       |   4 +-
 18 files changed, 187 insertions(+), 33 deletions(-)
 create mode 100644 docs/COMPONENT_ORGANIZATION.md
 rename src/components/{ => feedback}/ErrorMessage.svelte (100%)
 rename src/components/{ => image}/BackgroundPreview.svelte (91%)
 rename src/components/{ => image}/ImageCropper.svelte (91%)
 rename src/components/{ => image}/ImageManager.svelte (100%)
 rename src/components/{ => image}/ImageUpload.svelte (93%)
 rename src/components/{ => layout}/AppContainer.svelte (91%)
 rename src/components/{ => layout}/AppContent.svelte (100%)
 rename src/components/{ => layout}/AppHeader.svelte (89%)
 rename src/components/{ => layout}/MainSection.svelte (82%)
 rename src/components/{ => layout}/Sidebar.svelte (77%)
 rename src/components/{ => panel}/PanelList.svelte (92%)
 rename src/components/{ => panel}/PanelPreview.svelte (91%)
 rename src/components/{ => panel}/PanelsList.svelte (89%)
 rename src/components/{ => text}/TextManager.svelte (95%)
 rename src/components/{ => text}/TextPreview.svelte (92%)
 rename src/components/{ => text}/TextSection.svelte (100%)

diff --git a/docs/COMPONENT_ORGANIZATION.md b/docs/COMPONENT_ORGANIZATION.md
new file mode 100644
index 0000000..8d584b6
--- /dev/null
+++ b/docs/COMPONENT_ORGANIZATION.md
@@ -0,0 +1,154 @@
+# Component Organization Guide
+
+This document describes the organized folder structure for the Svelte components in the Twitch Panels Creator project.
+
+## 📁 Folder Structure
+
+```
+src/components/
+├── layout/           # Application layout components
+├── image/            # Image-related components
+├── text/             # Text management components
+├── panel/            # Panel display and management
+├── feedback/         # User feedback components
+└── ui/               # Reusable UI components (from lib)
+```
+
+## 🏗️ Layout Components
+
+**Location**: `src/components/layout/`
+
+Components that define the overall application structure and layout:
+
+- **AppContainer.svelte** - Main application wrapper and coordinator
+- **AppHeader.svelte** - Application header with title and actions
+- **AppContent.svelte** - Main content area container
+- **MainSection.svelte** - Primary workspace section
+- **Sidebar.svelte** - Side panel for previews and controls
+
+## 🖼️ Image Components
+
+**Location**: `src/components/image/`
+
+Components related to image upload, processing, and display:
+
+- **ImageManager.svelte** - Orchestrates image upload and cropping workflow
+- **ImageUpload.svelte** - Handles drag-drop, paste, and URL image upload
+- **ImageCropper.svelte** - Provides image cropping interface with cropperjs
+- **BackgroundPreview.svelte** - Displays the background image preview
+
+## 📝 Text Components
+
+**Location**: `src/components/text/`
+
+Components for text management and display:
+
+- **TextManager.svelte** - Main text input and settings management
+- **TextSection.svelte** - Text management section wrapper
+- **TextPreview.svelte** - Preview of text styling and positioning
+
+## 🎨 Panel Components
+
+**Location**: `src/components/panel/`
+
+Components for panel creation, preview, and management:
+
+- **PanelPreview.svelte** - Individual panel preview with canvas rendering
+- **PanelsList.svelte** - List of all created panels
+- **PanelList.svelte** - Alternative panel list implementation
+
+## 💬 Feedback Components
+
+**Location**: `src/components/feedback/`
+
+Components for user feedback and error handling:
+
+- **ErrorMessage.svelte** - Displays error messages to users
+
+## 🧩 UI Components
+
+**Location**: `src/components/ui/` (from lib)
+
+Reusable UI components:
+
+- **Button.svelte** - Standard button component
+- **IconButton.svelte** - Button with icon support
+
+## 🔧 Import Conventions
+
+When importing components, follow these patterns:
+
+```typescript
+// Layout components
+import AppContainer from "../components/layout/AppContainer.svelte";
+import AppHeader from "../components/layout/AppHeader.svelte";
+
+// Image components
+import ImageManager from "../components/image/ImageManager.svelte";
+import ImageUpload from "../components/image/ImageUpload.svelte";
+
+// Text components
+import TextManager from "../components/text/TextManager.svelte";
+import TextSection from "../components/text/TextSection.svelte";
+
+// Panel components
+import PanelPreview from "../components/panel/PanelPreview.svelte";
+import PanelsList from "../components/panel/PanelsList.svelte";
+
+// Feedback components
+import ErrorMessage from "../components/feedback/ErrorMessage.svelte";
+
+// UI components
+import { Button } from "../lib/components/ui";
+```
+
+## 🎯 Benefits of This Organization
+
+1. **Logical Grouping**: Components are grouped by functionality, making them easy to find
+2. **Maintainability**: Related components are co-located, reducing cognitive load
+3. **Scalability**: Easy to add new components to appropriate categories
+4. **Import Clarity**: Clear import paths that reflect component purpose
+5. **Team Collaboration**: Consistent structure that team members can follow
+
+## 📋 Component Responsibilities
+
+### Layout Components
+
+- Handle application-wide structure and navigation
+- Manage high-level state and data flow
+- Provide containers for functional components
+
+### Image Components
+
+- Handle all image-related operations (upload, crop, preview)
+- Manage image state and validation
+- Provide image processing functionality
+
+### Text Components
+
+- Manage text input, editing, and styling
+- Handle text validation and state
+- Provide text preview functionality
+
+### Panel Components
+
+- Handle panel creation and management
+- Provide panel preview and export functionality
+- Manage panel state and interactions
+
+### Feedback Components
+
+- Display user feedback and error messages
+- Handle user notifications and alerts
+- Provide consistent error handling UI
+
+## 🔄 Future Considerations
+
+As the project grows, consider:
+
+1. **Sub-categorization**: Further divide categories if they become too large
+2. **Feature-based organization**: Group by feature rather than type for larger applications
+3. **Component documentation**: Add individual component documentation
+4. **Storybook integration**: Use Storybook for component development and testing
+
+This organization provides a solid foundation for the current project while remaining flexible for future expansion.
diff --git a/src/components/ErrorMessage.svelte b/src/components/feedback/ErrorMessage.svelte
similarity index 100%
rename from src/components/ErrorMessage.svelte
rename to src/components/feedback/ErrorMessage.svelte
diff --git a/src/components/BackgroundPreview.svelte b/src/components/image/BackgroundPreview.svelte
similarity index 91%
rename from src/components/BackgroundPreview.svelte
rename to src/components/image/BackgroundPreview.svelte
index d38bd95..268f937 100644
--- a/src/components/BackgroundPreview.svelte
+++ b/src/components/image/BackgroundPreview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     backgroundImage?: string | undefined;
diff --git a/src/components/ImageCropper.svelte b/src/components/image/ImageCropper.svelte
similarity index 91%
rename from src/components/ImageCropper.svelte
rename to src/components/image/ImageCropper.svelte
index 4e8b793..c4b1de7 100644
--- a/src/components/ImageCropper.svelte
+++ b/src/components/image/ImageCropper.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import CropperJS from "cropperjs";
-  import type { ImageCropResult } from "../lib/types/panel";
-  import { ImageService } from "../lib/services/imageService";
-  import { uiStore, setLoading } from "../stores/uiStore";
-  import { Button } from "../lib/components/ui";
+  import type { ImageCropResult } from "$lib/types/panel";
+  import { ImageService } from "$lib/services/imageService";
+  import { uiStore, setLoading } from "../../stores/uiStore";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     imageSrc: string;
diff --git a/src/components/ImageManager.svelte b/src/components/image/ImageManager.svelte
similarity index 100%
rename from src/components/ImageManager.svelte
rename to src/components/image/ImageManager.svelte
diff --git a/src/components/ImageUpload.svelte b/src/components/image/ImageUpload.svelte
similarity index 93%
rename from src/components/ImageUpload.svelte
rename to src/components/image/ImageUpload.svelte
index 9824030..70b8e0f 100644
--- a/src/components/ImageUpload.svelte
+++ b/src/components/image/ImageUpload.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { uiStore, setLoading, clearError, setCurrentStep } from "../stores/uiStore";
-  import { panelStore } from "../stores/panelStore";
-  import { ImageService } from "../lib/services/imageService";
-  import { handleError } from "../lib/utils/errorHandler";
-  import type { ImageUploadResult } from "../lib/types/panel";
-  import { Button } from "../lib/components/ui";
+  import { uiStore, setLoading, clearError, setCurrentStep } from "../../stores/uiStore";
+  import { panelStore } from "../../stores/panelStore";
+  import { ImageService } from "$lib/services/imageService";
+  import { handleError } from "$lib/utils/errorHandler";
+  import type { ImageUploadResult } from "$lib/types/panel";
+  import { Button } from "$lib/components/ui";
 
   let imageService = new ImageService();
 
diff --git a/src/components/AppContainer.svelte b/src/components/layout/AppContainer.svelte
similarity index 91%
rename from src/components/AppContainer.svelte
rename to src/components/layout/AppContainer.svelte
index ce4babc..6c4efb9 100644
--- a/src/components/AppContainer.svelte
+++ b/src/components/layout/AppContainer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import AppHeader from "./AppHeader.svelte";
-  import ErrorMessage from "./ErrorMessage.svelte";
+  import ErrorMessage from "../feedback/ErrorMessage.svelte";
   import AppContent from "./AppContent.svelte";
 
   interface Props {
diff --git a/src/components/AppContent.svelte b/src/components/layout/AppContent.svelte
similarity index 100%
rename from src/components/AppContent.svelte
rename to src/components/layout/AppContent.svelte
diff --git a/src/components/AppHeader.svelte b/src/components/layout/AppHeader.svelte
similarity index 89%
rename from src/components/AppHeader.svelte
rename to src/components/layout/AppHeader.svelte
index 3186e22..c2cf071 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/layout/AppHeader.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     onUploadNewImage?: () => void;
diff --git a/src/components/MainSection.svelte b/src/components/layout/MainSection.svelte
similarity index 82%
rename from src/components/MainSection.svelte
rename to src/components/layout/MainSection.svelte
index 09fd47f..4408bea 100644
--- a/src/components/MainSection.svelte
+++ b/src/components/layout/MainSection.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { uiStore } from "../stores/uiStore";
-  import ImageManager from "./ImageManager.svelte";
-  import TextSection from "./TextSection.svelte";
+  import { uiStore } from "../../stores/uiStore";
+  import ImageManager from "../image/ImageManager.svelte";
+  import TextSection from "../text/TextSection.svelte";
 
   interface Props {
     uploadedImage: string | undefined;
diff --git a/src/components/Sidebar.svelte b/src/components/layout/Sidebar.svelte
similarity index 77%
rename from src/components/Sidebar.svelte
rename to src/components/layout/Sidebar.svelte
index 6a73c09..2ab06a7 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/layout/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { uiStore } from "../stores/uiStore";
-  import BackgroundPreview from "./BackgroundPreview.svelte";
-  import PanelsList from "./PanelsList.svelte";
+  import { uiStore } from "../../stores/uiStore";
+  import BackgroundPreview from "../image/BackgroundPreview.svelte";
+  import PanelsList from "../panel/PanelsList.svelte";
 
   interface Props {
     backgroundImage: string | undefined;
diff --git a/src/components/PanelList.svelte b/src/components/panel/PanelList.svelte
similarity index 92%
rename from src/components/PanelList.svelte
rename to src/components/panel/PanelList.svelte
index 12839a9..e6456ae 100644
--- a/src/components/PanelList.svelte
+++ b/src/components/panel/PanelList.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { panelStore } from "../stores/panelStore";
-  import { panelStorage } from "../lib/utils/panelStorage";
-  import type { Panel } from "../lib/types/panel";
-  import { IconButton } from "../lib/components/ui";
+  import { panelStore } from "../../stores/panelStore";
+  import { panelStorage } from "$lib/utils/panelStorage";
+  import type { Panel } from "$lib/types/panel";
+  import { IconButton } from "$lib/components/ui";
 
   interface Props {
     onPanelSelect: (panel: Panel) => void;
diff --git a/src/components/PanelPreview.svelte b/src/components/panel/PanelPreview.svelte
similarity index 91%
rename from src/components/PanelPreview.svelte
rename to src/components/panel/PanelPreview.svelte
index abeff21..11d4ea9 100644
--- a/src/components/PanelPreview.svelte
+++ b/src/components/panel/PanelPreview.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { uiStore, setCurrentStep } from "../stores/uiStore";
-  import type { Panel } from "../lib/types/panel";
+  import { uiStore, setCurrentStep } from "../../stores/uiStore";
+  import type { Panel } from "$lib/types/panel";
 
   type TextItem = Panel["texts"][0];
   import { Stage, Layer, Image, Text } from "svelte-konva";
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     panel: Panel;
diff --git a/src/components/PanelsList.svelte b/src/components/panel/PanelsList.svelte
similarity index 89%
rename from src/components/PanelsList.svelte
rename to src/components/panel/PanelsList.svelte
index fe3460d..a2f9793 100644
--- a/src/components/PanelsList.svelte
+++ b/src/components/panel/PanelsList.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { Panel } from "../lib/types/panel";
+  import type { Panel } from "$lib/types/panel";
   import PanelPreview from "./PanelPreview.svelte";
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     panels: Panel[];
diff --git a/src/components/TextManager.svelte b/src/components/text/TextManager.svelte
similarity index 95%
rename from src/components/TextManager.svelte
rename to src/components/text/TextManager.svelte
index a5a06c8..cf181f1 100644
--- a/src/components/TextManager.svelte
+++ b/src/components/text/TextManager.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from "../lib/components/ui";
+  import { Button } from "$lib/components/ui";
 
   interface Props {
     onTextAdd: (text: string) => void;
diff --git a/src/components/TextPreview.svelte b/src/components/text/TextPreview.svelte
similarity index 92%
rename from src/components/TextPreview.svelte
rename to src/components/text/TextPreview.svelte
index 3f502e8..7b25cbd 100644
--- a/src/components/TextPreview.svelte
+++ b/src/components/text/TextPreview.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { TextItem } from "../lib/types/panel";
-  import { panelStore } from "../stores/panelStore";
+  import type { TextItem } from "$lib/types/panel";
+  import { panelStore } from "../../stores/panelStore";
   import { Stage, Layer, Image, Text } from "svelte-konva";
 
   interface Props {
diff --git a/src/components/TextSection.svelte b/src/components/text/TextSection.svelte
similarity index 100%
rename from src/components/TextSection.svelte
rename to src/components/text/TextSection.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8454c64..869a372 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,9 +4,9 @@
   import { imageService } from "../services/imageService";
   import { panelService } from "../services/panelService";
   import { exportService } from "../services/exportService";
-  import type { Panel } from "../lib/types/panel";
+  import type { Panel } from "$lib/types/panel";
 
-  import AppContainer from "../components/AppContainer.svelte";
+  import AppContainer from "../components/layout/AppContainer.svelte";
 
   let uploadedImage = $state<string | undefined>(undefined);
   let panels = $state<Panel[]>([]);