Merge pull request #930 from epicenter-md/command-to-allow-you-to-run-transformations-on-selections

feat: add transform-clipboard feature with two command modes and keyboard shortcuts

Author: braden-w

apps/whispering/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@repo/whispering",
-	"version": "7.5.5",
+	"version": "7.6.0",
 	"description": "",
 	"exports": {
 		"./commands": "./src/lib/commands.ts"

apps/whispering/src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "whispering"
-version = "7.5.5"
+version = "7.6.0"
 description = "A Tauri App"
 authors = ["you"]
 repository = "https://github.com/epicenter-md/epicenter"

apps/whispering/src-tauri/Cargo.toml

@@ -15,10 +15,16 @@
     "os:default",
     "core:window:allow-hide",
     "core:window:allow-show",
+    "core:window:allow-close",
     "core:window:allow-set-always-on-top",
     "core:window:allow-set-size",
+    "core:webview:allow-create-webview-window",
+    "core:webview:allow-webview-close",
+    "core:event:allow-emit",
+    "core:event:allow-listen",
     "process:allow-exit",
     "notification:default",
+    "clipboard-manager:allow-read-text",
     "clipboard-manager:allow-write-text",
     "fs:allow-read",
     "fs:allow-write",

apps/whispering/src-tauri/capabilities/default.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "transformation-picker-capability",
+  "description": "Minimal capability for transformation picker window",
+  "windows": ["transformation-picker"],
+  "permissions": [
+    "core:default",
+    "core:window:allow-close",
+    "core:window:allow-hide",
+    "core:event:allow-emit",
+    "core:event:allow-listen",
+    "clipboard-manager:allow-read-text",
+    "clipboard-manager:allow-write-text",
+    "notification:default",
+    "notification:allow-is-permission-granted",
+    "notification:allow-request-permission",
+    "notification:allow-show"
+  ]
+}

apps/whispering/src-tauri/capabilities/transformation-picker.json

@@ -37,7 +37,7 @@
 		}
 	},
 	"productName": "Whispering",
-	"version": "7.5.5",
+	"version": "7.6.0",
 	"identifier": "com.bradenwong.whispering",
 	"plugins": {
 		"updater": {

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

@@ -57,6 +57,18 @@ export const commands = [
 		on: 'Pressed',
 		callback: () => rpc.commands.toggleVadRecording.execute(undefined),
 	},
+	{
+		id: 'openTransformationPicker',
+		title: 'Open transformation picker',
+		on: 'Pressed',
+		callback: () => rpc.commands.openTransformationPicker.execute(undefined),
+	},
+	{
+		id: 'runTransformationOnClipboard',
+		title: 'Run transformation on clipboard',
+		on: 'Pressed',
+		callback: () => rpc.commands.runTransformationOnClipboard.execute(undefined),
+	},
 ] as const satisfies SatisfiedCommand[];
 
 export type Command = (typeof commands)[number];

apps/whispering/src/lib/commands.ts

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { Badge } from '@repo/ui/badge';
+	import * as Command from '@repo/ui/command';
+	import { Kbd } from '@repo/ui/kbd';
+	import { rpc } from '$lib/query';
+	import type { Transformation } from '$lib/services/db';
+	import { createQuery } from '@tanstack/svelte-query';
+	import { LayersIcon } from '@lucide/svelte';
+	import { PLATFORM_TYPE } from '$lib/constants/platform';
+	import { onMount } from 'svelte';
+
+	const transformationsQuery = createQuery(
+		rpc.db.transformations.getAll.options,
+	);
+
+	const transformations = $derived(transformationsQuery.data ?? []);
+
+	const isMac = PLATFORM_TYPE === 'macos';
+	const modifierKey = isMac ? '⌘' : 'Ctrl';
+
+	let inputElement = $state<HTMLInputElement | null>(null);
+
+	let {
+		onSelect,
+		onSelectManageTransformations,
+		placeholder,
+		class: className,
+	}: {
+		/**
+		 * Called when a transformation is selected from the list.
+		 * Receives the selected transformation object.
+		 */
+		onSelect: (transformation: Transformation) => void;
+		/**
+		 * Called when the "Manage transformations" option is selected.
+		 * Parent components typically close themselves and navigate to /transformations.
+		 */
+		onSelectManageTransformations: () => void;
+		/**
+		 * Placeholder text shown in the search input field.
+		 */
+		placeholder: string;
+		/**
+		 * Optional class name to apply to the command root
+		 */
+		class?: string;
+	} = $props();
+
+	// Auto-focus search input on mount (component is destroyed/recreated each time popover opens)
+	onMount(() => {
+		inputElement?.focus();
+	});
+
+	// Keyboard shortcut handler for Cmd/Ctrl + 0-9
+	onMount(() => {
+		function handleKeyDown(e: KeyboardEvent) {
+			const isCmdOrCtrl = isMac ? e.metaKey : e.ctrlKey;
+
+			if (isCmdOrCtrl && e.key >= '0' && e.key <= '9') {
+				e.preventDefault();
+				const index = e.key === '0' ? 9 : parseInt(e.key) - 1; // 0 maps to 10th item
+
+				if (transformations[index]) {
+					onSelect(transformations[index]);
+				}
+			}
+		}
+
+		window.addEventListener('keydown', handleKeyDown);
+		return () => window.removeEventListener('keydown', handleKeyDown);
+	});
+</script>
+
+{#snippet renderTransformationIdTitle(transformation: Transformation)}
+	<div class="flex items-center gap-2">
+		<Badge variant="id" class="shrink-0 max-w-16 truncate">
+			{transformation.id}
+		</Badge>
+		<span class="font-medium truncate">
+			{transformation.title}
+		</span>
+	</div>
+{/snippet}
+
+<Command.Root loop class={className}>
+	<Command.Input {placeholder} bind:ref={inputElement} />
+	<Command.Empty>No transformation found.</Command.Empty>
+	<Command.Group class="overflow-y-auto max-h-[400px]">
+		{#each transformations as transformation, index (transformation.id)}
+			<Command.Item
+				value="${transformation.id} - ${transformation.title} - ${transformation.description}"
+				onSelect={() => onSelect(transformation)}
+				class="flex items-center justify-between gap-2 p-2"
+			>
+				<div class="flex flex-col min-w-0">
+					{@render renderTransformationIdTitle(transformation)}
+					{#if transformation.description}
+						<span class="text-sm text-muted-foreground line-clamp-2">
+							{transformation.description}
+						</span>
+					{/if}
+				</div>
+				{#if index < 10}
+					<Kbd class="ml-auto shrink-0">
+						{modifierKey}{index === 9 ? '0' : index + 1}
+					</Kbd>
+				{/if}
+			</Command.Item>
+		{/each}
+	</Command.Group>
+	<Command.Item
+		value="Manage transformations"
+		onSelect={onSelectManageTransformations}
+		class="rounded-none p-2 bg-muted/50 text-muted-foreground"
+	>
+		<LayersIcon class="size-4 mx-2.5" />
+		Manage transformations
+	</Command.Item>
+</Command.Root>

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

@@ -7,7 +7,7 @@
 	import { settings } from '$lib/stores/settings.svelte';
 	import { cn } from '@repo/ui/utils';
 	import { RotateCcw, AlertTriangle } from '@lucide/svelte';
-	import { isCompressionRecommended } from '../../../routes/+layout/check-ffmpeg';
+	import { isCompressionRecommended } from '../../../routes/(app)/_layout-utils/check-ffmpeg';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { rpc } from '$lib/query';
 	import * as Alert from '@repo/ui/alert';

apps/whispering/src/lib/components/settings/CompressionBody.svelte

@@ -8,7 +8,7 @@
 	import { useCombobox } from '@repo/ui/hooks';
 	import { settings } from '$lib/stores/settings.svelte';
 	import { cn } from '@repo/ui/utils';
-	import { isCompressionRecommended } from '../../../../routes/+layout/check-ffmpeg';
+	import { isCompressionRecommended } from '../../../../routes/(app)/_layout-utils/check-ffmpeg';
 	import { PackageIcon, SettingsIcon } from '@lucide/svelte';
 
 	let { class: className }: { class?: string } = $props();