search field, generic card

src/AdvancedSearch.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <sl-dialog no-header open={showSearch} style="--header-spacing: 0px; --body-spacing: 0px; --footer-spacing: 0px" on:sl-hide="{e => dispatch('closed',{})}">
-  <div class="transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-full">
+  <div class="transform overflow-hidden rounded-xl bg-lightBg dark:bg-darkBg text-lightPrimary dark:darkPrimary shadow-2xl ring-1 ring-black ring-opacity-5 transition-all w-full fixed top-32 max-w-lg">
     <div class="relative">
       <!-- Heroicon name: solid/search -->
       <svg class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

src/App.svelte

@@ -101,17 +101,17 @@
             <ViewGridIcon class=" flex-shrink-0 h-6 w-6"/>
         </NavButtonWithLabel>
 
-        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomtopic" on:click={getRandomTopicName} class={(currentView === "/randomtopic" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " w-full hover:dark:bg-darkPrimaryBg group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center">Random Topic</h3>
         </a>
 
-        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " text-lightSecondary1 w-full hover:bg-lightSecondary1 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg hover:text-lightSecondary2 group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
+        <a href="#/randomitem" on:click={getRandomItemId} class={(currentView === "/randomitem" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "  w-full  hover:dark:bg-darkPrimaryBg group flex justify-start gap-3 items-center py-5 pl-4 text-sm font-medium"}>
             <GiftIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center">Random Item</h3>
         </a>
 
-        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + "text-lightSecondary1 hover:bg-lightSecondary1 hover:text-lightSecondary2 hover:dark:text-darkSecondary2 hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
+        <button on:click="{e => showSearch = true}" class={(currentView === "/search" ? 'bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary' : '') + " hover:dark:bg-darkPrimaryBg w-full group flex justify-start gap-3 items-center py-5 text-sm font-medium pl-4"}>
             <SearchIcon class=" flex-shrink-0 h-6 w-6"/>
             <h3 class="text-center"> Search</h3>
         </button>

src/GenericCard.svelte

@@ -3,19 +3,11 @@
   export let item;
 </script>
 
-<a class="flex flex-wrap p-2 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
+<a class="flex flex-wrap p-8 justify-between rounded-lg break-inside-avoid w-64 max-w-sm bg-lightPrimCont text-lightPrimary dark:bg-darkPrimCont dark:text-darkPrimary hover:bg-lightPrimary hover:bg-darkPrimary" href="#/item/{item.rowid}">
   <div class="flex flex-col justify-between">
     <div class="flex flex-col">
       <strong class="font-extrabold">{item.name}</strong>
       <span class="text-sm font-medium">{item.creators}</span>
     </div>
-    
-    <div class="flex flex-wrap items-center justify-start gap-3 mt-2">
-      {#each item.links.split(";") as type}
-      <a href={type.split("|")[1]} class="inline-flex items-center px-3 py-1 rounded-lg text-xs font-medium bg-lightTertiary dark:bg-darkTertiary text-lightBg dark:text-darkBg border" target="_blank"> {type.split("|")[0]} 
-        <span class="ml-0.5 w-4 h-4"><Icon kind="link"/></span>
-      </a>
-      {/each}
-    </div>
   </div>
 </a>

src/ItemCard.svelte

@@ -5,6 +5,7 @@
     import GenericCard from "./GenericCard.svelte"
     export let item;
     export let displayType = null;
+    export let showBadge = false;
 </script>
 
 {#if item.links.includes('book|') && item.links.includes('video|')}
@@ -18,5 +19,5 @@
 {:else if item.links.includes('video|')}
   <VideoCard {item}/>
 {:else}
-  <GenericCard {item}/>
+  <GenericCard {item} {showBadge}/>
 {/if}

src/ItemDetail.svelte

@@ -103,7 +103,7 @@
           <!-- title, sub title, author  -->
           <section>
             <h1 class="text-2xl">{item.name}</h1>
-            <p class="font max-w-lg">{item.description}</p>
+            <!-- <p class="font max-w-lg">{item.description}</p> -->
             <span class="text-sm">{item.creators}</span>
           </section>
           <!-- ratings and upload buttons -->

src/SearchForm.svelte

@@ -13,7 +13,8 @@
     format: "",
     level: "",
     quality: "",
-    sortby: "rating"
+    sortby: "rating",
+    tag: ""
   };
 
 	const dispatch = createEventDispatcher();
@@ -22,7 +23,7 @@
 
 </script>
 
-<form class="w-full bg-lightSecondary1 text-lightSecondary2 dark:bg-darkSecondaryBg dark:text-darkSecondary2 p-2 inline-flex" on:submit|preventDefault>
+<form class="w-full p-2 inline-flex" on:submit|preventDefault>
     <sl-input type="search" placeholder="Type something to search items by keywords" size="medium" clearable class="flex-1 border-0 p-0 focus:ring-0" value={query.text} on:sl-input="{e => query.text = e.target.value}">
       <sl-icon name="search" slot="prefix"></sl-icon>
     </sl-input>
@@ -40,6 +41,16 @@
     </sl-select>
     {/if}
 
+    <sl-select class="ml-2 w-44"  on:sl-change="{e => query.tag = e.target.value}" value={query.tag}>
+      <sl-menu-item value="">Any tag</sl-menu-item>
+      <sl-menu-item value="childlike">Inspirational</sl-menu-item>
+      <sl-menu-item value="beginner">Educational</sl-menu-item>
+      <sl-menu-item value="intermediate">Challenging</sl-menu-item>
+      <sl-menu-item value="advanced">Entertaining</sl-menu-item>
+      <sl-menu-item value="research">Visual</sl-menu-item>
+      <sl-menu-item value="research">Interactive</sl-menu-item>
+    </sl-select>
+
     <sl-select class="ml-2 w-44"  on:sl-change="{e => query.level = e.target.value}" value={query.level}>
       <sl-menu-item value="">Any level</sl-menu-item>
       <sl-menu-item value="childlike">Childlike</sl-menu-item>

src/TopicMasonryGrid.svelte

@@ -94,9 +94,9 @@
             <a href={"#/topic/" + parent[0].name}><span class="mt-1 p-1 text-lightPrimary dark:text-darkPrimary hover:text-lightSecondary dark:hover:text-darkSecondary text-lg ">{ format_topic_name(parent[0]) }</span></a>
             {/if}
         
-            <div class="mt-2 flex flex-wrap text-sm text-gray-900">
+            <div class="mt-2 flex flex-wrap">
             {#each parent[1].sort((t1,t2) => (t1.sort_index || 100) - (t2.sort_index || 100)) as child}
-                <a href={"#/topic/" + child.name} class="text-lightSecondary2 dark:text-darkSecondary2 no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
+                <a href={"#/topic/" + child.name} class="text-lightSecondary dark:text-darkSecondary no-underline hover:underline hover:underline-offset-2 px-2 ">{format_topic_name(child)}</a>
             {/each}
             </div>    
         </div>

src/VideoCard.svelte

@@ -1,4 +1,5 @@
 <script>
+  import ButtonGroup from "./ButtonGroup.svelte";
   export let item;
   
   function youtube_parser(url){
@@ -14,7 +15,7 @@
     let thumbnail_image_url  = ytid && `https://img.youtube.com/vi/${ytid}/mqdefault.jpg`
     return thumbnail_image_url
   }
-  
+
 </script>
 
 
@@ -45,6 +46,7 @@
       <strong class="font-extrabold">{item.name}</strong>
       <span class="text-sm font-medium">{item.creators}</span>
     </div>
+
   </div>
 </a> 
 

templates/index.html

@@ -27,7 +27,7 @@
 							lightPrimary: 'rgb(30 64 175)',  //blue-800
 							lightSecondary: 'rgb(75 85 99)', //gray-600
 							lightTertiary: 'rgb(168 85 247)', //purple-500
-							lightBg: 'rgb(239 246 255)', //blue-50
+							lightBg: '#fafafa', //zinc-50
 							lightPrimCont: '#dbeafe', // blue-200
 							lightButtonBg: 'rgb(20 83 45)', //green-900