From f2cf81e7ff92a0ff4d5d6d61b473f5edc36e0fa2 Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Wed, 5 Aug 2026 17:10:52 +0530
Subject: [PATCH] chore: use `SidePanel` component for the article diff panel
 (#15333)

# Pull Request Template

## Description

The unsaved changes panel in the Help Center article editor now uses the
shared `SidePanel` component instead of its own custom drawer. It now
matches the rest of the dashboard, with the same slide-in animation,
backdrop, and close button for a consistent experience.


## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

### Screenshots
**Before**
<img width="1530" height="879" alt="image"
src="https://github.com/user-attachments/assets/4ef7eafb-0cd6-455f-a970-e1411a24ef25"
/>


**After**
<img width="1530" height="879" alt="image"
src="https://github.com/user-attachments/assets/be99ee0d-1906-4a49-967b-3ba1f4fa40b6"
/>



## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [ ] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
---
 .../ArticleEditorPage/ArticleDiffPanel.vue    | 145 +++++++-----------
 .../Pages/ArticleEditorPage/ArticleEditor.vue |   8 +-
 .../ArticleEditorPage/ArticleEditorHeader.vue |   1 -
 3 files changed, 61 insertions(+), 93 deletions(-)

diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue
index 050ccda06..be4f82e17 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleDiffPanel.vue
@@ -1,16 +1,13 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { vOnClickOutside } from '@vueuse/components';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import MessageFormatter from 'shared/helpers/MessageFormatter';
 import {
   renderInlineDiff,
   buildDiffBlocks,
 } from 'dashboard/helper/articleDiffHelper';
 
-import Button from 'dashboard/components-next/button/Button.vue';
-import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
+import SidePanel from 'dashboard/components-next/side-panel/SidePanel.vue';
 
 const props = defineProps({
   article: {
@@ -19,10 +16,15 @@ const props = defineProps({
   },
 });
 
-const isOpen = defineModel({ type: Boolean, default: false });
-
 const { t } = useI18n();
 
+const panelRef = ref(null);
+
+defineExpose({
+  open: () => panelRef.value?.open(),
+  close: () => panelRef.value?.close(),
+});
+
 const liveTitle = computed(() => props.article?.title ?? '');
 const liveContent = computed(() => props.article?.content ?? '');
 const draftTitle = computed(() => props.article?.draftTitle ?? liveTitle.value);
@@ -85,89 +87,56 @@ const blockClass = type => {
   }
   return 'border-transparent';
 };
-
-const close = () => {
-  isOpen.value = false;
-};
-
-const dismissOnClickOutside = [close, { ignore: ['[data-diff-toggle]'] }];
-
-useKeyboardEvents({ Escape: { action: close, allowOnFocusedInput: true } });
 </script>
 
 <template>
-  <TeleportWithDirection to="body">
-    <Transition
-      enter-active-class="transition-transform duration-200 ease-in-out"
-      leave-active-class="transition-transform duration-200 ease-in-out"
-      enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
-      enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
-      leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
-      leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
-    >
-      <aside
-        v-if="isOpen"
-        v-on-click-outside="dismissOnClickOutside"
-        class="fixed inset-y-0 z-40 flex flex-col w-full shadow-2xl end-0 max-w-lg bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak"
-      >
-        <header
-          class="flex items-start justify-between gap-3 px-6 py-4 border-b shrink-0 border-n-weak bg-n-solid-1"
-        >
-          <div class="flex flex-col gap-1 min-w-0">
-            <div class="flex items-center gap-2">
-              <span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
-              <h3 class="text-base font-medium leading-6 text-n-slate-12">
-                {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
-              </h3>
-            </div>
-            <p class="text-sm text-n-slate-11">
-              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
-            </p>
-          </div>
-          <Button
-            icon="i-lucide-x"
-            variant="ghost"
-            color="slate"
-            size="sm"
-            class="shrink-0 hover:text-n-slate-11"
-            @click="close"
-          />
-        </header>
-
-        <div
-          class="flex flex-col flex-1 min-h-0 gap-4 px-6 pt-4 pb-6 overflow-y-auto"
-        >
-          <!-- eslint-disable vue/no-v-html -->
-          <div
-            v-if="titleChanged"
-            class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
-          >
-            <span
-              class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
-            >
-              {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
-            </span>
-            <h1
-              class="text-lg font-semibold leading-snug text-n-slate-12"
-              v-html="titleDiff"
-            />
-          </div>
-
-          <div
-            v-if="contentChanged"
-            class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
-          >
-            <div
-              v-for="(block, index) in contentBlocks"
-              :key="index"
-              class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
-              :class="blockClass(block.type)"
-              v-html="renderMarkdown(block.md)"
-            />
-          </div>
-          <!-- eslint-enable vue/no-v-html -->
+  <SidePanel
+    ref="panelRef"
+    width="lg"
+    :title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE')"
+  >
+    <template #header>
+      <div class="flex flex-col gap-1 min-w-0">
+        <div class="flex items-center gap-2">
+          <span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
+          <h3 class="text-base font-medium leading-6 text-n-slate-12">
+            {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
+          </h3>
         </div>
-      </aside>
-    </Transition>
-  </TeleportWithDirection>
+        <p class="text-sm text-n-slate-11">
+          {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
+        </p>
+      </div>
+    </template>
+
+    <div class="flex flex-col gap-4">
+      <div
+        v-if="titleChanged"
+        class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
+      >
+        <span
+          class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
+        >
+          {{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
+        </span>
+        <h1
+          class="text-lg font-semibold leading-snug text-n-slate-12"
+          v-html="titleDiff"
+        />
+      </div>
+
+      <div
+        v-if="contentChanged"
+        class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
+      >
+        <div
+          v-for="(block, index) in contentBlocks"
+          :key="index"
+          class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
+          :class="blockClass(block.type)"
+          v-html="renderMarkdown(block.md)"
+        />
+      </div>
+    </div>
+  </SidePanel>
 </template>
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
index 6540b6460..cea89857b 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditor.vue
@@ -53,7 +53,7 @@ const hasPendingChanges = computed(
 const localTitle = ref(effectiveTitle());
 const localContent = ref(effectiveContent());
 
-const isDiffPanelOpen = ref(false);
+const diffPanelRef = ref(null);
 
 // Autosave 500ms after the last edit. It sends both title and content so an
 // edit to one never drops a recent edit to the other. `stop` cancels a queued
@@ -84,7 +84,7 @@ watch(
   [() => props.article?.id, hasPendingChanges],
   ([id, pending], [prevId, prevPending]) => {
     if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
-    if (prevPending && !pending) isDiffPanelOpen.value = false;
+    if (prevPending && !pending) diffPanelRef.value?.close();
   }
 );
 
@@ -156,9 +156,9 @@ const handleCreateArticle = event => {
         :is-saving="isSaving"
         @go-back="onClickGoBack"
         @preview-article="previewArticle"
-        @show-diff="isDiffPanelOpen = !isDiffPanelOpen"
+        @show-diff="diffPanelRef?.open()"
       />
-      <ArticleDiffPanel v-model="isDiffPanelOpen" :article="article" />
+      <ArticleDiffPanel ref="diffPanelRef" :article="article" />
     </template>
     <template #content>
       <div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
diff --git a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
index d24ecadd4..67598fa41 100644
--- a/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
+++ b/app/javascript/dashboard/components-next/HelpCenter/Pages/ArticleEditorPage/ArticleEditorHeader.vue
@@ -260,7 +260,6 @@ const onDraftFailed = error => {
       <button
         v-if="hasPendingChanges"
         type="button"
-        data-diff-toggle
         :title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.VIEW_CHANGES')"
         class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium transition-colors rounded-lg cursor-pointer text-n-amber-11 bg-n-amber-3 outline outline-1 outline-n-amber-5 hover:bg-n-amber-4"
         @click="emit('showDiff')"