make ui into tabS

Author: Solcany

.gitignore

@@ -2,6 +2,7 @@
 dist/
 assets/*.csv
 assets/*.py
+assets/sketches
 
 
 # Python cache

src/gui/components/column_mapper.py

@@ -37,58 +37,52 @@ def __init__(self, parent_window: str, platform: str = "youtube", callback: Opti
     def setup_ui(self):
         """Create the column mapping UI components."""
         with dpg.group(tag=self.group_id, parent=self.parent_window):
-            dpg.add_text("Column Mapping:", color=[200, 200, 255])
-            dpg.add_spacer()
 
             # Post Column (Required)
-            with dpg.group(horizontal=True):
-                dpg.add_text("Post Column:", color=[200, 200, 255])
-                dpg.add_combo(
-                    tag=self.post_combo_id,
-                    items=["Select CSV column..."],
-                    default_value="Select CSV column...",
-                    width=200,
-                    callback=lambda s, v: self._on_column_selected('post', v)
-                )
+            dpg.add_text("Post url (required)", color=[255, 255, 255])
+            dpg.add_combo(
+                tag=self.post_combo_id,
+                items=["select post url column"],
+                default_value="select post url column",
+                width=280,
+                callback=lambda s, v: self._on_column_selected('post', v)
+            )
 
-            dpg.add_spacer(height=2)
+            dpg.add_spacer(height=10)
 
             # Date Column (Optional)
-            with dpg.group(horizontal=True):
-                dpg.add_text("Date Column:", color=[200, 200, 255])
-                dpg.add_combo(
-                    tag=self.date_combo_id,
-                    items=["Select CSV column..."],
-                    default_value="Select CSV column...",
-                    width=200,
-                    callback=lambda s, v: self._on_column_selected('date', v)
-                )
+            dpg.add_text("Date", color=[255, 255, 255])
+            dpg.add_combo(
+                tag=self.date_combo_id,
+                items=["select post date column"],
+                default_value="select post date column",
+                width=280,
+                callback=lambda s, v: self._on_column_selected('date', v)
+            )
 
-            dpg.add_spacer(height=2)
+            dpg.add_spacer(height=10)
 
             # Engagement Column (Optional)
-            with dpg.group(horizontal=True):
-                dpg.add_text("Engagement Column:", color=[200, 200, 255])
-                dpg.add_combo(
-                    tag=self.engagement_combo_id,
-                    items=["Select CSV column..."],
-                    default_value="Select CSV column...",
-                    width=200,
-                    callback=lambda s, v: self._on_column_selected('engagement', v)
-                )
+            dpg.add_text("Engagement", color=[255, 255, 255])
+            dpg.add_combo(
+                tag=self.engagement_combo_id,
+                items=["select post url column"],
+                default_value="select post url column",
+                width=280,
+                callback=lambda s, v: self._on_column_selected('engagement', v)
+            )
 
-            dpg.add_spacer(height=2)
+            dpg.add_spacer(height=10)
 
             # User Column (Optional)
-            with dpg.group(horizontal=True):
-                dpg.add_text("User Column:", color=[200, 200, 255])
-                dpg.add_combo(
-                    tag=self.user_combo_id,
-                    items=["Select CSV column..."],
-                    default_value="Select CSV column...",
-                    width=200,
-                    callback=lambda s, v: self._on_column_selected('user', v)
-                )
+            dpg.add_text("User", color=[255, 255, 255])
+            dpg.add_combo(
+                tag=self.user_combo_id,
+                items=["select post date column"],
+                default_value="select post date column",
+                width=280,
+                callback=lambda s, v: self._on_column_selected('user', v)
+            )
 
     def populate_dropdowns(self, csv_columns: List[str]):
         """Populate dropdowns with CSV column names."""

src/gui/components/file_picker.py

@@ -8,22 +8,23 @@
 class FilePicker:
     """File selection component for CSV files."""
 
-    def __init__(self, parent_window: str, callback: Optional[Callable] = None):
+    def __init__(self, parent_window: str, callback: Optional[Callable] = None, id_suffix: str = ""):
         self.parent_window = parent_window
         self.callback = callback
         self.selected_file = ""
-        self.file_dialog_id = "file_dialog"
-        self.file_input_id = "file_input"
-        self.browse_button_id = "browse_button"
+        self.id_suffix = id_suffix
+        self.file_dialog_id = f"file_dialog{id_suffix}"
+        self.file_input_id = f"file_input{id_suffix}"
+        self.browse_button_id = f"browse_button{id_suffix}"
 
-    def setup_ui(self):
+    def setup_ui(self, input_width: int = 400, placeholder_text: str = "No file selected"):
         """Create the file picker UI components."""
         with dpg.group(horizontal=True, parent=self.parent_window):
             # File path input (read-only display)
             dpg.add_input_text(
                 tag=self.file_input_id,
-                default_value="No file selected",
-                width=400,
+                default_value=placeholder_text,
+                width=input_width,
                 readonly=True,
                 hint="Selected CSV file path will appear here"
             )

src/gui/components/platform_tabs.py

@@ -0,0 +1,56 @@
+import dearpygui.dearpygui as dpg
+from typing import Optional
+import os
+import sys
+sys.path.append(os.path.dirname(os.path.dirname(os.path.dirname(os.path.abspath(__file__)))))
+
+from .youtube_tab import YouTubeTab
+
+
+class PlatformTabs:
+    """Platform-specific scraper tabs container."""
+    
+    def __init__(self, parent_window: str, state_manager, processing_controller):
+        self.parent_window = parent_window
+        self.state_manager = state_manager
+        self.processing_controller = processing_controller
+        
+        # Tab components
+        self.youtube_tab: Optional[YouTubeTab] = None
+        
+        # Tab bar ID
+        self.tab_bar_id = "platform_tab_bar"
+    
+    def setup_ui(self):
+        """Create the platform tabs UI."""
+        with dpg.tab_bar(tag=self.tab_bar_id, parent=self.parent_window):
+            
+            # YouTube Tab
+            with dpg.tab(label="YouTube"):
+                self.youtube_tab = YouTubeTab(
+                    parent_window=self.parent_window,
+                    state_manager=self.state_manager,
+                    processing_controller=self.processing_controller
+                )
+                self.youtube_tab.setup_ui()
+            
+            # Facebook Tab (placeholder)
+            with dpg.tab(label="Facebook"):
+                dpg.add_text("Facebook scraper - Coming soon", color=[150, 150, 150])
+            
+            # X/Twitter Tab (placeholder)
+            with dpg.tab(label="X (Twitter)"):
+                dpg.add_text("X/Twitter scraper - Coming soon", color=[150, 150, 150])
+            
+            # TikTok Tab (placeholder)
+            with dpg.tab(label="TikTok"):
+                dpg.add_text("TikTok scraper - Coming soon", color=[150, 150, 150])
+    
+    def get_youtube_tab(self) -> Optional[YouTubeTab]:
+        """Get the YouTube tab component."""
+        return self.youtube_tab
+    
+    def cleanup(self):
+        """Clean up tab resources."""
+        if self.youtube_tab:
+            self.youtube_tab.cleanup()