basic dependencies + first layout

src/components/Dashboard.svelte

@@ -38,6 +38,35 @@
               <a
                 href="#"
                 class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Reports</a>
+              <form class="w-full max-w-xs mr-2 navbar-search">
+                <div class="relative">
+                  <input
+                    type="search"
+                    name="search"
+                    placeholder="Search..."
+                    class="pl-10 pr-5 appearance-none h-10 w-full rounded-full text-sm focus:outline-none" /><button
+                    type="submit"
+                    class="absolute top-0 mt-3 left-0 ml-4"><svg
+                      stroke="currentColor"
+                      fill="none"
+                      stroke-width="2"
+                      viewBox="0 0 24 24"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="stroke-current h-4 w-4"
+                      height="1em"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"><circle
+                        cx="11"
+                        cy="11"
+                        r="8" />
+                      <line
+                        x1="21"
+                        y1="21"
+                        x2="16.65"
+                        y2="16.65" /></svg></button>
+                </div>
+              </form>
             </div>
           </div>
         </div>
@@ -250,7 +279,7 @@
       <StatCards />
       <!--  -->
 
-      <!-- <div class="mb-8">
+      <div class="mb-8">
         <Tracks />
       </div>
       <Pagination />
@@ -259,7 +288,7 @@
       </div>
       <div class="mb-8">
         <FormLayout />
-      </div> -->
+      </div>
     </div>
   </main>
 </div>

src/components/LoginAlt.svelte

@@ -12,8 +12,8 @@
     <div>
       <img
         class="mx-auto h-12 w-auto"
-        src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg"
-        alt="Workflow" />
+        src="https://lauf-fuer-kaya.de/Bilder/kaya-logo-quadrat.png"
+        alt="" />
       <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
         Sign in to your account
       </h2>

src/components/Tmp.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client";
+  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
   OpenAPI.BASE = "http://localhost:4010";
   let tracks_promise = TrackService.trackControllerGetAll();
 </script>

src/components/Tracks.svelte

@@ -1,11 +1,18 @@
 <script>
-  import { OpenAPI, TrackService } from "@odit/lfk-client";
+  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
   OpenAPI.BASE = "http://localhost:4010";
   let tracks_promise = TrackService.trackControllerGetAll();
 </script>
 
 <h1>Tracks</h1>
-{#await tracks_promise then tracks}
+{#await tracks_promise}
+  <div
+    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
+    role="alert">
+    <p class="font-bold">track data is being loaded...</p>
+    <p class="text-sm">This might take a moment 👀</p>
+  </div>
+{:then tracks}
   <h4>{tracks.length}</h4>
   <hr />
   {#if tracks.length % 2 == 0}
@@ -18,5 +25,10 @@
     {#each tracks as item}<span>{item.distance}</span><br />{/each}
   {/if}
 {:catch error}
-  ERORRRRR
+  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
+    <span class="inline-block align-middle mr-8">
+      <b class="capitalize">😢 Error</b>
+      {error}
+    </span>
+  </div>
 {/await}