From 4ca8b205082ef8fab304104a6773406d9c79e4f8 Mon Sep 17 00:00:00 2001
From: Darrell van Swinderen <darrell260802@gmail.com>
Date: Wed, 23 Sep 2026 16:19:56 +0200
Subject: [PATCH] feat(library): the view count is a chip beside Published

A count only exists for a published clip, so it sits with the chip that
says so: (Published) (eye 37), top right of the card. The metadata line
under the title goes back to length, game, date and size, which was one
fact too long with the count on the end.

The chip is an eye and a number; its accessible name and tooltip carry
the words and when it was last opened. Null and zero still draw nothing.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/components/Library/ClipCard.vue       |  8 +++--
 .../src/components/Library/ClipMetadata.vue   | 22 +-----------
 .../components/Library/ClipPublishedBadge.vue | 36 +++++++++++++++++--
 src/renderer/src/utils/viewCount.ts           | 15 +++++---
 tests/unit/renderer/viewCount.spec.ts         | 15 +++++++-
 5 files changed, 64 insertions(+), 32 deletions(-)

diff --git a/src/renderer/src/components/Library/ClipCard.vue b/src/renderer/src/components/Library/ClipCard.vue
index 75ae18f5..b2cce2e3 100644
--- a/src/renderer/src/components/Library/ClipCard.vue
+++ b/src/renderer/src/components/Library/ClipCard.vue
@@ -273,7 +273,11 @@ function handleCardClick(event: MouseEvent) {
       </button>
     </div>
 
-    <ClipPublishedBadge :published="clip.published" />
+    <ClipPublishedBadge
+      :published="clip.published"
+      :views="clip.publisherViews"
+      :last-viewed-at="clip.publisherLastViewedAt"
+    />
 
     <!--
       The top left corner, as one column rather than two badges each claiming
@@ -443,8 +447,6 @@ function handleCardClick(event: MouseEvent) {
         :duration-sec="clip.durationSec"
         :game="gameDisplayName"
         :recorded-at="clip.recordedAt ?? clip.fileModifiedAt ?? clip.createdAt"
-        :views="clip.published ? clip.publisherViews : null"
-        :last-viewed-at="clip.publisherLastViewedAt"
       />
 
       <ClipTags :clip="clip" @updated="emit('updated', $event)" />
diff --git a/src/renderer/src/components/Library/ClipMetadata.vue b/src/renderer/src/components/Library/ClipMetadata.vue
index 222ba537..70b3a286 100644
--- a/src/renderer/src/components/Library/ClipMetadata.vue
+++ b/src/renderer/src/components/Library/ClipMetadata.vue
@@ -3,7 +3,6 @@ import { ref, computed } from 'vue';
 import { useConfiguration } from '@renderer/composables/app/useConfiguration';
 import { formatRelativeTime, formatExactDate } from '@renderer/helpers/dateFormat';
 import { useFormat } from '@renderer/composables/ui/useFormat';
-import { viewCountLabel } from '@renderer/utils/viewCount';
 
 /**
  * When the clip was recorded, which is the file's own date.
@@ -30,12 +29,6 @@ interface Props {
    */
   durationSec?: number | null;
   recordedAt?: string;
-  /**
-   * How often the published copy has been opened. Null for a clip that is not
-   * published or has not been counted; `viewCountLabel` decides what is said.
-   */
-  views?: number | null;
-  lastViewedAt?: string | null;
 }
 
 const props = defineProps<Props>();
@@ -54,11 +47,6 @@ const length = computed(() => {
   return hours ? `${hours}:${two(mins)}:${two(secs)}` : `${mins}:${two(secs)}`;
 });
 
-const viewsLabel = computed(() => viewCountLabel(props.views));
-const viewsHint = computed(() =>
-  props.lastViewedAt ? `Last opened ${formatRelativeTime(props.lastViewedAt)}` : undefined,
-);
-
 const displayDate = computed(() => {
   // No date is no date. Falling back to now would put a confident, wrong
   // "just now" on a clip whose age is simply not known.
@@ -72,8 +60,7 @@ const displayDate = computed(() => {
 
 <template>
   <!--
-    One line: how long, which game, how long ago, how big, and for a
-    published clip how often it has been opened.
+    One line: how long, which game, how long ago, how big.
 
     It was the duration and the file size on the left with the date pushed to
     the right edge, so each card carried a two-column layout of its own and a
@@ -101,13 +88,6 @@ const displayDate = computed(() => {
     </time>
     <span v-if="displayDate && sizeBytes" aria-hidden="true" class="shrink-0">·</span>
     <span v-if="sizeBytes" class="shrink-0 tabular-nums">{{ formatBytes(sizeBytes) }}</span>
-    <span v-if="viewsLabel && (length || game || displayDate || sizeBytes)" aria-hidden="true" class="shrink-0">·</span>
-    <span
-      v-if="viewsLabel"
-      class="shrink-0 tabular-nums"
-      data-testid="clip-view-count"
-      :title="viewsHint"
-    >{{ viewsLabel }}</span>
   </div>
 </template>
 
diff --git a/src/renderer/src/components/Library/ClipPublishedBadge.vue b/src/renderer/src/components/Library/ClipPublishedBadge.vue
index a7c52b3f..61774f91 100644
--- a/src/renderer/src/components/Library/ClipPublishedBadge.vue
+++ b/src/renderer/src/components/Library/ClipPublishedBadge.vue
@@ -1,10 +1,26 @@
 <script setup lang="ts">
+import { computed } from 'vue';
+import { Icon } from '@iconify/vue';
 import BaseChip from '@renderer/components/Base/BaseChip.vue';
+import { formatRelativeTime } from '@renderer/helpers/dateFormat';
+import { viewCountFigure, viewCountLabel } from '@renderer/utils/viewCount';
+
 interface Props {
   published?: boolean;
+  /** How often the published copy has been opened. See `viewCountFigure`. */
+  views?: number | null;
+  lastViewedAt?: string | null;
 }
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const figure = computed(() => (props.published ? viewCountFigure(props.views) : ''));
+const label = computed(() => viewCountLabel(props.views));
+const hint = computed(() =>
+  props.lastViewedAt
+    ? `${label.value}, last opened ${formatRelativeTime(props.lastViewedAt)}`
+    : label.value,
+);
 </script>
 
 <template>
@@ -15,11 +31,25 @@ defineProps<Props>();
     button that was in that corner. The tools are all at the bottom right now,
     so there is nothing to dodge, and a badge that moves when you point at the
     card is the layout-shift rule broken by animation.
+
+    The view count is a chip beside it rather than a word on the metadata line
+    under the title: a count only exists for a published clip, so it belongs
+    with the thing that says the clip is published, and the line under the
+    title was one fact too long with it.
   -->
-  <div v-if="published" class="absolute top-2 right-2 z-10">
+  <div v-if="published" class="absolute top-2 right-2 z-10 flex items-center gap-1">
     <BaseChip>
       Published
     </BaseChip>
+    <BaseChip
+      v-if="figure"
+      numeric
+      data-testid="clip-view-count"
+      :title="hint"
+      :aria-label="label"
+    >
+      <Icon icon="material-symbols:visibility-outline" class="size-3 shrink-0 block" aria-hidden="true" />
+      {{ figure }}
+    </BaseChip>
   </div>
 </template>
-
diff --git a/src/renderer/src/utils/viewCount.ts b/src/renderer/src/utils/viewCount.ts
index 75dbe20a..adbe53f9 100644
--- a/src/renderer/src/utils/viewCount.ts
+++ b/src/renderer/src/utils/viewCount.ts
@@ -1,7 +1,8 @@
 import { pluralize } from './pluralize';
 
 /**
- * What a library card says about how often a published clip has been watched.
+ * How often a published clip has been watched, as the figure on its card's
+ * chip beside Published: `37`, `1,234`. Empty means the chip is not drawn.
  *
  * **Null says nothing.** It means nobody has counted: a publisher older than
  * the counter, or no sync yet. A number there would be invented.
@@ -13,8 +14,14 @@ import { pluralize } from './pluralize';
  *
  * Grouped digits because a clip that went round a Discord can reach four.
  */
-export function viewCountLabel(views: number | null | undefined): string {
+export function viewCountFigure(views: number | null | undefined): string {
   if (views == null || !Number.isFinite(views) || views <= 0) return '';
-  const whole = Math.floor(views);
-  return `${whole.toLocaleString('en-US')} ${pluralize(whole, 'view')}`;
+  return Math.floor(views).toLocaleString('en-US');
+}
+
+/** The same count in words, for a screen reader: the chip itself is an eye and a number. */
+export function viewCountLabel(views: number | null | undefined): string {
+  const figure = viewCountFigure(views);
+  if (!figure) return '';
+  return `${figure} ${pluralize(Math.floor(views as number), 'view')}`;
 }
diff --git a/tests/unit/renderer/viewCount.spec.ts b/tests/unit/renderer/viewCount.spec.ts
index e9397668..90276cd6 100644
--- a/tests/unit/renderer/viewCount.spec.ts
+++ b/tests/unit/renderer/viewCount.spec.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { viewCountLabel } from '../../../src/renderer/src/utils/viewCount';
+import { viewCountFigure, viewCountLabel } from '../../../src/renderer/src/utils/viewCount';
 
 /**
  * The view count on a library card.
@@ -31,3 +31,16 @@ describe('viewCountLabel', () => {
     expect(viewCountLabel(1234)).toBe('1,234 views');
   });
 });
+
+describe('viewCountFigure', () => {
+  it('is empty wherever the label is, so the chip and its words agree', () => {
+    for (const views of [null, undefined, 0, -3, Number.NaN]) {
+      expect(viewCountFigure(views)).toBe('');
+    }
+  });
+
+  it('is the grouped number alone', () => {
+    expect(viewCountFigure(1)).toBe('1');
+    expect(viewCountFigure(1234)).toBe('1,234');
+  });
+});