Table is mostly working and started work on the modal

src/app/actions.ts

@@ -3,9 +3,8 @@
 import { db } from "@/server/db";
 import type { UsersTableType } from "@/server/db/schema";
 import { users } from "@/server/db/schema";
-import type { PaperlessDocumentsType, WhishperRecordingsType } from "@/types";
+import type { PaperlessDocumentsType } from "@/types";
 import { auth } from "@clerk/nextjs/server";
-import type { AdviceAPIType } from "@/types";
 
 /*
 Clerk helpers
@@ -81,26 +80,3 @@ export async function getPaperlessDocuments(query: string) {
 
   return data;
 }
-
-/*
-Whishper
-  \ \      / (_)___| |__  _ __   ___ _ __
-  \ \ /\ / /| / __| '_ \| '_ \ / _ | '__|
-   \ V  V / | \__ | | | | |_) |  __| |
-    \_/\_/  |_|___|_| |_| .__/ \___|_|
-                        |_|
-*/
-
-export async function getWhishperRecordings(query: string) {
-  const userData = await getUserData();
-
-  if (!query || query == "null" || query.length < 3 || !userData) return null;
-
-  const response = await fetch(`${userData.whishperURL}/api/transcriptions`);
-
-  const data = (await response.json()) as WhishperRecordingsType;
-
-  console.log(data)
-
-  return data;
-}

src/app/page.tsx

@@ -1,4 +1,4 @@
-import OpenExternalLInk from "@/components/external-link";
+import OpenExternalLink from "@/components/external-link";
 
 export default function HomePage() {
   return (
@@ -7,9 +7,9 @@ export default function HomePage() {
         <div>Welcome to Homelab Connector</div>
         <div>
           Check out the{" "}
-          <OpenExternalLInk href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">
+          <OpenExternalLink href="https://github.com/aamirazad/homelab-connector/blob/main/README.md">
             README
-          </OpenExternalLInk>{" "}
+          </OpenExternalLink>{" "}
           to get started.
         </div>
         <div>Or sign in to access the dashboard.</div>

src/app/sign-in/page.tsx

@@ -3,7 +3,6 @@
 import OpenInternalLink from "@/components/internal-link";
 import LoadingSpinner from "@/components/loading-spinner";
 import { RedirectToSignIn, SignedIn, SignedOut } from "@clerk/nextjs";
-import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 
 export default function SignIn() {

src/app/whishper/page.tsx

@@ -40,8 +40,8 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import OpenExternalLInk from "@/components/external-link";
-import { UsersTableType } from "@/server/db/schema";
+import OpenExternalLink from "@/components/external-link";
+import type { UsersTableType } from "@/server/db/schema";
 
 const queryClient = new QueryClient();
 
@@ -191,7 +191,7 @@ function RecordingsList() {
   return (
     <>
       <h1 className="text-2xl font-bold">Search Results</h1>
-      <DataTable data={WhishperRecordingsMap} />
+      <DataTable data={WhishperRecordingsMap} userData={userData.data} />
     </>
   );
 }
@@ -201,11 +201,11 @@ interface DataTableProps<TData> {
   userData: UsersTableType;
 }
 
-function DataTable<TData>({
+function DataTable<TData extends WhishperRecordingType>({
   data,
   userData,
 }: DataTableProps<TData>) {
-  const columns: ColumnDef<WhishperRecordingType>[] = [
+  const columns: ColumnDef<TData>[] = [
     {
       accessorFn: (recording) => {
         const name =
@@ -220,11 +220,9 @@ function DataTable<TData>({
     },
     {
       cell: ({ row }) => (
-        <OpenExternalLInk
+        <OpenExternalLink
           href={`${userData.whishperURL}/editor/${row.original.id}`}
-        >
-          Test
-        </OpenExternalLInk>
+        />
       ),
       header: "Link",
     },

src/app/whishper/recording/[name]/page.tsx

@@ -0,0 +1,13 @@
+import AudioPreview from "@/components/audio-preview";
+
+export default function FullAudioPage({
+  params,
+}: {
+  params: { name: string };
+}) {
+  return (
+    <main className="h-full w-full">
+      <AudioPreview name={params.name} />
+    </main>
+  );
+}

src/components/audio-preview.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { getUserData } from "@/app/actions";
+import {
+  useQuery,
+  QueryClientProvider,
+  QueryClient,
+} from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+async function getRecording(name: string) {
+  const userData = await getUserData();
+  if (!userData) {
+    console.error("Error getting user data");
+    return null;
+  }
+
+  try {
+    const url = `${userData.whishperURL}/api/documents/${name}/download/`;
+    const response = await fetch(url);
+    if (response.ok) {
+      const blob = await response.blob();
+      return URL.createObjectURL(blob);
+    }
+  } catch (error) {
+    console.error("An error occurred:", error);
+    return null;
+  }
+}
+
+function AudioPreview(props: { name: string }) {
+  const { data: url, isLoading } = useQuery({
+    queryKey: ["audioURL", props.name],
+    queryFn: async () => {
+      return getRecording(props.name);
+    },
+  });
+
+  return <p>{url}</p>;
+}
+
+export default function Page(props: { name: string }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AudioPreview name={props.name} />
+    </QueryClientProvider>
+  );
+}

src/components/external-link.tsx

@@ -4,12 +4,12 @@ import React from "react";
 import { cn } from "@/lib/utils";
 
 interface OpenLinkInNewPageProps {
-  children: React.ReactNode;
+  children?: React.ReactNode;
   href: string;
   className?: string;
 }
 
-export default function OpenExternalLInk({
+export default function OpenExternalLink({
   children,
   href,
   className,

src/types/index.ts

@@ -1,5 +1,3 @@
-import type { ColumnDef } from "@tanstack/react-table";
-
 export type PaperlessSearchType = {
   total: number;
   documents: {