From 3686cdec04558c34c724c1de33d776486142f456 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 29 May 2025 15:48:10 +0200
Subject: [PATCH] Clean up code formatting and improve studio functionality

- Remove unused imports and dead code (Typography, dev, goto)
- Fix loading spinner CSS spacing
- Replace conditional rendering with display CSS for better performance
- Filter file sync events to only process queued files
- Remove debug button and URL manipulation logic
- Collapse empty HTML div to single line
---
 src/app.html                                  |  4 +---
 .../studio/artifact-[artifact]/+layout.svelte | 24 +++----------------
 .../studio/artifact-[artifact]/code.svelte    | 16 ++++++++++++-
 static/css/loading.css                        |  2 +-
 4 files changed, 20 insertions(+), 26 deletions(-)

diff --git a/src/app.html b/src/app.html
index 82e9f0a44..2c82f4a4f 100644
--- a/src/app.html
+++ b/src/app.html
@@ -38,9 +38,7 @@
                 <div></div>
                 <div></div>
             </div>
-            <div id="loader-logo">
-
-            </div>
+            <div id="loader-logo"></div>
         </div>
     </body>
 </html>
diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
index d9ce99796..f43787525 100644
--- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
+++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Layout, Typography, Divider, Icon, Button, Status } from '@appwrite.io/pink-svelte';
+    import { Layout, Divider, Icon, Button, Status } from '@appwrite.io/pink-svelte';
     import { page } from '$app/state';
     import { ActionDropdown, Tab, Tabs, Terminal } from '$lib/components';
     import { base } from '$app/paths';
@@ -28,8 +28,6 @@
     import { studio } from '$lib/components/studio/studio.svelte';
     import { untrack } from 'svelte';
     import Debug from './debug.svelte';
-    import { dev } from '$app/environment';
-    import { goto } from '$app/navigation';
 
     const { children, data } = $props();
 
@@ -40,14 +38,6 @@
     let debug = $state(false);
 
     function changeView(newView: 'preview' | 'editor') {
-        const newUrl = new URL(page.url.href);
-        if (newView === 'editor') {
-            newUrl.searchParams.set('code', '');
-            goto(newUrl.pathname + newUrl.search, { replaceState: true });
-        } else {
-            newUrl.searchParams.delete('code');
-            goto(newUrl.pathname + newUrl.search, { replaceState: true });
-        }
         view = newView;
     }
 
@@ -224,14 +214,6 @@
                     <Status
                         label={studio.status}
                         status={studio.status === 'connected' ? 'complete' : 'pending'} />
-                    {#if dev}
-                        <div class="hide-mobile">
-                            <Button.Button
-                                on:click={() => (debug = true)}
-                                size="s"
-                                variant="primary">DEBUG</Button.Button>
-                        </div>
-                    {/if}
                     <Button.Button size="s" variant="primary">Release</Button.Button>
                 </Layout.Stack>
             </Layout.Stack>
@@ -248,7 +230,7 @@
             </div>
         </div>
         <Debug bind:show={debug} />
-        {#if view === 'editor'}
+        <div style:display={view === 'editor' ? 'contents' : 'none'}>
             {#if terminalOpen}
                 <div
                     class="resizer"
@@ -344,7 +326,7 @@
                     {/each}
                 </details>
             </aside>
-        {/if}
+        </div>
     </Layout.Stack>
 </div>
 
diff --git a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/code.svelte b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/code.svelte
index edabc02d8..1b2e1d39c 100644
--- a/src/routes/(console)/project-[project]/studio/artifact-[artifact]/code.svelte
+++ b/src/routes/(console)/project-[project]/studio/artifact-[artifact]/code.svelte
@@ -6,16 +6,30 @@
     import { Layout } from '@appwrite.io/pink-svelte';
     import { disableBodySelect, enabledBodySelect } from '$lib/helpers/studioLayout';
     import { onDestroy, onMount } from 'svelte';
+    import { queue } from '$lib/components/studio/chat/queue.svelte';
 
     let instance: Editor;
     let resizerLeftPosition = $state(250);
     let mainRef: HTMLElement;
 
+    const filesToBeGenerated = $derived(
+        Object.values(queue.lists).reduce((prev, curr) => {
+            for (const task of curr) {
+                if (task.status === 'done') continue;
+                if (task.data.src && task.data.type === 'file') {
+                    prev.add(task.data.src);
+                }
+            }
+            return prev;
+        }, new Set<string>())
+    );
+
     studio.synapse.addEventListener('syncWorkDir', ({ message }) => {
         if (studio.streaming === false) return;
         const { path, content, event } = message.data as SyncWorkDirData;
         if (event !== 'add' && event !== 'change') return;
         const normalizedPath = path.startsWith('/') ? path.substring(1) : path;
+        if (!filesToBeGenerated.has(normalizedPath)) return;
         studio.currentFile = normalizedPath;
         instance?.openFile(content, normalizedPath);
     });
@@ -27,7 +41,7 @@
                 filepath: path
             }
         });
-        instance?.openFile(message.data as string, path);
+        instance?.openFile((message.data as { content: string }).content, path);
         studio.currentFile = path;
     }
 
diff --git a/static/css/loading.css b/static/css/loading.css
index 4581fdfc0..a773470b2 100644
--- a/static/css/loading.css
+++ b/static/css/loading.css
@@ -66,7 +66,7 @@ body {
     width: 124px;
     height: 124px;
     margin: 10px;
-    border: 10px solid  var(--console-loading-color, transparent);
+    border: 10px solid var(--console-loading-color, transparent);
     border-radius: 50%;
     animation: animation 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
     border-color: var(--console-loading-color, transparent) transparent transparent transparent;