Add donation prompt dialog feature

Implement a donation prompt dialog that appears on first launch and every 30 days to encourage users to support the project. Users can permanently dismiss the dialog with a "Don't show this again" option.

Backend (Rust):
- Add DonationPromptConfig structure to track last shown timestamp and dismissal status
- Implement should_show_donation_prompt command to check display conditions
- Implement dismiss_donation_prompt command to update state and persist config
- Add donation_prompt field to AppState and AppConfig with backward compatibility

Frontend (React):
- Create DonationDialog component with Material-UI matching existing design patterns
- Add three support buttons: GitHub Star, GitHub Sponsors, Twitch Subscribe
- Integrate dialog into App.tsx with smart display logic (main window only, 2s delay)

The dialog only shows on the main window, not on popup windows like List Manager.
Configuration is persisted in config.json with backward compatibility using #[serde(default)].

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: 2 people

DONATION_DIALOG_IMPLEMENTATION.md

@@ -0,0 +1,118 @@
+# Donation Dialog Implementation
+
+## Summary
+Successfully implemented a donation prompt dialog that appears on first launch and every 30 days thereafter, with an option to permanently dismiss it.
+
+## Changes Made
+
+### Rust Backend
+
+#### 1. `app/src-tauri/src/types.rs`
+- Added `DonationPromptConfig` struct with:
+  - `last_shown: Option<String>` - RFC3339 timestamp of last display
+  - `permanently_dismissed: bool` - Flag for "Don't show again"
+- Added `donation_prompt: Option<DonationPromptConfig>` field to `AppConfig` (with `#[serde(default)]` for backward compatibility)
+
+#### 2. `app/src-tauri/src/state.rs`
+- Added `donation_prompt: Arc<Mutex<DonationPromptConfig>>` to `AppState`
+- Initialized in `new()` with `DonationPromptConfig::default()`
+- Updated `save_config()` to include donation_prompt in AppConfig
+- Updated `load_config()` to restore donation_prompt from config.json
+
+#### 3. `app/src-tauri/src/commands.rs`
+- Added `use chrono::{DateTime, Duration, Utc};` for date/time handling
+- Implemented `should_show_donation_prompt()`:
+  - Returns `false` if `permanently_dismissed == true`
+  - Returns `true` if `last_shown == None` (first launch)
+  - Returns `true` if 30+ days have passed since `last_shown`
+  - Returns `false` otherwise
+- Implemented `dismiss_donation_prompt(permanently: bool)`:
+  - Updates `last_shown` to current timestamp
+  - Sets `permanently_dismissed = true` if requested
+  - Calls `save_config()` to persist changes
+
+#### 4. `app/src-tauri/src/lib.rs`
+- Registered new commands in `generate_handler!`:
+  - `should_show_donation_prompt`
+  - `dismiss_donation_prompt`
+
+### React Frontend
+
+#### 5. `app/src/components/DonationDialog.tsx` (New File)
+- Material-UI Dialog component matching existing design patterns
+- Title: "Support vmix-utility" with FavoriteOutlined icon
+- Content:
+  - Thank you message
+  - Explanation that project is free and open source
+  - Three support buttons (matching Developer.tsx style):
+    - "Star on GitHub" (secondary color)
+    - "GitHub Sponsors" (#13C3FF blue)
+    - "Subscribe on Twitch" (#9146FF purple)
+  - "Don't show this again" checkbox
+- "Close" button in DialogActions
+- Uses same TwitchIcon SVG as Developer.tsx
+
+#### 6. `app/src/App.tsx`
+- Added imports: `DonationDialog`, `invoke`
+- Added state: `donationDialogOpen`
+- Added useEffect to check dialog display conditions:
+  - Only runs on main window (`currentPath === '/'`)
+  - Waits 2 seconds after startup
+  - Calls `invoke('should_show_donation_prompt')`
+  - Opens dialog if backend returns true
+- Added `handleDonationDialogClose()`:
+  - Closes dialog
+  - Calls `invoke('dismiss_donation_prompt', { permanently })`
+- Rendered `<DonationDialog>` inside `<VMixStatusProvider>`
+
+## Design Considerations
+
+### Backward Compatibility
+- Used `#[serde(default)]` and `Option<DonationPromptConfig>` so existing config.json files work without migration
+- Default values ensure safe behavior for missing fields
+
+### Display Timing
+- 2-second delay after startup to avoid conflicts with:
+  - Theme loading
+  - Update checker (3-second delay)
+- Only shows on main window (not on popup windows like List Manager)
+
+### State Management
+- Backend centralizes all display logic for consistency
+- Frontend only calls backend commands, no date logic duplication
+- Persistent storage via existing config.json mechanism
+
+### User Experience
+- Non-intrusive: only shows on first launch and monthly
+- Easy to dismiss permanently
+- Uses familiar UI patterns from existing Developer page
+- Accessible via same support buttons throughout the app
+
+## Testing Checklist
+
+1. ✅ First launch: Dialog appears 2 seconds after startup
+2. ⏳ Second launch (within 30 days): Dialog does NOT appear
+3. ⏳ Launch after 30+ days: Dialog appears again
+4. ⏳ "Don't show again" + close: Dialog never appears again (even after 30 days)
+5. ⏳ Manual config.json test: Verify timestamps are saved correctly
+6. ⏳ Popup windows (List Manager): Dialog does NOT appear
+7. ⏳ All support buttons work (open correct URLs)
+
+## Build Status
+✅ Compilation successful (both Rust and TypeScript)
+✅ Debug build completed without errors
+✅ Type checking passed
+
+## Files Modified
+- `app/src-tauri/src/types.rs`
+- `app/src-tauri/src/state.rs`
+- `app/src-tauri/src/commands.rs`
+- `app/src-tauri/src/lib.rs`
+- `app/src/App.tsx`
+
+## Files Created
+- `app/src/components/DonationDialog.tsx`
+
+## Dependencies Used
+- `chrono` - Already in Cargo.toml (for date/time calculations)
+- No new frontend dependencies required

app/src-tauri/Cargo.lock

@@ -10,6 +10,7 @@ use crate::app_log;
 use crate::network_scanner::{get_network_interfaces, scan_network_for_vmix, NetworkInterface, VmixScanResult};
 use std::collections::HashMap;
 use tauri::{AppHandle, Manager, State, WebviewUrl, WebviewWindowBuilder, Emitter};
+use chrono::{DateTime, Duration, Utc};
 
 
 // Shared builder function to build VideoList inputs from vmix-rs model
@@ -1313,4 +1314,76 @@ pub async fn scan_network_for_vmix_command(
             Err(format!("Failed to scan network for vMix: {}", e))
         }
     }
+}
+
+#[tauri::command]
+pub async fn should_show_donation_prompt(
+    state: State<'_, AppState>
+) -> Result<bool, String> {
+    let prompt_config = state.donation_prompt.lock().unwrap();
+
+    // If permanently dismissed, don't show
+    if prompt_config.permanently_dismissed {
+        app_log!(debug, "Donation prompt permanently dismissed");
+        return Ok(false);
+    }
+
+    // If never shown before, show it
+    if prompt_config.last_shown.is_none() {
+        app_log!(info, "Donation prompt: first time, should show");
+        return Ok(true);
+    }
+
+    // Check if 30 days have passed since last shown
+    if let Some(ref last_shown_str) = prompt_config.last_shown {
+        match DateTime::parse_from_rfc3339(last_shown_str) {
+            Ok(last_shown) => {
+                let now = Utc::now();
+                let duration_since_last = now.signed_duration_since(last_shown.with_timezone(&Utc));
+
+                // Show if 30 days (or more) have passed
+                if duration_since_last >= Duration::days(30) {
+                    app_log!(info, "Donation prompt: 30 days passed, should show");
+                    Ok(true)
+                } else {
+                    app_log!(debug, "Donation prompt: shown {} days ago, not showing yet", duration_since_last.num_days());
+                    Ok(false)
+                }
+            }
+            Err(e) => {
+                app_log!(error, "Failed to parse last_shown timestamp: {}", e);
+                // If timestamp is invalid, treat as first time
+                Ok(true)
+            }
+        }
+    } else {
+        Ok(true)
+    }
+}
+
+#[tauri::command]
+pub async fn dismiss_donation_prompt(
+    state: State<'_, AppState>,
+    app_handle: AppHandle,
+    permanently: bool
+) -> Result<(), String> {
+    app_log!(info, "Dismissing donation prompt (permanently: {})", permanently);
+
+    {
+        let mut prompt_config = state.donation_prompt.lock().unwrap();
+
+        // Update last_shown to current time
+        prompt_config.last_shown = Some(Utc::now().to_rfc3339());
+
+        // Set permanently_dismissed flag if requested
+        if permanently {
+            prompt_config.permanently_dismissed = true;
+            app_log!(info, "Donation prompt permanently dismissed");
+        }
+    }
+
+    // Save config to persist the changes
+    state.save_config(&app_handle).await?;
+
+    Ok(())
 }

app/src-tauri/src/commands.rs

@@ -221,7 +221,9 @@ pub fn run() {
             check_for_updates,
             install_update,
             get_network_interfaces_command,
-            scan_network_for_vmix_command
+            scan_network_for_vmix_command,
+            should_show_donation_prompt,
+            dismiss_donation_prompt
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");

app/src-tauri/src/lib.rs

@@ -1,6 +1,6 @@
 use crate::types::{
     AppConfig, AppSettings, AutoRefreshConfig, ConnectionConfig, ConnectionType,
-    VmixConnection, VmixInput, VmixVideoListInput,
+    DonationPromptConfig, VmixConnection, VmixInput, VmixVideoListInput,
 };
 use crate::http_client::VmixClientWrapper;
 use crate::tcp_manager::TcpVmixManager;
@@ -32,6 +32,7 @@ pub struct AppState {
     pub connection_labels: Arc<Mutex<HashMap<String, String>>>,
     pub app_settings: Arc<Mutex<AppSettings>>,
     pub video_list_windows: Arc<Mutex<HashMap<String, VideoListWindow>>>,
+    pub donation_prompt: Arc<Mutex<DonationPromptConfig>>,
 }
 
 impl AppState {
@@ -46,6 +47,7 @@ impl AppState {
             connection_labels: Arc::new(Mutex::new(HashMap::new())),
             app_settings: Arc::new(Mutex::new(AppSettings::default())),
             video_list_windows: Arc::new(Mutex::new(HashMap::new())),
+            donation_prompt: Arc::new(Mutex::new(DonationPromptConfig::default())),
         }
     }
 
@@ -138,6 +140,7 @@ impl AppState {
                 connections: all_connections,
                 app_settings: Some(self.app_settings.lock().unwrap().clone()),
                 logging_config: Some(crate::logging::LOGGING_CONFIG.lock().unwrap().clone()),
+                donation_prompt: Some(self.donation_prompt.lock().unwrap().clone()),
             }
         };
 
@@ -223,9 +226,16 @@ impl AppState {
             *config = logging_config;
             println!("Loaded logging config");
         }
-        
+
+        // Load donation prompt config
+        if let Some(donation_prompt) = config.donation_prompt {
+            let mut prompt = self.donation_prompt.lock().unwrap();
+            *prompt = donation_prompt;
+            println!("Loaded donation prompt config");
+        }
+
         println!("Config loading completed");
-        
+
         Ok(())
     }
 

app/src-tauri/src/state.rs

@@ -133,6 +133,8 @@ pub struct AppConfig {
     pub connections: Vec<ConnectionConfig>,
     pub app_settings: Option<AppSettings>,
     pub logging_config: Option<LoggingConfig>,
+    #[serde(default)]
+    pub donation_prompt: Option<DonationPromptConfig>,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)]
@@ -234,6 +236,21 @@ impl Default for LoggingConfig {
     }
 }
 
+#[derive(Debug, Clone, Serialize, Deserialize)]
+pub struct DonationPromptConfig {
+    pub last_shown: Option<String>,       // RFC3339 timestamp
+    pub permanently_dismissed: bool,       // "今後表示しない" flag
+}
+
+impl Default for DonationPromptConfig {
+    fn default() -> Self {
+        Self {
+            last_shown: None,
+            permanently_dismissed: false
+        }
+    }
+}
+
 #[derive(Clone, Debug, Serialize, Deserialize)]
 pub struct VmixConnection {
     pub host: String,

app/src-tauri/src/types.rs

@@ -5,14 +5,17 @@ import { Box, Typography } from '@mui/material';
 import Layout from './components/Layout';
 import ListManager from './pages/ListManager';
 import SingleVideoList from './pages/SingleVideoList';
+import DonationDialog from './components/DonationDialog';
 import { VMixStatusProvider } from './hooks/useVMixStatus';
 import { ThemeProvider as CustomThemeProvider, useTheme } from './hooks/useTheme';
 import { UISettingsProvider } from './hooks/useUISettings.tsx';
+import { invoke } from '@tauri-apps/api/core';
 import "./App.css";
 
 function AppContent() {
   const { resolvedTheme, isLoading } = useTheme();
   const [currentPath, setCurrentPath] = useState(window.location.pathname);
+  const [donationDialogOpen, setDonationDialogOpen] = useState(false);
 
   const theme = useMemo(() => createTheme({
     palette: {
@@ -34,12 +37,44 @@ function AppContent() {
 
     // Listen for popstate events (back/forward buttons)
     window.addEventListener('popstate', handleLocationChange);
-    
+
     return () => {
       window.removeEventListener('popstate', handleLocationChange);
     };
   }, []);
 
+  // Check if donation prompt should be shown (only on main window)
+  useEffect(() => {
+    // Only show on main window (not on popup windows like /list-manager)
+    if (currentPath !== '/') {
+      return;
+    }
+
+    // Wait 2 seconds after startup before checking
+    const timer = setTimeout(async () => {
+      try {
+        const shouldShow = await invoke<boolean>('should_show_donation_prompt');
+        if (shouldShow) {
+          setDonationDialogOpen(true);
+        }
+      } catch (error) {
+        console.error('Failed to check donation prompt:', error);
+      }
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [currentPath]);
+
+  const handleDonationDialogClose = async (permanently: boolean) => {
+    setDonationDialogOpen(false);
+
+    try {
+      await invoke('dismiss_donation_prompt', { permanently });
+    } catch (error) {
+      console.error('Failed to dismiss donation prompt:', error);
+    }
+  };
+
   if (isLoading) {
     return (
       <div style={{ 
@@ -89,6 +124,10 @@ function AppContent() {
       <UISettingsProvider>
         <VMixStatusProvider>
           {renderContent()}
+          <DonationDialog
+            open={donationDialogOpen}
+            onClose={handleDonationDialogClose}
+          />
         </VMixStatusProvider>
       </UISettingsProvider>
     </ThemeProvider>