freactoring to get company list work in efficient way

frontend/src/routes/project/Create.svelte

@@ -1,6 +1,5 @@
 <script>
     import { useTinyRouter } from 'svelte-tiny-router';
-    import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
 
     import CompanySelector from '../../Components/CompanySelector.svelte';

frontend/src/routes/project/List.svelte

@@ -4,11 +4,69 @@
     import { t } from '../../translations.svelte.js';
 
     const router = useTinyRouter();
+    let error = $state(null);
+    let projects = $state(null);
+    let companies = $state(null);
+
+    async function loadProjects(){
+        let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
+        let resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            companies = await resp.json();
+            url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/list`;
+            resp = await fetch(url,{credentials:'include'});
+            if (resp.ok){
+                projects = await resp.json();
+            } else {
+                error = await resp.text();
+            }
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(loadProjects);
 </script>
 
+{#if error}
+<span class="error">{error}</span>
+{/if}
 <fieldset>
     <legend>
         {t('projects')}
         <button onclick={() => router.navigate('/project/add')}>{t('create_new')}</button>
     </legend>
+    {#if projects}
+    <table>
+        <thead>
+            <tr>
+                <th>{t('name')}</th>
+                <th>{t('company')}</th>
+                <th>{t('state')}</th>
+                <th>{t('members')}</th>
+                <th>{t('actions')}</th>
+            </tr>
+        </thead>
+        <tbody>
+            {#each Object.entries(projects) as [id,project]}
+            <tr onclick={() => router.navigate(`/project/${project.id}/view`)}>
+                <td>{project.name}</td>
+                <td>
+                    {#if project.company_id}
+                    {companies[project.company_id].name}
+                    {/if}
+                </td>
+                <td>
+                    {t("state_"+project.status.name.toLowerCase())}
+                </td>
+                <td>
+                    {#each project.members as member,idx}
+                    <div>{member.user.name}</div>
+                    {/each}
+                </td>
+            </tr>
+            {/each}
+        </tbody>
+    </table>
+    {/if}
 </fieldset>