filter buttons now show whether they are selected

src/routes/blog/+page.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/viewport/content.svelte";
-    import { BlogPostTag, posts, type BlogPostDetails, type BlogPostLink } from "./posts";
+    import { BlogPostTag, posts, type BlogPostLink } from "./posts";
     import BlogGallery from "$lib/lists/blog-gallery.svelte";
 
     let filter = $state(BlogPostTag.NULL);
-    let filteredPosts = filterPosts();
 
     function setFilter(tag: BlogPostTag) {
         filter = tag;
@@ -36,9 +35,11 @@
     <!-- TODO descriptions on filter click -->
     <div class="tag-filter-container">
         {#each Object.values(BlogPostTag) as tag}
-            <button class="post-tag tag-filter" onclick={() => {
-                setFilter(tag)
-            }}>{tag}</button>
+            {#if tag == filter}
+                <button class="post-tag tag-filter tag-filter-selected" onclick={() => { setFilter(tag) }}>{tag}</button>
+            {:else}
+                <button class="post-tag tag-filter" onclick={() => { setFilter(tag) }}>{tag}</button>
+            {/if}
         {/each}
     </div>
 
@@ -59,9 +60,14 @@
         padding: 8px;
         border-radius: 12px;
         cursor: pointer;
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+
+    .tag-filter-selected {
+        background-color: var(--color-highlight-alt);
     }
 
     .tag-filter:hover {
-        background-color: aqua;
+        background-color: var(--color-highlight-alt);
     }
 </style>