+)
+
+const data = {
+ user: {
+ name: "shadcn",
+ email: "m@example.com",
+ avatar: "/avatars/shadcn.jpg",
+ },
+ navMain: [
+ {
+ title: "Transcriptions",
+ url: "#",
+ icon: IconFileDescription,
+ },
+ {
+ title: "Vocabulary",
+ url: "#",
+ icon: IconFileWord,
+ },
+ {
+ title: "Models",
+ url: "#",
+ icon: IconDatabase,
+ },
+ {
+ title: "Settings",
+ url: "#",
+ icon: IconSettings,
+ },
+ ],
+ navSecondary: [
+ {
+ title: "Docs",
+ url: "https://amical.ai/docs",
+ icon: IconBookFilled,
+ external: true,
+ },
+ {
+ title: "Community",
+ url: "https://amical.ai/community",
+ icon: DiscordIcon,
+ external: true,
+ },
+ ],
+ documents: [
+ {
+ name: "Data Library",
+ url: "#",
+ icon: IconDatabase,
+ },
+ {
+ name: "Reports",
+ url: "#",
+ icon: IconReport,
+ },
+ {
+ name: "Word Assistant",
+ url: "#",
+ icon: IconFileWord,
+ },
+ ],
+}
+
+interface AppSidebarProps extends React.ComponentProps
+ Amical
+
+
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ />
+
+ ),
+ cell: ({ row }) => (
+
+ row.toggleSelected(!!value)}
+ aria-label="Select row"
+ />
+
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+ {
+ accessorKey: "header",
+ header: "Header",
+ cell: ({ row }) => {
+ return
+
+ {row.original.type}
+
+
+ ),
+ },
+ {
+ accessorKey: "status",
+ header: "Status",
+ cell: ({ row }) => (
+ Target
,
+ cell: ({ row }) => (
+
+ ),
+ },
+ {
+ accessorKey: "limit",
+ header: () => Limit
,
+ cell: ({ row }) => (
+
+ ),
+ },
+ {
+ accessorKey: "reviewer",
+ header: "Reviewer",
+ cell: ({ row }) => {
+ const isAssigned = row.original.reviewer !== "Assign reviewer"
+
+ if (isAssigned) {
+ return row.original.reviewer
+ }
+
+ return (
+ <>
+
+
+
+ )
+ },
+ },
+ {
+ id: "actions",
+ cell: () => (
+
+
+
+
+ Outline
+
+ Past Performance 3
+
+
+ Key Personnel 2
+
+ Focus Documents
+
+
+
+
+
+
+
+
+ {table
+ .getAllColumns()
+ .filter(
+ (column) =>
+ typeof column.accessorFn !== "undefined" &&
+ column.getCanHide()
+ )
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
+
+
+
+
+ Page {table.getState().pagination.pageIndex + 1} of{" "}
+ {table.getPageCount()}
+
+
+
+
+
+
+
+
+ {!isMobile && (
+ <>
+
+
+ value.slice(0, 3)}
+ hide
+ />
+
+
+
+
+
+
+ Trending up by 5.2% this month{" "}
+
+
+ Showing total visitors for the last 6 months. This is just
+ some random text to test the layout. It spans multiple lines
+ and should wrap around.
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ Speech Recognition
+
+
+
+
+
+ Whisper Speech Models
+
+ Select and manage Whisper models for speech recognition
+
+
+
+
+ {availableModels.map((model) => {
+ const isDownloaded = !!downloadedModels[model.id];
+ const progress = downloadProgress[model.id];
+ const isDownloading = progress?.status === 'downloading';
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Delete Model
+
+ Are you sure you want to delete this model? This action cannot be undone and you will need to download the model again if you want to use it.
+
+
+
+ Cancel
+
+ Delete
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/apps/electron/src/components/nav-main.tsx b/apps/electron/src/components/nav-main.tsx
new file mode 100644
index 0000000..70e2ca0
--- /dev/null
+++ b/apps/electron/src/components/nav-main.tsx
@@ -0,0 +1,45 @@
+import { IconCirclePlusFilled, IconMail, type Icon } from "@tabler/icons-react"
+
+import { Button } from "@/components/ui/button"
+import {
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavMain({
+ items,
+ onNavigate,
+ currentView,
+}: {
+ items: {
+ title: string
+ url: string
+ icon?: Icon
+ }[]
+ onNavigate?: (item: { title: string }) => void
+ currentView?: string
+}) {
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+
+ {model.description}
+
+
+ {!isDownloaded && !isDownloading && (
+
+ )}
+
+ {!isDownloaded && isDownloading && (
+
+
+
+
+ {/* Circular Progress Ring */}
+ {progress && (
+
+ )}
+
+ )}
+
+ {isDownloaded && (
+
+ )}
+
+
+ {model.sizeFormatted}
+
+
+
+
+ General
+ Microphone
+ Shortcuts
+ Formatter
+ tRPC Test
+ Advanced
+
+
+
+
+
+ General Settings
+ Configure your general preferences
+
+
+
+
+
+
+
+
+
+ Microphone Settings
+ Configure your microphone preferences
+
+
+
+
+
+
+
+
+
+ Keyboard Shortcuts
+ Customize your keyboard shortcuts
+
+
+
+
+
+
+
+
+
+ Text Formatting Configuration
+ Configure AI-powered post-processing of transcriptions
+
+
+
+
+
+
+
+
+
+ tRPC Connection Test
+ Test the tRPC connection between renderer and main process
+
+
+
+
+
+
+
+
+
+ Advanced Settings
+ Advanced configuration options
+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/apps/electron/src/components/site-header.tsx b/apps/electron/src/components/site-header.tsx
new file mode 100644
index 0000000..43ae466
--- /dev/null
+++ b/apps/electron/src/components/site-header.tsx
@@ -0,0 +1,52 @@
+import { Button } from "@/components/ui/button"
+import { Separator } from "@/components/ui/separator"
+import { SidebarTrigger } from "@/components/ui/sidebar"
+
+interface SiteHeaderProps {
+ currentView?: string;
+}
+
+export function SiteHeader({ currentView }: SiteHeaderProps) {
+ return (
+
+
+
+
+
+
+ Start Amical when you log in
+
+
+
+
+
+
+ Keep running in system tray when closed
+
+
+
+
+
+ Choose your preferred theme
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ctrl+Shift+Space
+ Start/stop recording
+
+
+
+
+
+
+
+ Ctrl+Shift+A
+ Show/hide main window
+
+
+
+
+
+ {formatterProvider === 'openrouter' && (
+ <>
+
+
+
+
+
+
+
+ setOpenrouterApiKey(e.target.value)}
+ />
+
+
+ )}
+
+ + Get your API key from openrouter.ai +
+
+
+
+
+
+
+ Apply AI formatting to transcriptions
+
+
+
+
+
+
+
+
+ {trpcTestResult && (
+ + This test verifies that tRPC is properly configured and working between the renderer and main processes. +
+
+
+ )}
+
+ {trpcTestResult}
+
+
+
+
+
+
+
+ Enable detailed logging
+
+
+
+
+
+
+ Automatically check for updates
+
+
+
+
+
+
+
+
+ {/* macOS traffic light button spacing */}
+
+
+
+
+
+
+ {/* {currentView || 'Amical'}
+
+
+
*/}
+
+
+
+
+
+ ) : filteredTranscriptions.length === 0 ? (
+
+
+
+
+ ) : (
+
+ );
+};
\ No newline at end of file
diff --git a/apps/electron/src/components/transcriptions-view.tsx b/apps/electron/src/components/transcriptions-view.tsx
new file mode 100644
index 0000000..b5c6f32
--- /dev/null
+++ b/apps/electron/src/components/transcriptions-view.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TranscriptionsList } from './transcriptions-list';
+
+export function TranscriptionsView() {
+ return
+
+
+
+ {/* Search and Filter Bar */}
+
+
+
+
+
+
+
+ {/* Transcriptions Grid */}
+ {loading ? (
+
+
+
+
+
+
+ Loading transcriptions...
+
+
+ No transcriptions found
++ {searchTerm ? 'Try adjusting your search terms.' : 'Start recording to see your transcriptions here.'} +
+ {!searchTerm && ( + + )} +
+ {filteredTranscriptions.map((transcription) => (
+
+
+
+
+ ))}
+
+ )}
+
+ {!loading && filteredTranscriptions.length > 0 && (
+
+
+
+
+
+
+
+ + {getTitle(transcription.text)} +
+
+
+ {getWordCount(transcription.text)} words
+
+ {format(new Date(transcription.timestamp), 'MMM d')}
+ {format(new Date(transcription.timestamp), 'h:mm a')}
+
+ {transcription.language?.toUpperCase() || 'EN'}
+
+
+
+
+
+
+
+
+ Copy transcription
+
+
+
+ {transcription.audioFile && (
+
+
+
+
+
+ Play audio
+
+
+ )}
+
+
+
+
+
+
+ Actions
+ handleDownload(transcription)}>
+
+ handleDelete(transcription.id)}
+ className="text-destructive"
+ >
+
+
+
+
+
+
+ Showing {filteredTranscriptions.length} of {totalCount} transcription{totalCount !== 1 ? 's' : ''}
+
+
+ Total: {transcriptions.reduce((acc, t) => acc + getWordCount(t.text), 0)} words
+
+
+ )}
+
+
+ )
+}
\ No newline at end of file
diff --git a/apps/electron/src/components/vocabulary-view.tsx b/apps/electron/src/components/vocabulary-view.tsx
new file mode 100644
index 0000000..57b56d7
--- /dev/null
+++ b/apps/electron/src/components/vocabulary-view.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { VocabularyManager } from './vocabulary-manager';
+
+export function VocabularyView() {
+ return
+
+
+
+
+
+
+
+
+
+ {!loading && vocabulary.length > 0 && (
+
+
+ Showing {vocabulary.length} of {totalCount} word{totalCount !== 1 ? 's' : ''}
+
+
+ Total: {totalCount} custom word{totalCount !== 1 ? 's' : ''}
+
+
+ )}
+
+
+ );
+ }
};
return (
- Welcome to Amical
+Select an option from the sidebar to get started.
+
-
-
- Dictionary
- Configure API Key
-
- Dictionary Tab Content
- API Key Configuration Content
-
-
-
-
+
-
-
-
-
-
+ {/* Header spans full width with traffic light spacing */}
+
+
+
+
+
+
+
+
+
+
+ {renderContent()}
+
+