feat(transcription): Add language toggle commands and UI

apps/whispering/src-tauri/Cargo.toml

@@ -12,6 +12,10 @@ cargo-target-macos-version = "10.15"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
+[[bin]]
+name = "whispering"
+path = "src/main.rs"
+
 [lib]
 # The `_lib` suffix may seem redundant but it is necessary
 # to make the lib name unique and wouldn't conflict with the bin name.

apps/whispering/src-tauri/tauri.conf.json

@@ -21,9 +21,8 @@
 		"createUpdaterArtifacts": true,
 		"macOS": {
 			"entitlements": "entitlements.plist",
-			"hardenedRuntime": true,
-			"minimumSystemVersion": "10.15",
-			"signingIdentity": "Developer ID Application: Braden Wong (3C7J97QA5Z)"
+			"hardenedRuntime": false,
+			"minimumSystemVersion": "10.15"
 		},
 		"linux": {
 			"appimage": {

apps/whispering/src/lib/commands.ts

@@ -1,61 +1,86 @@
 import { rpc } from '$lib/query';
+
 import type { ShortcutTriggerState } from './services/_shortcut-trigger-state';
 
 type SatisfiedCommand = {
+	callback: () => void;
 	id: string;
-	title: string;
 	on: ShortcutTriggerState;
-	callback: () => void;
+	title: string;
 };
 
 export const commands = [
 	{
-		id: 'pushToTalk',
 		title: 'Push to talk',
-		on: 'Both',
 		callback: () => rpc.commands.toggleManualRecording.execute(undefined),
+		id: 'pushToTalk',
+		on: 'Both',
 	},
 	{
-		id: 'toggleManualRecording',
 		title: 'Toggle recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.toggleManualRecording.execute(undefined),
+		id: 'toggleManualRecording',
+		on: 'Pressed',
 	},
 	{
-		id: 'startManualRecording',
 		title: 'Start recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.startManualRecording.execute(undefined),
+		id: 'startManualRecording',
+		on: 'Pressed',
 	},
 	{
-		id: 'stopManualRecording',
 		title: 'Stop recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.stopManualRecording.execute(undefined),
+		id: 'stopManualRecording',
+		on: 'Pressed',
 	},
 	{
-		id: 'cancelManualRecording',
 		title: 'Cancel recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.cancelManualRecording.execute(undefined),
+		id: 'cancelManualRecording',
+		on: 'Pressed',
 	},
 	{
-		id: 'startVadRecording',
 		title: 'Start voice activated recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.startVadRecording.execute(undefined),
+		id: 'startVadRecording',
+		on: 'Pressed',
 	},
 	{
-		id: 'stopVadRecording',
 		title: 'Stop voice activated recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.stopVadRecording.execute(undefined),
+		id: 'stopVadRecording',
+		on: 'Pressed',
 	},
 	{
-		id: 'toggleVadRecording',
 		title: 'Toggle voice activated recording',
-		on: 'Pressed',
 		callback: () => rpc.commands.toggleVadRecording.execute(undefined),
+		id: 'toggleVadRecording',
+		on: 'Pressed',
+	},
+	{
+		title: 'Cycle through favorite output languages',
+		callback: () => rpc.commands.toggleOutputLanguage.execute(undefined),
+		id: 'toggleOutputLanguage',
+		on: 'Pressed',
+	},
+	{
+		title: 'Switch to favorite language #1',
+		callback: () => rpc.commands.setOutputLanguageSlot.execute({ slot: 1 }),
+		id: 'setOutputLanguageSlot1',
+		on: 'Pressed',
+	},
+	{
+		title: 'Switch to favorite language #2',
+		callback: () => rpc.commands.setOutputLanguageSlot.execute({ slot: 2 }),
+		id: 'setOutputLanguageSlot2',
+		on: 'Pressed',
+	},
+	{
+		title: 'Switch to favorite language #3',
+		callback: () => rpc.commands.setOutputLanguageSlot.execute({ slot: 3 }),
+		id: 'setOutputLanguageSlot3',
+		on: 'Pressed',
 	},
 ] as const satisfies SatisfiedCommand[];
 

apps/whispering/src/lib/components/ConfirmationDialog.svelte

@@ -8,38 +8,38 @@
 		let confirmText = $state('');
 		let onConfirm = () => {};
 		return {
+			close() {
+				isOpen = false;
+			},
+			get confirmText() {
+				return confirmText;
+			},
 			get isOpen() {
 				return isOpen;
 			},
 			set isOpen(v) {
 				isOpen = v;
 			},
-			get title() {
-				return title;
-			},
-			get subtitle() {
-				return subtitle;
-			},
-			get confirmText() {
-				return confirmText;
-			},
 			get onConfirm() {
 				return onConfirm;
 			},
 			open(dialog: {
-				title: string;
-				subtitle: string;
 				confirmText: string;
 				onConfirm: () => void;
+				subtitle: string;
+				title: string;
 			}) {
 				title = dialog.title;
 				subtitle = dialog.subtitle;
 				confirmText = dialog.confirmText;
 				onConfirm = dialog.onConfirm;
 				isOpen = true;
 			},
-			close() {
-				isOpen = false;
+			get subtitle() {
+				return subtitle;
+			},
+			get title() {
+				return title;
 			},
 		};
 	}

apps/whispering/src/lib/components/MoreDetailsDialog.svelte

@@ -13,17 +13,8 @@
 		>([]);
 
 		return {
-			get isOpen() {
-				return isOpen;
-			},
-			set isOpen(value: boolean) {
-				isOpen = value;
-			},
-			get title() {
-				return title;
-			},
-			get description() {
-				return description;
+			get buttons() {
+				return buttons;
 			},
 			get content() {
 				if (typeof content === 'string') {
@@ -34,32 +25,41 @@
 				}
 				return JSON.stringify(content, null, 2);
 			},
-			get buttons() {
-				return buttons;
+			get description() {
+				return description;
+			},
+			get isOpen() {
+				return isOpen;
+			},
+			set isOpen(value: boolean) {
+				isOpen = value;
 			},
 			open: (payload: {
-				title: string;
-				description: string;
-				content: unknown;
 				buttons?: {
 					label: string;
 					onClick: () => void;
 					variant?: 'default' | 'destructive';
 				}[];
+				content: unknown;
+				description: string;
+				title: string;
 			}) => {
 				title = payload.title;
 				description = payload.description;
 				content = payload.content;
 				buttons = payload.buttons ?? [];
 				isOpen = true;
 			},
+			get title() {
+				return title;
+			},
 		};
 	})();
 </script>
 
 <script lang="ts">
-	import * as Dialog from '@repo/ui/dialog';
 	import { Button } from '@repo/ui/button';
+	import * as Dialog from '@repo/ui/dialog';
 </script>
 
 <Dialog.Root bind:open={moreDetailsDialog.isOpen}>

apps/whispering/src/lib/components/NavItems.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/state';
-	import WhisperingButton from '$lib/components/WhisperingButton.svelte';
 	import { GithubIcon } from '$lib/components/icons';
-	import * as DropdownMenu from '@repo/ui/dropdown-menu';
-	import { cn } from '@repo/ui/utils';
-	import { LogicalSize, getCurrentWindow } from '@tauri-apps/api/window';
+	import WhisperingButton from '$lib/components/WhisperingButton.svelte';
 	import {
 		LayersIcon,
 		ListIcon,
@@ -14,6 +11,9 @@
 		SettingsIcon,
 		SunIcon,
 	} from '@lucide/svelte';
+	import * as DropdownMenu from '@repo/ui/dropdown-menu';
+	import { cn } from '@repo/ui/utils';
+	import { getCurrentWindow, LogicalSize } from '@tauri-apps/api/window';
 	import { toggleMode } from 'mode-watcher';
 
 	let {
@@ -23,69 +23,69 @@
 
 	const navItems = [
 		{
-			label: 'Recordings',
+			href: '/recordings',
 			icon: ListIcon,
+			label: 'Recordings',
 			type: 'anchor',
-			href: '/recordings',
 		},
 		{
-			label: 'Transformations',
+			href: '/transformations',
 			icon: LayersIcon,
+			label: 'Transformations',
 			type: 'anchor',
-			href: '/transformations',
 		},
 		{
-			label: 'Settings',
+			activePathPrefix: '/settings',
+			href: '/settings',
 			icon: SettingsIcon,
+			label: 'Settings',
 			type: 'anchor',
-			href: '/settings',
-			activePathPrefix: '/settings',
 		},
 		{
-			label: 'View project on GitHub',
-			icon: GithubIcon,
+			external: true,
 			href: 'https://github.com/epicenter-so/epicenter',
+			icon: GithubIcon,
+			label: 'View project on GitHub',
 			type: 'anchor',
-			external: true,
 		},
 		{
-			label: 'Toggle dark mode',
+			action: toggleMode,
 			icon: SunIcon,
+			label: 'Toggle dark mode',
 			type: 'theme',
-			action: toggleMode,
 		},
 		...(window.__TAURI_INTERNALS__
 			? ([
 					{
-						label: 'Minimize',
+						action: () => getCurrentWindow().setSize(new LogicalSize(72, 84)),
 						icon: Minimize2Icon,
+						label: 'Minimize',
 						type: 'button',
-						action: () => getCurrentWindow().setSize(new LogicalSize(72, 84)),
 					},
 				] as const)
 			: []),
 	] satisfies NavItem[];
 
 	type BaseNavItem = {
-		label: string;
 		icon: unknown;
+		label: string;
 	};
 
 	type AnchorItem = BaseNavItem & {
-		type: 'anchor';
-		href: string;
-		external?: boolean;
 		activePathPrefix?: string;
+		external?: boolean;
+		href: string;
+		type: 'anchor';
 	};
 
 	type ButtonItem = BaseNavItem & {
-		type: 'button';
 		action: () => void;
+		type: 'button';
 	};
 
 	type ThemeItem = BaseNavItem & {
-		type: 'theme';
 		action: () => void;
+		type: 'theme';
 	};
 
 	type NavItem = AnchorItem | ButtonItem | ThemeItem;