From d2d68599196524aa0ae940f2a9f67e3fb03d9392 Mon Sep 17 00:00:00 2001
From: an-lee <an.lee.work@gmail.com>
Date: Sat, 7 Dec 2024 13:44:24 +0800
Subject: [PATCH] refactor UI

---
 .../src/renderer/components/layouts/layout.tsx |  5 ++++-
 .../components/medias/media-loading-modal.tsx  |  3 ---
 ...ronunciation-assessment-fulltext-result.tsx |  6 ++++--
 .../pronunciation-assessment-word-result.tsx   |  2 +-
 .../components/recordings/recording-detail.tsx |  3 ++-
 .../renderer/components/ui/alert-dialog.tsx    | 14 +++++++++-----
 enjoy/src/renderer/components/ui/dialog.tsx    | 14 +++++++++-----
 enjoy/src/renderer/components/ui/sheet.tsx     | 18 ++++++++++++++----
 8 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/enjoy/src/renderer/components/layouts/layout.tsx b/enjoy/src/renderer/components/layouts/layout.tsx
index 9d624542..b223763c 100644
--- a/enjoy/src/renderer/components/layouts/layout.tsx
+++ b/enjoy/src/renderer/components/layouts/layout.tsx
@@ -27,7 +27,10 @@ export const Layout = () => {
           <ResizablePanel id="main-panel" order={1} minSize={50}>
             <div className="flex flex-start">
               <Sidebar />
-              <div className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content">
+              <div
+                id="main-panel-content"
+                className="flex-1 border-l overflow-x-hidden overflow-y-auto h-content relative"
+              >
                 <Outlet />
               </div>
             </div>
diff --git a/enjoy/src/renderer/components/medias/media-loading-modal.tsx b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
index b3a972d3..0bf454dd 100644
--- a/enjoy/src/renderer/components/medias/media-loading-modal.tsx
+++ b/enjoy/src/renderer/components/medias/media-loading-modal.tsx
@@ -7,7 +7,6 @@ import {
   AlertDialogTitle,
   AlertDialogContent,
   AlertDialogFooter,
-  AlertDialogOverlay,
   Button,
   Tabs,
   TabsContent,
@@ -16,7 +15,6 @@ import {
 } from "@renderer/components/ui";
 import { CircleAlertIcon, LoaderIcon } from "lucide-react";
 import { t } from "i18next";
-import { useNavigate } from "react-router-dom";
 import { TranscriptionCreateForm, TranscriptionsList } from "../transcriptions";
 import { SttEngineOptionEnum } from "@/types/enums";
 
@@ -25,7 +23,6 @@ export const MediaLoadingModal = () => {
 
   return (
     <AlertDialog open={!decoded || !Boolean(transcription?.result?.timeline)}>
-      <AlertDialogOverlay />
       <AlertDialogContent className="max-h-[70%] overflow-y-auto">
         <AlertDialogHeader>
           <AlertDialogTitle>{t("preparingAudio")}</AlertDialogTitle>
diff --git a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx
index 857963b1..aaa4bbed 100644
--- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx
+++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-fulltext-result.tsx
@@ -3,14 +3,16 @@ import { useState, useEffect } from "react";
 import { PronunciationAssessmentWordResult } from "@renderer/components";
 import { Switch, ScrollArea } from "@renderer/components/ui";
 import { InfoIcon } from "lucide-react";
+import { cn } from "@renderer/lib/utils";
 
 export const PronunciationAssessmentFulltextResult = (props: {
   words: PronunciationAssessmentWordResultType[];
   currentTime?: number;
   src?: string;
   onPlayOrigin?: (word: string, index: number) => void;
+  className?: string;
 }) => {
-  const { words, currentTime, src, onPlayOrigin } = props;
+  const { words, currentTime, src, onPlayOrigin, className } = props;
   const [errorStats, setErrorStats] = useState({
     mispronunciation: 0,
     omission: 0,
@@ -56,7 +58,7 @@ export const PronunciationAssessmentFulltextResult = (props: {
   }, []);
 
   return (
-    <ScrollArea className="min-h-72 py-4 px-8">
+    <ScrollArea className={cn("min-h-72", className)}>
       <div className="flex items-start justify-between space-x-6">
         <div className="flex-1 py-4 flex items-center flex-wrap">
           {words.map((result, index: number) => (
diff --git a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx
index 905726c1..1ebc8754 100644
--- a/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx
+++ b/enjoy/src/renderer/components/pronunciation-assessments/pronunciation-assessment-word-result.tsx
@@ -140,7 +140,7 @@ export const PronunciationAssessmentWordResult = (props: {
         </div>
       </PopoverTrigger>
 
-      <PopoverContent className="bg-muted">
+      <PopoverContent align="start" className="bg-muted">
         <div className="text-sm flex items-center space-x-2 mb-2">
           <span className="font-serif">{t("score")}:</span>
           <span className="font-serif">
diff --git a/enjoy/src/renderer/components/recordings/recording-detail.tsx b/enjoy/src/renderer/components/recordings/recording-detail.tsx
index 84bf54cf..6c581a68 100644
--- a/enjoy/src/renderer/components/recordings/recording-detail.tsx
+++ b/enjoy/src/renderer/components/recordings/recording-detail.tsx
@@ -62,7 +62,7 @@ export const RecordingDetail = (props: {
 
   return (
     <div className="">
-      <div className="flex justify-center mb-6 px-4">
+      <div className="flex justify-center mb-6">
         <WavesurferPlayer
           id={recording.id}
           src={recording.src}
@@ -74,6 +74,7 @@ export const RecordingDetail = (props: {
 
       {result ? (
         <PronunciationAssessmentFulltextResult
+          className="py-4"
           words={result.words}
           currentTime={currentTime}
           src={recording.src}
diff --git a/enjoy/src/renderer/components/ui/alert-dialog.tsx b/enjoy/src/renderer/components/ui/alert-dialog.tsx
index 835ace19..3569c2b8 100644
--- a/enjoy/src/renderer/components/ui/alert-dialog.tsx
+++ b/enjoy/src/renderer/components/ui/alert-dialog.tsx
@@ -29,14 +29,18 @@ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    container?: HTMLElement;
+  }
+>(({ className, container, ...props }, ref) => (
+  <AlertDialogPortal
+    container={container || document.getElementById("main-panel-content")}
+  >
+    <AlertDialogOverlay className="absolute inset-0" />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "absolute left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/enjoy/src/renderer/components/ui/dialog.tsx b/enjoy/src/renderer/components/ui/dialog.tsx
index fdcfcc0a..021b6a31 100644
--- a/enjoy/src/renderer/components/ui/dialog.tsx
+++ b/enjoy/src/renderer/components/ui/dialog.tsx
@@ -21,7 +21,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "absolute inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -31,14 +31,18 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    container?: HTMLElement;
+  }
+>(({ className, children, container, ...props }, ref) => (
+  <DialogPortal
+    container={container || document.getElementById("main-panel-content")}
+  >
     <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "absolute left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className
       )}
       {...props}
diff --git a/enjoy/src/renderer/components/ui/sheet.tsx b/enjoy/src/renderer/components/ui/sheet.tsx
index ff5dc1ef..825a0db8 100644
--- a/enjoy/src/renderer/components/ui/sheet.tsx
+++ b/enjoy/src/renderer/components/ui/sheet.tsx
@@ -53,6 +53,7 @@ interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
     VariantProps<typeof sheetVariants> {
   displayClose?: boolean;
+  container?: HTMLElement;
 }
 
 const SheetContent = React.forwardRef<
@@ -60,14 +61,23 @@ const SheetContent = React.forwardRef<
   SheetContentProps
 >(
   (
-    { side = "right", displayClose = true, className, children, ...props },
+    {
+      side = "right",
+      displayClose = true,
+      className,
+      children,
+      container,
+      ...props
+    },
     ref
   ) => (
-    <SheetPortal>
-      <SheetOverlay />
+    <SheetPortal
+      container={container || document.getElementById("main-panel-content")}
+    >
+      <SheetOverlay className="absolute" />
       <SheetPrimitive.Content
         ref={ref}
-        className={cn(sheetVariants({ side }), className)}
+        className={cn(sheetVariants({ side }), className, "absolute")}
         {...props}
       >
         {children}