From 0fb89f52f08ab6944a87cd5ce782316792faf1e7 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 12 Apr 2026 20:52:21 +0100
Subject: [PATCH] cleanup tabs

---
 .../src/features/home/atoms/home-tab-atom.ts   |  3 +++
 .../src/features/home/components/home-tabs.tsx | 18 ++++++------------
 .../space/components/space-home-tabs.tsx       | 18 ++++++------------
 3 files changed, 15 insertions(+), 24 deletions(-)
 create mode 100644 apps/client/src/features/home/atoms/home-tab-atom.ts

diff --git a/apps/client/src/features/home/atoms/home-tab-atom.ts b/apps/client/src/features/home/atoms/home-tab-atom.ts
new file mode 100644
index 00000000..617608e1
--- /dev/null
+++ b/apps/client/src/features/home/atoms/home-tab-atom.ts
@@ -0,0 +1,3 @@
+import { atomWithStorage } from "jotai/utils";
+
+export const homeTabAtom = atomWithStorage<string>("home-tab", "recent");
diff --git a/apps/client/src/features/home/components/home-tabs.tsx b/apps/client/src/features/home/components/home-tabs.tsx
index 8e8a4a54..c899a24d 100644
--- a/apps/client/src/features/home/components/home-tabs.tsx
+++ b/apps/client/src/features/home/components/home-tabs.tsx
@@ -4,28 +4,22 @@ import RecentChanges from "@/components/common/recent-changes";
 import FavoritesPages from "./favorites-pages";
 import CreatedByMe from "./created-by-me";
 import { useTranslation } from "react-i18next";
-
-const STORAGE_KEY = "home-tab";
-const DEFAULT_TAB = "recent";
-const VALID_TABS = ["recent", "favorites", "created"];
-
-function getStoredTab(): string {
-  const stored = localStorage.getItem(STORAGE_KEY);
-  return stored && VALID_TABS.includes(stored) ? stored : DEFAULT_TAB;
-}
+import { useAtom } from "jotai";
+import { homeTabAtom } from "@/features/home/atoms/home-tab-atom";
 
 export default function HomeTabs() {
   const { t } = useTranslation();
+  const [activeTab, setActiveTab] = useAtom(homeTabAtom);
 
   return (
     <Tabs
       color="dark"
-      defaultValue={getStoredTab()}
+      value={activeTab}
       onChange={(value) => {
-        if (value) localStorage.setItem(STORAGE_KEY, value);
+        if (value) setActiveTab(value);
       }}
     >
-      <Tabs.List>
+      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
             {t("Recently updated")}
diff --git a/apps/client/src/features/space/components/space-home-tabs.tsx b/apps/client/src/features/space/components/space-home-tabs.tsx
index 1b26a9ec..2a15b319 100644
--- a/apps/client/src/features/space/components/space-home-tabs.tsx
+++ b/apps/client/src/features/space/components/space-home-tabs.tsx
@@ -6,30 +6,24 @@ import CreatedByMe from "@/features/home/components/created-by-me";
 import { useParams } from "react-router-dom";
 import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query";
 import { useTranslation } from "react-i18next";
-
-const STORAGE_KEY = "space-home-tab";
-const DEFAULT_TAB = "recent";
-const VALID_TABS = ["recent", "favorites", "created"];
-
-function getStoredTab(): string {
-  const stored = localStorage.getItem(STORAGE_KEY);
-  return stored && VALID_TABS.includes(stored) ? stored : DEFAULT_TAB;
-}
+import { useAtom } from "jotai";
+import { homeTabAtom } from "@/features/home/atoms/home-tab-atom";
 
 export default function SpaceHomeTabs() {
   const { t } = useTranslation();
   const { spaceSlug } = useParams();
   const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
+  const [activeTab, setActiveTab] = useAtom(homeTabAtom);
 
   return (
     <Tabs
       color="dark"
-      defaultValue={getStoredTab()}
+      value={activeTab}
       onChange={(value) => {
-        if (value) localStorage.setItem(STORAGE_KEY, value);
+        if (value) setActiveTab(value);
       }}
     >
-      <Tabs.List>
+      <Tabs.List style={{ flexWrap: "nowrap", overflowX: "auto" }}>
         <Tabs.Tab value="recent" leftSection={<IconClockHour3 size={18} />}>
           <Text size="sm" fw={500}>
             {t("Recently updated")}