From 0d618d408887ac8f74ce22e143f37c7864be8fc1 Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sat, 28 Jun 2025 23:26:32 +0300
Subject: [PATCH] swap tab buttons in hopium with custom ones

---
 website/src/lib/components/ui/tabs/index.ts   | 16 --------
 .../components/ui/tabs/tabs-content.svelte    | 28 --------------
 .../lib/components/ui/tabs/tabs-list.svelte   | 34 -----------------
 .../components/ui/tabs/tabs-trigger.svelte    | 34 -----------------
 .../src/lib/components/ui/tabs/tabs.svelte    | 30 ---------------
 website/src/routes/hopium/+page.svelte        | 37 ++++++++++++++-----
 6 files changed, 27 insertions(+), 152 deletions(-)
 delete mode 100644 website/src/lib/components/ui/tabs/index.ts
 delete mode 100644 website/src/lib/components/ui/tabs/tabs-content.svelte
 delete mode 100644 website/src/lib/components/ui/tabs/tabs-list.svelte
 delete mode 100644 website/src/lib/components/ui/tabs/tabs-trigger.svelte
 delete mode 100644 website/src/lib/components/ui/tabs/tabs.svelte

diff --git a/website/src/lib/components/ui/tabs/index.ts b/website/src/lib/components/ui/tabs/index.ts
deleted file mode 100644
index 12d4327..0000000
--- a/website/src/lib/components/ui/tabs/index.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Root from "./tabs.svelte";
-import Content from "./tabs-content.svelte";
-import List from "./tabs-list.svelte";
-import Trigger from "./tabs-trigger.svelte";
-
-export {
-	Root,
-	Content,
-	List,
-	Trigger,
-	//
-	Root as Tabs,
-	Content as TabsContent,
-	List as TabsList,
-	Trigger as TabsTrigger,
-};
diff --git a/website/src/lib/components/ui/tabs/tabs-content.svelte b/website/src/lib/components/ui/tabs/tabs-content.svelte
deleted file mode 100644
index 383c34b..0000000
--- a/website/src/lib/components/ui/tabs/tabs-content.svelte
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import { browser } from "$app/environment";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: TabsPrimitive.ContentProps = $props();
-</script>
-
-{#if browser}
-	<TabsPrimitive.Content
-		bind:ref
-		data-slot="tabs-content"
-		class={cn("flex-1 outline-none", className)}
-		{...restProps}
-	/>
-{:else}
-	<div
-		data-slot="tabs-content"
-		class={cn("flex-1 outline-none", className)}
-	>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/website/src/lib/components/ui/tabs/tabs-list.svelte b/website/src/lib/components/ui/tabs/tabs-list.svelte
deleted file mode 100644
index 9322553..0000000
--- a/website/src/lib/components/ui/tabs/tabs-list.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import { browser } from "$app/environment";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: TabsPrimitive.ListProps = $props();
-</script>
-
-{#if browser}
-	<TabsPrimitive.List
-		bind:ref
-		data-slot="tabs-list"
-		class={cn(
-			"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-			className
-		)}
-		{...restProps}
-	/>
-{:else}
-	<div
-		data-slot="tabs-list"
-		class={cn(
-			"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-			className
-		)}
-	>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/website/src/lib/components/ui/tabs/tabs-trigger.svelte b/website/src/lib/components/ui/tabs/tabs-trigger.svelte
deleted file mode 100644
index 709dad9..0000000
--- a/website/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import { browser } from "$app/environment";
-
-	let {
-		ref = $bindable(null),
-		class: className,
-		children,
-		...restProps
-	}: TabsPrimitive.TriggerProps = $props();
-</script>
-
-{#if browser}
-	<TabsPrimitive.Trigger
-		bind:ref
-		data-slot="tabs-trigger"
-		class={cn(
-			"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-			className
-		)}
-		{...restProps}
-	/>
-{:else}
-	<button
-		data-slot="tabs-trigger"
-		class={cn(
-			"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-			className
-		)}
-	>
-		{@render children?.()}
-	</button>
-{/if}
diff --git a/website/src/lib/components/ui/tabs/tabs.svelte b/website/src/lib/components/ui/tabs/tabs.svelte
deleted file mode 100644
index 9d40253..0000000
--- a/website/src/lib/components/ui/tabs/tabs.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script lang="ts">
-	import { Tabs as TabsPrimitive } from "bits-ui";
-	import { cn } from "$lib/utils.js";
-	import { browser } from "$app/environment";
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(""),
-		class: className,
-		children,
-		...restProps
-	}: TabsPrimitive.RootProps = $props();
-</script>
-
-{#if browser}
-	<TabsPrimitive.Root
-		bind:ref
-		bind:value
-		data-slot="tabs"
-		class={cn("flex flex-col gap-2", className)}
-		{...restProps}
-	/>
-{:else}
-	<div
-		data-slot="tabs"
-		class={cn("flex flex-col gap-2", className)}
-	>
-		{@render children?.()}
-	</div>
-{/if}
diff --git a/website/src/routes/hopium/+page.svelte b/website/src/routes/hopium/+page.svelte
index c31e8e0..70b059e 100644
--- a/website/src/routes/hopium/+page.svelte
+++ b/website/src/routes/hopium/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card';
 	import * as Dialog from '$lib/components/ui/dialog';
-	import * as Tabs from '$lib/components/ui/tabs';
 	import * as HoverCard from '$lib/components/ui/hover-card';
 	import { Button } from '$lib/components/ui/button';
 	import { Input } from '$lib/components/ui/input';
@@ -120,6 +119,13 @@
 			fetchQuestions();
 		}
 	});
+
+	// Custom tabs implementation
+	const tabs = [
+		{ value: 'active', label: 'Active' },
+		{ value: 'resolved', label: 'Resolved' },
+		{ value: 'all', label: 'All' }
+	];
 </script>
 
 <SEO
@@ -182,13 +188,23 @@
 		</div>
 	</header>
 
-	<Tabs.Root bind:value={activeTab} class="w-full">
+	<!-- Custom Tabs Implementation -->
+	<div class="w-full">
 		<div class="mb-6 flex items-center justify-center gap-2">
-			<Tabs.List class="grid w-full max-w-md grid-cols-3">
-				<Tabs.Trigger value="active">Active</Tabs.Trigger>
-				<Tabs.Trigger value="resolved">Resolved</Tabs.Trigger>
-				<Tabs.Trigger value="all">All</Tabs.Trigger>
-			</Tabs.List>
+			<!-- Custom Tabs List -->
+			<div class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]">
+				<div class="grid w-full max-w-md grid-cols-3">
+					{#each tabs as tab}
+						<button
+							onclick={() => activeTab = tab.value}
+							class="data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm"
+							data-state={activeTab === tab.value ? 'active' : 'inactive'}
+						>
+							{tab.label}
+						</button>
+					{/each}
+				</div>
+			</div>
 			{#if $USER_DATA}
 				<Button onclick={handleCreateQuestion}>
 					<Plus class="h-4 w-4" />
@@ -197,7 +213,8 @@
 			{/if}
 		</div>
 
-		<Tabs.Content value={activeTab}>
+		<!-- Custom Tabs Content -->
+		<div class="flex-1 outline-none">
 			{#if loading}
 				<HopiumSkeleton />
 			{:else if questions.length === 0}
@@ -345,6 +362,6 @@
 					{/each}
 				</div>
 			{/if}
-		</Tabs.Content>
-	</Tabs.Root>
+		</div>
+	</div>
 </div>