Merge branch 'develop' into feat/ui-lib

app/javascript/dashboard/components/widgets/WootWriter/EditorModeToggle.vue

@@ -17,6 +17,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  isReplyRestricted: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 defineEmits(['toggleMode']);
@@ -29,11 +33,17 @@ const privateModeSize = useElementSize(wootEditorPrivateMode);
 
 /**
  * Computed boolean indicating if the editor is in private note mode
- * When disabled, always show NOTE mode regardless of actual mode prop
+ * When isReplyRestricted is true, force switch to private note
+ * Otherwise, respect the current mode prop
  * @type {ComputedRef<boolean>}
  */
 const isPrivate = computed(() => {
-  return props.disabled || props.mode === REPLY_EDITOR_MODES.NOTE;
+  if (props.isReplyRestricted) {
+    // Force switch to private note when replies are restricted
+    return true;
+  }
+  // Otherwise respect the current mode
+  return props.mode === REPLY_EDITOR_MODES.NOTE;
 });
 
 /**
@@ -65,8 +75,12 @@ const translateValue = computed(() => {
 <template>
   <button
     class="flex items-center w-auto p-1 transition-all border rounded-full bg-n-alpha-2 group relative duration-300 ease-in-out z-0 active:scale-[0.995] active:duration-75"
-    :disabled="disabled"
-    :class="[iconOnly ? 'h-7' : 'h-8', { 'cursor-not-allowed': disabled }]"
+    :disabled="disabled || isReplyRestricted"
+    :class="{
+      'h-7': iconOnly,
+      'h-8': !iconOnly,
+      'cursor-not-allowed': disabled || isReplyRestricted,
+    }"
     @click="$emit('toggleMode')"
   >
     <div
@@ -84,11 +98,12 @@ const translateValue = computed(() => {
       <template v-else>{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}</template>
     </div>
     <div
-      class="absolute shadow-sm rounded-full w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
-      :class="[
-        iconOnly ? 'h-5' : 'h-6',
-        { 'transition-all duration-300': !disabled },
-      ]"
+      class="absolute shadow-sm rounded-full h-6 w-[var(--chip-width)] ease-in-out translate-x-[var(--translate-x)] rtl:translate-x-[var(--rtl-translate-x)] bg-n-solid-1"
+      :class="{
+        'h-5': iconOnly,
+        'h-6': !iconOnly,
+        'transition-all duration-300': !disabled && !isReplyRestricted,
+      }"
       :style="{
         '--chip-width': width,
         '--translate-x': translateValue,