From f276c979fab41c2803f78d691898f061a2511e19 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 31 Aug 2024 22:54:30 +0800
Subject: [PATCH] chore: update visibility checkbox

---
 frontend/locales/en.json                      |  2 +-
 frontend/locales/zh.json                      |  2 +-
 .../src/components/CreateCollectionDrawer.tsx | 35 +++++++--------
 .../src/components/CreateShortcutDrawer.tsx   | 44 ++++++-------------
 4 files changed, 30 insertions(+), 53 deletions(-)

diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index 133b636..f80a9f2 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -42,7 +42,7 @@
       },
       "public": {
         "self": "Public",
-        "description": "Visible to everyone on the internet"
+        "description": "Public on the internet"
       }
     }
   },
diff --git a/frontend/locales/zh.json b/frontend/locales/zh.json
index 91259dc..46bf297 100644
--- a/frontend/locales/zh.json
+++ b/frontend/locales/zh.json
@@ -39,7 +39,7 @@
       },
       "public": {
         "self": "公开的",
-        "description": "对任何人可见"
+        "description": "公开至互联网"
       }
     }
   },
diff --git a/frontend/web/src/components/CreateCollectionDrawer.tsx b/frontend/web/src/components/CreateCollectionDrawer.tsx
index 7e729cf..ce9a8ba 100644
--- a/frontend/web/src/components/CreateCollectionDrawer.tsx
+++ b/frontend/web/src/components/CreateCollectionDrawer.tsx
@@ -1,4 +1,4 @@
-import { Button, DialogActions, DialogContent, DialogTitle, Drawer, Input, ModalClose, Radio, RadioGroup } from "@mui/joy";
+import { Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Drawer, Input, ModalClose } from "@mui/joy";
 import { isUndefined } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
@@ -107,14 +107,6 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPartialState({
-      collectionCreate: Object.assign(state.collectionCreate, {
-        visibility: e.target.value,
-      }),
-    });
-  };
-
   const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPartialState({
       collectionCreate: Object.assign(state.collectionCreate, {
@@ -209,18 +201,21 @@ const CreateCollectionDrawer: React.FC<Props> = (props: Props) => {
             </div>
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
-            <span className="mb-2">Visibility</span>
-            <div className="w-full flex flex-row justify-start items-center text-base">
-              <RadioGroup orientation="horizontal" value={state.collectionCreate.visibility} onChange={handleVisibilityInputChange}>
-                <Radio value={Visibility.WORKSPACE} label={t(`shortcut.visibility.workspace.self`)} />
-                <Radio value={Visibility.PUBLIC} label={t(`shortcut.visibility.public.self`)} />
-              </RadioGroup>
-            </div>
-            <p className="mt-3 text-sm text-gray-500 w-full bg-gray-100 border border-gray-200 dark:bg-zinc-800 dark:border-zinc-700 dark:text-gray-400 px-2 py-1 rounded-md">
-              {t(`shortcut.visibility.${state.collectionCreate.visibility.toLowerCase()}.description`)}
-            </p>
+            <Checkbox
+              className="w-full dark:text-gray-400"
+              checked={state.collectionCreate.visibility === Visibility.PUBLIC}
+              label={t(`shortcut.visibility.public.description`)}
+              onChange={(e) =>
+                setPartialState({
+                  collectionCreate: Object.assign(state.collectionCreate, {
+                    visibility: e.target.checked ? Visibility.PUBLIC : Visibility.WORKSPACE,
+                  }),
+                })
+              }
+            />
           </div>
-          <div className="w-full flex flex-col justify-start items-start mb-3">
+          <Divider className="text-gray-500" />
+          <div className="w-full flex flex-col justify-start items-start mt-3 mb-3">
             <p className="mb-2">
               <span>Shortcuts</span>
               <span className="opacity-60">({selectedShortcuts.length})</span>
diff --git a/frontend/web/src/components/CreateShortcutDrawer.tsx b/frontend/web/src/components/CreateShortcutDrawer.tsx
index 7869fee..28f82b4 100644
--- a/frontend/web/src/components/CreateShortcutDrawer.tsx
+++ b/frontend/web/src/components/CreateShortcutDrawer.tsx
@@ -1,16 +1,4 @@
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Divider,
-  Drawer,
-  Input,
-  ModalClose,
-  Radio,
-  RadioGroup,
-  Textarea,
-} from "@mui/joy";
+import { Button, Checkbox, DialogActions, DialogContent, DialogTitle, Divider, Drawer, Input, ModalClose, Textarea } from "@mui/joy";
 import classnames from "classnames";
 import { isUndefined, uniq } from "lodash-es";
 import { useEffect, useState } from "react";
@@ -124,14 +112,6 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleVisibilityInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setPartialState({
-      shortcutCreate: Object.assign(state.shortcutCreate, {
-        visibility: e.target.value,
-      }),
-    });
-  };
-
   const handleDescriptionInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPartialState({
       shortcutCreate: Object.assign(state.shortcutCreate, {
@@ -291,16 +271,18 @@ const CreateShortcutDrawer: React.FC<Props> = (props: Props) => {
             )}
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
-            <span className="mb-2">Visibility</span>
-            <div className="w-full flex flex-row justify-start items-center text-base">
-              <RadioGroup orientation="horizontal" value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}>
-                <Radio value={Visibility.WORKSPACE} label={t(`shortcut.visibility.workspace.self`)} />
-                <Radio value={Visibility.PUBLIC} label={t(`shortcut.visibility.public.self`)} />
-              </RadioGroup>
-            </div>
-            <p className="mt-3 text-sm text-gray-500 w-full bg-gray-100 border border-gray-200 dark:bg-zinc-800 dark:border-zinc-700 dark:text-gray-400 px-2 py-1 rounded-md">
-              {t(`shortcut.visibility.${state.shortcutCreate.visibility.toLowerCase()}.description`)}
-            </p>
+            <Checkbox
+              className="w-full dark:text-gray-400"
+              checked={state.shortcutCreate.visibility === Visibility.PUBLIC}
+              label={t(`shortcut.visibility.public.description`)}
+              onChange={(e) =>
+                setPartialState({
+                  shortcutCreate: Object.assign(state.shortcutCreate, {
+                    visibility: e.target.checked ? Visibility.PUBLIC : Visibility.WORKSPACE,
+                  }),
+                })
+              }
+            />
           </div>
           <Divider className="text-gray-500">More</Divider>
           <div className="w-full flex flex-col justify-start items-start border rounded-md mt-3 overflow-hidden dark:border-zinc-800">