From 318af14f3e9bc8b45fed1db5d6b784ba78063ee7 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:11:23 -0800
Subject: [PATCH 01/18] fix: feed activity theme colour

---
 .../FeedActivityStatus.module.css             |  9 +++++
 .../feedActivityStatus/FeedActivityStatus.tsx | 40 ++++++++-----------
 .../components/feedItem/Skeleton.FeedItem.tsx | 14 ++-----
 .../components/profileMenu/ProfileMenu.tsx    |  4 +-
 4 files changed, 31 insertions(+), 36 deletions(-)
 create mode 100644 src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css

diff --git a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css
new file mode 100644
index 00000000..103eaa02
--- /dev/null
+++ b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.module.css
@@ -0,0 +1,9 @@
+.root {
+  @mixin light {
+    background-color: var(--mantine-color-gray-1);
+  }
+
+  @mixin dark {
+    background-color: var(--mantine-color-dark-4);
+  }
+}
diff --git a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
index 35193298..90c13d7b 100644
--- a/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
+++ b/src/webapp/features/feeds/components/feedActivityStatus/FeedActivityStatus.tsx
@@ -1,11 +1,12 @@
-'use client';
-
 import {
   Anchor,
   Avatar,
   Card,
   Group,
   Menu,
+  MenuDropdown,
+  MenuItem,
+  MenuTarget,
   ScrollArea,
   Stack,
   Text,
@@ -13,11 +14,10 @@ import {
 import { FeedItem, Collection } from '@/api-client';
 import { Fragment } from 'react';
 import Link from 'next/link';
+import styles from './FeedActivityStatus.module.css';
 import { getRelativeTime } from '@/lib/utils/time';
 import { getRecordKey } from '@/lib/utils/atproto';
 import { sanitizeText } from '@/lib/utils/text';
-import { useColorScheme } from '@mantine/hooks';
-import { BiCollection } from 'react-icons/bi';
 
 interface Props {
   user: FeedItem['user'];
@@ -26,7 +26,6 @@ interface Props {
 }
 
 export default function FeedActivityStatus(props: Props) {
-  const colorScheme = useColorScheme();
   const MAX_DISPLAYED = 2;
   const time = getRelativeTime(props.createdAt.toString());
   const relativeCreatedDate = time === 'just now' ? `Now` : `${time} ago`;
@@ -41,20 +40,15 @@ export default function FeedActivityStatus(props: Props) {
     const remainingCount = collections.length - MAX_DISPLAYED;
 
     return (
-      <Text fw={500} c={'gray'}>
-        <Anchor
-          component={Link}
-          href={`/profile/${props.user.handle}`}
-          c="dark"
-          fw={600}
-        >
+      <Text fw={500}>
+        <Text component={Link} href={`/profile/${props.user.handle}`} fw={600}>
           {sanitizeText(props.user.name)}
-        </Anchor>{' '}
+        </Text>{' '}
         {collections.length === 0 ? (
-          'added to library'
+          <Text span>added to library</Text>
         ) : (
           <Fragment>
-            added to{' '}
+            <Text span>added to </Text>
             {displayedCollections.map(
               (collection: Collection, index: number) => (
                 <span key={collection.id}>
@@ -70,10 +64,10 @@ export default function FeedActivityStatus(props: Props) {
                 </span>
               ),
             )}
-            {remainingCount > 0 && ' and '}
+            {remainingCount > 0 && <Text span>{' and '}</Text>}
             {remainingCount > 0 && (
               <Menu shadow="sm">
-                <Menu.Target>
+                <MenuTarget>
                   <Text
                     fw={600}
                     c={'blue'}
@@ -83,11 +77,11 @@ export default function FeedActivityStatus(props: Props) {
                     {remainingCount} other collection
                     {remainingCount > 1 ? 's' : ''}
                   </Text>
-                </Menu.Target>
-                <Menu.Dropdown maw={380}>
+                </MenuTarget>
+                <MenuDropdown maw={380}>
                   <ScrollArea.Autosize mah={150} type="auto">
                     {remainingCollections.map((c) => (
-                      <Menu.Item
+                      <MenuItem
                         key={c.id}
                         component={Link}
                         href={`/profile/${c.author.handle}/collections/${getRecordKey(c.uri!)}`}
@@ -96,10 +90,10 @@ export default function FeedActivityStatus(props: Props) {
                         fw={600}
                       >
                         {c.name}
-                      </Menu.Item>
+                      </MenuItem>
                     ))}
                   </ScrollArea.Autosize>
-                </Menu.Dropdown>
+                </MenuDropdown>
               </Menu>
             )}
           </Fragment>
@@ -112,7 +106,7 @@ export default function FeedActivityStatus(props: Props) {
   };
 
   return (
-    <Card p={0} bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'} radius={'lg'}>
+    <Card p={0} className={styles.root} radius={'lg'}>
       <Stack gap={'xs'}>
         <Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
           <Avatar
diff --git a/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx b/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
index c2e30188..e3b9cda5 100644
--- a/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
+++ b/src/webapp/features/feeds/components/feedItem/Skeleton.FeedItem.tsx
@@ -1,20 +1,12 @@
-'use client';
-
 import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
-import { Avatar, Card, Group, Paper, Skeleton, Stack } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
+import { Avatar, Card, Group, Skeleton, Stack } from '@mantine/core';
+import styles from '../feedActivityStatus/FeedActivityStatus.module.css';
 
 export default function FeedItemSkeleton() {
-  const colorScheme = useColorScheme();
-
   return (
     <Stack gap={'xs'} align="stretch">
       {/* Feed activity status*/}
-      <Card
-        p={0}
-        bg={colorScheme === 'dark' ? 'dark.4' : 'gray.1'}
-        radius={'lg'}
-      >
+      <Card p={0} className={styles.root} radius={'lg'}>
         <Stack gap={'xs'} align="stretch" w={'100%'}>
           <Group gap={'xs'} wrap="nowrap" align="center" p={'xs'}>
             <Avatar />
diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index ff6b98a9..3dd00316 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -114,7 +114,7 @@ export default function ProfileMenu() {
 
           <Menu.Divider />
 
-          {/*<Menu.Item
+          <Menu.Item
             color="gray"
             leftSection={
               colorScheme === 'auto' ? (
@@ -129,7 +129,7 @@ export default function ProfileMenu() {
             onClick={handleThemeToggle}
           >
             Theme: {colorScheme}
-          </Menu.Item>*/}
+          </Menu.Item>
 
           <Menu.Item
             component="a"
-- 
2.51.2


From e88250b2345b393ec28301c25f0edfb28a9a50a3 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:13:13 -0800
Subject: [PATCH 02/18] chore: remove unused import

---
 .../components/navigation/bottomBarItem/BottomBarItem.tsx     | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx b/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx
index 0870938c..4bcef9d7 100644
--- a/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx
+++ b/src/webapp/components/navigation/bottomBarItem/BottomBarItem.tsx
@@ -1,9 +1,8 @@
 import { IconType } from 'react-icons/lib';
 import { ActionIcon } from '@mantine/core';
-import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import { ReactElement, isValidElement } from 'react';
-import { useColorScheme } from '@mantine/hooks';
+import { usePathname } from 'next/navigation';
 
 interface Props {
   href: string;
@@ -11,7 +10,6 @@ interface Props {
 }
 
 export default function BottomBarItem(props: Props) {
-  const colorScheme = useColorScheme();
   const pathname = usePathname();
   const isActive = pathname === props.href;
 
-- 
2.51.2


From 09921a298e6a761e26254d35f1c93dd13412569c Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:23:22 -0800
Subject: [PATCH 03/18] fix: collection nav item theme colour

---
 .../CollectionNavItem.module.css              | 39 +++++++++++++++++++
 .../collectionNavItem/CollectionNavItem.tsx   | 12 +++---
 2 files changed, 44 insertions(+), 7 deletions(-)
 create mode 100644 src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.module.css

diff --git a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.module.css b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.module.css
new file mode 100644
index 00000000..7398848b
--- /dev/null
+++ b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.module.css
@@ -0,0 +1,39 @@
+/* navlink inactive */
+.navLink {
+  color: var(--mantine-color-gray-6);
+
+  @mixin dark {
+    color: var(--mantine-color-gray-4);
+  }
+}
+
+/* navlink active */
+.navLinkActive {
+  color: var(--mantine-color-dark-filled);
+
+  @mixin dark {
+    color: var(--mantine-color-white);
+  }
+}
+
+/* badge inactive */
+.badge {
+  background-color: var(--mantine-color-gray-light);
+  color: var(--mantine-color-gray-light-color);
+
+  @mixin dark {
+    color: var(--mantine-color-gray-4);
+    background-color: var(--mantine-color-gray-light);
+  }
+}
+
+/* badge active */
+.badgeActive {
+  background-color: var(--mantine-color-dark-filled);
+  color: var(--mantine-color-white);
+
+  @mixin dark {
+    background-color: var(--mantine-color-gray-6);
+    color: var(--mantine-color-white);
+  }
+}
diff --git a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
index 76a83536..b8ec8e20 100644
--- a/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
+++ b/src/webapp/features/collections/components/collectionNavItem/CollectionNavItem.tsx
@@ -1,8 +1,8 @@
 import { useNavbarContext } from '@/providers/navbar';
 import { Badge, NavLink } from '@mantine/core';
-import { useColorScheme } from '@mantine/hooks';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import styles from './CollectionNavItem.module.css';
 
 interface Props {
   name: string;
@@ -12,7 +12,6 @@ interface Props {
 
 export default function CollectionNavItem(props: Props) {
   const { toggleMobile } = useNavbarContext();
-  const colorScheme = useColorScheme();
   const pathname = usePathname();
   const isActive = pathname === props.url;
 
@@ -22,15 +21,14 @@ export default function CollectionNavItem(props: Props) {
       href={props.url}
       label={props.name}
       variant="subtle"
-      c={isActive ? `${colorScheme === 'dark' ? 'white' : 'dark'}` : 'gray'}
+      className={
+        isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink
+      }
       onClick={toggleMobile}
       rightSection={
         props.cardCount > 0 ? (
           <Badge
-            variant={isActive ? 'filled' : 'light'}
-            color={
-              isActive ? `${colorScheme === 'dark' ? 'gray' : 'dark'}` : 'gray'
-            }
+            className={isActive ? styles.badgeActive : styles.badge}
             circle
           >
             {props.cardCount}
-- 
2.51.2


From f03815772461cdd627319932cedf57488378f955 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:33:18 -0800
Subject: [PATCH 04/18] fix: dashboard error theme colour

---
 src/webapp/app/(dashboard)/error.tsx | 129 +++++++++++++++------------
 src/webapp/providers/mantine.tsx     |   2 +-
 2 files changed, 75 insertions(+), 56 deletions(-)

diff --git a/src/webapp/app/(dashboard)/error.tsx b/src/webapp/app/(dashboard)/error.tsx
index 0b0f8e15..fe8db7b0 100644
--- a/src/webapp/app/(dashboard)/error.tsx
+++ b/src/webapp/app/(dashboard)/error.tsx
@@ -16,67 +16,86 @@ import BG from '@/assets/semble-bg.webp';
 import DarkBG from '@/assets/semble-bg-dark.png';
 import Link from 'next/link';
 import { BiRightArrowAlt } from 'react-icons/bi';
-import { useColorScheme } from '@mantine/hooks';
 
 export default function Error() {
-  const colorScheme = useColorScheme();
-
   return (
-    <BackgroundImage
-      src={colorScheme === 'dark' ? DarkBG.src : BG.src}
-      h={'100svh'}
-      pos={'fixed'}
-      top={0}
-      left={0}
-      style={{ zIndex: 102 }}
-    >
-      <Center h={'100svh'} py={{ base: '2rem', xs: '5rem' }}>
-        <Container size={'xl'} p={'md'} my={'auto'}>
-          <Stack>
-            <Stack align="center" gap={'xs'}>
-              <Image
-                src={SembleLogo.src}
-                alt="Semble logo"
-                w={48}
-                h={64.5}
-                mx={'auto'}
-              />
-              <Badge size="sm">Alpha</Badge>
-            </Stack>
+    <>
+      {/* light mode background */}
+      <BackgroundImage
+        src={BG.src}
+        darkHidden
+        h={'100svh'}
+        pos={'fixed'}
+        top={0}
+        left={0}
+        style={{ zIndex: 102 }}
+      >
+        <Content />
+      </BackgroundImage>
 
-            <Stack>
-              <Text fz={'h1'} fw={600} ta={'center'}>
-                A social knowledge network for researchers
-              </Text>
-              <Text
-                fz={'h3'}
-                fw={600}
-                c={colorScheme === 'dark' ? '#1e4dd9' : '#1F6144'}
-                ta={'center'}
-              >
-                Follow your peers’ research trails. Surface and discover new
-                connections. Built on ATProto so you own your data.
-              </Text>
-            </Stack>
+      {/* dark mode background */}
+      <BackgroundImage
+        src={DarkBG.src}
+        lightHidden
+        h={'100svh'}
+        pos={'fixed'}
+        top={0}
+        left={0}
+        style={{ zIndex: 102 }}
+      >
+        <Content />
+      </BackgroundImage>
+    </>
+  );
+}
 
-            <Group justify="center" gap="md" mt={'lg'}>
-              <Button component={Link} href="/signup" size="lg">
-                Sign up
-              </Button>
+function Content() {
+  return (
+    <Center h={'100svh'} py={{ base: '2rem', xs: '5rem' }}>
+      <Container size={'xl'} p={'md'} my={'auto'}>
+        <Stack>
+          <Stack align="center" gap={'xs'}>
+            <Image
+              src={SembleLogo.src}
+              alt="Semble logo"
+              w={48}
+              h={64.5}
+              mx={'auto'}
+            />
+            <Badge size="sm">Alpha</Badge>
+          </Stack>
 
-              <Button
-                component={Link}
-                href="/login"
-                size="lg"
-                color="dark"
-                rightSection={<BiRightArrowAlt size={22} />}
-              >
-                Log in
-              </Button>
-            </Group>
+          <Stack>
+            <Text fz={'h1'} fw={600} ta={'center'}>
+              A social knowledge network for researchers
+            </Text>
+            <Text fz={'h3'} fw={600} c={'#1e4dd9'} ta={'center'} lightHidden>
+              Follow your peers’ research trails. Surface and discover new
+              connections. Built on ATProto so you own your data.
+            </Text>
+            <Text fz={'h3'} fw={600} c={'#1F6144'} ta={'center'} darkHidden>
+              Follow your peers’ research trails. Surface and discover new
+              connections. Built on ATProto so you own your data.
+            </Text>
           </Stack>
-        </Container>
-      </Center>
-    </BackgroundImage>
+
+          <Group justify="center" gap="md" mt={'lg'}>
+            <Button component={Link} href="/signup" size="lg">
+              Sign up
+            </Button>
+
+            <Button
+              component={Link}
+              href="/login"
+              size="lg"
+              color="dark"
+              rightSection={<BiRightArrowAlt size={22} />}
+            >
+              Log in
+            </Button>
+          </Group>
+        </Stack>
+      </Container>
+    </Center>
   );
 }
diff --git a/src/webapp/providers/mantine.tsx b/src/webapp/providers/mantine.tsx
index 7dd967b0..92185508 100644
--- a/src/webapp/providers/mantine.tsx
+++ b/src/webapp/providers/mantine.tsx
@@ -12,7 +12,7 @@ interface Props {
 
 export default function MantineProvider(props: Props) {
   return (
-    <BaseProvider theme={theme} forceColorScheme="light">
+    <BaseProvider theme={theme} defaultColorScheme="auto">
       <Notifications position="bottom-right" />
       {props.children}
     </BaseProvider>
-- 
2.51.2


From 7f5c339b8c82b70e57d172bcff9da340bdd9000d Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:33:27 -0800
Subject: [PATCH 05/18] fix: landing page theme colour

---
 src/webapp/app/page.tsx | 332 ++++++++++++++++++++++------------------
 1 file changed, 181 insertions(+), 151 deletions(-)

diff --git a/src/webapp/app/page.tsx b/src/webapp/app/page.tsx
index 47f740e7..5d01945a 100644
--- a/src/webapp/app/page.tsx
+++ b/src/webapp/app/page.tsx
@@ -30,21 +30,31 @@ import BigPictureIcon from '@/assets/icons/big-picture-icon.svg';
 import TangledIcon from '@/assets/icons/tangled-icon.svg';
 import SembleLogo from '@/assets/semble-logo.svg';
 import Link from 'next/link';
-import { useColorScheme } from '@mantine/hooks';
 
 export default function Home() {
-  const colorScheme = useColorScheme();
+  return (
+    <>
+      {/* light mode background */}
+      <BackgroundImage src={BG.src} darkHidden h="100svh">
+        <Content />
+      </BackgroundImage>
 
+      {/* dark mode background */}
+      <BackgroundImage src={DarkBG.src} lightHidden h="100svh">
+        <Content />
+      </BackgroundImage>
+    </>
+  );
+}
+
+function Content() {
   return (
-    <BackgroundImage
-      src={colorScheme === 'dark' ? DarkBG.src : BG.src}
-      h={'100svh'}
-    >
+    <>
       <script async src="https://tally.so/widgets/embed.js" />
-      <Container size={'xl'} p={'md'} my={'auto'}>
+      <Container size="xl" p="md" my="auto">
         <Group justify="space-between">
           <Stack gap={6} align="center">
-            <Image src={SembleLogo.src} alt="Semble logo" w={30} h={'auto'} />
+            <Image src={SembleLogo.src} alt="Semble logo" w={30} h="auto" />
             <Badge size="sm">Alpha</Badge>
           </Stack>
           <Button
@@ -59,26 +69,43 @@ export default function Home() {
           </Button>
         </Group>
       </Container>
-      <Center h={'100svh'} py={{ base: '2rem', xs: '5rem' }}>
-        <Container size={'xl'} p={'md'} my={'auto'}>
-          <Stack align="center" gap={'5rem'}>
-            <Stack gap={'xs'} align="center" maw={550} mx={'auto'}>
-              <Title order={1} fw={600} fz={'3rem'} ta={'center'}>
+
+      <Center h="100svh" py={{ base: '2rem', xs: '5rem' }}>
+        <Container size="xl" p="md" my="auto">
+          <Stack align="center" gap="5rem">
+            <Stack gap="xs" align="center" maw={550} mx="auto">
+              <Title order={1} fw={600} fz="3rem" ta="center">
                 A social knowledge network for researchers
               </Title>
+
+              {/* light mode subtitle */}
+              <Title
+                order={2}
+                fw={600}
+                fz="xl"
+                c="#1F6144"
+                ta="center"
+                darkHidden
+              >
+                Follow your peers’ research trails. Surface and discover new
+                connections. Built on ATProto so you own your data.
+              </Title>
+
+              {/* dark mode subtitle */}
               <Title
                 order={2}
                 fw={600}
-                fz={'xl'}
-                c={colorScheme === 'dark' ? '#1e4dd9' : '#1F6144'}
-                ta={'center'}
+                fz="xl"
+                c="#1e4dd9"
+                ta="center"
+                lightHidden
               >
                 Follow your peers’ research trails. Surface and discover new
                 connections. Built on ATProto so you own your data.
               </Title>
 
               {process.env.VERCEL_ENV !== 'production' && (
-                <Group gap="md" mt={'lg'}>
+                <Group gap="md" mt="lg">
                   <Button component={Link} href="/signup" size="lg">
                     Sign up
                   </Button>
@@ -101,52 +128,52 @@ export default function Home() {
               spacing={{ base: 'xl' }}
               mt={{ base: '1rem', xs: '5rem' }}
             >
-              <Stack gap={'xs'}>
+              <Stack gap="xs">
                 <Image src={CurateIcon.src} alt="Curate icon" w={28} />
                 <Text>
-                  <Text fw={600} fz={'lg'} span>
+                  <Text fw={600} fz="lg" span>
                     Curate your research trails.
                   </Text>{' '}
-                  <Text fw={500} fz={'lg'} c={'dark.2'} span>
+                  <Text fw={500} fz="lg" c="dark.2" span>
                     Collect interesting links, add notes, and organize them into
                     shareable collections. Build trails others can explore and
                     extend.
                   </Text>
                 </Text>
               </Stack>
-              <Stack gap={'xs'}>
+              <Stack gap="xs">
                 <Image src={CommunityIcon.src} alt="Community icon" w={28} />
                 <Text>
-                  <Text fw={600} fz={'lg'} span>
+                  <Text fw={600} fz="lg" span>
                     Connect with peers.
                   </Text>{' '}
-                  <Text fw={500} fz={'lg'} c={'dark.2'} span>
+                  <Text fw={500} fz="lg" c="dark.2" span>
                     See what your peers are sharing and find new collaborators
                     with shared interests. Experience research rabbit holes,
                     together.
                   </Text>
                 </Text>
               </Stack>
-              <Stack gap={'xs'}>
+              <Stack gap="xs">
                 <Image src={DBIcon.src} alt="Database icon" w={28} />
                 <Text>
-                  <Text fw={600} fz={'lg'} span>
+                  <Text fw={600} fz="lg" span>
                     Own your data.
                   </Text>{' '}
-                  <Text fw={500} fz={'lg'} c={'dark.2'} span>
+                  <Text fw={500} fz="lg" c="dark.2" span>
                     Built on ATProto, new apps will come to you. No more
                     rebuilding your social graph and data when apps pivot and
                     shut down.
                   </Text>
                 </Text>
               </Stack>
-              <Stack gap={'xs'}>
+              <Stack gap="xs">
                 <Image src={BigPictureIcon.src} alt="Big picture icon" w={28} />
                 <Text>
-                  <Text fw={600} fz={'lg'} span>
+                  <Text fw={600} fz="lg" span>
                     See the bigger picture.
                   </Text>{' '}
-                  <Text fw={500} fz={'lg'} c={'dark.2'} span>
+                  <Text fw={500} fz="lg" c="dark.2" span>
                     Find relevant research based on your network. Get the extra
                     context that matters before you dive into a long read.
                   </Text>
@@ -154,130 +181,133 @@ export default function Home() {
               </Stack>
             </SimpleGrid>
 
-            <Box
-              component="footer"
-              px={'md'}
-              py={'xs'}
-              mt={'xl'}
-              pos={'relative'}
-            >
-              <Stack align="center" gap={'xs'}>
-                <Group gap="0">
-                  <ActionIcon
-                    component="a"
-                    href="https://bsky.app/profile/cosmik.network"
-                    target="_blank"
-                    variant="subtle"
-                    color={'dark.2'}
-                    radius={'xl'}
-                    size={'xl'}
-                    m={0}
-                  >
-                    <FaBluesky size={22} />
-                  </ActionIcon>
-                  <ActionIcon
-                    component="a"
-                    href="https://tangled.org/@cosmik.network/semble"
-                    target="_blank"
-                    variant="subtle"
-                    color={'dark.2'}
-                    radius={'xl'}
-                    size={'xl'}
-                  >
-                    <Image
-                      src={TangledIcon.src}
-                      alt="Tangled logo"
-                      w={'auto'}
-                      h={22}
-                    />
-                  </ActionIcon>
-                  <ActionIcon
-                    component="a"
-                    href="https://github.com/cosmik-network"
-                    target="_blank"
-                    variant="subtle"
-                    color={'dark.2'}
-                    radius={'xl'}
-                    size={'xl'}
-                  >
-                    <FaGithub size={22} />
-                  </ActionIcon>
-                  <ActionIcon
-                    component="a"
-                    href="https://discord.gg/SHvvysb73e"
-                    target="_blank"
-                    variant="subtle"
-                    color={'dark.2'}
-                    radius={'xl'}
-                    size={'xl'}
-                  >
-                    <FaDiscord size={22} />
-                  </ActionIcon>
-                </Group>
-                <Button
-                  component="a"
-                  href="https://blog.cosmik.network"
-                  target="_blank"
-                  variant="light"
-                  color="dark.1"
-                  fw={600}
-                  rightSection={<RiArrowRightUpLine />}
-                >
-                  Follow our blog for updates
-                </Button>
-                <Stack align="center" gap={'0'}>
-                  <Text c="dark.1" fw={600} ta="center">
-                    Made by &nbsp;
-                    <Anchor
-                      href="https://cosmik.network/"
-                      target="_blank"
-                      style={{ verticalAlign: 'middle' }}
-                    >
-                      <Box
-                        component="span"
-                        display="inline-flex"
-                        style={{ verticalAlign: 'middle' }}
-                      >
-                        <Image
-                          src={
-                            colorScheme === 'dark'
-                              ? CosmikLogoWhite.src
-                              : CosmikLogo.src
-                          }
-                          alt="Cosmik logo"
-                          w={92}
-                          h={28.4}
-                        />
-                      </Box>
-                    </Anchor>
-                    &nbsp;&nbsp;
-                    <Text c="dark.1" fw={600} span>
-                      with support from&nbsp;
-                      <Anchor
-                        href="https://www.openphilanthropy.org/"
-                        target="_blank"
-                        c="dark.2"
-                        fw={600}
-                      >
-                        Open Philanthropy
-                      </Anchor>{' '}
-                      and{' '}
-                      <Anchor
-                        href="https://astera.org/"
-                        target="_blank"
-                        c="dark.2"
-                        fw={600}
-                      >
-                        Astera
-                      </Anchor>
-                    </Text>
-                  </Text>
-                </Stack>
-              </Stack>
-            </Box>
+            <Footer />
           </Stack>
         </Container>
       </Center>
-    </BackgroundImage>
+    </>
+  );
+}
+
+function Footer() {
+  return (
+    <Box component="footer" px="md" py="xs" mt="xl" pos="relative">
+      <Stack align="center" gap="xs">
+        <Group gap="0">
+          <ActionIcon
+            component="a"
+            href="https://bsky.app/profile/cosmik.network"
+            target="_blank"
+            variant="subtle"
+            color="dark.2"
+            radius="xl"
+            size="xl"
+            m={0}
+          >
+            <FaBluesky size={22} />
+          </ActionIcon>
+          <ActionIcon
+            component="a"
+            href="https://tangled.org/@cosmik.network/semble"
+            target="_blank"
+            variant="subtle"
+            color="dark.2"
+            radius="xl"
+            size="xl"
+          >
+            <Image src={TangledIcon.src} alt="Tangled logo" w="auto" h={22} />
+          </ActionIcon>
+          <ActionIcon
+            component="a"
+            href="https://github.com/cosmik-network"
+            target="_blank"
+            variant="subtle"
+            color="dark.2"
+            radius="xl"
+            size="xl"
+          >
+            <FaGithub size={22} />
+          </ActionIcon>
+          <ActionIcon
+            component="a"
+            href="https://discord.gg/SHvvysb73e"
+            target="_blank"
+            variant="subtle"
+            color="dark.2"
+            radius="xl"
+            size="xl"
+          >
+            <FaDiscord size={22} />
+          </ActionIcon>
+        </Group>
+
+        <Button
+          component="a"
+          href="https://blog.cosmik.network"
+          target="_blank"
+          variant="light"
+          color="dark.1"
+          fw={600}
+          rightSection={<RiArrowRightUpLine />}
+        >
+          Follow our blog for updates
+        </Button>
+
+        <Stack align="center" gap="0">
+          <Text c="dark.1" fw={600} ta="center">
+            Made by &nbsp;
+            <Anchor
+              href="https://cosmik.network/"
+              target="_blank"
+              style={{ verticalAlign: 'middle' }}
+            >
+              <Box
+                component="span"
+                display="inline-flex"
+                style={{ verticalAlign: 'middle' }}
+              >
+                {/* light logo */}
+                <Image
+                  src={CosmikLogo.src}
+                  alt="Cosmik logo"
+                  w={92}
+                  h={28.4}
+                  darkHidden
+                />
+                {/* dark logo */}
+                <Image
+                  src={CosmikLogoWhite.src}
+                  alt="Cosmik logo white"
+                  w={92}
+                  h={28.4}
+                  lightHidden
+                />
+              </Box>
+            </Anchor>
+            &nbsp;&nbsp;
+            <Text c="dark.1" fw={600} span>
+              with support from&nbsp;
+              <Anchor
+                href="https://www.openphilanthropy.org/"
+                target="_blank"
+                c="dark.2"
+                fw={600}
+              >
+                Open Philanthropy
+              </Anchor>{' '}
+              and{' '}
+              <Anchor
+                href="https://astera.org/"
+                target="_blank"
+                c="dark.2"
+                fw={600}
+              >
+                Astera
+              </Anchor>
+            </Text>
+          </Text>
+        </Stack>
+      </Stack>
+    </Box>
   );
 }
-- 
2.51.2


From 19eddf72cfc4becdfe159dc1116a17515161681a Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:33:35 -0800
Subject: [PATCH 06/18] fix: semble header theme color

---
 .../sembleContainer/SembleHeaderBackground.tsx         | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/webapp/features/semble/containers/sembleContainer/SembleHeaderBackground.tsx b/src/webapp/features/semble/containers/sembleContainer/SembleHeaderBackground.tsx
index 084b886f..6fc190b5 100644
--- a/src/webapp/features/semble/containers/sembleContainer/SembleHeaderBackground.tsx
+++ b/src/webapp/features/semble/containers/sembleContainer/SembleHeaderBackground.tsx
@@ -1,23 +1,21 @@
-'use client';
-
-import { useColorScheme } from '@mantine/hooks';
 import BG from '@/assets/semble-header-bg.webp';
 import DarkBG from '@/assets/semble-header-bg-dark.webp';
 import { Box, Image } from '@mantine/core';
 
 export default function SembleHeaderBackground() {
-  const colorScheme = useColorScheme();
-
   return (
     <Box style={{ position: 'relative', width: '100%' }}>
       <Image
-        src={colorScheme === 'dark' ? DarkBG.src : BG.src}
+        src={DarkBG.src}
         alt="bg"
         fit="cover"
         w="100%"
         h={80}
+        lightHidden
       />
 
+      <Image src={BG.src} alt="bg" fit="cover" w="100%" h={80} darkHidden />
+
       {/* White gradient overlay */}
       <Box
         style={{
-- 
2.51.2


From e40b5a1f3c4cc84ee386a9801fd43afc1022dbd2 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:33:44 -0800
Subject: [PATCH 07/18] feat: enable auto theme switch

---
 src/webapp/app/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/app/layout.tsx b/src/webapp/app/layout.tsx
index b3d11418..8fd0e5af 100644
--- a/src/webapp/app/layout.tsx
+++ b/src/webapp/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
       {...mantineHtmlProps}
     >
       <head>
-        <ColorSchemeScript forceColorScheme="light" />
+        <ColorSchemeScript defaultColorScheme="auto" />
       </head>
       <body className={GlobalStyles.main}>
         <Providers>{children}</Providers>
-- 
2.51.2


From b7b3e79e8ef6e5916256513438690aadd1c3bcc9 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:40:56 -0800
Subject: [PATCH 08/18] fix: note card author theme colour

---
 .../features/notes/components/noteCard/NoteCard.tsx   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/webapp/features/notes/components/noteCard/NoteCard.tsx b/src/webapp/features/notes/components/noteCard/NoteCard.tsx
index 15250d89..d15d47b4 100644
--- a/src/webapp/features/notes/components/noteCard/NoteCard.tsx
+++ b/src/webapp/features/notes/components/noteCard/NoteCard.tsx
@@ -30,18 +30,21 @@ export default function NoteCard(props: Props) {
             size={'sm'}
           />
 
-          <Text c={'gray'}>
+          <Text>
             <Text
               component={Link}
               href={`/profile/${props.author.handle}`}
-              c={'dark'}
               fw={500}
               span
             >
               {props.author.name}
             </Text>
-            <Text span>{' · '}</Text>
-            <Text span>{relativeCreateDate} </Text>
+            <Text c={'gray'} span>
+              {' · '}
+            </Text>
+            <Text c={'gray'} span>
+              {relativeCreateDate}{' '}
+            </Text>
           </Text>
         </Group>
       </Stack>
-- 
2.51.2


From 0eee78dd5622e4ebcc549cf141784a7fd8dfa259 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:41:07 -0800
Subject: [PATCH 09/18] fix: collection card author theme colour

---
 .../collections/components/collectionCard/CollectionCard.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
index d02a1b7d..4a910723 100644
--- a/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
+++ b/src/webapp/features/collections/components/collectionCard/CollectionCard.tsx
@@ -58,7 +58,7 @@ export default function CollectionCard(props: Props) {
               size={'sm'}
             />
 
-            <Text c={'dark'} fw={500} span>
+            <Text fw={500} span>
               {collection.author.name}
             </Text>
           </Group>
-- 
2.51.2


From b30e1f88c66930844b924f3b50da8a9b45899e5c Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:41:20 -0800
Subject: [PATCH 10/18] fix: semble aside added recently author theme colour

---
 .../features/semble/containers/sembleAside/SembleAside.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/features/semble/containers/sembleAside/SembleAside.tsx b/src/webapp/features/semble/containers/sembleAside/SembleAside.tsx
index 0ab11676..c458ae9b 100644
--- a/src/webapp/features/semble/containers/sembleAside/SembleAside.tsx
+++ b/src/webapp/features/semble/containers/sembleAside/SembleAside.tsx
@@ -45,7 +45,7 @@ export default async function SembleAside(props: Props) {
                         {lib.user.name}
                       </Text>
                       <Text fw={600} c={'blue'} lineClamp={1}>
-                        {lib.user.handle}
+                        @{lib.user.handle}
                       </Text>
                     </Stack>
                   </Group>
-- 
2.51.2


From a0540c160f6f92095b96ad31ac2a14dabefc1fec Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:43:47 -0800
Subject: [PATCH 11/18] fix: collection container author theme colour

---
 .../containers/collectionContainer/CollectionContainer.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx b/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
index 3ac486ce..326ee702 100644
--- a/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
+++ b/src/webapp/features/collections/containers/collectionContainer/CollectionContainer.tsx
@@ -68,7 +68,7 @@ export default function CollectionContainer(props: Props) {
           </Stack>
 
           <Group gap={'xs'}>
-            <Text fw={600} c="gray.7">
+            <Text fw={600} c="gray">
               By
             </Text>
             <Group gap={5}>
-- 
2.51.2


From af42a5ae19dc8225dde331342a1bd5c3284fde85 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 10:46:32 -0800
Subject: [PATCH 12/18] feat: move theme toggle above log out

---
 .../components/profileMenu/ProfileMenu.tsx    | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index 3dd00316..c35f071f 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -104,16 +104,6 @@ export default function ProfileMenu() {
             Submit an issue
           </Menu.Item>
 
-          <Menu.Item
-            color="gray"
-            leftSection={<IoMdLogOut size={22} />}
-            onClick={handleLogout}
-          >
-            Log out
-          </Menu.Item>
-
-          <Menu.Divider />
-
           <Menu.Item
             color="gray"
             leftSection={
@@ -131,6 +121,16 @@ export default function ProfileMenu() {
             Theme: {colorScheme}
           </Menu.Item>
 
+          <Menu.Divider />
+
+          <Menu.Item
+            color="gray"
+            leftSection={<IoMdLogOut size={22} />}
+            onClick={handleLogout}
+          >
+            Log out
+          </Menu.Item>
+
           <Menu.Item
             component="a"
             href="https://cosmik.network/"
-- 
2.51.2


From bc6fcd1dd8e3b3b49b7b10c314640f74da5fac5d Mon Sep 17 00:00:00 2001
From: Wesley Finck <wesleyfinck@gmail.com>
Date: Thu, 6 Nov 2025 14:25:14 -0500
Subject: [PATCH 13/18] feat: add trailing slash only for bare root URLs
 without paths or parameters

Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <aider@aider.chat>
---
 src/modules/cards/domain/value-objects/URL.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/modules/cards/domain/value-objects/URL.ts b/src/modules/cards/domain/value-objects/URL.ts
index 2307012b..772ee098 100644
--- a/src/modules/cards/domain/value-objects/URL.ts
+++ b/src/modules/cards/domain/value-objects/URL.ts
@@ -30,8 +30,21 @@ export class URL extends ValueObject<URLProps> {
 
     try {
       // Validate URL format using the global URL constructor
-      new globalThis.URL(trimmedUrl);
-      return ok(new URL({ value: trimmedUrl }));
+      const parsedUrl = new globalThis.URL(trimmedUrl);
+      
+      // Add trailing slash only to truly bare root URLs
+      // (no path, no query parameters, no fragments)
+      let normalizedUrl = trimmedUrl;
+      if (
+        (parsedUrl.pathname === '' || parsedUrl.pathname === '/') &&
+        parsedUrl.search === '' &&
+        parsedUrl.hash === '' &&
+        !trimmedUrl.endsWith('/')
+      ) {
+        normalizedUrl = trimmedUrl + '/';
+      }
+      
+      return ok(new URL({ value: normalizedUrl }));
     } catch (error) {
       return err(new InvalidURLError('Invalid URL format'));
     }
-- 
2.51.2


From d33f1536f57d9445fc5d40af0fedc32e2ba8e370 Mon Sep 17 00:00:00 2001
From: Wesley Finck <wesleyfinck@gmail.com>
Date: Thu, 6 Nov 2025 14:27:08 -0500
Subject: [PATCH 14/18] test: add comprehensive unit tests for URL value object

Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <aider@aider.chat>
---
 .../tests/domain/value-objects/URL.test.ts    | 367 ++++++++++++++++++
 1 file changed, 367 insertions(+)
 create mode 100644 src/modules/cards/tests/domain/value-objects/URL.test.ts

diff --git a/src/modules/cards/tests/domain/value-objects/URL.test.ts b/src/modules/cards/tests/domain/value-objects/URL.test.ts
new file mode 100644
index 00000000..3f0d926d
--- /dev/null
+++ b/src/modules/cards/tests/domain/value-objects/URL.test.ts
@@ -0,0 +1,367 @@
+import { URL, InvalidURLError } from '../../../domain/value-objects/URL';
+
+describe('URL Value Object', () => {
+  describe('create', () => {
+    describe('valid URLs', () => {
+      it('should create URL with valid http URL', () => {
+        const result = URL.create('http://example.com');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('http://example.com/');
+      });
+
+      it('should create URL with valid https URL', () => {
+        const result = URL.create('https://example.com');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('https://example.com/');
+      });
+
+      it('should create URL with subdomain', () => {
+        const result = URL.create('https://www.example.com');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('https://www.example.com/');
+      });
+
+      it('should create URL with port', () => {
+        const result = URL.create('https://example.com:8080');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('https://example.com:8080/');
+      });
+    });
+
+    describe('trailing slash normalization', () => {
+      describe('should add trailing slash to bare root domains', () => {
+        it('should add trailing slash to http://example.com', () => {
+          const result = URL.create('http://example.com');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('http://example.com/');
+        });
+
+        it('should add trailing slash to https://example.com', () => {
+          const result = URL.create('https://example.com');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com/');
+        });
+
+        it('should add trailing slash to https://www.example.com', () => {
+          const result = URL.create('https://www.example.com');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://www.example.com/');
+        });
+
+        it('should add trailing slash to https://example.com:8080', () => {
+          const result = URL.create('https://example.com:8080');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com:8080/');
+        });
+
+        it('should add trailing slash to https://sub.domain.example.com', () => {
+          const result = URL.create('https://sub.domain.example.com');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://sub.domain.example.com/');
+        });
+      });
+
+      describe('should NOT add trailing slash when already present', () => {
+        it('should not add trailing slash to https://example.com/', () => {
+          const result = URL.create('https://example.com/');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com/');
+        });
+
+        it('should not add trailing slash to https://www.example.com/', () => {
+          const result = URL.create('https://www.example.com/');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://www.example.com/');
+        });
+
+        it('should not add trailing slash to https://example.com:8080/', () => {
+          const result = URL.create('https://example.com:8080/');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com:8080/');
+        });
+      });
+
+      describe('should NOT add trailing slash to URLs with paths', () => {
+        it('should not add trailing slash to https://example.com/path', () => {
+          const result = URL.create('https://example.com/path');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com/path');
+        });
+
+        it('should not add trailing slash to https://example.com/path/subpath', () => {
+          const result = URL.create('https://example.com/path/subpath');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com/path/subpath',
+          );
+        });
+
+        it('should not add trailing slash to https://example.com/path/', () => {
+          const result = URL.create('https://example.com/path/');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com/path/');
+        });
+
+        it('should not add trailing slash to https://example.com/path.html', () => {
+          const result = URL.create('https://example.com/path.html');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com/path.html');
+        });
+
+        it('should not add trailing slash to https://example.com/api/v1/users', () => {
+          const result = URL.create('https://example.com/api/v1/users');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com/api/v1/users',
+          );
+        });
+      });
+
+      describe('should NOT add trailing slash to URLs with query parameters', () => {
+        it('should not add trailing slash to https://example.com?param=value', () => {
+          const result = URL.create('https://example.com?param=value');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com?param=value');
+        });
+
+        it('should not add trailing slash to https://example.com?param1=value1&param2=value2', () => {
+          const result = URL.create(
+            'https://example.com?param1=value1&param2=value2',
+          );
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com?param1=value1&param2=value2',
+          );
+        });
+
+        it('should not add trailing slash to https://example.com/?param=value', () => {
+          const result = URL.create('https://example.com/?param=value');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com/?param=value',
+          );
+        });
+
+        it('should not add trailing slash to https://example.com/path?param=value', () => {
+          const result = URL.create('https://example.com/path?param=value');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com/path?param=value',
+          );
+        });
+      });
+
+      describe('should NOT add trailing slash to URLs with fragments', () => {
+        it('should not add trailing slash to https://example.com#section', () => {
+          const result = URL.create('https://example.com#section');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com#section');
+        });
+
+        it('should not add trailing slash to https://example.com/#section', () => {
+          const result = URL.create('https://example.com/#section');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe('https://example.com/#section');
+        });
+
+        it('should not add trailing slash to https://example.com/path#section', () => {
+          const result = URL.create('https://example.com/path#section');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com/path#section',
+          );
+        });
+
+        it('should not add trailing slash to https://example.com?param=value#section', () => {
+          const result = URL.create('https://example.com?param=value#section');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com?param=value#section',
+          );
+        });
+      });
+
+      describe('should NOT add trailing slash to URLs with query parameters AND fragments', () => {
+        it('should not add trailing slash to https://example.com?param=value#section', () => {
+          const result = URL.create('https://example.com?param=value#section');
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com?param=value#section',
+          );
+        });
+
+        it('should not add trailing slash to https://example.com/path?param=value#section', () => {
+          const result = URL.create(
+            'https://example.com/path?param=value#section',
+          );
+
+          expect(result.isOk()).toBe(true);
+          expect(result.unwrap().value).toBe(
+            'https://example.com/path?param=value#section',
+          );
+        });
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle URLs with IP addresses', () => {
+        const result = URL.create('http://192.168.1.1');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('http://192.168.1.1/');
+      });
+
+      it('should handle URLs with IP addresses and ports', () => {
+        const result = URL.create('http://192.168.1.1:8080');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('http://192.168.1.1:8080/');
+      });
+
+      it('should handle localhost', () => {
+        const result = URL.create('http://localhost');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('http://localhost/');
+      });
+
+      it('should handle localhost with port', () => {
+        const result = URL.create('http://localhost:3000');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('http://localhost:3000/');
+      });
+
+      it('should trim whitespace before processing', () => {
+        const result = URL.create('  https://example.com  ');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('https://example.com/');
+      });
+
+      it('should handle URLs with authentication', () => {
+        const result = URL.create('https://user:pass@example.com');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('https://user:pass@example.com/');
+      });
+      it('should handle URLs with multiple slashes', () => {
+        const result = URL.create('https://example.com//');
+
+        expect(result.isOk()).toBe(true);
+        expect(result.unwrap().value).toBe('https://example.com//');
+      });
+    });
+
+    describe('invalid URLs', () => {
+      it('should fail for empty string', () => {
+        const result = URL.create('');
+
+        if (!result.isErr()) {
+          throw new Error('Expected result to be an error');
+        }
+        expect(result.isErr()).toBe(true);
+        expect(result.error).toBeInstanceOf(InvalidURLError);
+        expect(result.error.message).toBe('URL cannot be empty');
+      });
+
+      it('should fail for whitespace only', () => {
+        const result = URL.create('   ');
+
+        if (!result.isErr()) {
+          throw new Error('Expected result to be an error');
+        }
+        expect(result.isErr()).toBe(true);
+        expect(result.error).toBeInstanceOf(InvalidURLError);
+        expect(result.error.message).toBe('URL cannot be empty');
+      });
+
+      it('should fail for invalid URL format', () => {
+        const result = URL.create('not-a-url');
+
+        if (!result.isErr()) {
+          throw new Error('Expected result to be an error');
+        }
+        expect(result.isErr()).toBe(true);
+        expect(result.error).toBeInstanceOf(InvalidURLError);
+        expect(result.error.message).toBe('Invalid URL format');
+      });
+
+      it('should fail for URL without protocol', () => {
+        const result = URL.create('example.com');
+
+        if (!result.isErr()) {
+          throw new Error('Expected result to be an error');
+        }
+        expect(result.isErr()).toBe(true);
+        expect(result.error).toBeInstanceOf(InvalidURLError);
+        expect(result.error.message).toBe('Invalid URL format');
+      });
+
+      it('should fail for malformed URL', () => {
+        const result = URL.create('https://');
+
+        if (!result.isErr()) {
+          throw new Error('Expected result to be an error');
+        }
+        expect(result.isErr()).toBe(true);
+        expect(result.error).toBeInstanceOf(InvalidURLError);
+        expect(result.error.message).toBe('Invalid URL format');
+      });
+    });
+  });
+
+  describe('toString', () => {
+    it('should return the URL value as string', () => {
+      const url = URL.create('https://example.com/path').unwrap();
+
+      expect(url.toString()).toBe('https://example.com/path');
+    });
+
+    it('should return normalized URL with trailing slash for bare domains', () => {
+      const url = URL.create('https://example.com').unwrap();
+
+      expect(url.toString()).toBe('https://example.com/');
+    });
+  });
+
+  describe('value getter', () => {
+    it('should return the URL value', () => {
+      const url = URL.create('https://example.com/path').unwrap();
+
+      expect(url.value).toBe('https://example.com/path');
+    });
+
+    it('should return normalized URL with trailing slash for bare domains', () => {
+      const url = URL.create('https://example.com').unwrap();
+
+      expect(url.value).toBe('https://example.com/');
+    });
+  });
+});
-- 
2.51.2


From 2472e104435a759bef650005f0eb16b600673a34 Mon Sep 17 00:00:00 2001
From: Wesley Finck <wesleyfinck@gmail.com>
Date: Thu, 6 Nov 2025 14:34:28 -0500
Subject: [PATCH 15/18] formatting

---
 src/modules/cards/domain/value-objects/URL.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/cards/domain/value-objects/URL.ts b/src/modules/cards/domain/value-objects/URL.ts
index 772ee098..689a58fd 100644
--- a/src/modules/cards/domain/value-objects/URL.ts
+++ b/src/modules/cards/domain/value-objects/URL.ts
@@ -31,7 +31,7 @@ export class URL extends ValueObject<URLProps> {
     try {
       // Validate URL format using the global URL constructor
       const parsedUrl = new globalThis.URL(trimmedUrl);
-      
+
       // Add trailing slash only to truly bare root URLs
       // (no path, no query parameters, no fragments)
       let normalizedUrl = trimmedUrl;
@@ -43,7 +43,7 @@ export class URL extends ValueObject<URLProps> {
       ) {
         normalizedUrl = trimmedUrl + '/';
       }
-      
+
       return ok(new URL({ value: normalizedUrl }));
     } catch (error) {
       return err(new InvalidURLError('Invalid URL format'));
-- 
2.51.2


From f274f44a3f2da0f76135e267ae42ce82460a0729 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 11:42:10 -0800
Subject: [PATCH 16/18] fix: log in button theme colour

---
 src/webapp/app/page.tsx                                       | 2 +-
 src/webapp/features/auth/components/loginForm/LoginForm.tsx   | 4 ++--
 src/webapp/features/auth/components/signUpForm/SignUpForm.tsx | 2 +-
 .../semble/containers/sembleContainer/SembleContainer.tsx     | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/webapp/app/page.tsx b/src/webapp/app/page.tsx
index 5d01945a..601da013 100644
--- a/src/webapp/app/page.tsx
+++ b/src/webapp/app/page.tsx
@@ -114,7 +114,7 @@ function Content() {
                     component={Link}
                     href="/login"
                     size="lg"
-                    color="dark"
+                    color="var(--mantine-color-dark-filled)"
                     rightSection={<BiRightArrowAlt size={22} />}
                   >
                     Log in
diff --git a/src/webapp/features/auth/components/loginForm/LoginForm.tsx b/src/webapp/features/auth/components/loginForm/LoginForm.tsx
index 37795e7f..3cddc73c 100644
--- a/src/webapp/features/auth/components/loginForm/LoginForm.tsx
+++ b/src/webapp/features/auth/components/loginForm/LoginForm.tsx
@@ -177,7 +177,7 @@ export default function LoginForm() {
             <Button
               type="submit"
               size="lg"
-              color="dark"
+              color="var(--mantine-color-dark-filled)"
               fullWidth
               rightSection={<BiRightArrowAlt size={22} />}
               loading={isLoading}
@@ -226,7 +226,7 @@ export default function LoginForm() {
           <Button
             type="submit"
             size="lg"
-            color="dark"
+            color="var(--mantine-color-dark-filled)"
             fullWidth
             rightSection={<BiRightArrowAlt size={22} />}
             loading={isLoading}
diff --git a/src/webapp/features/auth/components/signUpForm/SignUpForm.tsx b/src/webapp/features/auth/components/signUpForm/SignUpForm.tsx
index b272bba3..c18c0053 100644
--- a/src/webapp/features/auth/components/signUpForm/SignUpForm.tsx
+++ b/src/webapp/features/auth/components/signUpForm/SignUpForm.tsx
@@ -9,7 +9,7 @@ export default function SignUpForm() {
         href="https://bsky.app/"
         target="_blank"
         size="lg"
-        color="dark"
+        color="var(--mantine-color-dark-filled)"
         leftSection={<FaBluesky size={22} />}
       >
         Sign up on Bluesky
diff --git a/src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx b/src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx
index 8a2750b6..50766530 100644
--- a/src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx
+++ b/src/webapp/features/semble/containers/sembleContainer/SembleContainer.tsx
@@ -9,7 +9,7 @@ interface Props {
   url: string;
 }
 
-export default async function SembleContainer(props: Props) {
+export default function SembleContainer(props: Props) {
   return (
     <Container p={0} fluid>
       <SembleHeaderBackground />
-- 
2.51.2


From b477b15b86167c9973c8c4fc5495a1a224ac61d3 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Thu, 6 Nov 2025 11:50:55 -0800
Subject: [PATCH 17/18] fix: theme toggle icon size

---
 .../features/profile/components/profileMenu/ProfileMenu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
index c35f071f..519232e1 100644
--- a/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
+++ b/src/webapp/features/profile/components/profileMenu/ProfileMenu.tsx
@@ -108,11 +108,11 @@ export default function ProfileMenu() {
             color="gray"
             leftSection={
               colorScheme === 'auto' ? (
-                <MdAutoAwesome />
+                <MdAutoAwesome size={22} />
               ) : computedColorScheme === 'dark' ? (
-                <MdDarkMode />
+                <MdDarkMode size={22} />
               ) : (
-                <MdLightMode />
+                <MdLightMode size={22} />
               )
             }
             closeMenuOnClick={false}
-- 
2.51.2


From c7e443e710845b3c51f0e9a21607e81d3b90d671 Mon Sep 17 00:00:00 2001
From: Wesley Finck <wesleyfinck@gmail.com>
Date: Thu, 6 Nov 2025 14:45:39 -0500
Subject: [PATCH 18/18] refactor: use normalized URL value across use cases

Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <aider@aider.chat>
---
 .../useCases/commands/AddUrlToLibraryUseCase.ts   |  4 ++--
 .../queries/GetCollectionsForUrlUseCase.ts        |  2 +-
 .../useCases/queries/GetLibrariesForUrlUseCase.ts | 15 +++++++++------
 .../useCases/queries/GetNoteCardsForUrlUseCase.ts | 15 +++++++++------
 .../useCases/queries/GetUrlMetadataUseCase.ts     |  2 +-
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/modules/cards/application/useCases/commands/AddUrlToLibraryUseCase.ts b/src/modules/cards/application/useCases/commands/AddUrlToLibraryUseCase.ts
index 54cab9e3..8620cde4 100644
--- a/src/modules/cards/application/useCases/commands/AddUrlToLibraryUseCase.ts
+++ b/src/modules/cards/application/useCases/commands/AddUrlToLibraryUseCase.ts
@@ -107,7 +107,7 @@ export class AddUrlToLibraryUseCase extends BaseUseCase<
         // Create URL card
         const urlCardInput: IUrlCardInput = {
           type: CardTypeEnum.URL,
-          url: request.url,
+          url: url.value,
           metadata: metadataResult.value,
         };
 
@@ -192,7 +192,7 @@ export class AddUrlToLibraryUseCase extends BaseUseCase<
             type: CardTypeEnum.NOTE,
             text: request.note,
             parentCardId: urlCard.cardId.getStringValue(),
-            url: request.url,
+            url: url.value,
           };
 
           const noteCardResult = CardFactory.create({
diff --git a/src/modules/cards/application/useCases/queries/GetCollectionsForUrlUseCase.ts b/src/modules/cards/application/useCases/queries/GetCollectionsForUrlUseCase.ts
index 58a048e3..20c2f26f 100644
--- a/src/modules/cards/application/useCases/queries/GetCollectionsForUrlUseCase.ts
+++ b/src/modules/cards/application/useCases/queries/GetCollectionsForUrlUseCase.ts
@@ -60,7 +60,7 @@ export class GetCollectionsForUrlUseCase
     try {
       // Execute query to get collections containing cards with this URL (raw data with authorId)
       const result = await this.collectionQueryRepo.getCollectionsWithUrl(
-        query.url,
+        urlResult.value.value,
         {
           page,
           limit,
diff --git a/src/modules/cards/application/useCases/queries/GetLibrariesForUrlUseCase.ts b/src/modules/cards/application/useCases/queries/GetLibrariesForUrlUseCase.ts
index 25b39cfe..e26fcbd0 100644
--- a/src/modules/cards/application/useCases/queries/GetLibrariesForUrlUseCase.ts
+++ b/src/modules/cards/application/useCases/queries/GetLibrariesForUrlUseCase.ts
@@ -68,12 +68,15 @@ export class GetLibrariesForUrlUseCase
 
     try {
       // Execute query to get libraries with full card data
-      const result = await this.cardQueryRepo.getLibrariesForUrl(query.url, {
-        page,
-        limit,
-        sortBy,
-        sortOrder,
-      });
+      const result = await this.cardQueryRepo.getLibrariesForUrl(
+        urlResult.value.value,
+        {
+          page,
+          limit,
+          sortBy,
+          sortOrder,
+        },
+      );
 
       // Enrich with user profiles
       const uniqueUserIds = Array.from(
diff --git a/src/modules/cards/application/useCases/queries/GetNoteCardsForUrlUseCase.ts b/src/modules/cards/application/useCases/queries/GetNoteCardsForUrlUseCase.ts
index 5ec5548d..4b9c7d2c 100644
--- a/src/modules/cards/application/useCases/queries/GetNoteCardsForUrlUseCase.ts
+++ b/src/modules/cards/application/useCases/queries/GetNoteCardsForUrlUseCase.ts
@@ -58,12 +58,15 @@ export class GetNoteCardsForUrlUseCase
 
     try {
       // Execute query to get note cards for the URL (raw data with authorId)
-      const result = await this.cardQueryRepo.getNoteCardsForUrl(query.url, {
-        page,
-        limit,
-        sortBy,
-        sortOrder,
-      });
+      const result = await this.cardQueryRepo.getNoteCardsForUrl(
+        urlResult.value.value,
+        {
+          page,
+          limit,
+          sortBy,
+          sortOrder,
+        },
+      );
 
       // Enrich with author profiles
       const uniqueAuthorIds = Array.from(
diff --git a/src/modules/cards/application/useCases/queries/GetUrlMetadataUseCase.ts b/src/modules/cards/application/useCases/queries/GetUrlMetadataUseCase.ts
index da750c15..cb8cc129 100644
--- a/src/modules/cards/application/useCases/queries/GetUrlMetadataUseCase.ts
+++ b/src/modules/cards/application/useCases/queries/GetUrlMetadataUseCase.ts
@@ -62,7 +62,7 @@ export class GetUrlMetadataUseCase
 
       return ok({
         metadata: {
-          url: metadata.url,
+          url: url.value,
           title: metadata.title,
           description: metadata.description,
           author: metadata.author,
-- 
2.51.2