Improve project downloading functionality and integrate download button into ProjectManager

src/hooks/useProject.ts

@@ -86,17 +86,6 @@ function useProject(id?: number | string) {
           },
         );
 
-        if (String(id) === '5') {
-          const url = URL.createObjectURL(projectFile);
-          const link = document.createElement('a');
-          link.href = url;
-          link.download = projectFile.name;
-          document.body.appendChild(link);
-          link.click();
-          link.remove();
-          URL.revokeObjectURL(url);
-        }
-
         return {
           pads,
           scenes,

src/routes/home/ProjectManager.tsx

@@ -14,12 +14,27 @@ import ExportProject from './Export/ExportProject';
 
 function ProjectManager() {
   const [projectId, setProjectId] = useAtom(projectIdAtom);
-  const { refetch } = useProject(projectId);
+  const { data, refetch } = useProject(projectId);
   const { resetSceneNames } = useSceneName(projectId);
   const { hasCustomNames } = useCustomSceneNames(projectId);
   const appState = useAppState();
   const projects = useProjectsList();
 
+  const downloadProjectFile = () => {
+    if (!data?.projectFile) {
+      return;
+    }
+
+    const url = URL.createObjectURL(data.projectFile);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = data.projectFile.name;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  };
+
   return (
     <div className="flex gap-2 items-center">
       <Select
@@ -48,6 +63,15 @@ function ProjectManager() {
       >
         <IconReload className="w-4 h-4" />
       </Button>
+      <Button
+        onClick={downloadProjectFile}
+        disabled={!data?.projectFile}
+        size="sm"
+        variant="secondary"
+        title="Download raw project file"
+      >
+        Download raw
+      </Button>
       {hasCustomNames && (
         <Button
           onClick={resetSceneNames}