From efa24ed5f3c8f2edfbf20f43934bc33cf3b8689f Mon Sep 17 00:00:00 2001
From: Melvin Chia <melvinchia623600@gmail.com>
Date: Fri, 12 Dec 2025 15:54:33 +0800
Subject: [PATCH] feat(ui): replace SliderInput with Listbox for border radius
 selection and update rendering logic

---
 .../components/BorderRadiusSelector.tsx       | 104 +++++++++++++-----
 .../src/apps/personalization/locales/en.json  |  10 +-
 .../src/apps/personalization/locales/ms.json  |  10 +-
 .../apps/personalization/locales/zh-CN.json   |  10 +-
 .../apps/personalization/locales/zh-TW.json   |  10 +-
 5 files changed, 111 insertions(+), 33 deletions(-)

diff --git a/client/src/apps/personalization/components/BorderRadiusSelector.tsx b/client/src/apps/personalization/components/BorderRadiusSelector.tsx
index fe88c8aa1..6bd2f082c 100644
--- a/client/src/apps/personalization/components/BorderRadiusSelector.tsx
+++ b/client/src/apps/personalization/components/BorderRadiusSelector.tsx
@@ -1,9 +1,17 @@
 import { useUserPersonalization } from '@/providers/features/UserPersonalizationProvider'
-import { Button, OptionsColumn, SliderInput } from 'lifeforge-ui'
-import { useState } from 'react'
+import { Listbox, ListboxOption, OptionsColumn } from 'lifeforge-ui'
 import { useTranslation } from 'react-i18next'
 import { usePersonalization } from 'shared'
 
+const BORDER_RADIUS_OPTIONS = [
+  { value: 0, labelKey: 'none' },
+  { value: 0.5, labelKey: 'small' },
+  { value: 1, labelKey: 'default' },
+  { value: 2, labelKey: 'medium' },
+  { value: 3, labelKey: 'large' },
+  { value: 3.6, labelKey: 'full' }
+] as const
+
 function BorderRadiusSelector() {
   const { borderRadiusMultiplier } = usePersonalization()
 
@@ -11,39 +19,77 @@ function BorderRadiusSelector() {
 
   const { t } = useTranslation('apps.personalization')
 
-  const [selectedMultiplier, setSelectedMultiplier] = useState(
-    borderRadiusMultiplier
-  )
-
   return (
     <OptionsColumn
+      breakpoint="md"
       description={t('borderRadiusSelector.desc')}
       icon="tabler:border-radius"
       title={t('borderRadiusSelector.title')}
     >
-      <div className="flex w-full flex-col items-center gap-6 md:flex-row">
-        <SliderInput
-          className="w-full"
-          max={5}
-          min={0}
-          namespace="apps.personalization"
-          step={0.1}
-          value={selectedMultiplier}
-          onChange={value => {
-            setSelectedMultiplier(value)
-          }}
-        />
-        <Button
-          className="w-full md:w-auto"
-          disabled={selectedMultiplier === borderRadiusMultiplier}
-          icon="tabler:check"
-          onClick={() => {
-            changeBorderRadiusMultiplier(selectedMultiplier)
-          }}
-        >
-          save
-        </Button>
-      </div>
+      <Listbox
+        buttonContent={
+          <div className="flex items-center gap-2">
+            <svg
+              className="size-4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              viewBox="0 0 16 16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="13"
+                rx={Math.min(borderRadiusMultiplier * 2, 6.5)}
+                ry={Math.min(borderRadiusMultiplier * 2, 6.5)}
+                width="13"
+                x="1.5"
+                y="1.5"
+              />
+            </svg>
+            <span className="-mt-px block truncate">
+              {t(
+                `borderRadiusSelector.options.${
+                  BORDER_RADIUS_OPTIONS.find(
+                    opt => opt.value === borderRadiusMultiplier
+                  )?.labelKey ?? 'default'
+                }`
+              )}
+            </span>
+          </div>
+        }
+        className="component-bg-lighter min-w-48"
+        value={borderRadiusMultiplier}
+        onChange={value => {
+          changeBorderRadiusMultiplier(value)
+        }}
+      >
+        {BORDER_RADIUS_OPTIONS.map(({ value, labelKey }) => (
+          <ListboxOption
+            key={value}
+            label={t(`borderRadiusSelector.options.${labelKey}`)}
+            renderColorAndIcon={() => (
+              <svg
+                className="mr-2 size-4"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                viewBox="0 0 16 16"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  height="13"
+                  rx={Math.min(value * 2, 6.5)}
+                  ry={Math.min(value * 2, 6.5)}
+                  width="13"
+                  x="1.5"
+                  y="1.5"
+                />
+              </svg>
+            )}
+            value={value}
+          />
+        ))}
+      </Listbox>
     </OptionsColumn>
   )
 }
diff --git a/client/src/apps/personalization/locales/en.json b/client/src/apps/personalization/locales/en.json
index f3275d8f8..a6971bdd8 100644
--- a/client/src/apps/personalization/locales/en.json
+++ b/client/src/apps/personalization/locales/en.json
@@ -100,7 +100,15 @@
   },
   "borderRadiusSelector": {
     "title": "Border Radius",
-    "desc": "Adjust the roundness of corners across the interface."
+    "desc": "Adjust the roundness of corners across the interface.",
+    "options": {
+      "none": "None",
+      "small": "Small",
+      "default": "Default",
+      "medium": "Medium",
+      "large": "Large",
+      "full": "Full"
+    }
   },
   "borderedSelector": {
     "title": "Bordered Components",
diff --git a/client/src/apps/personalization/locales/ms.json b/client/src/apps/personalization/locales/ms.json
index e29230e49..6bc6931ef 100644
--- a/client/src/apps/personalization/locales/ms.json
+++ b/client/src/apps/personalization/locales/ms.json
@@ -100,7 +100,15 @@
   },
   "borderRadiusSelector": {
     "title": "Jejari Sempadan",
-    "desc": "Laraskan kebulataan sudut di seluruh antara muka."
+    "desc": "Laraskan kebulataan sudut di seluruh antara muka.",
+    "options": {
+      "none": "Tiada",
+      "small": "Kecil",
+      "default": "Lalai",
+      "medium": "Sederhana",
+      "large": "Besar",
+      "full": "Penuh"
+    }
   },
   "borderedSelector": {
     "title": "Komponen Bersempadan",
diff --git a/client/src/apps/personalization/locales/zh-CN.json b/client/src/apps/personalization/locales/zh-CN.json
index eddbdc98a..de2a8e0e6 100644
--- a/client/src/apps/personalization/locales/zh-CN.json
+++ b/client/src/apps/personalization/locales/zh-CN.json
@@ -100,7 +100,15 @@
   },
   "borderRadiusSelector": {
     "title": "边框圆角",
-    "desc": "调整界面中各元素的圆角程度。"
+    "desc": "调整界面中各元素的圆角程度。",
+    "options": {
+      "none": "无",
+      "small": "小",
+      "default": "默认",
+      "medium": "中",
+      "large": "大",
+      "full": "最大"
+    }
   },
   "borderedSelector": {
     "title": "边框组件",
diff --git a/client/src/apps/personalization/locales/zh-TW.json b/client/src/apps/personalization/locales/zh-TW.json
index ece2f4065..334713bbc 100644
--- a/client/src/apps/personalization/locales/zh-TW.json
+++ b/client/src/apps/personalization/locales/zh-TW.json
@@ -100,7 +100,15 @@
   },
   "borderRadiusSelector": {
     "title": "邊框圓角",
-    "desc": "調整介面中各元素的圓角程度。"
+    "desc": "調整介面中各元素的圓角程度。",
+    "options": {
+      "none": "無",
+      "small": "小",
+      "default": "預設",
+      "medium": "中",
+      "large": "大",
+      "full": "最大"
+    }
   },
   "borderedSelector": {
     "title": "邊框組件",