From b12f6c1307862f8b8faf7d44477ac8db6707a4be Mon Sep 17 00:00:00 2001
From: Scrum4Me Agent <30029041+madhura68@users.noreply.github.com>
Date: Thu, 14 May 2026 20:38:53 +0200
Subject: [PATCH] feat(jobs-time-filter): voeg JobsTimeFilterControl component
 toe

Nieuw client-component dat views.jobs.timeFilter leest/schrijft
via useUserSettingsStore met pill-stijl (MD3-tokens).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 components/jobs/jobs-time-filter.tsx | 48 ++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/jobs/jobs-time-filter.tsx

diff --git a/components/jobs/jobs-time-filter.tsx b/components/jobs/jobs-time-filter.tsx
new file mode 100644
index 0000000..9615003
--- /dev/null
+++ b/components/jobs/jobs-time-filter.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { useShallow } from 'zustand/react/shallow'
+import { useUserSettingsStore } from '@/stores/user-settings/store'
+import { cn } from '@/lib/utils'
+import { debugProps } from '@/lib/debug'
+import {
+  JOBS_TIME_FILTER_VALUES,
+  DEFAULT_JOBS_TIME_FILTER,
+  type JobsTimeFilter,
+} from '@/lib/jobs-time-filter'
+
+const LABELS: Record<JobsTimeFilter, string> = {
+  '1h': '1 uur',
+  '24h': '24 uur',
+  all: 'Alles',
+}
+
+export default function JobsTimeFilterControl() {
+  const current =
+    useUserSettingsStore(
+      useShallow((s) => s.entities.settings.views?.jobs?.timeFilter),
+    ) ?? DEFAULT_JOBS_TIME_FILTER
+  const setPref = useUserSettingsStore((s) => s.setPref)
+
+  return (
+    <div
+      className="flex items-center gap-1.5"
+      {...debugProps('jobs-time-filter', 'JobsTimeFilter', 'components/jobs/jobs-time-filter.tsx')}
+    >
+      {JOBS_TIME_FILTER_VALUES.map((v) => (
+        <button
+          key={v}
+          type="button"
+          onClick={() => void setPref(['views', 'jobs', 'timeFilter'], v)}
+          className={cn(
+            'text-xs px-2.5 py-1 rounded-full border transition-colors',
+            current === v
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-transparent border-border hover:bg-surface-container',
+          )}
+        >
+          {LABELS[v]}
+        </button>
+      ))}
+    </div>
+  )
+}