feat: improve script details section

src/features/editor/components/header/index.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 
 import { ActionButtons } from './action-buttons';
 import { AutorunToggler } from './autorun-toggler';
-import { InfoEdit, InfoTitle } from './info';
+import { InfoTitle } from './info';
 import { LayoutDirectionToggler } from './layout-direction-toggler';
 import { MainMenu } from './main-menu';
 import { OpenInSite } from './open-in-site';
@@ -22,7 +22,6 @@ export const Header = () => {
 
         <div className="hidden flex-1 gap-1 overflow-hidden sm:flex">
           <InfoTitle />
-          <InfoEdit />
         </div>
 
         <div className="flex flex-1 flex-wrap justify-end gap-3 sm:flex-none">

src/features/editor/components/header/info/index.tsx

@@ -1,5 +1,4 @@
-import { InfoCircledIcon } from '@radix-ui/react-icons';
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 import { Button } from '@/components/ui/button';
 import {
@@ -11,7 +10,7 @@ import {
 } from '@/components/ui/dialog';
 import { useCodeStore } from '@/features/editor/stores/editor';
 
-import { InfoForm } from './info-form';
+import { InfoFormDialog } from './info-form';
 
 interface InfoDialogProps {
   children: React.ReactNode;
@@ -22,45 +21,59 @@ export const InfoDialog: React.FC<InfoDialogProps> = ({
   children,
   asChild,
 }) => {
-  const [open, setOpen] = useState(false);
-
-  const closeDialog = useCallback(() => {
-    setOpen(false);
-  }, []);
-
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog>
       <DialogTrigger asChild={asChild}>{children}</DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Script details</DialogTitle>
         </DialogHeader>
-        <InfoForm closeDialog={closeDialog} />
+        <InfoDetails />
       </DialogContent>
     </Dialog>
   );
 };
 
-export const InfoTitle = () => {
-  const { title } = useCodeStore();
+const InfoDetails = () => {
+  const { title, description } = useCodeStore();
 
   const titleTag = useMemo(() => (title ? title : 'No Title'), [title]);
+  const descriptionTag = useMemo(
+    () => (description ? description : 'No Description'),
+    [description],
+  );
 
   return (
-    <InfoDialog asChild>
-      <span className="text-muted-foreground my-auto block truncate text-left text-sm">
-        {titleTag}
-      </span>
-    </InfoDialog>
+    <div className="space-y-4">
+      <div className="flex flex-col gap-2">
+        <label>Title</label>
+        <span className="text-muted-foreground">{titleTag}</span>
+      </div>
+      <div className="flex flex-col gap-2">
+        <label>Description</label>
+        <span className="text-muted-foreground">{descriptionTag}</span>
+      </div>
+      <InfoFormDialog asChild>
+        <Button>Edit</Button>
+      </InfoFormDialog>
+    </div>
   );
 };
 
-export const InfoEdit = () => {
+export const InfoTitle = () => {
+  const { title } = useCodeStore();
+
+  const titleTag = useMemo(() => (title ? title : 'No Title'), [title]);
+
   return (
     <InfoDialog asChild>
-      <Button size="icon" variant="ghost">
-        <InfoCircledIcon />
-        <span className="sr-only">Shared current code</span>
+      <Button variant="ghost" className="justify-start overflow-x-hidden">
+        <div className="flex flex-col text-left">
+          <span className="text-muted text-xs">title</span>
+          <span className="my-auto block truncate text-left text-sm">
+            {titleTag}
+          </span>
+        </div>
       </Button>
     </InfoDialog>
   );

src/features/editor/components/header/info/info-form.tsx

@@ -1,9 +1,17 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import { useCallback, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
 import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
 import {
   Form,
   FormControl,
@@ -83,3 +91,31 @@ export const InfoForm: React.FC<Props> = ({ closeDialog }) => {
     </Form>
   );
 };
+
+interface InfoFormDialogProps {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+export const InfoFormDialog: React.FC<InfoFormDialogProps> = ({
+  children,
+  asChild,
+}) => {
+  const [open, setOpen] = useState(false);
+
+  const closeDialog = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild={asChild}>{children}</DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit script details</DialogTitle>
+        </DialogHeader>
+        <InfoForm closeDialog={closeDialog} />
+      </DialogContent>
+    </Dialog>
+  );
+};