Initial release: DictIA v0.8.14-alpha (fork de Speakr, AGPL-3.0)

static/js/modules/state/ui.js

@@ -0,0 +1,109 @@
+/**
+ * UI state management
+ */
+
+export function createUIState(ref, computed) {
+    // --- UI State ---
+    const browser = ref('unknown');
+    const isSidebarCollapsed = ref(false);
+    const searchTipsExpanded = ref(false);
+    const isUserMenuOpen = ref(false);
+    const isDarkMode = ref(false);
+    const currentColorScheme = ref('blue');
+    const showColorSchemeModal = ref(false);
+    const windowWidth = ref(window.innerWidth);
+    const mobileTab = ref('transcript');
+    const isMetadataExpanded = ref(false);
+    const expandedSection = ref('settings');  // 'notes' or 'settings'
+
+    // --- i18n State ---
+    const currentLanguage = ref('en');
+    const currentLanguageName = ref('English');
+    const availableLanguages = ref([]);
+    const showLanguageMenu = ref(false);
+
+    // --- Column Resizing State ---
+    const leftColumnWidth = ref(60);
+    const rightColumnWidth = ref(40);
+    const isResizing = ref(false);
+
+    // --- Transcription State ---
+    const transcriptionViewMode = ref('simple');
+    const legendExpanded = ref(false);
+    const highlightedSpeaker = ref(null);
+    const processingIndicatorMinimized = ref(false);
+
+    // --- Virtual Scroll State ---
+    // For transcript panel virtual scrolling (performance optimization for long transcriptions)
+    const transcriptScrollTop = ref(0);
+    const transcriptContainerHeight = ref(0);
+    const transcriptItemHeight = 48; // Estimated height per segment in pixels
+
+    // --- Computed Properties ---
+    const isMobileScreen = computed(() => {
+        return windowWidth.value < 1024;
+    });
+
+    // --- Color Scheme Definitions ---
+    const colorSchemes = {
+        light: [
+            { id: 'blue', name: 'Ocean Blue', description: 'Classic blue theme with professional appeal', class: '' },
+            { id: 'emerald', name: 'Forest Emerald', description: 'Fresh green theme for a natural feel', class: 'theme-light-emerald' },
+            { id: 'purple', name: 'Royal Purple', description: 'Elegant purple theme with sophistication', class: 'theme-light-purple' },
+            { id: 'rose', name: 'Sunset Rose', description: 'Warm pink theme with gentle energy', class: 'theme-light-rose' },
+            { id: 'amber', name: 'Golden Amber', description: 'Warm yellow theme for brightness', class: 'theme-light-amber' },
+            { id: 'teal', name: 'Ocean Teal', description: 'Cool teal theme for tranquility', class: 'theme-light-teal' }
+        ],
+        dark: [
+            { id: 'blue', name: 'Midnight Blue', description: 'Deep blue theme for focused work', class: '' },
+            { id: 'emerald', name: 'Dark Forest', description: 'Rich green theme for comfortable viewing', class: 'theme-dark-emerald' },
+            { id: 'purple', name: 'Deep Purple', description: 'Mysterious purple theme for creativity', class: 'theme-dark-purple' },
+            { id: 'rose', name: 'Dark Rose', description: 'Muted pink theme with subtle warmth', class: 'theme-dark-rose' },
+            { id: 'amber', name: 'Dark Amber', description: 'Warm brown theme for cozy sessions', class: 'theme-dark-amber' },
+            { id: 'teal', name: 'Deep Teal', description: 'Dark teal theme for calm focus', class: 'theme-dark-teal' }
+        ]
+    };
+
+    return {
+        // UI
+        browser,
+        isSidebarCollapsed,
+        searchTipsExpanded,
+        isUserMenuOpen,
+        isDarkMode,
+        currentColorScheme,
+        showColorSchemeModal,
+        windowWidth,
+        mobileTab,
+        isMetadataExpanded,
+        expandedSection,
+
+        // i18n
+        currentLanguage,
+        currentLanguageName,
+        availableLanguages,
+        showLanguageMenu,
+
+        // Column Resizing
+        leftColumnWidth,
+        rightColumnWidth,
+        isResizing,
+
+        // Transcription
+        transcriptionViewMode,
+        legendExpanded,
+        highlightedSpeaker,
+        processingIndicatorMinimized,
+
+        // Virtual Scroll
+        transcriptScrollTop,
+        transcriptContainerHeight,
+        transcriptItemHeight,
+
+        // Computed
+        isMobileScreen,
+
+        // Constants
+        colorSchemes
+    };
+}