fsylvain/RenewCMS
1
1 Fork 0
Code Issues Pull Requests Packages Projects Releases 19 Wiki Activity

fix: design harmonization on last features

Browse Source
This commit is contained in:
fsylvain committed 2026-10-07 18:20:18 +02:00
1 parent 953be7342d
commit 70c8492f4f
23 files changed
+526 -840
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/components/ActivityFeedCard.vue
+24 -35
View File
@@ -31,47 +31,36 @@ function metaLine(item: ActivityItem, own: boolean) {
</script>
<template>
<UCard
<section
data-testid="recent-activity-card"
:aria-busy="loading && showSkeleton ? 'true' : undefined"
:ui="{
root: 'min-w-0 rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
body: 'flex flex-col px-4 pt-1 pb-1.5 sm:px-4 sm:pt-1 sm:pb-1.5',
}"
class="flex min-w-0 flex-col gap-2.5"
>
<template #header>
<h2 class="flex-1 text-base font-semibold text-highlighted">
<div class="flex items-baseline justify-between">
<h2 class="text-base/6 font-semibold text-highlighted">
{{ own ? t('Your recent activity') : t('Recent activity') }}
</h2>
<RouterLink
to="/activity"
class="flex items-center gap-1 font-medium text-highlighted underline underline-offset-3 max-lg:min-h-11 lg:min-h-5"
>
<RouterLink to="/activity" class="text-toned underline underline-offset-3">
{{ t('View all') }}
<UIcon name="i-lucide-arrow-right" class="size-3.5" />
</RouterLink>
</template>
</div>
<template v-if="loading">
<template v-if="showSkeleton">
<div v-if="showSkeleton" class="border border-default bg-default">
<div
v-for="n in SKELETON_ROWS"
:key="n"
data-testid="recent-activity-skeleton"
class="flex gap-2.5 py-2.5"
class="flex min-h-13 items-center gap-3 px-3 py-2 lg:min-h-11"
:class="n > 1 ? 'border-t border-muted' : ''"
>
<USkeleton class="size-6 shrink-0 rounded-none bg-accented" />
<div class="flex flex-1 flex-col gap-1.5">
<USkeleton
class="h-3 rounded-none bg-accented"
:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
/>
<USkeleton class="h-2.5 w-7/20 rounded-none bg-accented" />
</div>
<USkeleton
class="h-3 rounded-none bg-accented"
:class="SKELETON_SENTENCE_WIDTHS[n - 1]"
/>
</div>
</template>
</div>
</template>
<UAlert
@@ -83,13 +72,16 @@ function metaLine(item: ActivityItem, own: boolean) {
:close="false"
icon="i-lucide-circle-x"
:title="t('Couldn\'t load recent activity')"
:description="t('Check your connection and try again.')"
:ui="{ actions: 'mt-2' }"
>
<template #actions>
<UButton
color="neutral"
variant="outline"
icon="i-lucide-rotate-cw"
class="h-11 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 lg:h-7"
:ui="{ leadingIcon: 'size-3.5' }"
@click="$emit('retry')"
>
{{ t('Try again') }}
@@ -100,11 +92,11 @@ function metaLine(item: ActivityItem, own: boolean) {
<div
v-else-if="items.length === 0"
data-testid="recent-activity-empty"
class="flex flex-col items-center gap-1.5 py-6 text-center"
class="flex flex-col items-center gap-1.5 border border-default bg-default px-6 py-8 text-center"
>
<UIcon name="i-lucide-history" class="size-5 text-muted" />
<span class="font-semibold text-highlighted">{{ t('No activity yet') }}</span>
<span class="max-w-60 text-muted">
<span class="max-w-65 text-muted">
{{
own
? t('Your actions will appear here.')
@@ -113,26 +105,23 @@ function metaLine(item: ActivityItem, own: boolean) {
</span>
</div>
<ul v-else class="flex flex-col">
<ul v-else class="border border-default bg-default">
<li
v-for="(item, index) in items"
:key="item.id"
data-testid="recent-activity-row"
class="flex items-start gap-2.5 py-2.5"
class="flex min-h-13 items-center gap-3 px-3 py-2 lg:min-h-11"
:class="index > 0 ? 'border-t border-muted' : ''"
>
<ActivityAvatar :actor="item.actor" />
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<span
class="line-clamp-2 text-default wrap-anywhere"
data-testid="recent-activity-sentence"
>
<div class="flex min-w-0 flex-1 flex-col">
<span class="truncate text-default" data-testid="recent-activity-sentence">
<ActivitySentence :item="item" />
</span>
<span
data-testid="recent-activity-meta"
:title="fullLocalTime(item.created_at)"
class="truncate text-xs/5 text-muted"
class="truncate text-xs text-muted"
>
{{ metaLine(item, own) }}
</span>
@@ -146,5 +135,5 @@ function metaLine(item: ActivityItem, own: boolean) {
/>
</li>
</ul>
</UCard>
</section>
</template>
web/src/components/MediaCleanupCard.vue
+1 -1
View File
@@ -193,7 +193,7 @@ function reviewDuplicates() {
<template v-else>
<div class="flex items-start gap-3">
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<h2 id="media-cleanup-h" class="text-lg font-semibold text-highlighted">
<h2 id="media-cleanup-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
{{ t('Media cleanup') }}
</h2>
<p class="text-pretty text-muted">
web/src/components/RetentionCard.vue
+26 -29
View File
@@ -146,23 +146,20 @@ onBeforeUnmount(clearSavedTimer)
</script>
<template>
<UCard
as="section"
<section
aria-labelledby="retention-h"
data-testid="retention-card"
:aria-busy="skeletonVisible ? 'true' : undefined"
:ui="{
root: 'rounded-none border border-default bg-default shadow-none ring-0 divide-y-0',
header: 'flex items-center gap-2 border-b border-default px-4 py-3 sm:px-4 sm:py-3',
body: 'flex flex-col gap-4 p-4 sm:p-4',
}"
class="flex flex-col gap-4 border border-default bg-default p-4 lg:p-5"
>
<template #header>
<div class="flex min-w-0 flex-1 flex-col">
<h2 id="retention-h" class="text-base font-semibold text-highlighted">
<div class="flex items-start gap-3">
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<h2 id="retention-h" class="text-[0.9375rem]/6 font-semibold text-highlighted">
{{ t('Retention') }}
</h2>
<p class="text-xs text-muted">{{ t('How long activity is kept.') }}</p>
<p class="text-pretty text-muted">
{{ t('How long activity is kept. Only owners can change it.') }}
</p>
</div>
<span
aria-live="polite"
@@ -184,7 +181,7 @@ onBeforeUnmount(clearSavedTimer)
{{ t('Saved') }}
</span>
</span>
</template>
</div>
<template v-if="skeletonVisible">
<USkeleton :class="[SKELETON_BAR, 'h-3.5 w-30']" />
@@ -244,10 +241,13 @@ onBeforeUnmount(clearSavedTimer)
</template>
</UAlert>
<div class="flex max-w-65 flex-col gap-1.5">
<span id="retention-label" class="font-medium text-highlighted">
{{ t('Keep activity for') }}
</span>
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between md:gap-4">
<div class="flex min-w-0 flex-col gap-0.5">
<span id="retention-label" class="font-medium text-highlighted">
{{ t('Keep activity for') }}
</span>
<span class="text-xs text-muted">{{ helperCopy(selected) }}</span>
</div>
<USelectMenu
:model-value="selected"
:items="options"
@@ -257,15 +257,14 @@ onBeforeUnmount(clearSavedTimer)
aria-labelledby="retention-label"
color="neutral"
variant="outline"
class="w-full"
class="w-full md:w-40"
:ui="{
base: 'h-11 rounded-none border border-accented bg-default px-2.5 text-sm ring-0 md:h-8',
trailingIcon: 'size-3.5 text-muted',
base: 'h-11 rounded-none border border-accented bg-default px-3 text-base ring-0 md:h-8 md:text-sm',
trailingIcon: 'size-4 text-muted',
content: 'min-w-48',
}"
@update:model-value="choose($event as number)"
/>
<span class="text-xs text-muted">{{ helperCopy(selected) }}</span>
</div>
<UAlert
@@ -316,22 +315,20 @@ onBeforeUnmount(clearSavedTimer)
"
/>
<USeparator />
<dl class="flex flex-col gap-1.5">
<div class="flex flex-col md:flex-row md:gap-3">
<dt class="shrink-0 text-muted md:w-30">{{ t('Last cleanup') }}</dt>
<dd data-testid="retention-last" class="text-highlighted">
<dl class="flex flex-col gap-1 text-toned">
<div class="flex flex-wrap gap-x-1">
<dt class="after:content-[':']">{{ t('Last cleanup') }}</dt>
<dd data-testid="retention-last">
{{ lastCleanupLine(settings) }}
</dd>
</div>
<div class="flex flex-col md:flex-row md:gap-3">
<dt class="shrink-0 text-muted md:w-30">{{ t('Next cleanup') }}</dt>
<div class="flex flex-wrap gap-x-1">
<dt class="after:content-[':']">{{ t('Next cleanup') }}</dt>
<dd data-testid="retention-next" class="text-highlighted">
{{ nextCleanupLine(settings) }}
</dd>
</div>
</dl>
</template>
</UCard>
</section>
</template>
web/src/components/UpdatesCard.vue
+6 -4
View File
@@ -412,6 +412,7 @@ const block = computed<Block>(() => {
"This site can't update itself from the browser yet. Whoever manages your server can set it up once, or update RenewCMS for you.",
)
},
meta: lastChecked.value,
}
}
if (props.status.available) {
@@ -427,6 +428,7 @@ const block = computed<Block>(() => {
[props.status.current],
)
},
meta: lastChecked.value,
}
}
return {
@@ -602,7 +604,7 @@ const notes = computed(() => {
id="updates-h"
ref="heading"
tabindex="-1"
class="self-start text-lg font-semibold text-highlighted focus:outline-2 focus:outline-offset-4 focus:outline-primary"
class="self-start text-[0.9375rem]/6 font-semibold text-highlighted focus:outline-2 focus:outline-offset-4 focus:outline-primary"
>
{{ t('Updates') }}
</h2>
@@ -689,7 +691,7 @@ const notes = computed(() => {
class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
>
{{ t('How to update') }}
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
<UIcon name="i-lucide-external-link" class="size-3.5" />
</a>
<a
@@ -700,7 +702,7 @@ const notes = computed(() => {
class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
>
{{ t('How to update') }}
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
<UIcon name="i-lucide-external-link" class="size-3.5" />
</a>
<a
@@ -711,7 +713,7 @@ const notes = computed(() => {
class="inline-flex items-center gap-1.5 self-start text-sm font-medium text-highlighted underline underline-offset-3"
>
{{ t('Read the release notes') }}
<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
<UIcon name="i-lucide-external-link" class="size-3.5" />
</a>
</section>
</template>
web/src/i18n/messages.ts
+2 -1
View File
@@ -1193,7 +1193,8 @@ export const messages = {
'Actions on your site will appear here.': 'Les actions sur votre site apparaîtront ici.',
'Your actions will appear here.': 'Vos actions apparaîtront ici.',
Retention: 'Conservation',
'How long activity is kept.': 'Durée de conservation de l’activité.',
'How long activity is kept. Only owners can change it.':
'Durée de conservation de l’activité. Seul le propriétaire peut la modifier.',
'Keep activity for': 'Conserver l’activité pendant',
'90 days': '90 jours',
'365 days': '365 jours',
web/src/views/HomeView.vue
+150 -153
View File
@@ -206,167 +206,164 @@ onMounted(loadArticles)
@dismiss="dismissBanner"
/>
<div
class="grid grid-cols-1 gap-4 lg:grid-cols-[minmax(0,1fr)_--spacing(105)] lg:items-start"
>
<RecentActivityCard class="lg:order-2" />
<div class="flex min-w-0 flex-col gap-5 lg:order-1 lg:gap-7">
<template
v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'"
>
<div class="grid grid-cols-3 gap-3">
<div
v-for="tile in statTiles"
:key="tile.label"
data-testid="stat-tile"
class="flex flex-col gap-1 border border-default bg-default p-4"
>
<template v-if="loadState === 'loading'">
<USkeleton class="h-7 w-10 rounded-none bg-accented" />
<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
</template>
<template v-else>
<span class="text-2xl font-semibold text-highlighted">{{
formatNumber(tile.value)
}}</span>
<span class="text-muted">{{ tile.label }}</span>
</template>
</div>
</div>
<section class="flex flex-col gap-2.5">
<div class="flex items-baseline justify-between">
<h2 class="text-lg font-semibold text-highlighted">
{{ t('Recently updated') }}
</h2>
<RouterLink
to="/article"
class="text-toned underline underline-offset-3"
>
{{ t('All articles') }}
</RouterLink>
</div>
<div
v-if="loadState === 'loading'"
aria-busy="true"
class="border border-default bg-default"
>
<div
v-for="n in RECENT_LIST_SIZE"
:key="n"
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
>
<USkeleton
class="h-3 max-w-[60%] flex-1 rounded-none bg-accented"
/>
<USkeleton class="h-5 w-14 rounded-none bg-accented" />
</div>
</div>
<ul
v-else
data-testid="recent-list"
class="border border-default bg-default"
>
<li v-for="article in recentArticles" :key="article.id">
<RouterLink
:to="`/article/${article.id}/edit`"
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
>
<span
class="min-w-0 flex-1 truncate font-medium text-highlighted"
>
{{ article.title }}
</span>
<ArticleStatusBadge :online="article.is_online" />
<span class="hidden w-27.5 text-right text-muted lg:inline">
{{ formatRelativeDate(article.updated_at) }}
</span>
</RouterLink>
</li>
</ul>
</section>
</template>
<UEmpty
v-else-if="loadState === 'empty'"
variant="outline"
icon="i-lucide-file-text"
:title="t('Write your first article')"
:description="
t(
'It starts as a draft, so nothing appears on your site until you publish it.',
)
"
:ui="{
root: 'gap-3 rounded-none border border-default px-6 py-12 ring-0 sm:px-6 sm:py-12 lg:px-6 lg:py-12',
header: 'max-w-none gap-3',
avatar: 'mb-0 size-11 rounded-none bg-elevated text-xl text-toned',
title: 'text-[1.125rem] font-semibold',
description: 'max-w-85 text-base text-wrap text-muted',
body: 'max-w-none',
}"
>
<template #actions>
<UButton
icon="i-lucide-plus"
class="h-11 px-4 lg:h-8"
@click="openNewArticleModal"
>
{{ t('New article') }}
</UButton>
</template>
</UEmpty>
<UAlert
v-else-if="loadState === 'error'"
role="alert"
color="error"
variant="soft"
orientation="vertical"
:close="false"
icon="i-lucide-circle-x"
:title="t('Couldn\'t load your articles')"
:description="t('Check your connection and try again.')"
:ui="{ actions: 'mt-2' }"
>
<template #actions>
<UButton
color="neutral"
variant="outline"
icon="i-lucide-rotate-cw"
class="h-7 bg-default px-2.5 text-xs text-highlighted"
:ui="{ leadingIcon: 'size-3.5' }"
@click="loadArticles"
>
{{ t('Try again') }}
</UButton>
</template>
</UAlert>
<div class="flex items-start gap-3.5 border border-default bg-default p-4">
<div class="flex min-w-0 flex-col gap-5 lg:gap-7">
<template
v-if="(loadState === 'loading' && showSkeleton) || loadState === 'default'"
>
<div class="grid grid-cols-3 gap-3">
<div
class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
v-for="tile in statTiles"
:key="tile.label"
data-testid="stat-tile"
class="flex flex-col gap-1 border border-default bg-default p-4"
>
<UIcon name="i-lucide-plug" class="size-4.5" />
<template v-if="loadState === 'loading'">
<USkeleton class="h-7 w-10 rounded-none bg-accented" />
<USkeleton class="h-3 w-17.5 rounded-none bg-accented" />
</template>
<template v-else>
<span class="text-2xl font-semibold text-highlighted">{{
formatNumber(tile.value)
}}</span>
<span class="text-muted">{{ tile.label }}</span>
</template>
</div>
<div class="flex flex-1 flex-col gap-1">
<h2 class="text-base/5 font-semibold text-highlighted">
{{ t('Connect your website') }}
</div>
<section class="flex flex-col gap-2.5">
<div class="flex items-baseline justify-between">
<h2 class="text-base/6 font-semibold text-highlighted">
{{ t('Recently updated') }}
</h2>
<p class="text-pretty text-muted">
{{
t(
'Your site reads published articles from RenewCMS. Share this guide with whoever builds it.',
)
}}
</p>
<RouterLink
to="/integration"
class="mt-1 self-start font-medium text-highlighted underline underline-offset-3"
to="/article"
class="text-toned underline underline-offset-3"
>
{{ t('Open the guide') }}
{{ t('All articles') }}
</RouterLink>
</div>
<div
v-if="loadState === 'loading'"
aria-busy="true"
class="border border-default bg-default"
>
<div
v-for="n in RECENT_LIST_SIZE"
:key="n"
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
>
<USkeleton
class="h-3 max-w-[60%] flex-1 rounded-none bg-accented"
/>
<USkeleton class="h-5 w-14 rounded-none bg-accented" />
</div>
</div>
<ul
v-else
data-testid="recent-list"
class="border border-default bg-default"
>
<li v-for="article in recentArticles" :key="article.id">
<RouterLink
:to="`/article/${article.id}/edit`"
class="flex min-h-13 items-center gap-3 border-t border-muted px-3 py-2 lg:min-h-11"
>
<span
class="min-w-0 flex-1 truncate font-medium text-highlighted"
>
{{ article.title }}
</span>
<ArticleStatusBadge :online="article.is_online" />
<span class="hidden w-27.5 text-right text-muted lg:inline">
{{ formatRelativeDate(article.updated_at) }}
</span>
</RouterLink>
</li>
</ul>
</section>
</template>
<UEmpty
v-else-if="loadState === 'empty'"
variant="outline"
icon="i-lucide-file-text"
:title="t('Write your first article')"
:description="
t(
'It starts as a draft, so nothing appears on your site until you publish it.',
)
"
:ui="{
root: 'gap-3 rounded-none border border-default px-6 py-12 ring-0 sm:px-6 sm:py-12 lg:px-6 lg:py-12',
header: 'max-w-none gap-3',
avatar: 'mb-0 size-11 rounded-none bg-elevated text-xl text-toned',
title: 'text-[1.125rem] font-semibold',
description: 'max-w-85 text-base text-wrap text-muted',
body: 'max-w-none',
}"
>
<template #actions>
<UButton
icon="i-lucide-plus"
class="h-11 px-4 lg:h-8"
@click="openNewArticleModal"
>
{{ t('New article') }}
</UButton>
</template>
</UEmpty>
<UAlert
v-else-if="loadState === 'error'"
role="alert"
color="error"
variant="soft"
orientation="vertical"
:close="false"
icon="i-lucide-circle-x"
:title="t('Couldn\'t load your articles')"
:description="t('Check your connection and try again.')"
:ui="{ actions: 'mt-2' }"
>
<template #actions>
<UButton
color="neutral"
variant="outline"
icon="i-lucide-rotate-cw"
class="h-7 bg-default px-2.5 text-xs text-highlighted"
:ui="{ leadingIcon: 'size-3.5' }"
@click="loadArticles"
>
{{ t('Try again') }}
</UButton>
</template>
</UAlert>
<RecentActivityCard />
<div class="flex items-start gap-3.5 border border-default bg-default p-4">
<div
class="flex size-9 shrink-0 items-center justify-center bg-secondary-200 text-primary-900 dark:bg-secondary-300"
>
<UIcon name="i-lucide-plug" class="size-4.5" />
</div>
<div class="flex flex-1 flex-col gap-1">
<h2 class="text-base/5 font-semibold text-highlighted">
{{ t('Connect your website') }}
</h2>
<p class="text-pretty text-muted">
{{
t(
'Your site reads published articles from RenewCMS. Share this guide with whoever builds it.',
)
}}
</p>
<RouterLink
to="/integration"
class="mt-1 self-start font-medium text-highlighted underline underline-offset-3"
>
{{ t('Open the guide') }}
</RouterLink>
</div>
</div>
</div>
web/src/views/SettingsView.vue
+1 -1
View File
@@ -430,7 +430,7 @@ onBeforeUnmount(() => {
</UAlert>
<div v-else class="flex items-center justify-between gap-4">
<span class="text-lg font-semibold text-highlighted">{{ t('Version') }}</span>
<span class="text-[0.9375rem]/6 font-semibold text-highlighted">{{ t('Version') }}</span>
<USkeleton
v-if="loadState === 'loading' && showSkeleton"
data-testid="settings-skeleton"
web/src/views/__tests__/HomeActivityCard.spec.ts
+12 -13
View File
@@ -198,14 +198,16 @@ describe('Home rows, unknown action, failed login and not interactive', () => {
expect(router.currentRoute.value.path).toBe('/home')
})
it('clamps a long sentence to two lines', async () => {
it('truncates a long sentence on one line', async () => {
const items = [makeItem({ id: 1, target: target('article', '8', 'T'.repeat(150)) })]
await mountHome('owner', {
[ACTIVITY_ROUTE]: () => page(items),
[ARTICLES_ROUTE]: () => response(200, articles),
})
expect(rows()[0]!.find('.line-clamp-2').exists()).toBe(true)
expect(rows()[0]!.find('[data-testid="recent-activity-sentence"]').classes()).toContain(
'truncate',
)
expect(rows()[0]!.find('[data-testid="recent-activity-meta"]').classes()).toContain(
'truncate',
)
@@ -322,22 +324,19 @@ describe('Home card and article list are independent', () => {
})
})
describe('Home layout is two columns from lg and stacked below', () => {
it('uses the lg two-column grid with the 420 px column and no max-width cap', async () => {
describe('Home layout puts Recent activity full width below Recently updated', () => {
it('renders the section after the recent list inside the same single column', async () => {
await mountHome('owner', {
[ACTIVITY_ROUTE]: () => page(recentItems(1)),
[ARTICLES_ROUTE]: () => response(200, articles),
})
const grid = card().element.parentElement!
expect(grid.className).toContain('lg:grid-cols-[minmax(0,1fr)_--spacing(105)]')
expect(grid.className).toContain('lg:items-start')
expect(grid.className).toContain('gap-4')
const capped = [grid, grid.parentElement!].some((element) =>
/(^|\s)max-w-/.test(element.className),
)
expect(capped).toBe(false)
expect(card().classes()).toContain('lg:order-2')
const column = card().element.parentElement!
expect(column.className).not.toContain('grid-cols')
const list = column.querySelector('[data-testid="recent-list"]')!
expect(
list.compareDocumentPosition(card().element) & Node.DOCUMENT_POSITION_FOLLOWING,
).toBeTruthy()
})
})
web/visual/check.ts
+14 -20
View File
@@ -26,14 +26,13 @@ interface Screen {
sources: Source[]
}
const cleanupBoard = 'RenewCMS Screens Media cleanup.dc.html'
const activityBoard = 'RenewCMS Screens Activity.dc.html'
const officeBoard = 'RenewCMS Screens Back-office.dc.html'
const extraSources: Record<string, Source[]> = {
activity: [
{
board: activityBoard,
group: 'Details slide-over',
board: officeBoard,
group: 'Activity details',
states: [
'Edit with a diff',
'Settings diff, long text',
@@ -45,7 +44,7 @@ const extraSources: Record<string, Source[]> = {
alias: {},
},
{
board: activityBoard,
board: officeBoard,
group: 'My activity',
states: ['Default', 'Empty', 'Details'],
alias: {},
@@ -53,8 +52,8 @@ const extraSources: Record<string, Source[]> = {
],
settings: [
{
board: cleanupBoard,
group: 'Settings',
board: officeBoard,
group: 'Settings: Media cleanup',
states: [
'Default: off, never run',
'On: 30 days, last run',
@@ -69,8 +68,8 @@ const extraSources: Record<string, Source[]> = {
alias: {},
},
{
board: cleanupBoard,
group: 'Dialog',
board: officeBoard,
group: 'Purge dialog',
states: [
'Loading preview',
'Confirm',
@@ -84,23 +83,18 @@ const extraSources: Record<string, Source[]> = {
alias: {},
},
{
board: cleanupBoard,
group: 'Results',
board: officeBoard,
group: 'Purge results',
states: ['Success', 'Success, automatic purge on'],
alias: {},
},
],
media: [
{
board: cleanupBoard,
group: 'Media',
states: [
'Duplicates tab with the button',
'Dialog from Media',
'Member: button hidden',
'Offline: button disabled',
],
alias: { 'Offline: button disabled': 'Offline' },
board: officeBoard,
group: 'Media duplicates entry',
states: ['Duplicates tab with the button', 'Duplicates tab: offline'],
alias: {},
},
],
}
web/visual/states.ts
+69 -122
View File
@@ -165,11 +165,6 @@ const verifiedSession: ApiMock = {
}
const updateRunningVersion = 'v2.2.0-beta'
const newCardAbsentReason = 'new card absent from board frame (dashed placeholder)'
const homeActivityMock: ApiMock = {
status: 200,
body: { items: [], total: 0, page: 1, size: 5 },
}
const workspaceSettingsBody = {
version: updateRunningVersion,
activity_retention_days: 90,
@@ -304,6 +299,7 @@ function updateApi(
return {
'GET /v1/auth/me': role === 'owner' ? verifiedSession : adminSession,
'GET /v1/settings/': { status: 200, body: workspaceSettingsBody },
[purgeSettingsPath]: settingsBody(purgeSettingsBody()),
'GET /v1/system/update': { status: 200, body: status },
'POST /v1/system/update/check': check,
}
@@ -2392,7 +2388,10 @@ function cleanupApi(
return {
'GET /v1/auth/me': sessionWithRole(role),
'GET /v1/settings/': { status: 200, body: workspaceSettingsBody },
'GET /v1/system/update': { status: 200, hang: true },
'GET /v1/system/update': {
status: 200,
body: updateStatusBody({ checked_at: '2026-09-10T09:41:00Z', can_apply: true }),
},
[purgeSettingsPath]: settings,
...overrides,
}
@@ -2402,12 +2401,47 @@ function settingsBody(body: unknown): ApiMock {
return { status: 200, body }
}
async function scrollSettingsToCleanup(page: Page) {
const top = (page.viewportSize()?.width ?? 1440) < 768 ? 480 : 300
await page.evaluate((top) => {
const card = document.querySelector<HTMLElement>('[data-testid="settings-card"]')
if (card?.parentElement && !card.parentElement.querySelector('[data-scroll-room]')) {
const room = document.createElement('div')
room.setAttribute('data-scroll-room', '')
room.style.cssText = 'flex-shrink:0;height:1200px'
card.parentElement.append(room)
}
let node: HTMLElement | null = card
while (node) {
if (
node.scrollHeight > node.clientHeight &&
/auto|scroll/.test(getComputedStyle(node).overflowY)
) {
node.scrollTop = top
return
}
node = node.parentElement
}
window.scrollTo(0, top)
}, top)
}
function cleanupState(
api: Record<string, ApiMock>,
steps?: (page: Page) => Promise<void>,
exception?: DiffException,
): VisualState {
return { path: '/settings', api, steps, exception }
return {
path: '/settings',
now: boardNow,
api,
exception,
steps: async (page) => {
await scrollSettingsToCleanup(page)
await steps?.(page)
await scrollSettingsToCleanup(page)
},
}
}
async function openCleanupDialog(page: Page) {
@@ -2500,11 +2534,7 @@ const cleanupStates: Record<string, VisualState> = {
await page.getByText('Enter a whole number of days between 1 and 365.').waitFor()
}),
'Read-only (non-admin)': cleanupState(cleanupApi(settingsBody(purgeOnBody), {}, 'member')),
'Loading skeleton': cleanupState(cleanupApi({ status: 200, hang: true }), undefined, {
maxPercent: 17.5,
reason: newCardAbsentReason,
approvedBy: 'fallen',
}),
'Loading skeleton': cleanupState(cleanupApi({ status: 200, hang: true })),
Offline: cleanupState(cleanupApi(settingsBody(purgeOnBody)), goOffline),
'Loading preview': cleanupState(
cleanupDialogApi({ [purgePreviewPath]: { status: 200, hang: true } }),
@@ -2579,19 +2609,7 @@ const mediaPurgeStates: Record<string, VisualState> = {
undefined,
mediaDuplicatesPath,
),
'Dialog from Media': mediaState(
mediaDuplicatesApi(undefined, {
[purgePreviewPath]: { status: 200, body: purgePreviewBody() },
}),
openMediaPurgeDialog,
mediaDuplicatesPath,
),
'Member: button hidden': mediaState(
mediaDuplicatesApi(undefined, { 'GET /v1/auth/me': sessionWithRole('member') }),
undefined,
mediaDuplicatesPath,
),
'Offline: button disabled': mediaState(mediaDuplicatesApi(), goOffline, mediaDuplicatesPath),
'Duplicates tab: offline': mediaState(mediaDuplicatesApi(), goOffline, mediaDuplicatesPath),
}
const activityOwnerSession: ApiMock = {
@@ -2869,6 +2887,25 @@ const activityBoardEvents = [
),
]
const homeActivityTimes = [
'2026-09-10T08:58:00Z',
'2026-09-10T08:31:00Z',
'2026-09-10T07:55:00Z',
'2026-09-10T06:55:00Z',
'2026-09-10T02:00:00Z',
]
const homeActivityMock: ApiMock = {
status: 200,
body: {
items: activityBoardEvents
.slice(0, 5)
.map((event, index) => ({ ...event, created_at: homeActivityTimes[index] })),
total: 5,
page: 1,
size: 5,
},
}
function activityPage(items: unknown[], total: number) {
return { items, total, page: 1, size: 25 }
}
@@ -3121,11 +3158,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
'Up to date': { path: '/settings', skip: 'clock-sensitive' },
Checking: {
path: '/settings',
exception: {
maxPercent: 11.3,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
api: updateApi('owner', updateNeverChecked(), updateCheckHangs),
},
'Check failed': { path: '/settings', skip: 'clock-sensitive' },
@@ -3134,20 +3166,10 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
Downloading: {
path: '/settings',
api: updateApi('owner', updateDownloading()),
exception: {
maxPercent: 10.6,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
},
Verifying: {
path: '/settings',
api: updateApi('owner', updateJob('verifying')),
exception: {
maxPercent: 10.8,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
},
'Ready to install': { path: '/settings', api: updateApi('owner', updateJob('ready')) },
'Restart: confirm': {
@@ -3188,29 +3210,14 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
},
'Download failed': {
path: '/settings',
exception: {
maxPercent: 10.9,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
api: updateApi('owner', updateJob('failed', { error: 'download' })),
},
'Verification failed': {
path: '/settings',
exception: {
maxPercent: 10.5,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
api: updateApi('owner', updateJob('failed', { error: 'verification' })),
},
'Too many requests (429)': {
path: '/settings',
exception: {
maxPercent: 11.3,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
api: updateApi('owner', updateNeverChecked(), {
status: 429,
headers: { 'Retry-After': '42' },
@@ -3218,22 +3225,14 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
},
'Not prepared': {
path: '/settings',
exception: {
maxPercent: 11.9,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
api: updateApi('owner', updateAvailable()),
now: boardNow,
api: updateApi('owner', { ...updateAvailable(), checked_at: '2026-09-10T09:41:00Z' }),
},
'Not prepared: command copied': {
path: '/settings',
exception: {
maxPercent: 11.9,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
origin: integrationOrigin,
api: updateApi('owner', updateAvailable()),
now: boardNow,
api: updateApi('owner', { ...updateAvailable(), checked_at: '2026-09-10T09:41:00Z' }),
steps: async (page) => {
await page.getByRole('button', { name: 'Copy', exact: true }).click()
await page.mouse.move(0, 0)
@@ -3556,11 +3555,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
home: {
Default: {
path: '/home',
exception: {
maxPercent: 13.5,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
now: boardNow,
api: {
'GET /v1/auth/me': verifiedSession,
@@ -3571,26 +3565,16 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
},
Loading: {
path: '/home',
exception: {
maxPercent: 18.6,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
now: boardNow,
api: {
'GET /v1/auth/me': verifiedSession,
'GET /v1/activity': homeActivityMock,
'GET /v1/activity': { ...homeActivityMock, hang: true },
'GET /v1/system/update': { status: 200, body: updateStatusBody() },
'GET /v1/article/': { status: 200, body: sixArticlesFixture, hang: true },
},
},
'Empty, first run': {
path: '/home',
exception: {
maxPercent: 11.4,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
now: boardNow,
api: {
'GET /v1/auth/me': verifiedSession,
@@ -3601,11 +3585,6 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
},
Error: {
path: '/home',
exception: {
maxPercent: 25.3,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
now: boardNow,
api: {
'GET /v1/auth/me': verifiedSession,
@@ -3616,11 +3595,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
},
'Update available (owner)': {
path: '/home',
exception: {
maxPercent: 11.9,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
now: boardNow,
api: {
'GET /v1/auth/me': verifiedSession,
'GET /v1/activity': homeActivityMock,
@@ -3630,11 +3605,7 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
},
'Update ready to install (owner)': {
path: '/home',
exception: {
maxPercent: 11.9,
reason: newCardAbsentReason,
approvedBy: 'fallen',
},
now: boardNow,
api: {
'GET /v1/auth/me': verifiedSession,
'GET /v1/activity': homeActivityMock,
@@ -4176,27 +4147,3 @@ export const visualStates: Record<string, Record<string, VisualState>> = {
media: { ...mediaStates, ...mediaPurgeStates },
'media-picker': pickerStates,
}
const hideCleanupCard = '[data-testid="media-cleanup-card"] { display: none !important }'
function withoutCleanupCard(state: VisualState): VisualState {
if (state.skip) {
return state
}
return {
...state,
api: { ...state.api, [purgeSettingsPath]: { status: 200, hang: true } },
steps: async (page) => {
await page.addStyleTag({ content: hideCleanupCard })
await state.steps?.(page)
await page.addStyleTag({ content: hideCleanupCard })
await page.mouse.move(0, 0)
},
}
}
for (const [name, state] of Object.entries(visualStates.settings!)) {
if (!(name in cleanupStates)) {
visualStates.settings![name] = withoutCleanupCard(state)
}
}