## 1.5.1

type-script-helper/webviews/components/CardComponent.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import type { Card } from "../../src/Card";
+
+  export let key: string;
+  export let card: Card;
+  export let index: number;
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore missing-declaration -->
+<li id={index.toString()}>
+  <!-- svelte-ignore a11y-invalid-attribute -->
+  <a
+    href="#{index.toString()}"
+    title="{key}"
+    on:click={async () => {
+      acquiredVsCodeApi.postMessage({
+        type: "open-card",
+        value: { File: card.File },
+      });
+    }}
+  >
+    {card.H1}
+  </a>
+</li>

type-script-helper/webviews/components/Cards.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import type { Card } from "../../src/Card";
+  import CardComponent from "./CardComponent.svelte";
+
+  export let key: string = "";
+  export let value: Array<Card> = [];
+</script>
+
+{#if !value}
+  <div>loading...</div>
+{:else}
+  <hr>
+  <h1>{key}</h1>
+  <ul>
+    {#each value as card, index}
+      <CardComponent {key} {card} {index} />
+    {/each}
+  </ul>
+{/if}

type-script-helper/webviews/components/ColumnsToCards.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+  import Cards from "./Cards.svelte";
+  import type { Card } from "../../src/Card";
+  import type { PostMessage } from "../../src/PostMessage";
+
+  let columnsToCards: Record<string, Array<Card>> = {};
+
+  onMount(async () => {
+    window.addEventListener("message", async (event) => {
+      const postMessage: PostMessage = event.data;
+      switch (postMessage.type) {
+        case "columns-to-cards": {
+          columnsToCards = postMessage.value;
+          break;
+        }
+      }
+    });
+    const postMessage: PostMessage = {
+      type: "get-columns-to-cards",
+      value: undefined,
+    };
+    acquiredVsCodeApi.postMessage(postMessage);
+  });
+</script>
+
+{#if Object.entries(columnsToCards).length == 0}
+  <div>loading...</div>
+{:else}
+  {#each Object.entries(columnsToCards) as [key, value], index (key)}
+    <Cards {key} {value} />
+  {/each}
+{/if}

type-script-helper/webviews/components/DisplayDate.svelte

@@ -0,0 +1,4 @@
+<script lang="ts">
+</script>
+
+<h1>2023-09-23-15-20</h1>

type-script-helper/webviews/globals.d.ts

@@ -0,0 +1,10 @@
+import * as _vscode from "vscode";
+import type { PostMessage } from "../types";
+
+declare global {
+  const acquiredVsCodeApi: {
+    postMessage: (PostMessage) => void;
+    getState: () => any;
+    setState: (state: any) => void;
+  };
+}

type-script-helper/webviews/pages/ColumnsToCards.ts

@@ -0,0 +1,7 @@
+import App from "../components/ColumnsToCards.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

type-script-helper/webviews/pages/DisplayDate.ts

@@ -0,0 +1,7 @@
+import App from "../components/DisplayDate.svelte";
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

type-script-helper/webviews/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "ignoreDeprecations": "5.0",
+    "strict": true
+  },
+  "exclude": [
+    "../node_modules/*"
+  ],
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": [
+    "./**/*"
+  ]
+}