From 4641d2357a24e5192ec71127be2ba33365ccdf5a Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Tue, 31 Mar 2026 15:43:16 +0200
Subject: [PATCH] filter buttons now show whether they are selected

---
 src/lib/lists/blog-gallery.svelte |  2 +-
 src/routes/blog/+page.svelte      | 18 ++++++++++++------
 src/routes/blog/posts.ts          |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/lib/lists/blog-gallery.svelte b/src/lib/lists/blog-gallery.svelte
index d6ee5eb..6ac5308 100644
--- a/src/lib/lists/blog-gallery.svelte
+++ b/src/lib/lists/blog-gallery.svelte
@@ -31,7 +31,7 @@
     .entry-container {
         display: grid;
         /* gap: 8px; */
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
     }
 
     .entry {
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 92574e8..c56c252 100644
--- a/src/routes/blog/+page.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/routes/blog/posts.ts b/src/routes/blog/posts.ts
index 5ced2ae..0512086 100644
--- a/src/routes/blog/posts.ts
+++ b/src/routes/blog/posts.ts
@@ -24,7 +24,7 @@ export interface BlogPostLink {
 }
 
 export enum BlogPostTag {
-	NULL = "X", // placeholder when a 'no tag' is needed. if in doubt, do not use this
+	NULL = "all", // placeholder when a 'no tag' is needed. if in doubt, do not use this
 	ART = "art-stuff", // ramblings to do with art
 	DRAWING = "drawing", // self-explanatory
 	META = "natconf-meta", // about the website itself