adapt pagination and fixes deletion

www/app/[domain]/browse/page.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react";
 import { GetTranscript } from "../../api";
 import Pagination from "./pagination";
 import Link from "next/link";
+import { FaGear } from "react-icons/fa6";
 import { FaCheck, FaTrash, FaStar, FaMicrophone } from "react-icons/fa";
 import { MdError } from "react-icons/md";
 import useTranscriptList from "../transcripts/useTranscriptList";
@@ -31,6 +32,7 @@ import {
   PopoverHeader,
   PopoverBody,
   PopoverFooter,
+  IconButton,
 } from "@chakra-ui/react";
 import { PlusSquareIcon } from "@chakra-ui/icons";
 // import { useFiefUserinfo } from "@fief/fief/nextjs/react";
@@ -39,7 +41,6 @@ export default function TranscriptBrowser() {
   const [page, setPage] = useState<number>(1);
   const { loading, response, refetch } = useTranscriptList(page);
   const [deletionLoading, setDeletionLoading] = useState(false);
-  const [deletedItems, setDeletedItems] = useState<string[]>([]);
   const api = useApi();
   const { setError } = useError();
 
@@ -67,18 +68,14 @@ export default function TranscriptBrowser() {
       </Flex>
     );
 
-  const prevent = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
   const handleDeleteTranscript = (transcriptToDeleteId) => (e) => {
-    if (!deletionLoading) {
+    e.stopPropagation();
+    if (api && !deletionLoading) {
+      setDeletionLoading(true);
       api
-        ?.v1TranscriptDelete(transcriptToDeleteId)
+        .v1TranscriptDelete(transcriptToDeleteId)
         .then(() => {
           setDeletionLoading(false);
-          setDeletedItems([...deletedItems, transcriptToDeleteId]);
           refetch();
         })
         .catch((err) => {
@@ -101,7 +98,7 @@ export default function TranscriptBrowser() {
         {/* <Heading>{user?.fields?.name}'s Meetings</Heading> */}
         <Heading>Your Meetings</Heading>
         <Flex flexDir="row" align="center">
-          {loading && <Spinner></Spinner>}
+          {loading || (deletionLoading && <Spinner></Spinner>)}
 
           <Pagination
             page={page}
@@ -130,11 +127,9 @@ export default function TranscriptBrowser() {
         overflowY={"scroll"}
         mb="4"
       >
-        {response?.items
-          .filter((item) => !deletedItems.includes(item.id))
-          .map((item: GetTranscript) => (
-            <Card as={Link} key={item.id} href={`/transcripts/${item.id}`}>
-              <CardBody>
+        {response?.items.map((item: GetTranscript) => (
+          <Card key={item.id}>
+            <CardBody as={Link} href={`/transcripts/${item.id}`}>
               <Heading size="md">
                 {item.title || item.name || "Unamed Transcript"}
 
@@ -142,16 +137,16 @@ export default function TranscriptBrowser() {
                   <Icon color="green" as={FaCheck} ml="2" />
                 )}
                 {item.status == "error" && (
-                    <Icon color="red" as={MdError} ml="2" />
+                  <Icon color="red.primary" as={MdError} ml="2" />
                 )}
                 {item.status == "idle" && (
-                    <Icon color="yellow" as={FaStar} ml="2" />
+                  <Icon color="yellow.500" as={FaStar} ml="2" />
                 )}
                 {item.status == "processing" && (
-                    <Icon color="grey" as={FaMicrophone} ml="2" />
+                  <Icon color="grey.primary" as={FaGear} ml="2" />
                 )}
                 {item.status == "recording" && (
-                    <Icon color="blue" as={FaMicrophone} ml="2" />
+                  <Icon color="blue.primary" as={FaMicrophone} ml="2" />
                 )}
               </Heading>
               <Stack mt="6" spacing="3">
@@ -167,12 +162,15 @@ export default function TranscriptBrowser() {
             {item.status !== "ended" && (
               <>
                 <Divider />
-                  <CardFooter onClick={prevent}>
+                <CardFooter>
                   <Popover>
                     <PopoverTrigger>
-                        <Button colorScheme="red" disabled={deletionLoading}>
-                          <Icon as={FaTrash}></Icon>
-                        </Button>
+                      <IconButton
+                        colorScheme="red"
+                        disabled={deletionLoading}
+                        icon={<FaTrash />}
+                        aria-label="Delete"
+                      />
                     </PopoverTrigger>
                     <PopoverContent>
                       <PopoverArrow />
@@ -180,9 +178,7 @@ export default function TranscriptBrowser() {
                       <PopoverHeader>
                         Are you sure you want to delete {item.title} ?
                       </PopoverHeader>
-                        <PopoverBody>
-                          This action is not reversible.
-                        </PopoverBody>
+                      <PopoverBody>This action is not reversible.</PopoverBody>
                       <PopoverFooter>
                         <Button
                           colorScheme="red"

www/app/[domain]/browse/pagination.tsx

@@ -1,5 +1,5 @@
-import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Button, Flex, IconButton } from "@chakra-ui/react";
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
 
 type PaginationProps = {
   page: number;
@@ -39,40 +39,41 @@ export default function Pagination(props: PaginationProps) {
       setPage(newPage);
     }
   };
-
   return (
-    <div className="flex justify-center space-x-4 my-4">
-      <button
-        className={`w-10 h-10 rounded-full p-2 ${
-          canGoPrevious ? "text-gray-500" : "text-gray-300"
-        }`}
+    <Flex justify="center" align="center" gap="2" mx="2">
+      <IconButton
+        isRound={true}
+        variant="text"
+        color={!canGoPrevious ? "gray" : "dark"}
+        mb="1"
+        icon={<FaChevronLeft />}
         onClick={() => handlePageChange(page - 1)}
         disabled={!canGoPrevious}
-      >
-        <FontAwesomeIcon icon={faArrowLeft} className="h-5 w-auto" />
-      </button>
+        aria-label="Previous page"
+      />
 
       {pageNumbers.map((pageNumber) => (
-        <button
+        <Button
           key={pageNumber}
-          className={`w-10 h-10 rounded-full p-2 border ${
-            page === pageNumber ? "border-gray-600" : "border-gray-300"
-          } rounded`}
+          variant="text"
+          color={page === pageNumber ? "gray" : "dark"}
           onClick={() => handlePageChange(pageNumber)}
+          disabled={page === pageNumber}
         >
           {pageNumber}
-        </button>
+        </Button>
       ))}
 
-      <button
-        className={`w-10 h-10 rounded-full p-2 ${
-          canGoNext ? "text-gray-500" : "text-gray-300"
-        }`}
+      <IconButton
+        isRound={true}
+        variant="text"
+        color={!canGoNext ? "gray" : "dark"}
+        icon={<FaChevronRight />}
+        mb="1"
         onClick={() => handlePageChange(page + 1)}
         disabled={!canGoNext}
-      >
-        <FontAwesomeIcon icon={faArrowRight} className="h-5 w-auto" />
-      </button>
-    </div>
+        aria-label="Next page"
+      />
+    </Flex>
   );
 }

www/app/providers.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./theme";
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <ChakraProvider>{children}</ChakraProvider>;
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
 }

www/app/theme.ts

@@ -0,0 +1,34 @@
+// 1. Import `extendTheme`
+import { extendTheme } from "@chakra-ui/react";
+
+// 2. Call `extendTheme` and pass your custom values
+const theme = extendTheme({
+  colors: {
+    blue: {
+      primary: "#3158E2",
+      500: "#3158E2",
+      light: "#B1CBFF",
+      200: "#B1CBFF",
+      dark: "#0E1B48",
+      900: "#0E1B48",
+    },
+    red: {
+      primary: "#DF7070",
+      500: "#DF7070",
+      light: "#FBD5D5",
+      200: "#FBD5D5",
+    },
+    gray: {
+      bg: "#F4F4F4",
+      100: "#F4F4F4",
+      light: "#D5D5D5",
+      200: "#D5D5D5",
+      primary: "#838383",
+      500: "#838383",
+    },
+    light: "#FFFFFF",
+    dark: "#0C0D0E",
+  },
+});
+
+export default theme;