@rebasepro/studio 0.5.0 → 0.6.1

package/package.json

@@ -1,33 +1,33 @@
 {
   "name": "@rebasepro/studio",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
-  "types": "dist/studio/src/index.d.ts",
+  "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@types/dagre": "0.7.54",
-    "@xyflow/react": "12.10.2",
+    "@xyflow/react": "12.11.0",
     "dagre": "0.8.5",
     "monaco-editor": "^0.55.1",
     "pgsql-ast-parser": "12.0.2",
     "prism-react-renderer": "^2.4.1",
-    "react-dropzone": "^14.4.1",
-    "@rebasepro/client": "0.5.0",
-    "@rebasepro/common": "0.5.0",
-    "@rebasepro/utils": "0.5.0",
-    "@rebasepro/core": "0.5.0",
-    "@rebasepro/types": "0.5.0",
-    "@rebasepro/ui": "0.5.0"
+    "react-dropzone": "^15.0.0",
+    "@rebasepro/common": "0.6.1",
+    "@rebasepro/core": "0.6.1",
+    "@rebasepro/types": "0.6.1",
+    "@rebasepro/ui": "0.6.1",
+    "@rebasepro/utils": "0.6.1",
+    "@rebasepro/client": "0.6.1"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
-    "@rebasepro/admin": "0.5.0"
+    "@rebasepro/admin": "0.6.1"
   },
   "peerDependenciesMeta": {
     "@rebasepro/admin": {
@@ -36,7 +36,7 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/studio/src/index.d.ts",
+      "types": "./dist/index.d.ts",
       "development": "./dist/index.es.js",
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js"
@@ -57,18 +57,18 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^20.19.41",
-    "@types/react": "^19.2.15",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^25.9.3",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411",
-    "jest": "^29.7.0",
-    "react-router": "^7.15.1",
-    "react-router-dom": "^7.15.1",
-    "ts-jest": "^29.4.10",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.3"
+    "jest": "^30.4.2",
+    "react-router": "^7.17.0",
+    "react-router-dom": "^7.17.0",
+    "ts-jest": "^29.4.11",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
   },
   "files": [
     "dist",

package/src/components/ApiExplorer/TryItPanel.tsx

@@ -42,7 +42,8 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
     });
     const [customHeaders, setCustomHeaders] = useState<Array<{ key: string; value: string }>>(() => {
         try { const v = localStorage.getItem(`${storageKey}_headers`); if (v) return JSON.parse(v); } catch { /* ignore */ }
-        return [{ key: "rebase-branch", value: "" }];
+        return [{ key: "rebase-branch",
+value: "" }];
     });
     const [body, setBody] = useState(() => {
         try { const v = localStorage.getItem(`${storageKey}_body`); if (v) return JSON.parse(v); } catch { /* ignore */ }
@@ -56,19 +57,12 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
     const [validationError, setValidationError] = useState<string | null>(null);
 
     const rebaseContext = useRebaseContext();
-    const userManagement = rebaseContext.userManagement;
     const currentUser = rebaseContext.authController?.user;
 
     const users = useMemo((): SelectableUser[] => {
-        const managed = (userManagement?.users ?? []).map(u => ({
-            uid: u.uid,
-            displayName: u.displayName,
-            email: u.email,
-            photoURL: u.photoURL,
-            roles: u.roles
-        }));
-        if (currentUser && !managed.some(u => u.uid === currentUser.uid)) {
-            managed.unshift({
+        const managed: SelectableUser[] = [];
+        if (currentUser) {
+            managed.push({
                 uid: currentUser.uid,
                 displayName: currentUser.displayName,
                 email: currentUser.email,
@@ -77,7 +71,7 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
             });
         }
         return managed;
-    }, [userManagement?.users, currentUser]);
+    }, [currentUser]);
 
     const currentSelectableUser = useMemo((): SelectableUser | null => {
         if (!currentUser) return null;
@@ -137,7 +131,7 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
 
         try {
             const headers: Record<string, string> = { "Content-Type": "application/json" };
-            
+
             for (const h of customHeaders) {
                 if (h.key.trim()) headers[h.key.trim()] = h.value;
             }
@@ -158,7 +152,7 @@ export function TryItPanel({ endpoint, apiUrl, getAuthToken, user, basePath = ""
 
             const elapsed = Math.round(performance.now() - start);
             let text: string;
-            
+
             const rawText = await res.text();
             try {
                 const json = JSON.parse(rawText);
@@ -193,7 +187,7 @@ time: elapsed });
                     selectedUser={selectedUser}
                     setSelectedUser={setSelectedUser}
                     users={users}
-                    loading={userManagement?.loading}
+                    loading={false}
                     currentUser={currentSelectableUser}
                 />
 
@@ -214,7 +208,8 @@ time: elapsed });
                         title="Query Parameters"
                         params={queryParamDefs}
                         values={queryParams}
-                        onChange={(k, v) => setQueryParams((prev) => ({ ...prev, [k]: v }))}
+                        onChange={(k, v) => setQueryParams((prev) => ({ ...prev,
+[k]: v }))}
                     />
                 )}
 
@@ -224,10 +219,12 @@ time: elapsed });
                     values={customHeaders}
                     onChange={(i, k, v) => {
                         const next = [...customHeaders];
-                        next[i] = { key: k, value: v };
+                        next[i] = { key: k,
+value: v };
                         setCustomHeaders(next);
                     }}
-                    onAdd={() => setCustomHeaders((prev) => [...prev, { key: "", value: "" }])}
+                    onAdd={() => setCustomHeaders((prev) => [...prev, { key: "",
+value: "" }])}
                     onRemove={(i) => {
                         const next = [...customHeaders];
                         next.splice(i, 1);

package/src/components/CronJobs/CronJobsView.tsx

@@ -21,7 +21,7 @@ import {
 } from "@rebasepro/ui";
 import { useRebaseClient, useSnackbarController } from "@rebasepro/core";
 import type { CronJobStatus, CronJobLogEntry } from "@rebasepro/types";
-import type { RebaseClient } from "@rebasepro/client";
+import type { RebaseClient } from "@rebasepro/types";
 
 function formatDuration(ms: number): string {
     if (ms < 1000) return `${ms}ms`;

package/src/components/JSEditor/JSEditor.tsx

@@ -194,7 +194,6 @@ export function JSEditor() {
     const { t } = useTranslation();
 
     // User management for the "Run as" picker
-    const userManagement = rebaseContext.userManagement;
     const currentUser = rebaseContext.authController?.user;
 
     // State
@@ -252,16 +251,10 @@ code: DEFAULT_CODE }])
 
     // Users list for the picker — mapped to SelectableUser shape
     const users = useMemo((): SelectableUser[] => {
-        const managed = (userManagement?.users ?? []).map(u => ({
-            uid: u.uid,
-            displayName: u.displayName,
-            email: u.email,
-            photoURL: u.photoURL,
-            roles: u.roles
-        }));
+        const managed: SelectableUser[] = [];
         // Ensure the current user is in the list
-        if (currentUser && !managed.some(u => u.uid === currentUser.uid)) {
-            managed.unshift({
+        if (currentUser) {
+            managed.push({
                 uid: currentUser.uid,
                 displayName: currentUser.displayName,
                 email: currentUser.email,
@@ -270,7 +263,7 @@ code: DEFAULT_CODE }])
             });
         }
         return managed;
-    }, [userManagement?.users, currentUser]);
+    }, [currentUser]);
 
     // Current user as SelectableUser for the popover
     const currentSelectableUser = useMemo((): SelectableUser | null => {
@@ -347,7 +340,8 @@ code: DEFAULT_CODE };
                 baseUrl: apiUrl,
                 token: undefined
             });
-            return { client, isScoped: true };
+            return { client,
+isScoped: true };
         }
 
         // If not running as another user safely reuse the application's global client.
@@ -355,7 +349,8 @@ code: DEFAULT_CODE };
             if (!rebaseClient) {
                 throw new Error("Application client is not initialized.");
             }
-            return { client: rebaseClient, isScoped: false };
+            return { client: rebaseClient,
+isScoped: false };
         }
 
         // Get the current auth token
@@ -725,7 +720,7 @@ message: t("studio_sql_markdown_copy_failed") });
                                                     selectedUser={selectedUser}
                                                     setSelectedUser={setSelectedUser}
                                                     users={users}
-                                                    loading={userManagement?.loading}
+                                                    loading={false}
                                                     currentUser={currentSelectableUser}
                                                 />
                                             </div>

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -160,7 +160,8 @@ export function LogsExplorer() {
                         Auto-scroll
                     </Label>
                 </div>
-                <span style={{ fontSize: 12, color: "#6c7086" }}>
+                <span style={{ fontSize: 12,
+color: "#6c7086" }}>
                     {logs.length} entries
                 </span>
             </div>
@@ -185,7 +186,8 @@ export function LogsExplorer() {
                             borderBottom: "1px solid #181825"
                         }}
                     >
-                        <span style={{ color: "#6c7086", flexShrink: 0 }}>
+                        <span style={{ color: "#6c7086",
+flexShrink: 0 }}>
                             {new Date(log.timestamp).toLocaleTimeString()}
                         </span>
                         <span style={{
@@ -204,7 +206,8 @@ export function LogsExplorer() {
                         }}>
                             [{log.source}]
                         </span>
-                        <span style={{ color: "#cdd6f4", flex: 1 }}>
+                        <span style={{ color: "#cdd6f4",
+flex: 1 }}>
                             {log.message}
                         </span>
                     </div>

package/src/components/RLSEditor/PolicyEditor.tsx

@@ -232,7 +232,6 @@ export const PolicyEditor = ({
                         <div className="flex flex-col gap-1.5">
                             <Typography variant="caption" className="uppercase tracking-wider text-text-secondary">{t("studio_policy_name")}</Typography>
                             <TextField
-                                // @ts-ignore
                                 value={name}
                                 onChange={(e) => setName(e.target.value)}
                                 placeholder={t("studio_policy_name_placeholder")}
@@ -359,6 +358,7 @@ export const PolicyEditor = ({
             </DialogActions>
 
             <Dialog open={helpOpen} onOpenChange={setHelpOpen} maxWidth="3xl">
+                <DialogTitle hidden>Row-Level Security Help</DialogTitle>
                 <DialogContent className="p-4 sm:p-6 lg:p-8 flex flex-col gap-6">
                     <div>
                         <Typography variant="h5" className="mb-2">{t("studio_policy_help_title")}</Typography>

package/src/components/SQLEditor/SQLEditor.tsx

@@ -111,17 +111,18 @@ const QueryLoadingView = () => {
 const STORAGE_KEY_TABS = "rebase_sql_tabs";
 const STORAGE_KEY_ACTIVE_TAB = "rebase_sql_active_tab";
 
-const FixedEditorOverlay = ({ 
-    displayValue, 
-    onSave, 
-    onCancel 
-}: { 
-    displayValue: string, 
-    onSave: (val: string | null) => void, 
-    onCancel: () => void 
+const FixedEditorOverlay = ({
+    displayValue,
+    onSave,
+    onCancel
+}: {
+    displayValue: string,
+    onSave: (val: string | null) => void,
+    onCancel: () => void
 }) => {
     const [rect, setRect] = useState<DOMRect | null>(null);
-    const [windowSize, setWindowSize] = useState({ width: 1000, height: 1000 });
+    const [windowSize, setWindowSize] = useState({ width: 1000,
+height: 1000 });
     const anchorRef = useRef<HTMLDivElement>(null);
 
     useEffect(() => {
@@ -129,10 +130,12 @@ const FixedEditorOverlay = ({
             setRect(anchorRef.current.parentElement.getBoundingClientRect());
         }
         if (typeof window !== "undefined") {
-            setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-            const handleResize = () => setWindowSize({ width: window.innerWidth, height: window.innerHeight });
-            window.addEventListener('resize', handleResize);
-            return () => window.removeEventListener('resize', handleResize);
+            setWindowSize({ width: window.innerWidth,
+height: window.innerHeight });
+            const handleResize = () => setWindowSize({ width: window.innerWidth,
+height: window.innerHeight });
+            window.addEventListener("resize", handleResize);
+            return () => window.removeEventListener("resize", handleResize);
         }
         return undefined;
     }, []);
@@ -149,7 +152,7 @@ const FixedEditorOverlay = ({
     if (left + minWidth > windowSize.width) {
         left = Math.max(10, windowSize.width - minWidth - 10);
     }
-    
+
     // Calculate a max height that doesn't overflow the bottom
     const maxAvailableHeight = Math.max(50, windowSize.height - top - 10);
     const resolvedMaxHeight = Math.min(300, maxAvailableHeight);
@@ -162,13 +165,13 @@ const FixedEditorOverlay = ({
     return (
         <div ref={anchorRef} className="w-full h-full min-h-[20px]">
             {createPortal(
-                <div 
+                <div
                     className="fixed z-[9999] bg-surface-50 dark:bg-surface-900 border-2 border-primary dark:border-primary-dark shadow-xl flex flex-col"
-                    style={{ 
-                        top, 
-                        left, 
-                        minWidth, 
-                        minHeight, 
+                    style={{
+                        top,
+                        left,
+                        minWidth,
+                        minHeight,
                         maxWidth: Math.min(400, windowSize.width - left - 10)
                     }}
                 >
@@ -176,7 +179,8 @@ const FixedEditorOverlay = ({
                         className="w-full h-full bg-transparent outline-none border-none ring-0 font-mono text-[13px] text-text-primary dark:text-text-primary-dark px-4 py-1.5 resize-none overflow-y-auto"
                         defaultValue={displayValue}
                         autoFocus
-                        style={{ minHeight: '32px', maxHeight: resolvedMaxHeight }}
+                        style={{ minHeight: "32px",
+maxHeight: resolvedMaxHeight }}
                         onFocus={(e) => {
                             const val = e.target.value;
                             e.target.value = "";
@@ -342,7 +346,8 @@ export const SQLEditor = () => {
                     if (actualDb) {
                         setSelectedDatabase(actualDb);
                         localStorage.setItem(`rebase_sql_selected_db_${projectPrefix}`, actualDb);
-                        setTabs(prev => prev.map(t => t.id === initialActiveTabId && (!t.database || !dbs.includes(t.database)) ? { ...t, database: actualDb } : t));
+                        setTabs(prev => prev.map(t => t.id === initialActiveTabId && (!t.database || !dbs.includes(t.database)) ? { ...t,
+database: actualDb } : t));
                     }
 
                     const currentUser = (currentUserResult?.[0] as Record<string, unknown> | undefined)?.role as string | undefined;
@@ -360,7 +365,8 @@ export const SQLEditor = () => {
                     if (actualRole) {
                         setSelectedRole(actualRole);
                         localStorage.setItem(`rebase_sql_selected_role_${projectPrefix}`, actualRole);
-                        setTabs(prev => prev.map(t => t.id === initialActiveTabId && (!t.role || !roles.includes(t.role)) ? { ...t, role: actualRole } : t));
+                        setTabs(prev => prev.map(t => t.id === initialActiveTabId && (!t.role || !roles.includes(t.role)) ? { ...t,
+role: actualRole } : t));
                     }
                 }
             } catch (err: unknown) {
@@ -384,7 +390,8 @@ export const SQLEditor = () => {
     const handleDatabaseChange = (db: string, tabId?: string) => {
         setSelectedDatabase(db);
         localStorage.setItem(`rebase_sql_selected_db_${projectPrefix}`, db);
-        setTabs(prev => prev.map(t => t.id === (tabId || activeTabId) ? { ...t, database: db } : t));
+        setTabs(prev => prev.map(t => t.id === (tabId || activeTabId) ? { ...t,
+database: db } : t));
         // Reset so the schema will be re-fetched for the new database
         schemaFetchedRef.current = false;
     };
@@ -392,7 +399,8 @@ export const SQLEditor = () => {
     const handleRoleChange = (role: string, tabId?: string) => {
         setSelectedRole(role);
         localStorage.setItem(`rebase_sql_selected_role_${projectPrefix}`, role);
-        setTabs(prev => prev.map(t => t.id === (tabId || activeTabId) ? { ...t, role } : t));
+        setTabs(prev => prev.map(t => t.id === (tabId || activeTabId) ? { ...t,
+role } : t));
     };
 
     const handleTabChange = useCallback((newTabId: string) => {
@@ -404,14 +412,16 @@ export const SQLEditor = () => {
                 localStorage.setItem(`rebase_sql_selected_db_${projectPrefix}`, newTab.database);
                 schemaFetchedRef.current = false;
             } else if (!newTab.database && selectedDatabase) {
-                setTabs(prev => prev.map(t => t.id === newTabId ? { ...t, database: selectedDatabase } : t));
+                setTabs(prev => prev.map(t => t.id === newTabId ? { ...t,
+database: selectedDatabase } : t));
             }
 
             if (newTab.role && newTab.role !== selectedRole) {
                 setSelectedRole(newTab.role);
                 localStorage.setItem(`rebase_sql_selected_role_${projectPrefix}`, newTab.role);
             } else if (!newTab.role && selectedRole) {
-                setTabs(prev => prev.map(t => t.id === newTabId ? { ...t, role: selectedRole } : t));
+                setTabs(prev => prev.map(t => t.id === newTabId ? { ...t,
+role: selectedRole } : t));
             }
         }
     }, [tabs, selectedDatabase, selectedRole, projectPrefix]);
@@ -777,7 +787,7 @@ execTime: Math.round(performance.now() - start) });
     const executeRun = useCallback(async (sqlOverride?: string) => {
         let sqlToRun = sqlOverride || activeTab.sql;
         const upperSql = sqlToRun.toUpperCase();
-        
+
         const isAggregate = /\b(COUNT|SUM|AVG|MIN|MAX)\s*\(/i.test(sqlToRun);
         const isExplain = /\bEXPLAIN\b/i.test(sqlToRun);
 
@@ -1370,8 +1380,8 @@ isFavorite: !s.isFavorite } : s));
                                         >
                                             <DatabaseIcon size={iconSize.small} className="mr-1.5 text-text-disabled dark:text-text-disabled-dark"/>
                                             <span className="max-w-[160px] truncate">
-                                                {isLoadingConfig 
-                                                    ? "..." 
+                                                {isLoadingConfig
+                                                    ? "..."
                                                     : `${selectedDatabase || t("studio_sql_select_db")}${selectedRole ? ` (${selectedRole})` : ""}`}
                                             </span>
                                         </Button>

package/src/components/StorageView/StorageView.tsx

@@ -434,6 +434,7 @@ function FilePreviewPanel({
 
             {/* Delete Confirmation */}
             <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+                <DialogTitle hidden>Delete File</DialogTitle>
                 <DialogContent>
                     <Typography variant="subtitle1" className="mb-2">
                         Delete File?
@@ -669,14 +670,16 @@ export const StorageView = () => {
         // Validate folder name
         const name = newFolderName.trim();
         if (name.includes("/") || name.includes("\\")) {
-            snackbarController.open({ type: "error", message: "Folder name cannot contain slashes" });
+            snackbarController.open({ type: "error",
+message: "Folder name cannot contain slashes" });
             return;
         }
 
         // Check if folder already exists
         const existingFolder = folders.find(f => f.name === name);
         if (existingFolder) {
-            snackbarController.open({ type: "error", message: `Folder "${name}" already exists` });
+            snackbarController.open({ type: "error",
+message: `Folder "${name}" already exists` });
             return;
         }
 
@@ -698,12 +701,14 @@ export const StorageView = () => {
                 throw new Error(err.error || "Failed to create folder");
             }
 
-            snackbarController.open({ type: "success", message: `Folder "${name}" created` });
+            snackbarController.open({ type: "success",
+message: `Folder "${name}" created` });
             setNewFolderDialogOpen(false);
             setNewFolderName("");
             await fetchContents(currentPath);
         } catch (e) {
-            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+            snackbarController.open({ type: "error",
+message: e instanceof Error ? e.message : String(e) });
         } finally {
             setCreatingFolder(false);
         }
@@ -715,7 +720,8 @@ export const StorageView = () => {
         try {
             for (const file of droppedFiles) {
                 const key = currentPath ? `${currentPath}/${file.name}` : file.name;
-                await storageSourceRef.current.putObject({ file, key });
+                await storageSourceRef.current.putObject({ file,
+key });
             }
             snackbarController.open({
                 type: "success",
@@ -768,7 +774,8 @@ export const StorageView = () => {
             } else {
                 await storageSourceRef.current.deleteObject(file.fullPath);
             }
-            snackbarController.open({ type: "success", message: `"${file.name}" deleted` });
+            snackbarController.open({ type: "success",
+message: `"${file.name}" deleted` });
             setSelectedFile(null);
             setSelectedDownloadUrl(null);
             setSelectedPaths(prev => {
@@ -778,7 +785,8 @@ export const StorageView = () => {
             });
             fetchContents(currentPath);
         } catch (e) {
-            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+            snackbarController.open({ type: "error",
+message: e instanceof Error ? e.message : String(e) });
         }
     }, [currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
 
@@ -794,13 +802,15 @@ export const StorageView = () => {
                     await storageSourceRef.current.deleteObject(item.fullPath);
                 }
             }
-            snackbarController.open({ type: "success", message: `${items.length} item${items.length !== 1 ? "s" : ""} deleted` });
+            snackbarController.open({ type: "success",
+message: `${items.length} item${items.length !== 1 ? "s" : ""} deleted` });
             setSelectedPaths(new Set());
             setSelectedFile(null);
             setSelectedDownloadUrl(null);
             await fetchContents(currentPath);
         } catch (e) {
-            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+            snackbarController.open({ type: "error",
+message: e instanceof Error ? e.message : String(e) });
         } finally {
             setDeleting(false);
             setDeleteDialogOpen(false);
@@ -814,7 +824,8 @@ export const StorageView = () => {
         setDeleting(true);
         try {
             await deleteFolderRecursive(deleteDialogTarget.fullPath);
-            snackbarController.open({ type: "success", message: `Folder "${deleteDialogTarget.name}" deleted` });
+            snackbarController.open({ type: "success",
+message: `Folder "${deleteDialogTarget.name}" deleted` });
             setSelectedPaths(prev => {
                 const next = new Set(prev);
                 next.delete(deleteDialogTarget.fullPath);
@@ -822,7 +833,8 @@ export const StorageView = () => {
             });
             await fetchContents(currentPath);
         } catch (e) {
-            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+            snackbarController.open({ type: "error",
+message: e instanceof Error ? e.message : String(e) });
         } finally {
             setDeleting(false);
             setDeleteDialogOpen(false);
@@ -1389,6 +1401,7 @@ export const StorageView = () => {
                     }
                 }}
             >
+                <DialogTitle hidden>Delete Confirmation</DialogTitle>
                 <DialogContent>
                     <Typography variant="subtitle1" className="font-semibold mb-2">
                         {deleteDialogTarget === "selection"
@@ -1435,10 +1448,8 @@ export const StorageView = () => {
                     }
                 }}
             >
+                <DialogTitle hidden>New Folder</DialogTitle>
                 <DialogContent>
-                    <Typography variant="subtitle1" className="font-semibold mb-4">
-                        New Folder
-                    </Typography>
                     <TextField
                         autoFocus
                         size="small"