chore: fix visibility selector style (#4733)

web/src/components/MemoEditor/ActionButton/VisibilitySelector.tsx

@@ -3,16 +3,18 @@ import { useState } from "react";
 import VisibilityIcon from "@/components/VisibilityIcon";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/Popover";
 import { Visibility } from "@/types/proto/api/v1/memo_service";
+import { cn } from "@/utils";
 import { useTranslate } from "@/utils/i18n";
 
 interface Props {
   value: Visibility;
   onChange: (visibility: Visibility) => void;
+  onOpenChange?: (open: boolean) => void;
   className?: string;
 }
 
 const VisibilitySelector = (props: Props) => {
-  const { value, onChange, className } = props;
+  const { value, onChange } = props;
   const t = useTranslate();
   const [open, setOpen] = useState(false);
 
@@ -26,14 +28,24 @@ const VisibilitySelector = (props: Props) => {
 
   const handleSelect = (visibility: Visibility) => {
     onChange(visibility);
-    setOpen(false);
+    handleOpenChange(false);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open);
+    if (props.onOpenChange) {
+      props.onOpenChange(open);
+    }
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <button
-          className={`flex items-center justify-center gap-1 px-0.5 text-xs rounded hover:bg-gray-100 dark:hover:bg-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 transition-colors ${className || ""}`}
+          className={cn(
+            `flex items-center justify-center gap-1 px-0.5 text-xs rounded hover:bg-gray-100 dark:hover:bg-zinc-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-1 transition-colors`,
+            props.className,
+          )}
           type="button"
         >
           <VisibilityIcon className="w-3 h-3" visibility={value} />

web/src/components/MemoEditor/index.tsx

@@ -40,8 +40,6 @@ export interface Props {
   memoName?: string;
   // The name of the parent memo if the memo is a comment.
   parentMemoName?: string;
-  // The visibility of the parent memo for preset when commenting
-  parentMemoVisibility?: Visibility;
   autoFocus?: boolean;
   onConfirm?: (memoName: string) => void;
   onCancel?: () => void;
@@ -59,12 +57,12 @@ interface State {
 }
 
 const MemoEditor = observer((props: Props) => {
-  const { className, cacheKey, memoName, parentMemoName, parentMemoVisibility, autoFocus, onConfirm, onCancel } = props;
+  const { className, cacheKey, memoName, parentMemoName, autoFocus, onConfirm, onCancel } = props;
   const t = useTranslate();
   const { i18n } = useTranslation();
   const currentUser = useCurrentUser();
   const [state, setState] = useState<State>({
-    memoVisibility: parentMemoVisibility ?? Visibility.PRIVATE,
+    memoVisibility: Visibility.PRIVATE,
     resourceList: [],
     relationList: [],
     location: undefined,
@@ -75,6 +73,7 @@ const MemoEditor = observer((props: Props) => {
   });
   const [displayTime, setDisplayTime] = useState<Date | undefined>();
   const [hasContent, setHasContent] = useState<boolean>(false);
+  const [isVisibilitySelectorOpen, setIsVisibilitySelectorOpen] = useState(false);
   const editorRef = useRef<EditorRefActions>(null);
   const userSetting = userStore.state.userSetting as UserSetting;
   const contentCacheKey = `${currentUser.name}-${cacheKey || ""}`;
@@ -97,16 +96,20 @@ const MemoEditor = observer((props: Props) => {
     }
   }, [autoFocus]);
 
-  useEffect(() => {
-    let visibility = parentMemoVisibility ?? userSetting.memoVisibility;
-    if (workspaceMemoRelatedSetting.disallowPublicVisibility && visibility === "PUBLIC") {
-      visibility = "PRIVATE";
+  useAsyncEffect(async () => {
+    let visibility = convertVisibilityFromString(userSetting.memoVisibility);
+    if (workspaceMemoRelatedSetting.disallowPublicVisibility && visibility === Visibility.PUBLIC) {
+      visibility = Visibility.PROTECTED;
+    }
+    if (parentMemoName) {
+      const parentMemo = await memoStore.getOrFetchMemoByName(parentMemoName);
+      visibility = parentMemo.visibility;
     }
     setState((prevState) => ({
       ...prevState,
       memoVisibility: convertVisibilityFromString(visibility),
     }));
-  }, [parentMemoVisibility, userSetting.memoVisibility, workspaceMemoRelatedSetting.disallowPublicVisibility]);
+  }, [parentMemoName, userSetting.memoVisibility, workspaceMemoRelatedSetting.disallowPublicVisibility]);
 
   useAsyncEffect(async () => {
     if (!memoName) {
@@ -529,10 +532,19 @@ const MemoEditor = observer((props: Props) => {
           </div>
         </div>
         <div
-          className="absolute invisible group-focus-within:visible group-hover:visible right-1 top-1 opacity-60"
+          className={cn(
+            "absolute right-1 top-1 opacity-60",
+            "invisible group-focus-within:visible group-hover:visible hover:visible focus-within:visible",
+            (isVisibilitySelectorOpen || memoName) && "visible",
+          )}
           onFocus={(e) => e.stopPropagation()}
+          onMouseDown={(e) => e.stopPropagation()}
         >
-          <VisibilitySelector value={state.memoVisibility} onChange={handleMemoVisibilityChange} />
+          <VisibilitySelector
+            value={state.memoVisibility}
+            onChange={handleMemoVisibilityChange}
+            onOpenChange={setIsVisibilitySelectorOpen}
+          />
         </div>
       </div>
     </MemoEditorContext.Provider>

web/src/pages/MemoDetail.tsx

@@ -160,7 +160,6 @@ const MemoDetail = observer(() => {
                   cacheKey={`${memo.name}-${memo.updateTime}-comment`}
                   placeholder={t("editor.add-your-comment-here")}
                   parentMemoName={memo.name}
-                  parentMemoVisibility={memo.visibility}
                   autoFocus
                   onConfirm={handleCommentCreated}
                   onCancel={() => setShowCommentEditor(false)}