vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(posts): hide the autosave status in the mobile switcher

Browse source 
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.
This commit is contained in:
Paulo Castellano 2026-07-18 09:35:50 -03:00
parent 708f1adbd2
commit e94f2cfe96
2 changed files with 17 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
resources/js/components/posts/editor/PostEditorMobileNav.vue
View file

@ -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>

2
resources/js/pages/posts/Edit.vue
View file

@ -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"
/>