From 6e65bb8e41bca4caf177337417cf7ae0ff30a89a Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Sun, 30 Aug 2026 12:00:56 +0200
Subject: [PATCH] add checkbox item filter

---
 app/assets/css/main.css                       | 21 +--------
 app/components/SideBar.vue                    |  6 ++-
 app/components/filter/CheckboxItem.vue        | 45 +++++++++++++++++++
 .../filter/{Item.vue => DropdownItem.vue}     |  6 +--
 app/pages/charts.vue                          | 41 ++++++++---------
 5 files changed, 71 insertions(+), 48 deletions(-)
 create mode 100644 app/components/filter/CheckboxItem.vue
 rename app/components/filter/{Item.vue => DropdownItem.vue} (92%)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index b5abb99..3d21e84 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -18,28 +18,9 @@
 }
 
 body {
-	@apply bg-zinc-900;
+	@apply bg-zinc-900 scrollbar-thumb-zinc-700;
 
 	box-sizing: border-box;
 	min-height: 100dvh;
 	margin: 0;
 }
-
-/* improve scrollbar on chrome... */
-::-webkit-scrollbar {
-	width: 4px;
-	height: 4px;
-}
-
-::-webkit-scrollbar-track {
-	background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-	background: #888;
-	border-radius: 6px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background: #555;
-}
diff --git a/app/components/SideBar.vue b/app/components/SideBar.vue
index c33e4c7..dea094b 100644
--- a/app/components/SideBar.vue
+++ b/app/components/SideBar.vue
@@ -20,10 +20,12 @@
 		<icon name="akar-icons:text-align-justified" size="24" />
 	</button>
 	<div
-		class="w-52 flex h-full bg-zinc-900 z-10 absolute overflow-scroll transition-all"
+		class="w-52 flex h-full bg-zinc-900 z-10 absolute transition-all"
 		:class="{'-translate-x-52': !sidebarVisible}"
 	>
-		<slot />
+    	<div class="overflow-auto flex-1">
+    		<slot />
+    	</div>
 		<div class="border border-zinc-800 w-0.5 mb-2"></div>
 	</div>
 </template>
diff --git a/app/components/filter/CheckboxItem.vue b/app/components/filter/CheckboxItem.vue
new file mode 100644
index 0000000..395473a
--- /dev/null
+++ b/app/components/filter/CheckboxItem.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+	const model = defineModel<string>();
+
+	defineProps<{
+		show: boolean;
+		title: string;
+		explanation: string;
+  }>();
+
+	const checked = computed({
+		get: () => model.value === "yes",
+		set: (value) => model.value = value ? "yes" : "no",
+	});
+
+</script>
+
+<template>
+	<Transition>
+		<div v-if="show" id="main" class="flex justify-between transition-all">
+			<h2 class="flex-1">
+				<abbr
+					class="no-underline text-sm text-neutral-400"
+					:title="explanation"
+					id="title"
+				>
+					{{ title }}
+				</abbr>
+			</h2>
+			<input type="checkbox" class="accent-zinc-700" v-model="checked" />
+		</div>
+	</Transition>
+</template>
+
+<style scoped>
+	.v-enter-active,
+	.v-leave-active {
+		transition: 0.4s ease;
+	}
+
+	.v-enter-from,
+	.v-leave-to {
+		transform: translateX(-120%);
+		opacity: 0;
+	}
+</style>
diff --git a/app/components/filter/Item.vue b/app/components/filter/DropdownItem.vue
similarity index 92%
rename from app/components/filter/Item.vue
rename to app/components/filter/DropdownItem.vue
index 92e9154..a7bdf78 100644
--- a/app/components/filter/Item.vue
+++ b/app/components/filter/DropdownItem.vue
@@ -2,7 +2,7 @@
 	const model = defineModel<string>();
 
 	const { canClear = false, options } = defineProps<{
-		shouldDisplay: boolean;
+		show: boolean;
 		title: string;
 		explanation: string;
 		options: { value: string; description: string }[];
@@ -26,7 +26,7 @@
 
 <template>
 	<Transition>
-		<div v-if="shouldDisplay" id="main" class="flex flex-col transition-all">
+		<div v-if="show" id="main" class="flex flex-col transition-all">
 			<h2>
 				<button
 					type="button"
@@ -62,7 +62,7 @@
 					<span class="sr-only"> {{ getOptionDescription(model) }} </span>
 				</h3>
 				<div
-					class="bg-zinc-900 z-10 relative flex flex-col max-h-48 overflow-scroll transition-all px-1 border-l-2 border-zinc-800"
+					class="bg-zinc-900 z-10 relative flex flex-col max-h-48 overflow-auto transition-all px-1 border-l-2 border-zinc-800"
 					:class="{'max-h-0!': !isOpen}"
 				>
 					<button
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index bde0768..c9c6cc6 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -159,8 +159,8 @@
 	<div class="flex flex-1">
 		<SideBar v-model:open="sideBarOpen">
 			<div class="flex-1 flex flex-col gap-6 px-2 pt-8">
-				<FilterItem
-					:should-display="true"
+				<FilterDropdownItem
+					:show="true"
 					v-model="projectType"
 					:options="[
                         {
@@ -212,32 +212,32 @@
 					explanation="What type of project should be displayed"
 				/>
 
-				<FilterItem
-					:should-display="isProjectStats"
+				<FilterDropdownItem
+					:show="isProjectStats"
 					v-model="stat"
 					:options="[{ value: 'count', description: 'Number projects supporting each version / loader' }, { value: 'downloads', description: 'Number of Downloads per Version / Loader' }, { value: 'versions', description: 'Number of Versions existing per Version / Loader' }]"
 					title="Stat"
 					explanation="What information about the projects should be displayed"
 				/>
 
-				<FilterItem
-					:should-display="true"
+				<FilterDropdownItem
+					:show="true"
 					v-model="time"
 					:options="times"
 					title="Time"
 					explanation="What Time period should be displayed"
 				/>
 
-				<FilterItem
-					:should-display="isProjectStats"
+				<FilterDropdownItem
+					:show="isProjectStats"
 					v-model="versionGroup"
 					:options="[{ value: 'major', description: 'Grouped by Major Minecraft version' }, { value: 'minor', description: 'Grouped by Minor Minecraft version' }, { value: 'all', description: 'All Minecraft versions seperatly' }, { value: 'unified', description: 'Unify all Minecraft versions' }]"
 					title="Version Group"
 					explanation="How should Minecraft versions be grouped"
 				/>
 
-				<FilterItem
-					:should-display="isProjectStats"
+				<FilterDropdownItem
+					:show="isProjectStats"
 					v-if="time === 'today' && versionGroup !== 'unified'"
 					v-model="versionFrom"
 					:can-clear="true"
@@ -245,8 +245,8 @@
 					title="Version From"
 					explanation="Whats the first version that should be displayed"
 				/>
-				<FilterItem
-					:should-display="isProjectStats"
+				<FilterDropdownItem
+					:show="isProjectStats"
 					v-if="time === 'today' && versionGroup !== 'unified'"
 					v-model="versionTo"
 					:can-clear="true"
@@ -255,8 +255,8 @@
 					explanation="Whats the last version that should be displayed"
 				/>
 
-				<FilterItem
-					:should-display="isProjectStats"
+				<FilterDropdownItem
+					:show="isProjectStats"
 					v-if="time !== 'today' && versionGroup !== 'unified'"
 					v-model="version"
 					:options="gameVersions"
@@ -264,26 +264,21 @@
 					explanation="Which version should be displayed"
 				/>
 
-				<FilterItem
-					:should-display="true"
+				<FilterCheckboxItem
+					:show="true"
 					v-if="
                         ((isProjectStats && time !== 'today') ||
                             !isProjectStats) &&
                         !isRevenueStats
                     "
 					v-model="aggregate"
-					:options="[
-						{ value: 'yes', description: 'Show absolute values' },
-						{ value: 'no', description: 'Show absulute value changes from the previous version' },
-					]"
 					title="Aggregate"
 					explanation="Should the data be displayed as absolute values or changes from the previous version"
 				/>
 
-				<FilterItem
-					:should-display="isProjectStats"
+				<FilterCheckboxItem
+					:show="isProjectStats"
 					v-model="exclusive"
-					:options="[{ value: 'yes', description: 'Filter out versions that support multiple launchers' }, { value: 'no', description: 'Show all versions' }]"
 					title="Exclusive"
 					explanation="Only show Versions made for a single launcher"
 				/>
-- 
2.54.0