From 49f84db4731c7973894305cb4627323d5e9fd684 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 18 Jan 2026 17:55:38 -0600
Subject: [PATCH] feat: recently viewed

---
 packages/i18n/strings/en.json                 |  5 +++
 .../src/components/Heading/index.tsx          |  2 +-
 .../website-ue/src/components/Navbar.astro    | 14 ++++++++
 .../components/RecentItems/index.module.css   |  9 +++++
 .../src/components/RecentItems/index.tsx      | 34 +++++++++++++++++++
 .../src/components/Section/index.css          |  4 +++
 .../src/components/Section/index.tsx          | 16 +++++----
 .../src/pages/[...locale]/index.astro         |  9 +++++
 8 files changed, 86 insertions(+), 7 deletions(-)
 create mode 100644 packages/website-ue/src/components/RecentItems/index.module.css
 create mode 100644 packages/website-ue/src/components/RecentItems/index.tsx

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 201451fe2..1ac8805f1 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -65,5 +65,10 @@
   "navbar": {
     "home": "Home",
     "settings": "Settings"
+  },
+
+  "recent": {
+    "title": "Recent",
+    "no_recent": "Your recently viewed pages will appear here."
   }
 }
diff --git a/packages/website-ue/src/components/Heading/index.tsx b/packages/website-ue/src/components/Heading/index.tsx
index 264f5bfb8..487f92987 100644
--- a/packages/website-ue/src/components/Heading/index.tsx
+++ b/packages/website-ue/src/components/Heading/index.tsx
@@ -9,7 +9,7 @@ export interface HeadingProps extends Omit<TextProps, "size"> {
 export function Heading({
   className,
   weight,
-  size = "2",
+  size = "1",
   ...props
 }: HeadingProps) {
   return (
diff --git a/packages/website-ue/src/components/Navbar.astro b/packages/website-ue/src/components/Navbar.astro
index 847a7d903..734421ef8 100644
--- a/packages/website-ue/src/components/Navbar.astro
+++ b/packages/website-ue/src/components/Navbar.astro
@@ -140,5 +140,19 @@ const strings = await api.strings(locale);
       </div>
       <Text lowContrast className="label">{strings.navbar.settings}</Text>
     </LinkI18n>
+
+    <LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
+      <div class="selector">
+        <GearIcon className="icon" />
+      </div>
+      <Text lowContrast className="label">{strings.navbar.settings}</Text>
+    </LinkI18n>
+
+    <LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
+      <div class="selector">
+        <GearIcon className="icon" />
+      </div>
+      <Text lowContrast className="label">{strings.navbar.settings}</Text>
+    </LinkI18n>
   </div>
 </div>
diff --git a/packages/website-ue/src/components/RecentItems/index.module.css b/packages/website-ue/src/components/RecentItems/index.module.css
new file mode 100644
index 000000000..b1b619f13
--- /dev/null
+++ b/packages/website-ue/src/components/RecentItems/index.module.css
@@ -0,0 +1,9 @@
+.recent {
+  .list {
+    min-height: var(--space-7);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/packages/website-ue/src/components/RecentItems/index.tsx b/packages/website-ue/src/components/RecentItems/index.tsx
new file mode 100644
index 000000000..0f5f7deec
--- /dev/null
+++ b/packages/website-ue/src/components/RecentItems/index.tsx
@@ -0,0 +1,34 @@
+import { LocaleProvider } from "../../hooks/useLocale";
+import { useStrings } from "../../hooks/useStrings";
+import { Heading } from "../Heading";
+import { Section } from "../Section";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  locale: string;
+  skeleton?: boolean;
+}
+
+export function RecentItems({ locale, skeleton }: Props) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content />
+    </LocaleProvider>
+  );
+}
+
+function Content() {
+  const strings = useStrings();
+  return (
+    <Section first className={styles.recent}>
+      <Heading size="3">{strings.recent.title}</Heading>
+
+      <div className={styles.list}>
+        <Text lowContrast size="minor">
+          {strings.recent.no_recent}
+        </Text>
+      </div>
+    </Section>
+  );
+}
diff --git a/packages/website-ue/src/components/Section/index.css b/packages/website-ue/src/components/Section/index.css
index 144fd89ed..765ceab44 100644
--- a/packages/website-ue/src/components/Section/index.css
+++ b/packages/website-ue/src/components/Section/index.css
@@ -11,4 +11,8 @@
     flex-direction: column;
     gap: var(--space-4);
   }
+
+  &[data-first="true"] .content {
+    padding-top: var(--space-6);
+  }
 }
diff --git a/packages/website-ue/src/components/Section/index.tsx b/packages/website-ue/src/components/Section/index.tsx
index f98643d14..db1112adf 100644
--- a/packages/website-ue/src/components/Section/index.tsx
+++ b/packages/website-ue/src/components/Section/index.tsx
@@ -2,13 +2,17 @@ import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
-export function Section({
-  className,
-  children,
-  ...props
-}: ComponentProps<"div">) {
+export interface SectionProps extends ComponentProps<"div"> {
+  first?: boolean;
+}
+
+export function Section({ className, children, ...props }: SectionProps) {
   return (
-    <div className={classNames("section", className)} {...props}>
+    <div
+      data-first={props.first}
+      className={classNames("section", className)}
+      {...props}
+    >
       <div className="content">{children}</div>
     </div>
   );
diff --git a/packages/website-ue/src/pages/[...locale]/index.astro b/packages/website-ue/src/pages/[...locale]/index.astro
index 58f82a26d..b9776da22 100644
--- a/packages/website-ue/src/pages/[...locale]/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/index.astro
@@ -2,6 +2,7 @@
 import locales from "@blitzkit/i18n/locales.json";
 import type { GetStaticPaths } from "astro";
 import HomeHero from "../../components/HomeHero.astro";
+import { RecentItems } from "../../components/RecentItems";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 export const getStaticPaths = (() => {
@@ -18,4 +19,12 @@ const { locale } = Astro.props;
 
 <BaseLayout {locale} accent="amber">
   <HomeHero {locale} />
+
+  <RecentItems {locale} client:only="react">
+    <RecentItems {locale} skeleton slot="fallback" />
+  </RecentItems>
+
+  <!-- <Section>
+    {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
+  </Section> -->
 </BaseLayout>