feat: add export to JSON functionality with backend implementation

- Create backend export command in utils.rs that saves to Downloads folder
- Add dirs dependency for proper file system access
- Update Export and Clear All buttons to use shadcn Button components
- Fix Time Saved stat card to be clickable
- Remove border highlight from selected stats cards (background only)
- Update Upgrade to Pro button to use shadcn Button component

Author: moinulmoin

src-tauri/Cargo.lock

@@ -37,6 +37,7 @@ rdev = "0.5.3"
 sha2 = "0.10.9"
 sha1 = "0.10.6"
 arboard = "3.6.0"
+dirs = "5"
 log = "0.4"
 env_logger = "0.11"
 tauri-plugin-log = { version = "2", features = ["colored"] }

src-tauri/Cargo.toml

@@ -10,4 +10,5 @@ pub mod permissions;
 pub mod reset;
 pub mod settings;
 pub mod text;
+pub mod utils;
 pub mod window;

src-tauri/src/commands/mod.rs

@@ -0,0 +1,71 @@
+use tauri::AppHandle;
+use tauri_plugin_store::StoreExt;
+
+#[tauri::command]
+pub async fn export_transcriptions(app: AppHandle) -> Result<String, String> {
+    use std::fs;
+    
+    log::info!("Exporting transcriptions to JSON");
+    
+    // Get transcription history from the store
+    let store = app.store("transcriptions").map_err(|e| e.to_string())?;
+    
+    let mut entries: Vec<(String, serde_json::Value)> = Vec::new();
+    
+    // Collect all entries with their timestamps
+    for key in store.keys() {
+        if let Some(value) = store.get(&key) {
+            entries.push((key.to_string(), value));
+        }
+    }
+    
+    // Sort by timestamp (newest first)
+    entries.sort_by(|a, b| b.0.cmp(&a.0));
+    
+    let history: Vec<serde_json::Value> = entries.into_iter().map(|(_, v)| v).collect();
+    
+    if history.is_empty() {
+        return Err("No transcriptions to export".to_string());
+    }
+    
+    // Create export data structure
+    let export_data = serde_json::json!({
+        "app": "VoiceTypr",
+        "exportDate": chrono::Utc::now().to_rfc3339(),
+        "totalTranscriptions": history.len(),
+        "transcriptions": history
+    });
+    
+    // Get the Downloads folder path
+    let download_dir = if cfg!(target_os = "macos") {
+        // macOS specific
+        dirs::download_dir()
+            .or_else(|| dirs::home_dir().map(|h| h.join("Downloads")))
+    } else {
+        // Windows/Linux
+        dirs::download_dir()
+    };
+    
+    let download_path = download_dir
+        .ok_or_else(|| "Could not find Downloads folder".to_string())?;
+    
+    // Create filename with current date
+    let filename = format!(
+        "voicetypr-transcriptions-{}.json",
+        chrono::Local::now().format("%Y-%m-%d")
+    );
+    
+    let file_path = download_path.join(&filename);
+    
+    // Write to file with pretty formatting
+    let json_string = serde_json::to_string_pretty(&export_data)
+        .map_err(|e| format!("Failed to serialize data: {}", e))?;
+    
+    fs::write(&file_path, json_string)
+        .map_err(|e| format!("Failed to write file: {}", e))?;
+    
+    log::info!("Exported {} transcriptions to {:?}", history.len(), file_path);
+    
+    // Return the full path as string
+    Ok(file_path.to_string_lossy().to_string())
+}

src-tauri/src/commands/utils.rs

@@ -52,6 +52,7 @@ use commands::{
     reset::reset_app_data,
     settings::*,
     text::*,
+    utils::export_transcriptions,
     window::*,
 };
 use state::unified_state::UnifiedRecordingState;
@@ -1266,6 +1267,7 @@ pub fn run() -> Result<(), Box<dyn std::error::Error>> {
             get_transcription_history,
             delete_transcription_entry,
             clear_all_transcriptions,
+            export_transcriptions,
             show_pill_widget,
             hide_pill_widget,
             close_pill_widget,

src-tauri/src/lib.rs

@@ -7,6 +7,7 @@ import {
   SidebarMenuItem,
   Sidebar as SidebarPrimitive,
 } from "@/components/ui/sidebar";
+import { Button } from "@/components/ui/button";
 import { useLicense } from "@/contexts/LicenseContext";
 import { cn } from "@/lib/utils";
 import {
@@ -156,14 +157,19 @@ export function Sidebar({ activeSection, onSectionChange }: SidebarProps) {
                         : "No License"}
                   </span>
                 </div>
-                <a
-                  href="https://voicetypr.com/#pricing"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="w-full inline-flex items-center justify-center px-3 py-2 text-xs font-medium text-white bg-primary rounded-md hover:bg-primary/90 transition-colors"
+                <Button
+                  asChild
+                  className="w-full text-sm"
+                  size="sm"
                 >
-                  Upgrade to Pro
-                </a>
+                  <a
+                    href="https://voicetypr.com/#pricing"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Upgrade to Pro
+                  </a>
+                </Button>
               </>
             )}
           </div>

src/components/Sidebar.tsx

@@ -1,10 +1,11 @@
 import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
 import { formatHotkey } from "@/lib/hotkey-utils";
 import { TranscriptionHistory } from "@/types";
 import { useCanRecord, useCanAutoInsert } from "@/contexts/ReadinessContext";
 import { invoke } from "@tauri-apps/api/core";
 import { ask } from "@tauri-apps/plugin-dialog";
-import { AlertCircle, Mic, Trash2, Search, Copy, Calendar, Clock } from "lucide-react";
+import { AlertCircle, Mic, Trash2, Search, Copy, Calendar, Clock, Download } from "lucide-react";
 import { useState, useMemo } from "react";
 import { toast } from "sonner";
 import { cn } from "@/lib/utils";
@@ -126,6 +127,33 @@ export function RecentRecordings({ history, hotkey = "Cmd+Shift+Space", onHistor
     }
   };
 
+  const handleExport = async () => {
+    if (history.length === 0) return;
+
+    try {
+      // Show confirmation dialog with location info
+      const confirmed = await ask(
+        `Export ${history.length} transcription${history.length !== 1 ? 's' : ''} to JSON?\n\nThe file will be saved to your Downloads folder.`, 
+        {
+          title: "Export Transcriptions",
+          kind: "info"
+        }
+      );
+
+      if (!confirmed) return;
+
+      // Call the backend export command
+      const filePath = await invoke<string>("export_transcriptions");
+      
+      toast.success(`Exported ${history.length} transcriptions`, {
+        description: `Saved to Downloads folder`
+      });
+    } catch (error) {
+      console.error("Failed to export transcriptions:", error);
+      toast.error("Failed to export transcriptions");
+    }
+  };
+
   return (
     <div className="h-full flex flex-col">
       {/* Header */}
@@ -138,15 +166,27 @@ export function RecentRecordings({ history, hotkey = "Cmd+Shift+Space", onHistor
             </p>
           </div>
           <div className="flex items-center gap-3">
+            {history.length > 0 && (
+              <Button
+                onClick={handleExport}
+                size="sm"
+                title="Export transcriptions to JSON"
+              >
+                <Download className="h-3.5 w-3.5" />
+                Export
+              </Button>
+            )}
             {history.length > 5 && (
-              <button
+              <Button
                 onClick={handleClearAll}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-destructive/10 rounded-md transition-colors"
+                variant="ghost"
+                size="sm"
+                className="text-destructive hover:text-destructive"
                 title="Clear all transcriptions"
               >
                 <Trash2 className="h-3.5 w-3.5" />
                 Clear All
-              </button>
+              </Button>
             )}
           </div>
         </div>

src/components/sections/RecentRecordings.tsx

@@ -165,7 +165,7 @@ export function OverviewTab({ history }: OverviewTabProps) {
             <div 
               className={cn(
                 "p-4 rounded-lg bg-card border border-border/50 hover:border-border transition-all cursor-pointer",
-                selectedPeriod === 'all' && "border-primary bg-primary/5"
+                selectedPeriod === 'all' && "bg-primary/5"
               )}
               onClick={() => setSelectedPeriod('all')}
               title="Click to filter all time"
@@ -181,7 +181,7 @@ export function OverviewTab({ history }: OverviewTabProps) {
             <div 
               className={cn(
                 "p-4 rounded-lg bg-card border border-border/50 hover:border-border transition-all cursor-pointer",
-                selectedPeriod === 'month' && "border-primary bg-primary/5"
+                selectedPeriod === 'month' && "bg-primary/5"
               )}
               onClick={() => setSelectedPeriod('month')}
               title="Click to filter last 30 days"
@@ -195,7 +195,11 @@ export function OverviewTab({ history }: OverviewTabProps) {
             </div>
 
             <div 
-              className="p-4 rounded-lg bg-card border border-border/50 hover:border-border transition-all cursor-pointer"
+              className={cn(
+                "p-4 rounded-lg bg-card border border-border/50 hover:border-border transition-all cursor-pointer",
+                selectedPeriod === 'today' && "bg-primary/5"
+              )}
+              onClick={() => setSelectedPeriod('today')}
               title="Based on 40 WPM typing speed"
             >
               <Clock className="h-5 w-5 text-muted-foreground/50 mb-3" />
@@ -209,7 +213,7 @@ export function OverviewTab({ history }: OverviewTabProps) {
             <div 
               className={cn(
                 "p-4 rounded-lg bg-card border border-border/50 hover:border-border transition-all cursor-pointer",
-                selectedPeriod === 'week' && "border-primary bg-primary/5"
+                selectedPeriod === 'week' && "bg-primary/5"
               )}
               onClick={() => setSelectedPeriod('week')}
               title="Click to filter last 7 days"