(feat): add border radius option

apps/web/src/features/conversation/list/switch.tsx

@@ -23,10 +23,10 @@ export default function Switch(props: {
   return (
     <div
       role="tablist"
-      className="border relative grid grid-cols-2 rounded-full bg-card p-1 select-none"
+      className="border relative grid grid-cols-2 rounded-4xl bg-card p-1 select-none"
     >
       <div
-        className="absolute top-1 bottom-1 rounded-full bg-input shadow-sm transition-all duration-300 ease-in-out"
+        className="absolute top-1 bottom-1 rounded-4xl bg-input shadow-sm transition-all duration-300 ease-in-out"
         style={{
           left: props.category === "conversations" ? "0.25rem" : "50%",
           width: "calc(50% - 0.25rem)",
@@ -35,7 +35,7 @@ export default function Switch(props: {
       <button
         role="tab"
         aria-selected={props.category === "conversations"}
-        className={`relative z-10 w-full cursor-pointer rounded-full px-2.5 py-1.5 text-center text-sm font-medium transition-colors duration-300 ${
+        className={`relative z-10 w-full cursor-pointer rounded-4xl px-2.5 py-1.5 text-center text-sm font-medium transition-colors duration-300 ${
           props.category === "conversations"
             ? "text-foreground"
             : "text-ring/50 hover:text-ring"
@@ -47,7 +47,7 @@ export default function Switch(props: {
       <button
         role="tab"
         aria-selected={props.category === "communities"}
-        className={`relative z-10 w-full cursor-pointer rounded-full px-2.5 py-1.5 text-center text-sm font-medium transition-colors duration-300 ${
+        className={`relative z-10 w-full cursor-pointer rounded-4xl px-2.5 py-1.5 text-center text-sm font-medium transition-colors duration-300 ${
           props.category === "communities"
             ? "text-foreground"
             : "text-ring/50 hover:text-ring"

apps/web/src/index.css

@@ -22,6 +22,17 @@
   }
 }
 
+@theme inline {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --radius-full: calc(var(--radius) * 9999);
+}
+
 html,
 body,
 #root {

apps/web/src/index.tsx

@@ -119,6 +119,8 @@ function ThemeStorageBridge() {
     setThemePolarity,
     themeTint,
     setThemeTint,
+    themeBorderRadius,
+    setThemeBorderRadius,
   } = useTheme();
   const loadedRef = useRef(false);
 
@@ -131,7 +133,8 @@ function ThemeStorageBridge() {
       load("theme_primary_color"),
       load("theme_polarity"),
       load("theme_tint"),
-    ]).then(([color, palette, primaryColor, polarity, tint]) => {
+      load("theme_border_radius"),
+    ]).then(([color, palette, primaryColor, polarity, tint, borderRadius]) => {
       if (!active) {
         return;
       }
@@ -141,6 +144,7 @@ function ThemeStorageBridge() {
       setThemePrimaryColor(primaryColor);
       setThemePolarity(polarity);
       setThemeTint(tint);
+      setThemeBorderRadius(borderRadius);
       loadedRef.current = true;
     });
 
@@ -149,6 +153,7 @@ function ThemeStorageBridge() {
     };
   }, [
     load,
+    setThemeBorderRadius,
     setThemeColor,
     setThemePalette,
     setThemePolarity,
@@ -196,6 +201,14 @@ function ThemeStorageBridge() {
     save("theme_tint", themeTint);
   }, [save, themeTint]);
 
+  useEffect(() => {
+    if (!loadedRef.current) {
+      return;
+    }
+
+    save("theme_border_radius", themeBorderRadius);
+  }, [save, themeBorderRadius]);
+
   return null;
 }
 
@@ -210,6 +223,7 @@ function RootShell() {
         paletteStorageKey={null}
         primaryColorStorageKey={null}
         tintStorageKey={null}
+        borderRadiusStorageKey={null}
       >
         <div className="w-screen h-dvh overflow-hidden">
           <Toaster