Merge pull request #43 from MemerGamer/40-implement-the-design-ui

Resolve "Implement the design UI"

Author: MemerGamer

.vscode/settings.json

@@ -2,5 +2,6 @@
     "conventionalCommits.scopes": [
         "videoeditor",
         "ci/cd"
-    ]
+    ],
+    "python.analysis.typeCheckingMode": "basic"
 }

docs/index.rst

@@ -15,7 +15,7 @@ Welcome to ManimStudio's documentation!
    src/core/project_creation_dialog
    src/core/project_opening_dialog
    src/utils/logger_utility
-   src/ui/form_ui
+   src/ui/welcome_ui
    src/ui/settings_ui
    src/ui/videoeditor_ui
    src/ui/project_creation_dialog_ui

docs/src/ui/form_ui.rst

@@ -0,0 +1,7 @@
+welcome_ui module
+=================
+
+.. automodule:: welcome_ui
+   :members:
+   :undoc-members:
+   :show-inheritance:

docs/src/ui/welcome_ui.rst

@@ -1,15 +1,17 @@
+from datetime import datetime
 import sys
 import json
 from pathlib import Path
-from PySide6.QtWidgets import (
-    QApplication,
-    QWidget,
-    QDialog,
+from typing import Optional, Dict, List
+from PySide6.QtWidgets import QApplication, QMainWindow, QWidget, QDialog, QHeaderView
+from PySide6.QtCore import Signal, Qt
+from PySide6.QtGui import (
+    QPixmap,
+    QResizeEvent,
+    QAction,
+    QStandardItemModel,
+    QStandardItem,
 )
-from PySide6.QtCore import Signal
-from PySide6.QtGui import QPixmap
-from PySide6.QtCore import Qt
-from PySide6.QtGui import QPixmap
 from PySide6.QtWidgets import QSizePolicy
 
 
@@ -19,106 +21,177 @@
 sys.path.append(str(parent_dir))
 
 
-from settings import (
+# UI imports
+from src.ui.settings_ui import Ui_Form  # noqa: E402
+from src.ui.videoeditor_ui import Ui_Form as Ui_VideoEditor  # noqa: E402
+from src.ui.welcome_ui import Ui_MainWindow  # noqa: E402
+
+# Core imports
+from src.core.project_creation_dialog import ProjectCreationDialog  # noqa: E402
+from src.core.project_opening_dialog import ProjectOpeningDialog  # noqa: E402
+from src.core.settings import (  # noqa: E402
     load_settings,
     load_themes,
     load_current_theme,
     update_settings,
+    get_recent_project_paths,
 )
 
-# UI imports
-from src.ui.settings_ui import Ui_Form
-from src.ui.videoeditor_ui import Ui_Form as Ui_VideoEditor
-from src.ui.form_ui import Ui_Main
-
-# Core imports
-from src.core.project_creation_dialog import ProjectCreationDialog
-from src.core.project_opening_dialog import ProjectOpeningDialog
-
-# Logger
-from src.utils.logger_utility import logger
+# Utils imports
+from src.utils.logger_utility import logger  # noqa: E402
 
 
-class Main(QWidget):
+class Main(QMainWindow):
     """Main class for the application"""
 
     styleSheetUpdated = Signal(str)
     videoEditorOpened = Signal(str)
 
     @logger.catch
-    def __init__(self, parent=None):
+    def __init__(self, parent: Optional[QWidget] = None) -> None:
         """Initializer"""
         super().__init__(parent)
         self.customStyleSheet = ""
-        self.settings = load_settings()
-        self.themes = load_themes()
-        self.current_theme = load_current_theme()
+        self.settings: Dict = load_settings()
+        self.themes: Dict = load_themes()
+        self.current_theme: Dict = load_current_theme()
         logger.info("Main window initialized")
         self.load_ui()
 
     @logger.catch
-    def resizeEvent(self, event):
+    def resizeEvent(self, event: QResizeEvent) -> None:
         """Resize event for the main window"""
         super().resizeEvent(event)
         self.update_image()
+        self.update_table_view()
 
     @logger.catch
-    def update_image(self):
+    def update_image(self) -> None:
         """Update the image based on the theme and resize event."""
 
         if (
             "latte" in self.current_theme["name"].lower()
             or "light" in self.current_theme["name"].lower()
         ):
-            image_path = "docs/_static/ManimStudioLogoLight.png"
+            image_path: str = "docs/_static/ManimStudioLogoLight.png"
         else:
-            image_path = "docs/_static/ManimStudioLogoDark.png"
+            image_path: str = "docs/_static/ManimStudioLogoDark.png"
 
-        pixmap = QPixmap(image_path)
+        pixmap: QPixmap = QPixmap(image_path)
         if not pixmap.isNull():
-            scaledPixmap = pixmap.scaled(
-                self.ui.label.size(), Qt.KeepAspectRatio, Qt.SmoothTransformation
+            scaledPixmap: QPixmap = pixmap.scaled(
+                self.ui.label.size(),
+                Qt.AspectRatioMode.KeepAspectRatio,
+                Qt.TransformationMode.SmoothTransformation,
             )
             self.ui.label.setPixmap(scaledPixmap)
 
-        self.ui.label.setAlignment(Qt.AlignCenter)
+        self.ui.label.setAlignment(Qt.AlignmentFlag.AlignCenter)
 
     @logger.catch
-    def apply_stylesheet(self):
+    def update_table_view(self) -> None:
+        """Update the table view based on the theme and resize event."""
+        # Resize to fit the window, expand if needed
+        self.ui.recentProjectsTableView.horizontalHeader().setSectionResizeMode(
+            QHeaderView.ResizeMode.Stretch
+        )
+
+    @logger.catch
+    def apply_stylesheet(self) -> None:
         """Apply the stylesheet to the main window and update the image based on the theme"""
 
         # Set the custom stylesheet based on the current theme
-        self.customStyleSheet = f"background-color: {self.current_theme['background']}; color: {self.current_theme['font']}; border-color: {self.current_theme['primary']}; font-size: {self.settings['fontSize']}px; font-family: {self.settings['fontFamily']}; "
+        self.customStyleSheet: str = f"background-color: {self.current_theme['background']}; color: {self.current_theme['font']}; border-color: {self.current_theme['primary']}; font-size: {self.settings['fontSize']}px; font-family: {self.settings['fontFamily']}; "
         self.setStyleSheet(self.customStyleSheet)
 
+        self.customMenubarStylesheet = str(
+            f"background-color: {self.current_theme['primary']}; color: {self.current_theme['font']}; border-color: {self.current_theme['primary']}; font-size: {self.settings['fontSize']}px; font-family: {self.settings['fontFamily']}; "
+        )
+        self.ui.menubar.setStyleSheet(self.customMenubarStylesheet)
+
         # Update the image
         self.update_image()
 
         self.styleSheetUpdated.emit(self.customStyleSheet)
         logger.info("Stylesheet applied")
 
     @logger.catch
-    def load_ui(self):
+    def load_ui(self) -> None:
         """Load the UI from the .ui file"""
 
-        self.ui = Ui_Main()
+        self.ui: Ui_MainWindow = Ui_MainWindow()
         self.ui.setupUi(self)
 
-        self.ui.label.setSizePolicy(QSizePolicy.Preferred, QSizePolicy.Preferred)
+        self.ui.label.setSizePolicy(
+            QSizePolicy(QSizePolicy.Policy.Preferred, QSizePolicy.Policy.Preferred)
+        )
+
         # Apply the theme
         self.apply_stylesheet()
 
-        self.ui.settingsBtn.clicked.connect(self.open_settings_dialog)
-        self.ui.newProjectBtn.clicked.connect(self.showProjectCreationDialog)
-        self.ui.openProjectBtn.clicked.connect(self.showProjectOpenDialog)
+        # Create new menubar item
+        settings_action = QAction("Settings", self)
+        settings_action.triggered.connect(self.open_settings_dialog)
+        self.ui.menubar.addAction(settings_action)
+
+        self.ui.newProjectBtn.clicked.connect(self.show_project_creation_dialog)
+        self.ui.openProjectBtn.clicked.connect(self.show_project_open_dialog)
+
+        # Populate the recent projects list with the 10 latest projects
+        self.populate_recent_projects()
+        self.ui.recentProjectsTableView.doubleClicked.connect(
+            self.open_project_from_list
+        )
 
         logger.info("UI loaded")
 
     @logger.catch
-    def open_settings_dialog(self):
+    def populate_recent_projects(self):
+        # Create a model with 3 columns
+        model = QStandardItemModel(0, 3, self)
+        model.setHorizontalHeaderLabels(["Project Path", "Last Modified", "Size"])
+
+        for project in get_recent_project_paths():
+            # Convert the last_modified timestamp to a human-readable format
+            last_modified_date = datetime.fromtimestamp(
+                project["last_modified"]
+            ).strftime("%Y-%m-%d %H:%M:%S")
+            # Format the size in a more readable format, e.g., in KB, MB
+            size_kb = project["size"] / 1024  # Convert size to KB
+            if size_kb < 1024:
+                size_str = f"{size_kb:.2f} KB"
+            else:
+                size_mb = size_kb / 1024
+                size_str = f"{size_mb:.2f} MB"
+
+            # Create items for each column
+            path_item = QStandardItem(project["path"])
+            modified_item = QStandardItem(last_modified_date)
+            size_item = QStandardItem(size_str)
+
+            # Append the row to the model
+            model.appendRow([path_item, modified_item, size_item])
+
+        # Set the model to the table view
+        self.ui.recentProjectsTableView.setModel(model)
+        # Resize columns to fit content
+        self.ui.recentProjectsTableView.resizeColumnsToContents()
+
+    @logger.catch
+    def open_project_from_list(self, index):
+        # Retrieve the project path from the model item at the clicked index
+        model = self.ui.recentProjectsTableView.model()
+        project_path = model.data(
+            model.index(index.row(), 0)
+        )  # Assuming the project path is in the first column
+        # Now you can call the method to open the project
+        self.open_video_editor(project_path)
+
+    @logger.catch
+    def open_settings_dialog(self) -> None:
         """Open the settings dialog"""
-        self.settingsDialog = QDialog()
-        self.uiSettings = Ui_Form()
+        self.settingsDialog: QDialog = QDialog()
+        self.uiSettings: Ui_Form = Ui_Form()
         self.uiSettings.setupUi(self.settingsDialog)
 
         # Change window title
@@ -154,25 +227,27 @@ def open_settings_dialog(self):
         self.settingsDialog.exec()
 
     @logger.catch
-    def update_settings_from_dialog(self):
+    def update_settings_from_dialog(self) -> None:
         """Update the settings from the dialog, and update the UI"""
 
         # Get recentProjects array from the current settings
-        recentProjectPaths = self.settings.get("recentProjectPaths", [])
+        recentProjectPaths: List[str] = self.settings.get("recentProjectPaths", [])
 
         # Get recentProjectCreationPaths array from the current settings
-        recentProjectCreationPaths = self.settings.get("recentProjectCreationPaths", [])
+        recentProjectCreationPaths: List[str] = self.settings.get(
+            "recentProjectCreationPaths", []
+        )
 
         # Get the current values from the dialog
-        fontSize = self.uiSettings.fontSizeSpinBox.value()
-        fontFamily = self.uiSettings.fontComboBox.currentText()
+        fontSize: int = self.uiSettings.fontSizeSpinBox.value()
+        fontFamily: str = self.uiSettings.fontComboBox.currentText()
 
         # Extract full theme data from the selected item in the combobox
-        theme_data_json = self.uiSettings.themeComboBox.currentData()
-        selected_theme = json.loads(theme_data_json)
+        theme_data_json: str = self.uiSettings.themeComboBox.currentData()
+        selected_theme: Dict = json.loads(theme_data_json)
 
         # Create a new settings object
-        new_settings = {
+        new_settings: Dict = {
             "fontSize": fontSize,
             "fontFamily": fontFamily,
             "theme": selected_theme,
@@ -190,12 +265,12 @@ def update_settings_from_dialog(self):
             self.apply_stylesheet()
 
     @logger.catch
-    def showProjectCreationDialog(self):
+    def show_project_creation_dialog(self) -> None:
         """Show the project creation dialog"""
         try:
-            dialog = ProjectCreationDialog(self)
+            dialog: ProjectCreationDialog = ProjectCreationDialog(self)
             dialog.projectCreated.connect(
-                self.openVideoEditor
+                self.open_video_editor
             )  # Connect to the new method
             self.videoEditorOpened.connect(
                 dialog.close
@@ -210,11 +285,11 @@ def showProjectCreationDialog(self):
             logger.error(f"Error showing project creation dialog: {e}")
 
     @logger.catch
-    def showProjectOpenDialog(self):
+    def show_project_open_dialog(self) -> None:
         """Show the project open dialog"""
         try:
-            dialog = ProjectOpeningDialog(self)
-            dialog.projectSelected.connect(self.openVideoEditor)
+            dialog: ProjectOpeningDialog = ProjectOpeningDialog(self)
+            dialog.projectSelected.connect(self.open_video_editor)
             self.videoEditorOpened.connect(
                 dialog.close
             )  # Close dialog when VideoEditor opens
@@ -226,19 +301,24 @@ def showProjectOpenDialog(self):
             logger.error(f"Error showing project open dialog: {e}")
 
     @logger.catch
-    def openVideoEditor(self, projectFilePath):
+    def open_video_editor(self, project_file_path: str) -> None:
         """Open the video editor with the project file"""
         try:
-            self.videoEditor = QDialog()
-            self.uiVideoEditor = Ui_VideoEditor()
+            self.videoEditor: QDialog = QDialog()
+            self.uiVideoEditor: Ui_VideoEditor = Ui_VideoEditor()
             self.uiVideoEditor.setupUi(self.videoEditor)
+
             # Apply the theme
             self.videoEditor.setStyleSheet(self.customStyleSheet)
+
             # Change window title as current project name with file path
-            self.videoEditor.setWindowTitle(f"Manim Studio - {projectFilePath}")
+            self.videoEditor.setWindowTitle(f"Manim Studio - {project_file_path}")
 
             # Emit the signal after VideoEditor dialog is opened
-            self.videoEditorOpened.emit(projectFilePath)
+            self.videoEditorOpened.emit(project_file_path)
+
+            self.close()
+
             self.videoEditor.exec()
         except Exception as e:
             logger.error(f"Error opening video editor: {e}")