Moving files around

src/App.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import TopBar from './lib/TopBar.svelte';
-  import EditorWithLogs from './lib/EditorWithLogs.svelte';
-  import EditorSettings from './lib/EditorSettings.svelte';
-  import FileBrowser from './lib/FileBrowser.svelte';
-  import SidePanel from './lib/SidePanel.svelte';
-  import Popup from './lib/Popup.svelte';
-  import ResizablePopup from './lib/ResizablePopup.svelte';
-  import AudioScope from './lib/AudioScope.svelte';
-  import Spectrogram from './lib/Spectrogram.svelte';
-  import ConfirmDialog from './lib/ConfirmDialog.svelte';
-  import InputDialog from './lib/InputDialog.svelte';
+  import TopBar from './lib/components/ui/TopBar.svelte';
+  import EditorWithLogs from './lib/components/editor/EditorWithLogs.svelte';
+  import EditorSettings from './lib/components/editor/EditorSettings.svelte';
+  import FileBrowser from './lib/components/ui/FileBrowser.svelte';
+  import SidePanel from './lib/components/ui/SidePanel.svelte';
+  import ResizablePopup from './lib/components/ui/ResizablePopup.svelte';
+  import AudioScope from './lib/components/audio/AudioScope.svelte';
+  import Spectrogram from './lib/components/audio/Spectrogram.svelte';
+  import ConfirmDialog from './lib/components/ui/ConfirmDialog.svelte';
+  import InputDialog from './lib/components/ui/InputDialog.svelte';
   import { createCsoundDerivedStores, type LogEntry } from './lib/csound';
   import { type CsoundProject } from './lib/project-system';
   import { DEFAULT_CSOUND_TEMPLATE } from './lib/config/templates';
@@ -37,6 +36,8 @@
   let analyserNode = $state<AnalyserNode | null>(null);
   let interpreterLogs = $state<LogEntry[]>([]);
 
+  let logsUnsubscribe: (() => void) | undefined;
+
   onMount(async () => {
     await projectManager.init();
 
@@ -50,16 +51,13 @@
       });
     }
 
-    const unsubscribe = csoundDerived.logs.subscribe(logs => {
+    logsUnsubscribe = csoundDerived.logs.subscribe(logs => {
       interpreterLogs = logs;
     });
-
-    return () => {
-      unsubscribe();
-    };
   });
 
   onDestroy(async () => {
+    logsUnsubscribe?.();
     await csound.destroy();
   });
 
@@ -334,11 +332,11 @@
     visible={uiState.audioPermissionPopupVisible}
     title="Audio Permission Required"
     x={(typeof window !== 'undefined' ? window.innerWidth / 2 - 250 : 250)}
-    y={(typeof window !== 'undefined' ? window.innerHeight / 2 - 125 : 200)}
+    y={(typeof window !== 'undefined' ? window.innerHeight / 2 - 175 : 200)}
     width={500}
-    height={250}
+    height={350}
     minWidth={400}
-    minHeight={200}
+    minHeight={300}
     closable={false}
   >
     {#snippet children()}

src/assets/svelte.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>

src/lib/Counter.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  let count: number = $state(0)
-  const increment = () => {
-    count += 1
-  }
-</script>
-
-<button onclick={increment}>
-  count is {count}
-</button>

src/lib/components/editor/Editor.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte';
-  import { EditorView, minimalSetup } from 'codemirror';
-  import { EditorState, Compartment } from '@codemirror/state';
+  import { EditorView } from 'codemirror';
+  import { Compartment } from '@codemirror/state';
   import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap } from '@codemirror/view';
   import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
   import { searchKeymap, highlightSelectionMatches } from '@codemirror/search';
@@ -13,7 +13,7 @@
   import { css } from '@codemirror/lang-css';
   import { oneDark } from '@codemirror/theme-one-dark';
   import { vim } from '@replit/codemirror-vim';
-  import type { EditorSettingsStore } from './stores/editorSettings';
+  import type { EditorSettingsStore } from '../../stores/editorSettings';
 
   interface Props {
     value: string;

src/lib/components/editor/EditorSettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { getAppContext } from './contexts/app-context';
+  import { getAppContext } from '../../contexts/app-context';
 
   const { editorSettings } = getAppContext();
 

src/lib/components/editor/EditorWithLogs.svelte

@@ -2,7 +2,7 @@
   import { onMount } from 'svelte';
   import Editor from './Editor.svelte';
   import LogPanel from './LogPanel.svelte';
-  import type { EditorSettingsStore } from './stores/editorSettings';
+  import type { EditorSettingsStore } from '../../stores/editorSettings';
 
   interface Props {
     value: string;

src/lib/components/editor/LogPanel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Copy, Trash2, Search, Pause, Play } from 'lucide-svelte';
-  import { getAppContext } from './contexts/app-context';
-  import type { LogEntry } from './csound';
+  import { getAppContext } from '../../contexts/app-context';
+  import type { LogEntry } from '../../csound';
   import { tick } from 'svelte';
 
   interface Props {

src/lib/components/ui/FileBrowser.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { File, Plus, Trash2 } from 'lucide-svelte';
-  import type { CsoundProject, ProjectManager } from './project-system';
+  import type { CsoundProject, ProjectManager } from '../../project-system';
   import ConfirmDialog from './ConfirmDialog.svelte';
-  import InputDialog from './InputDialog.svelte';
 
   interface Props {
     projectManager: ProjectManager;