Feedback based changes

package.json

@@ -39,7 +39,6 @@
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toggle": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.5",
     "@replit/codemirror-vim": "^6.2.1",
@@ -61,7 +60,6 @@
     "quickjs-emscripten-sync": "^1.5.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.54.2",
     "react-hotkeys-hook": "^4.6.1",
     "react-resizable-panels": "^2.1.7",

src/app.tsx

@@ -1,20 +1,16 @@
-import { HelmetProvider } from 'react-helmet-async';
-
 import { Toaster } from '@/components/ui/sonner';
 import { ThemeProvider } from '@/providers/theme-provider';
 import Router from '@/routes';
 
 import { PromptProvider } from './providers/prompt-provider';
 
 const App = () => (
-  <HelmetProvider>
-    <ThemeProvider storageKey="theme">
-      <PromptProvider>
-        <Router />
-      </PromptProvider>
-      <Toaster />
-    </ThemeProvider>
-  </HelmetProvider>
+  <ThemeProvider storageKey="theme">
+    <PromptProvider>
+      <Router />
+    </PromptProvider>
+    <Toaster />
+  </ThemeProvider>
 );
 
 export default App;

src/features/editor/components/header/action-buttons.tsx

@@ -10,6 +10,7 @@ import useTimeoutFn from '@/hooks/use-timeout-fn';
 
 import { runJs, stopJs } from '../../utils/engine/controller';
 
+// eslint-disable-next-line max-lines-per-function
 export const ActionButtons = () => {
   const { persist_logs, auto_run, auto_run_timeout } = useSettingsStore();
   const { code } = useCodeStore();
@@ -62,6 +63,19 @@ export const ActionButtons = () => {
     clearStopButtonState();
   };
 
+  if (auto_run) {
+    return (
+      <Button
+        variant="destructive"
+        disabled={!showStopButton}
+        onClick={stopExecution}
+        size="icon"
+      >
+        <PauseIcon className="size-5" />
+      </Button>
+    );
+  }
+
   if (isExecuting && showStopButton)
     return (
       <Button variant="destructive" className="gap-1" onClick={stopExecution}>

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

@@ -2,8 +2,8 @@ import { Separator } from '@radix-ui/react-separator';
 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';
 import { SharingMenu } from './sharing-menu';
@@ -21,13 +21,12 @@ 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">
           {isIframe && <OpenInSite />}
           {!isIframe && <SharingMenu />}
-          <AutorunToggler />
+          <LayoutDirectionToggler />
           <ActionButtons />
         </div>
       </header>

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>
+  );
+};

src/features/editor/features/base/components/footer/layout-direction-toggler.tsx → src/features/editor/components/header/layout-direction-toggler.tsx

@@ -22,6 +22,7 @@ export const LayoutDirectionToggler = () => {
       <Tooltip>
         <Button
           variant="outline"
+          className="hidden md:block"
           size="sm"
           onClick={() => updateLayoutDirection(nextDirection)}
           asChild