From 3fe70b1402435bb50ae0bfa20a96d09c40f8c190 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Wed, 10 Jun 2026 13:58:45 -0300
Subject: [PATCH] refactor(PostEditor): update PostEditorTabs integration and
 enhance schedule tab visibility logic

---
 package-lock.json                                    |  1 -
 .../js/components/posts/editor/PostEditorTabs.vue    |  2 +-
 resources/js/components/posts/editor/PreviewTab.vue  |  2 +-
 resources/js/pages/posts/Edit.vue                    | 12 ++++++------
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 96a8f02c..bbf85de6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,7 +4,6 @@
     "requires": true,
     "packages": {
         "": {
-            "name": "trypost",
             "dependencies": {
                 "@inertiajs/vue3": "^3.0.0",
                 "@tabler/icons-vue": "^3.36.1",
diff --git a/resources/js/components/posts/editor/PostEditorTabs.vue b/resources/js/components/posts/editor/PostEditorTabs.vue
index 6938ecb2..e175112c 100644
--- a/resources/js/components/posts/editor/PostEditorTabs.vue
+++ b/resources/js/components/posts/editor/PostEditorTabs.vue
@@ -107,7 +107,7 @@ defineExpose({
             />
         </TabsContent>
 
-        <TabsContent value="schedule" class="flex-1 overflow-y-auto p-4">
+        <TabsContent value="schedule" force-mount :class="['flex-1 overflow-y-auto p-4', { hidden: activeTab !== 'schedule' }]">
             <ScheduleTab
                 :post-platforms="post.post_platforms"
                 :selected-platform-ids="selectedPlatformIds"
diff --git a/resources/js/components/posts/editor/PreviewTab.vue b/resources/js/components/posts/editor/PreviewTab.vue
index f966b295..11881182 100644
--- a/resources/js/components/posts/editor/PreviewTab.vue
+++ b/resources/js/components/posts/editor/PreviewTab.vue
@@ -94,7 +94,7 @@ const activeContentType = computed((): string | undefined => {
             </div>
         </div>
 
-        <div class="flex flex-1 items-start justify-center bg-foreground/5 px-4 pb-8 pt-6">
+        <div class="flex flex-1 items-start justify-center px-4 pb-8 pt-6">
             <PhoneMockup v-if="activePlatform">
                 <PlatformPreview
                     :platform="activePlatform.platform"
diff --git a/resources/js/pages/posts/Edit.vue b/resources/js/pages/posts/Edit.vue
index d2c28a1b..718462c8 100644
--- a/resources/js/pages/posts/Edit.vue
+++ b/resources/js/pages/posts/Edit.vue
@@ -10,7 +10,7 @@ import AiRegenerateImageDialog from '@/components/posts/ai/AiRegenerateImageDial
 import AiReviewDialog from '@/components/posts/ai/AiReviewDialog.vue';
 import PostEditorComposer from '@/components/posts/editor/PostEditorComposer.vue';
 import PostEditorHeader from '@/components/posts/editor/PostEditorHeader.vue';
-import PostEditorSidebar from '@/components/posts/editor/PostEditorSidebar.vue';
+import PostEditorTabs from '@/components/posts/editor/PostEditorTabs.vue';
 import { usePostEcho } from '@/composables/echo/usePostEcho';
 import {
     firstCompatibleVariant,
@@ -206,7 +206,7 @@ const initialTabFromQuery = (() => {
 const initialHighlightCommentId = queryParams?.get('comment') ?? null;
 const activeTab = ref(initialTabFromQuery);
 const deleteModal = ref<InstanceType<typeof ConfirmDeleteModal> | null>(null);
-const editorSidebarRef = ref<InstanceType<typeof PostEditorSidebar> | null>(null);
+const editorTabsRef = ref<InstanceType<typeof PostEditorTabs> | null>(null);
 
 const snapToCompatibleVariant = (platformId: string) => {
     const pp = post.value.post_platforms.find((p) => p.id === platformId);
@@ -339,9 +339,9 @@ usePostEcho(post.value.id, '.post.platform.status.updated', () => {
 // Echo: listen for real-time comments
 usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
     if (e.mentioned_users) {
-        editorSidebarRef.value?.registerMentionedUsers(e.mentioned_users);
+        editorTabsRef.value?.registerMentionedUsers(e.mentioned_users);
     }
-    editorSidebarRef.value?.addCommentFromBroadcast(e.comment);
+    editorTabsRef.value?.addCommentFromBroadcast(e.comment);
 });
 </script>
 
@@ -402,8 +402,8 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
                     </div>
 
                     <div class="hidden lg:block lg:w-1/3 overflow-hidden">
-                        <PostEditorSidebar
-                            ref="editorSidebarRef"
+                        <PostEditorTabs
+                            ref="editorTabsRef"
                             v-model:active-tab="activeTab"
                             :post="post"
                             :workspace-id="workspace.id"