Explore, ItemList, Masonry etc

src/App.svelte

@@ -3,19 +3,25 @@
     import * as TailwindUI from "./tailwindui/index"
 
     import Home from "./Home.svelte"
+    import Explore from "./Explore.svelte"
     import TopicList from "./TopicList.svelte"
     import TopicDetail from "./TopicDetail.svelte"
     import FormatList from "./FormatList.svelte"
     import FormatDetail from "./FormatDetail.svelte"
     import CourseList from "./CourseList.svelte"
     import ItemDetail from "./ItemDetail.svelte"
+    import ItemList from "./ItemList.svelte"
     import AdvancedSearch from "./AdvancedSearch.svelte"
 
     let sidebarItems = [
+        {text: "Explore", link: "#/explore", icon: "home"},
         {text: "Topics", link: "#/topics", icon: "home"},
         {text: "Formats", link: "#/formats", icon: "home"},
         {text: "Random item", link: "#/item/1", icon: "home"},
         {text: "Search", link: "#/search", icon: "home"},
+        {text: "Want to learn", link: "#/wanttolearn", icon: "home"},
+        {text: "Learning", link: "#/learning", icon: "home"},
+        {text: "Finished learning", link: "#/finishedlearning", icon: "home"},
         {text: "Datasette", link: "/learn", icon: "home"}
     ]
 
@@ -46,6 +52,8 @@
 <TailwindUI.AppShell {sidebarItems}>
     {#if currentView === "/home" || currentView === "/"}
         <Home/>
+    {:else if currentView === "/explore"}
+        <Explore/>
     {:else if currentView === "/topics"}
         <TopicList/>
     {:else if currentView.startsWith("/topic/")}
@@ -60,5 +68,11 @@
         <ItemDetail itemid={currentView.split("/")[2]}/>
     {:else if currentView === "/search"}
         <AdvancedSearch/>
+    {:else if currentView === "/wanttolearn"}
+        <ItemList kind="wanttolearn"/>
+    {:else if currentView === "/learning"}
+        <ItemList kind="learning"/>
+    {:else if currentView === "/finishedlearning"}
+        <ItemList kind="finishedlearning"/>
     {/if}
 </TailwindUI.AppShell>

src/Explore.svelte

@@ -0,0 +1,5 @@
+<script>
+
+</script>
+
+<h1 class="text-3xl font-bold">Explore</h1>

src/ItemList.svelte

@@ -0,0 +1,22 @@
+<script>
+    import { onMount } from 'svelte';
+    import ItemCard from "./ItemCard.svelte"
+
+    export let kind;
+    let ls = null;
+    let items = []; //TODO: Only store item IDs in localStorage
+
+    const read = () => !!ls && JSON.parse(ls.getItem(kind) || "[]");
+
+    onMount(() => {
+        typeof localStorage !== `undefined` && (ls = localStorage);
+        items = read();
+    });
+
+</script>
+
+<h1>{kind}</h1>
+
+{#each items as item}
+<ItemCard {item}/>
+{/each}

src/TopicMasonryGrid.svelte

@@ -27,7 +27,7 @@
             alltopics = data;
         });
 
-    $: tree = hierarchy(alltopics, topic ? topic.id : "")
+    $: tree = hierarchy(alltopics, topic?.id || "")
 
 </script>
 

static/bundle.css

@@ -1,3 +1,2 @@
 .__grid--masonry{display:grid;grid-template-columns:repeat(auto-fit, var(--col-width));grid-template-rows:masonry;justify-content:center;grid-gap:var(--grid-gap);padding:var(--grid-gap)}.__grid--masonry > *{align-self:start 
-}.__grid--masonry.__stretch-first > *:first-child{grid-column:1/ -1}._padding.svelte-1wlh87t{padding:12px}._card.svelte-1wlh87t{border:1px solid #ccc
-      }._sticky.svelte-1wlh87t{position:sticky;top:12px}
+}.__grid--masonry.__stretch-first > *:first-child{grid-column:1/ -1}