компонент Projects

frontend/src/App.svelte

@@ -1,13 +1,14 @@
 <script>
   import logo from "./assets/images/logo-universal.png";
   import { GetStatus, GetProjects, 
-    StartFar, GetDisks, GetDownloads } from "../wailsjs/go/main/App.js";
+    GetDisks, GetDownloads } from "../wailsjs/go/main/App.js";
 
   import TailwindCss from "./TailwindCSS.svelte";
   import servers from "./servers.js";
   import DiskStatus from "./DiskStatus.svelte";
   import Servers from "./Servers.svelte";
   import Utility from "./Utility.svelte";
+  import Projects from "./Projects.svelte";
   // import {BrowserOpenURL} from '../wailsjs/runtime/runtime.js'
 
   // Определение интерфейса для типа Disk
@@ -45,10 +46,6 @@
     });
   }
 
-  function start_far(project) {
-    StartFar(project.last_directory_path);
-  }
-
   function get_status() {
     console.log("запрос downloads");
     get_downloads();
@@ -89,20 +86,7 @@
 
 <hr class="mb-2 mx-4 text-slate-600" />
 
-<div class="container mx-auto pt-4 mb-8">
+<Projects {projects} />
-  <h1 class="text-blue-200 text-2xl">ПРОЕКТЫ</h1>
-  {#each projects as project}
-    <div class="flex justify-between px-4">
-      <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" on:click={() => start_far(project)}>
-        {project.last_directory}
-      </button>
-
-      <div class="text-neutral-300">
-        <span class="info"> {project.name} </span>
-      </div>
-    </div>
-  {/each}
-</div>
 
 <!-- панель кнопок -->
 <button

frontend/src/Projects.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { StartFar } from "../wailsjs/go/main/App.js";
+  
+  /** @type {Array<{last_directory: string, name: string, last_directory_path: string}>} */
+  export let projects = [];
+
+  function start_far(project) {
+    StartFar(project.last_directory_path);
+  }
+</script>
+
+<div class="container mx-auto pt-4 mb-8">
+  <h1 class="text-blue-200 text-2xl">ПРОЕКТЫ</h1>
+  {#each projects as project}
+    <div class="flex justify-between px-4">
+      <button class="text-teal-600 hover:text-teal-200 hover:font-normal hover:underline hover:underline-offset-2 cursor-pointer" on:click={() => start_far(project)}>
+        {project.last_directory}
+      </button>
+
+      <div class="text-neutral-300">
+        <span class="info"> {project.name} </span>
+      </div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .info {
+    color: lightgreen;
+  }
+</style>