Improved filter displays

src/lib/ListFilter.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
   export let searchTerm: string;
+  export let isCategoriesVisible: boolean;
+  export let toggleCategories: () => void;
 </script>
 
 <div class="title-row">
   <h2>Template List</h2>
   <div class="filters">
+    <button on:click={toggleCategories}>
+      {isCategoriesVisible ? '▲' : '▼'} Categories
+    </button>
     <input type="text" placeholder="Search..." bind:value={searchTerm} />
   </div>
 </div>
@@ -35,5 +40,21 @@
       }
     }
   }
+  button {
+    color: var(--foreground);
+    border: 1px solid transparent;
+    padding: 0 0.3rem;
+    margin: 0.25rem;
+    line-height: 2rem;
+    border-radius: 6px;
+    text-transform: capitalize;
+    background: var(--card);
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+    font-size: 0.9rem;
+    &:hover, &.selected {
+      background: var(--gradient);
+    }
+  }
 }
 </style>

src/lib/SearchSummary.svelte

@@ -18,6 +18,8 @@ export let totalResults: number;
       Showing {numResults} of {totalResults}
       results, matching categories: {selectedCategories.join(', ')}
     </p>
+  {:else}
+    <p>Click an app to view info, stats and usage docs</p>
   {/if}
   {#if searchTerm || selectedCategories.length}
     <button on:click={clearSearch}>⨯ Clear Filters</button>
@@ -34,6 +36,7 @@ export let totalResults: number;
   align-items: center;
   p {
     opacity: 0.75;
+    margin: 0;
   }
   button {
     background: var(--gradient);

src/lib/TemplateList.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Template } from '$src/Types';
   export let templates: Template[];
+  import { lazyLoad } from '$lib/lazy-load';
 
   const slugify = (title: string) => {
     return `/${title.toLowerCase().replace(/[^a-zA-Z ]/g, "").replaceAll(' ', '-')}`;
@@ -8,12 +9,12 @@
 </script>
 
 <section class="templates">
-  {#each templates as template}
+  {#each templates as template (template.title)}
     <a class="template-card" href={slugify(template.title)}>
       <h3>{template.title}</h3>
       <div class="template-summary">
         <div class="left">
-          <img src={template.logo} alt={template.title} />
+          <img class="loading" use:lazyLoad={template.logo} alt={template.title} />
         </div>
         <div class="txt">
           <p class="description" title={template.description}>{template.description}</p>
@@ -48,9 +49,7 @@ section.templates {
     .template-summary {
       display: flex;
       gap: 1rem;
-    }
+      align-items: start;
-    .left {
-      .info-icons { opacity: 0.3; }
     }
     p, h3 {
       margin: 0;
@@ -59,6 +58,12 @@ section.templates {
       width: 64px;
       max-height: 64px;
       border-radius: 6px;
+      &.loading {
+        padding: 0.2rem;
+        background: var(--card-2);
+        border-radius: 6px;
+        height: 64px;
+      }
     }
     .description {
       font-style: italic;