feat: add recommended badge

apps/nextjs/src/app/[locale]/boards/[name]/settings/_layout.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import {
+  Badge,
+  Box,
   Button,
   Chip,
   ChipGroup,
@@ -61,12 +63,18 @@ export const LayoutSettingsContent = ({ board }: Props) => {
         <RadioGroup {...form.getInputProps("layoutMode")} label={t("board.field.layoutMode.label")}>
           <SimpleGrid cols={{ sm: 2, xs: 1 }} spacing="md">
             {boardLayoutModes.values.map((layoutMode) => (
-              <CustomRadioCard
-                key={layoutMode}
-                value={layoutMode}
-                label={t(`board.field.layoutMode.option.${layoutMode}.label`)}
-                description={t(`board.field.layoutMode.option.${layoutMode}.description`)}
-              />
+              <Box w="100%" key={layoutMode} pos="relative">
+                <CustomRadioCard
+                  value={layoutMode}
+                  label={t(`board.field.layoutMode.option.${layoutMode}.label`)}
+                  description={t(`board.field.layoutMode.option.${layoutMode}.description`)}
+                />
+                {layoutMode === boardLayoutModes.defaultValue && (
+                  <Badge pos="absolute" top="8px" right="8px" variant="light" size="sm">
+                    {t("common.select.badge.recommended")}
+                  </Badge>
+                )}
+              </Box>
             ))}
           </SimpleGrid>
         </RadioGroup>

packages/modals-collection/src/boards/add-board-modal.tsx

@@ -1,4 +1,6 @@
 import {
+  Badge,
+  Box,
   Button,
   Fieldset,
   Group,
@@ -84,12 +86,18 @@ export const AddBoardModal = createModal(({ actions }) => {
             <RadioGroup {...form.getInputProps("layoutMode")}>
               <SimpleGrid cols={{ sm: 2, xs: 1 }} spacing="md">
                 {boardLayoutModes.values.map((mode) => (
-                  <CustomRadioCard
-                    key={mode}
-                    value={mode}
-                    label={t(`board.field.layoutMode.option.${mode}.label`)}
-                    description={t(`board.field.layoutMode.option.${mode}.description`)}
-                  />
+                  <Box w="100%" key={mode} pos="relative">
+                    <CustomRadioCard
+                      value={mode}
+                      label={t(`board.field.layoutMode.option.${mode}.label`)}
+                      description={t(`board.field.layoutMode.option.${mode}.description`)}
+                    />
+                    {mode === boardLayoutModes.defaultValue && (
+                      <Badge pos="absolute" top="8px" right="8px" variant="light" size="sm">
+                        {t("common.select.badge.recommended")}
+                      </Badge>
+                    )}
+                  </Box>
                 ))}
               </SimpleGrid>
             </RadioGroup>