From e94f2cfe96ba9f1ff18911733b41a63b17f43d5a Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulo@castellanos.llc>
Date: Sat, 18 Jul 2026 09:35:50 -0300
Subject: [PATCH] fix(posts): hide the autosave status in the mobile switcher

It's only the autosave indicator (Draft/Saving/Saved) and it crowded the tabs.
Drop it from the mobile switcher (the desktop header still shows it) so the tabs
get the full bar.
---
 .../posts/editor/PostEditorMobileNav.vue      | 62 +++++--------------
 resources/js/pages/posts/Edit.vue             |  2 -
 2 files changed, 17 insertions(+), 47 deletions(-)

diff --git a/resources/js/components/posts/editor/PostEditorMobileNav.vue b/resources/js/components/posts/editor/PostEditorMobileNav.vue
index 37414b7a..96b8a29b 100644
--- a/resources/js/components/posts/editor/PostEditorMobileNav.vue
+++ b/resources/js/components/posts/editor/PostEditorMobileNav.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { IconCircleCheck, IconLoader2 } from '@tabler/icons-vue';
 import { computed } from 'vue';
 
 import { PostStatus } from '@/types/post';
@@ -7,8 +6,6 @@ import { PostStatus } from '@/types/post';
 type MobileView = 'compose' | 'channels' | 'preview' | 'comments';
 
 const props = defineProps<{
-    isSaving: boolean;
-    showSaved: boolean;
     status: string;
 }>();
 
@@ -21,54 +18,29 @@ const items: { key: MobileView; label: string }[] = [
     { key: 'comments', label: 'posts.edit.tabs.comments' },
 ];
 
-const PUBLISHED_STATUSES: readonly string[] = [PostStatus.Published, PostStatus.PartiallyPublished];
-const isPublished = computed(() => PUBLISHED_STATUSES.includes(props.status));
-// When not scheduled the header is hidden on mobile, so this nav is the top bar:
-// it shows the status chip and must clear the floating hamburger.
-const headerHidden = computed(() => props.status !== PostStatus.Scheduled);
+// When not scheduled the header is hidden on mobile and this nav is the top bar,
+// so it must clear the floating hamburger.
+const isTopBar = computed(() => props.status !== PostStatus.Scheduled);
 </script>
 
 <template>
     <div
         data-testid="editor-mobile-nav"
-        class="flex shrink-0 items-center gap-2 border-b-2 border-foreground bg-card px-2 py-3 lg:hidden"
+        class="flex shrink-0 gap-1 overflow-x-auto border-b-2 border-foreground bg-card py-3 pr-2 lg:hidden [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        :class="isTopBar ? 'pl-14' : 'pl-2'"
     >
-        <div
-            class="flex flex-1 gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            :class="{ 'pl-14': headerHidden }"
+        <button
+            v-for="item in items"
+            :key="item.key"
+            type="button"
+            :data-testid="`editor-nav-${item.key}`"
+            class="inline-flex h-10 shrink-0 items-center rounded-md border-2 px-3 text-sm font-semibold transition-colors"
+            :class="activeView === item.key
+                ? 'border-foreground bg-violet-100 text-foreground'
+                : 'border-transparent text-foreground/60 hover:text-foreground'"
+            @click="activeView = item.key"
         >
-            <button
-                v-for="item in items"
-                :key="item.key"
-                type="button"
-                :data-testid="`editor-nav-${item.key}`"
-                class="inline-flex h-10 shrink-0 items-center rounded-md border-2 px-3 text-sm font-semibold transition-colors"
-                :class="activeView === item.key
-                    ? 'border-foreground bg-violet-100 text-foreground'
-                    : 'border-transparent text-foreground/60 hover:text-foreground'"
-                @click="activeView = item.key"
-            >
-                {{ $t(item.label) }}
-            </button>
-        </div>
-
-        <div v-if="headerHidden" class="shrink-0 pr-1">
-            <span v-if="isSaving" class="flex items-center gap-1 text-xs font-semibold text-foreground/70">
-                <IconLoader2 class="size-3.5 animate-spin" />
-                {{ $t('posts.edit.saving') }}
-            </span>
-            <span v-else-if="showSaved" class="flex items-center gap-1 text-xs font-semibold text-emerald-700">
-                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
-                {{ $t('posts.edit.saved') }}
-            </span>
-            <span v-else-if="isPublished" class="flex items-center gap-1 text-xs font-semibold text-emerald-700">
-                <IconCircleCheck class="size-3.5" stroke-width="2.5" />
-                {{ $t('posts.edit.status.published') }}
-            </span>
-            <span v-else class="flex items-center gap-1.5 text-xs font-semibold text-foreground/60">
-                <span class="size-2 rounded-full bg-foreground/40" />
-                {{ $t('posts.edit.draft') }}
-            </span>
-        </div>
+            {{ $t(item.label) }}
+        </button>
     </div>
 </template>
diff --git a/resources/js/pages/posts/Edit.vue b/resources/js/pages/posts/Edit.vue
index 03c211bc..2b6e2f3c 100644
--- a/resources/js/pages/posts/Edit.vue
+++ b/resources/js/pages/posts/Edit.vue
@@ -399,8 +399,6 @@ usePostEcho(post.value.id, '.post.comment.created', (e: any) => {
 
             <PostEditorMobileNav
                 v-model:active-view="mobileView"
-                :is-saving="isSaving"
-                :show-saved="showSaved"
                 :status="post.status"
             />