feat: start implement panels rendering, remove unused files

src/components/panel/Preview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import type { SlideDirection } from "$lib/types/utils";
+  import type { SlideDirection } from "$lib/util-types";
+  import { imageConfigState } from "$states/image.svelte";
+  import { Image, Layer, Stage, Text } from "svelte-konva";
   import { fly } from "svelte/transition";
 
   interface Props {
@@ -10,8 +12,29 @@
   let { text, direction }: Props = $props();
 
   let xDirection = $derived(direction == "next" ? 320 : -320);
+
+  let image: HTMLImageElement | undefined = imageConfigState.image;
 </script>
 
-<div in:fly={{ x: xDirection, duration: 300 }} out:fly={{ x: -xDirection, duration: 300 }}>
-  {text}
+<div class="konva-wrapper" in:fly={{ x: xDirection, duration: 300 }} out:fly={{ x: -xDirection, duration: 300 }}>
+  <Stage width={320} height={100}>
+    <Layer>
+      <Image {image}></Image>
+      {$inspect(image)}
+      <Text {text} x={10} y={10} fontsize="32" fill="white"></Text>
+    </Layer>
+  </Stage>
 </div>
+
+<style>
+  .konva-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>

src/components/panel/PreviewControls.svelte

@@ -2,7 +2,7 @@
   import Button from "$components/ui/Button.svelte";
   import IconArrowLeft from "$components/ui/Icons/IconArrowLeft.svelte";
   import IconArrowRight from "$components/ui/Icons/IconArrowRight.svelte";
-  import type { SlideDirection } from "$lib/types/utils";
+  import type { SlideDirection } from "$lib/util-types";
 
   interface Props {
     current: number;

src/components/panel/PreviewManager.svelte

@@ -4,7 +4,7 @@
   import Button from "$components/ui/Button.svelte";
   import IconDownload from "$components/ui/Icons/IconDownload.svelte";
   import IconEmpty from "$components/ui/Icons/IconEmpty.svelte";
-  import type { SlideDirection } from "$lib/types/utils";
+  import type { SlideDirection } from "$lib/util-types";
   import { textsState } from "$states/texts.svelte";
   import Preview from "./Preview.svelte";
   import PreviewControls from "./PreviewControls.svelte";
@@ -14,7 +14,13 @@
 
   $effect(() => {
     $inspect(current, textsState.texts);
-    if (current > textsState.texts.length - 1) current = textsState.texts.length - 1;
+    if (textsState.texts.length === 0) {
+      current = 0;
+    } else {
+      if (current > textsState.texts.length - 1) {
+        current = textsState.texts.length - 1;
+      }
+    }
   });
 </script>
 
@@ -30,9 +36,9 @@
   <div class="panel-viewer">
     <div class="panel-display">
       {#if textsState.texts.length}
-        <!-- {@const text = } -->
         {#key current}
-          <Preview text={textsState.texts[current].text} {direction} />
+          {@const text = textsState?.texts[current]?.text}
+          <Preview {text} {direction} />
         {/key}
       {:else}
         <div class="empty-state">
@@ -64,6 +70,7 @@
     justify-content: center;
     align-items: center;
     min-height: 150px;
+    position: relative;
   }
 
   .panel-actions {

src/components/ui/Badge.svelte

@@ -6,7 +6,7 @@
   let { text }: Props = $props();
 </script>
 
-<span class="badge" id="panelCount">{text}</span>
+<span class="badge">{text}</span>
 
 <style>
   .badge {

src/components/ui/Icons/IconList.svelte

@@ -0,0 +1,11 @@
+<svg fill="currentColor" viewBox="0 0 24 24">
+  <path
+    d="M4.215 7.266h0.003a0.545 0.545 0 0 0 0.539 0.544v0H19.243v0a0.545 0.545 0 0 0 0.542 -0.544h0.002V4.756a0.545 0.545 0 0 0 -0.545 -0.544H4.757a0.545 0.545 0 0 0 -0.545 0.545c0 0.009 0.002 0.018 0.003 0.028z"
+  />
+  <path
+    d="M19.243 10.201H4.757a0.545 0.545 0 0 0 -0.545 0.545c0 0.009 0.002 0.018 0.003 0.028v2.482h0.003a0.545 0.545 0 0 0 0.539 0.544v0h14.486v0a0.545 0.545 0 0 0 0.542 -0.544h0.002V10.745a0.545 0.545 0 0 0 -0.545 -0.544"
+  />
+  <path
+    d="M19.243 16.189H4.757a0.545 0.545 0 0 0 -0.545 0.545c0 0.009 0.002 0.018 0.003 0.028v2.482h0.003a0.545 0.545 0 0 0 0.539 0.544v0h14.486v0a0.545 0.545 0 0 0 0.542 -0.545h0.002V16.732a0.545 0.545 0 0 0 -0.545 -0.543"
+  />
+</svg>

src/components/ui/Icons/IconUnfold.svelte

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1">
+  <path
+    d="M8.293 14.293a1 1 0 0 1 1.414 0L12 16.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-3 3a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 0-1.414ZM11.293 5.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414L12 7.414 9.707 9.707a1 1 0 0 1-1.414-1.414l3-3Z"
+  />
+</svg>