From 91222204e04171936972b9814cefb6ec787c4f68 Mon Sep 17 00:00:00 2001
From: Luke Policinski <luke@lukepolo.com>
Date: Mon, 21 Sep 2026 11:13:25 -0400
Subject: [PATCH] chore: highlights filter bar

---
 components/clips/HighlightsBrowser.vue        | 873 ++++++++++++++++++
 components/events/EventHighlights.vue         | 242 -----
 components/events/EventPlayerPicker.vue       |  26 +-
 i18n/locales/ar_SA.json                       |   4 -
 i18n/locales/da_DK.json                       |   4 -
 i18n/locales/de_DE.json                       |   4 -
 i18n/locales/en.json                          |   4 -
 i18n/locales/es_ES.json                       |   4 -
 i18n/locales/fr_FR.json                       |   4 -
 i18n/locales/it_IT.json                       |   4 -
 i18n/locales/ja_JP.json                       |   4 -
 i18n/locales/ko_KR.json                       |   4 -
 i18n/locales/pl_PL.json                       |   4 -
 i18n/locales/pt_BR.json                       |   4 -
 i18n/locales/ru_RU.json                       |   4 -
 i18n/locales/sv_SE.json                       |   4 -
 i18n/locales/tr_TR.json                       |   4 -
 i18n/locales/uk_UA.json                       |   4 -
 i18n/locales/zh_Hans.json                     |   4 -
 i18n/locales/zh_Hant.json                     |   4 -
 pages/events/[eventId]/index.vue              |   8 +-
 pages/highlights/index.vue                    | 852 +----------------
 .../clips/HighlightsBrowser.spec.ts           |  88 ++
 .../components/events/EventHighlights.spec.ts | 118 ---
 24 files changed, 989 insertions(+), 1286 deletions(-)
 create mode 100644 components/clips/HighlightsBrowser.vue
 delete mode 100644 components/events/EventHighlights.vue
 create mode 100644 tests/components/clips/HighlightsBrowser.spec.ts
 delete mode 100644 tests/components/events/EventHighlights.spec.ts

diff --git a/components/clips/HighlightsBrowser.vue b/components/clips/HighlightsBrowser.vue
new file mode 100644
index 000000000..f2b565e1a
--- /dev/null
+++ b/components/clips/HighlightsBrowser.vue
@@ -0,0 +1,873 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import {
+  Film,
+  Globe,
+  Lock,
+  Crosshair,
+  User,
+  X,
+  Layers,
+  ChevronDown,
+  Check,
+} from "lucide-vue-next";
+import { useAuthStore } from "~/stores/AuthStore";
+import getGraphqlClient from "~/graphql/getGraphqlClient";
+import { generateQuery } from "~/graphql/graphqlGen";
+import { matchClipFields } from "~/graphql/matchClip";
+import { order_by, $ } from "~/generated/zeus";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "~/components/ui/popover";
+import PlayerSearch from "~/components/PlayerSearch.vue";
+import EventPlayerPicker from "~/components/events/EventPlayerPicker.vue";
+import PageTransition from "~/components/ui/transitions/PageTransition.vue";
+import { Skeleton } from "~/components/ui/skeleton";
+import Empty from "~/components/ui/empty/Empty.vue";
+import EmptyTitle from "~/components/ui/empty/EmptyTitle.vue";
+import EmptyDescription from "~/components/ui/empty/EmptyDescription.vue";
+import HighlightCard from "~/components/clips/HighlightCard.vue";
+import MatchClipsGroupCard from "~/components/clips/MatchClipsGroupCard.vue";
+import Pagination from "~/components/Pagination.vue";
+import type { Clip } from "~/types/clip";
+import { useClipModal, type ClipQueueItem } from "~/composables/useClipModal";
+import FilterBar from "~/components/common/FilterBar.vue";
+import FilterMenu from "~/components/common/FilterMenu.vue";
+import {
+  filterTriggerBase,
+  filterTriggerIdle,
+  filterTriggerActive,
+  filterTriggerValueClasses,
+} from "~/utilities/tacticalClasses";
+
+// Filter state lives in the route query, so a host page must list these keys
+// in definePageMeta's persistQueryKeys or every filter change remounts it:
+// player, since, kills, view, sort.
+const props = defineProps<{
+  eventId?: string;
+}>();
+
+const { t } = useI18n();
+const clipQueueScope = computed(() =>
+  props.eventId ? `event-highlights:${props.eventId}` : "highlights-index",
+);
+const { clearClipQueue, setClipQueue } = useClipModal();
+
+type Filter = "all" | "public" | "private";
+
+const auth = useAuthStore();
+const isAdmin = computed(() => auth.isAdmin);
+
+type ClipGroup = { matchId: string; clips: Clip[] };
+const groups = ref<ClipGroup[]>([]);
+const loading = ref(true);
+const visibilityFilter = ref<Filter>("all");
+
+type ViewMode = "matches" | "singles";
+
+const page = ref(1);
+const perPage = 24;
+const totalCount = ref(0);
+
+const flatClips = computed<Clip[]>(() => groups.value.flatMap((g) => g.clips));
+
+const route = useRoute();
+const router = useRouter();
+
+type SincePreset = "all" | "24h" | "7d" | "30d" | "90d";
+const SINCE_VALUES = ["all", "24h", "7d", "30d", "90d"] as const;
+const SINCE_OPTIONS = computed<Array<{ value: SincePreset; label: string }>>(
+  () =>
+    SINCE_VALUES.map((value) => ({
+      value,
+      label: t(`pages.highlights.since.${value}`),
+    })),
+);
+
+type KillsPreset = "any" | "2" | "3" | "4" | "5";
+const KILLS_VALUES = ["any", "2", "3", "4", "5"] as const;
+const KILLS_OPTIONS = computed<Array<{ value: KillsPreset; label: string }>>(
+  () =>
+    KILLS_VALUES.map((value) => ({
+      value,
+      label: t(`pages.highlights.kills.${value}`),
+    })),
+);
+
+const playerFilter = computed<string | null>(() => {
+  const v = route.query.player;
+  return typeof v === "string" && v.length > 0 ? v : null;
+});
+const sinceFilter = computed<SincePreset>(() =>
+  (SINCE_VALUES as readonly string[]).includes(route.query.since as string)
+    ? (route.query.since as SincePreset)
+    : "all",
+);
+const killsFilter = computed<KillsPreset>(() =>
+  (KILLS_VALUES as readonly string[]).includes(route.query.kills as string)
+    ? (route.query.kills as KillsPreset)
+    : "any",
+);
+const viewMode = computed<ViewMode>(() =>
+  route.query.view === "singles" ? "singles" : "matches",
+);
+
+type SortPreset = "recent" | "views";
+const SORT_VALUES = ["recent", "views"] as const;
+const SORT_OPTIONS = computed<Array<{ value: SortPreset; label: string }>>(() =>
+  SORT_VALUES.map((value) => ({
+    value,
+    label: t(`pages.highlights.sort.${value}`),
+  })),
+);
+const sortFilter = computed<SortPreset>(() =>
+  (SORT_VALUES as readonly string[]).includes(route.query.sort as string)
+    ? (route.query.sort as SortPreset)
+    : "recent",
+);
+
+function setSort(v: SortPreset) {
+  const next = { ...route.query } as Record<string, any>;
+  if (v === "recent") delete next.sort;
+  else next.sort = v;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+function setViewMode(v: ViewMode) {
+  const next = { ...route.query } as Record<string, any>;
+  if (v === "matches") delete next.view;
+  else next.view = v;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+function setSince(v: SincePreset) {
+  const next = { ...route.query } as Record<string, any>;
+  if (v === "all") delete next.since;
+  else next.since = v;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+function setKills(v: KillsPreset) {
+  const next = { ...route.query } as Record<string, any>;
+  if (v === "any") delete next.kills;
+  else next.kills = v;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+function clearPlayer() {
+  pickedPlayerName.value = null;
+  const next = { ...route.query } as Record<string, any>;
+  delete next.player;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+const pickedPlayerName = ref<string | null>(null);
+function selectPlayer(player: { steam_id: string; name: string } | null) {
+  if (!player?.steam_id) return;
+  pickedPlayerName.value = player.name;
+  const next = { ...route.query } as Record<string, any>;
+  next.player = player.steam_id;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+const playerPicker = computed(() =>
+  props.eventId
+    ? {
+        component: EventPlayerPicker,
+        props: {
+          eventId: props.eventId,
+          label: t("pages.highlights.filter_by_player"),
+        },
+      }
+    : {
+        component: PlayerSearch,
+        props: { label: t("pages.highlights.filter_by_player"), self: true },
+      },
+);
+
+const playerFilterName = computed<string | null>(() => {
+  const sid = playerFilter.value;
+  if (!sid) return null;
+  for (const c of flatClips.value) {
+    if (c.target?.steam_id === sid) return c.target.name;
+  }
+  return pickedPlayerName.value;
+});
+
+function sinceCutoffIso(preset: SincePreset): string | null {
+  const ms: Record<SincePreset, number> = {
+    all: 0,
+    "24h": 24 * 60 * 60 * 1000,
+    "7d": 7 * 24 * 60 * 60 * 1000,
+    "30d": 30 * 24 * 60 * 60 * 1000,
+    "90d": 90 * 24 * 60 * 60 * 1000,
+  };
+  if (!ms[preset]) return null;
+  return new Date(Date.now() - ms[preset]).toISOString();
+}
+
+// Hasura aggregate subs need a non-empty selection set to push deltas, so
+
+const hasActiveFilter = computed(
+  () =>
+    playerFilter.value !== null ||
+    sinceFilter.value !== "all" ||
+    killsFilter.value !== "any" ||
+    (isAdmin.value && visibilityFilter.value !== "all"),
+);
+
+
+function resetHighlightFilters() {
+  // One router.replace — chaining the individual setters each reads the same
+  // stale route.query snapshot, so only the last write survives (which would
+  // leave `since`/`kills` behind).
+  pickedPlayerName.value = null;
+  visibilityFilter.value = "all";
+  const next = { ...route.query } as Record<string, any>;
+  delete next.player;
+  delete next.since;
+  delete next.kills;
+  router.replace({ path: route.path, query: next, hash: route.hash });
+}
+
+// Kills is a heavily-used filter — it lives as its own left-side trigger (the
+// rest are bundled in the Filters menu). Single-select → closes on pick.
+const killsOpen = ref(false);
+
+const forceSingles = computed(
+  () => hasActiveFilter.value || sortFilter.value === "views",
+);
+
+const effectiveMode = computed<ViewMode>(() =>
+  forceSingles.value ? "singles" : viewMode.value,
+);
+
+const innerClipFilter = computed<Record<string, any>>(() => {
+  const f: Record<string, any> = {};
+  if (isAdmin.value && visibilityFilter.value !== "all") {
+    f.visibility = { _eq: visibilityFilter.value };
+  } else if (!isAdmin.value) {
+    f.visibility = { _eq: "public" };
+  }
+  if (playerFilter.value) {
+    f.target_steam_id = { _eq: playerFilter.value };
+  }
+  const cutoff = sinceCutoffIso(sinceFilter.value);
+  if (cutoff) {
+    f.created_at = { _gte: cutoff };
+  }
+  if (killsFilter.value !== "any") {
+    f.kills_count = { _gte: parseInt(killsFilter.value, 10) };
+  }
+  return f;
+});
+
+const eventMatchFilter = computed<Record<string, any> | null>(() =>
+  props.eventId
+    ? { event_links: { event_id: { _eq: props.eventId } } }
+    : null,
+);
+
+const clipWhere = computed<Record<string, any>>(() =>
+  eventMatchFilter.value
+    ? {
+        ...innerClipFilter.value,
+        match_map: { match: eventMatchFilter.value },
+      }
+    : innerClipFilter.value,
+);
+
+const mapBaseFilter = computed<Record<string, any>>(() => ({
+  ...(isAdmin.value
+    ? { clips_count: { _gt: 0 } }
+    : { public_clips_count: { _gt: 0 } }),
+  ...(eventMatchFilter.value ? { match: eventMatchFilter.value } : {}),
+}));
+
+let dataFetchId = 0;
+async function fetchData() {
+  const myId = ++dataFetchId;
+  if (groups.value.length === 0) {
+    loading.value = true;
+  }
+  const filter = innerClipFilter.value;
+  const filterIsEmpty = Object.keys(filter).length === 0;
+
+  try {
+    if (effectiveMode.value === "singles") {
+      const { data } = await getGraphqlClient().query({
+        query: generateQuery({
+          match_clips: [
+            {
+              where: clipWhere.value,
+              order_by:
+                sortFilter.value === "views"
+                  ? [{ views_count: order_by.desc }]
+                  : [{ created_at: order_by.desc }],
+              limit: perPage,
+              offset: (page.value - 1) * perPage,
+            } as any,
+            matchClipFields,
+          ],
+        } as any),
+        fetchPolicy: "network-only",
+      });
+      if (myId !== dataFetchId) return;
+      const list: Clip[] = (data as any)?.match_clips ?? [];
+      groups.value = list.map((clip) => ({
+        matchId: clip.match_map?.match?.id ?? clip.id,
+        clips: [clip],
+      }));
+      return;
+    }
+
+    const orderColumn = isAdmin.value
+      ? "latest_clip_at"
+      : "public_latest_clip_at";
+    const baseFilter = mapBaseFilter.value;
+    const groupWhere = filterIsEmpty
+      ? baseFilter
+      : { ...baseFilter, match_clips: filter };
+    const { data } = await getGraphqlClient().query({
+      query: generateQuery({
+        match_maps: [
+          {
+            where: groupWhere,
+            order_by: $("groups_order_by", "[match_maps_order_by!]!"),
+            limit: perPage,
+            offset: (page.value - 1) * perPage,
+          } as any,
+          {
+            id: true,
+            match: { id: true },
+            match_clips: [
+              {
+                where: filterIsEmpty ? {} : filter,
+                order_by: $("clips_order_by", "[match_clips_order_by!]!"),
+              },
+              matchClipFields,
+            ],
+          },
+        ],
+      } as any),
+      variables: {
+        groups_order_by:
+          sortFilter.value === "views"
+            ? [{ match_clips_aggregate: { sum: { views_count: order_by.desc } } }]
+            : [{ [orderColumn]: order_by.desc_nulls_last }],
+        clips_order_by:
+          sortFilter.value === "views"
+            ? [{ views_count: order_by.desc }]
+            : [{ created_at: order_by.desc }],
+      },
+      fetchPolicy: "network-only",
+    });
+    if (myId !== dataFetchId) return;
+    const rows: Array<{
+      id: string;
+      match?: { id: string } | null;
+      match_clips: Clip[];
+    }> = (data as any)?.match_maps ?? [];
+    groups.value = rows
+      .filter((g) => (g.match_clips?.length ?? 0) > 0)
+      .map((g) => ({
+        matchId: g.match?.id ?? g.id,
+        clips: g.match_clips ?? [],
+      }));
+  } catch (err) {
+    if (myId === dataFetchId) {
+      console.error("[highlights] fetch error:", err);
+    }
+  } finally {
+    if (myId === dataFetchId) {
+      loading.value = false;
+    }
+  }
+}
+
+let aggregateFetchId = 0;
+async function fetchAggregate() {
+  const myId = ++aggregateFetchId;
+  const filter = innerClipFilter.value;
+  const filterIsEmpty = Object.keys(filter).length === 0;
+
+  try {
+    if (effectiveMode.value === "singles") {
+      const { data } = await getGraphqlClient().query({
+        query: generateQuery({
+          match_clips_aggregate: [
+            { where: clipWhere.value } as any,
+            { aggregate: { count: true } },
+          ],
+        } as any),
+        fetchPolicy: "network-only",
+      });
+      if (myId !== aggregateFetchId) return;
+      totalCount.value =
+        (data as any)?.match_clips_aggregate?.aggregate?.count ?? 0;
+      return;
+    }
+
+    const baseFilter = mapBaseFilter.value;
+    const groupWhere = filterIsEmpty
+      ? baseFilter
+      : { ...baseFilter, match_clips: filter };
+    const { data } = await getGraphqlClient().query({
+      query: generateQuery({
+        match_maps_aggregate: [
+          { where: groupWhere } as any,
+          { aggregate: { count: true } },
+        ],
+      } as any),
+      fetchPolicy: "network-only",
+    });
+    if (myId !== aggregateFetchId) return;
+    totalCount.value =
+      (data as any)?.match_maps_aggregate?.aggregate?.count ?? 0;
+  } catch (err) {
+    if (myId === aggregateFetchId) {
+      console.error("[highlights] aggregate fetch error:", err);
+    }
+  }
+}
+
+fetchData();
+fetchAggregate();
+
+watch(
+  [
+    playerFilter,
+    sinceFilter,
+    killsFilter,
+    isAdmin,
+    visibilityFilter,
+    viewMode,
+    sortFilter,
+  ],
+  () => {
+    if (page.value !== 1) {
+      page.value = 1;
+    } else {
+      fetchData();
+    }
+    fetchAggregate();
+  },
+);
+watch(page, () => fetchData());
+
+onBeforeUnmount(() => {
+  clearClipQueue(clipQueueScope.value);
+});
+
+const showMap = computed(() => {
+  const seen = new Set<string>();
+  for (const c of flatClips.value) {
+    const name = c.match_map?.map?.name;
+    if (name) seen.add(name);
+    if (seen.size > 1) return true;
+  }
+  return false;
+});
+
+function clipQueueItem(c: Clip): ClipQueueItem {
+  return {
+    id: c.id,
+    title: c.title,
+    playerName: c.target?.name ?? null,
+    teamName: null,
+    durationMs: c.duration_ms,
+    thumbnailUrl: c.thumbnail_download_url,
+    posterUrl: c.match_map?.map?.poster ?? null,
+  };
+}
+
+watchEffect(() => {
+  setClipQueue(flatClips.value.map(clipQueueItem), clipQueueScope.value);
+});
+
+const hasClips = computed(() => groups.value.length > 0);
+
+type GridItem =
+  | { kind: "single"; clip: Clip }
+  | { kind: "group"; matchId: string; clips: Clip[] };
+const gridItems = computed<GridItem[]>(() => {
+  const items: GridItem[] = [];
+  for (const g of groups.value) {
+    if (g.clips.length === 0) continue;
+    if (g.clips.length === 1) {
+      items.push({ kind: "single", clip: g.clips[0] });
+      continue;
+    }
+    items.push({ kind: "group", matchId: g.matchId, clips: g.clips });
+  }
+  return items;
+});
+
+// Changes whenever the rendered set changes (filter/sort/page), driving the
+// grid cross-fade so a new result set eases in instead of snapping.
+const gridKey = computed(() =>
+  gridItems.value
+    .map((i) => (i.kind === "single" ? `s:${i.clip.id}` : `g:${i.matchId}`))
+    .join(","),
+);
+
+const adminFilters = computed<
+  Array<{ value: Filter; label: string; icon?: any }>
+>(() => [
+  { value: "all", label: t("pages.highlights.visibility_filter.all") },
+  {
+    value: "public",
+    label: t("pages.highlights.visibility_filter.public"),
+    icon: Globe,
+  },
+  {
+    value: "private",
+    label: t("pages.highlights.visibility_filter.private"),
+    icon: Lock,
+  },
+]);
+
+const viewModeOptions = computed<
+  Array<{
+    value: ViewMode;
+    label: string;
+    icon: any;
+  }>
+>(() => [
+  {
+    value: "matches",
+    label: t("pages.highlights.view_modes.matches"),
+    icon: Layers,
+  },
+  {
+    value: "singles",
+    label: t("pages.highlights.view_modes.singles"),
+    icon: Film,
+  },
+]);
+</script>
+
+<template>
+  <div>
+    <PageTransition :delay="60">
+      <FilterBar>
+        <!-- Player (left, widely used) -->
+        <button
+          v-if="playerFilter"
+          type="button"
+          :class="[filterTriggerBase, filterTriggerActive]"
+          :title="$t('pages.highlights.clear_player_filter')"
+          @click="clearPlayer"
+        >
+          <User class="h-3.5 w-3.5" />
+          <span class="max-w-[10rem] truncate normal-case tracking-normal">
+            {{ playerFilterName ?? $t("clips.default_player") }}
+          </span>
+          <X class="h-3 w-3 opacity-70" />
+        </button>
+        <component
+          :is="playerPicker.component"
+          v-else
+          v-bind="playerPicker.props"
+          @selected="selectPlayer"
+        >
+          <button
+            type="button"
+            :class="[filterTriggerBase, filterTriggerIdle]"
+            :title="$t('pages.highlights.filter_by_player')"
+          >
+            <User class="h-3.5 w-3.5" />
+            {{ $t("clips.default_player") }}
+            <ChevronDown class="h-3 w-3 opacity-50" />
+          </button>
+        </component>
+
+        <!-- Kills (widely used) — left trigger -->
+        <Popover v-model:open="killsOpen">
+          <PopoverTrigger as-child>
+            <button
+              type="button"
+              :class="[
+                filterTriggerBase,
+                killsFilter !== 'any' ? filterTriggerActive : filterTriggerIdle,
+              ]"
+            >
+              <Crosshair class="h-3.5 w-3.5" />
+              {{ $t("pages.highlights.filter_labels.kills") }}
+              <span v-if="killsFilter !== 'any'" :class="filterTriggerValueClasses">
+                {{ killsLabel }}
+              </span>
+              <ChevronDown class="h-3 w-3 opacity-50" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="start" class="w-44 p-1">
+            <button
+              v-for="opt in KILLS_OPTIONS"
+              :key="opt.value"
+              type="button"
+              @click="
+                setKills(opt.value);
+                killsOpen = false;
+              "
+              class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
+            >
+              <span>{{ opt.label }}</span>
+              <Check
+                v-if="killsFilter === opt.value"
+                class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
+              />
+            </button>
+          </PopoverContent>
+        </Popover>
+
+        <!-- View mode — pinned to the right of the trigger row -->
+        <div
+          class="relative ml-auto flex items-center rounded-full border border-border/60 bg-muted/30 p-0.5"
+          role="group"
+          :aria-label="$t('pages.highlights.view_mode')"
+        >
+            <!-- Sliding active-tab indicator -->
+            <span
+              aria-hidden="true"
+              class="absolute inset-y-0.5 left-0.5 w-[calc(50%-0.125rem)] rounded-full bg-[hsl(var(--tac-amber))] shadow-[0_0_12px_-2px_hsl(var(--tac-amber)/0.6)] transition-transform duration-300 ease-out"
+              :style="{
+                transform:
+                  effectiveMode === 'singles'
+                    ? 'translateX(100%)'
+                    : 'translateX(0)',
+              }"
+            />
+            <button
+              v-for="opt in viewModeOptions"
+              :key="opt.value"
+              type="button"
+              :disabled="forceSingles && opt.value === 'matches'"
+              :title="
+                forceSingles && opt.value === 'matches'
+                  ? $t('pages.highlights.view_mode_filter_disabled')
+                  : undefined
+              "
+              :class="[
+                'relative z-10 inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-4 py-1 text-xs transition-colors',
+                effectiveMode === opt.value
+                  ? 'font-bold text-black'
+                  : 'text-muted-foreground hover:text-foreground',
+                forceSingles && opt.value === 'matches'
+                  ? 'cursor-not-allowed opacity-40 hover:text-muted-foreground'
+                  : '',
+              ]"
+              :aria-pressed="effectiveMode === opt.value"
+              @click="setViewMode(opt.value)"
+            >
+              <component :is="opt.icon" class="h-3 w-3" />
+              {{ opt.label }}
+            </button>
+          </div>
+
+        <!-- Filters (Visibility/Date/Kills/Sort bundled) + grouped reset -->
+        <FilterMenu
+          :count="
+            (isAdmin && visibilityFilter !== 'all' ? 1 : 0) +
+            (sinceFilter !== 'all' ? 1 : 0) +
+            (sortFilter !== 'recent' ? 1 : 0)
+          "
+          :active="
+            (isAdmin && visibilityFilter !== 'all') ||
+            sinceFilter !== 'all' ||
+            sortFilter !== 'recent'
+          "
+          :show-reset="hasActiveFilter"
+          content-class="w-[min(92vw,260px)] space-y-3 p-2"
+          @reset="resetHighlightFilters"
+        >
+          <!-- Visibility (admin) -->
+          <div v-if="isAdmin" class="space-y-0.5">
+            <span
+              class="block px-2 pb-1 font-mono text-[0.6rem] uppercase tracking-[0.16em] text-muted-foreground"
+            >
+              {{ $t("pages.highlights.filter_labels.visibility") }}
+            </span>
+            <button
+              v-for="opt in adminFilters"
+              :key="opt.value"
+              type="button"
+              @click="visibilityFilter = opt.value"
+              class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
+            >
+              <span class="flex items-center gap-2">
+                <component :is="opt.icon" v-if="opt.icon" class="h-3.5 w-3.5" />
+                {{ opt.label }}
+              </span>
+              <Check
+                v-if="visibilityFilter === opt.value"
+                class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
+              />
+            </button>
+          </div>
+
+          <!-- Date -->
+          <div
+            class="space-y-0.5"
+            :class="isAdmin ? 'border-t border-border/50 pt-3' : ''"
+          >
+            <span
+              class="block px-2 pb-1 font-mono text-[0.6rem] uppercase tracking-[0.16em] text-muted-foreground"
+            >
+              {{ $t("pages.highlights.filter_labels.date") }}
+            </span>
+            <button
+              v-for="opt in SINCE_OPTIONS"
+              :key="opt.value"
+              type="button"
+              @click="setSince(opt.value)"
+              class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
+            >
+              <span>{{ opt.label }}</span>
+              <Check
+                v-if="sinceFilter === opt.value"
+                class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
+              />
+            </button>
+          </div>
+
+          <!-- Sort -->
+          <div class="space-y-0.5 border-t border-border/50 pt-3">
+            <span
+              class="block px-2 pb-1 font-mono text-[0.6rem] uppercase tracking-[0.16em] text-muted-foreground"
+            >
+              {{ $t("pages.highlights.filter_labels.sort") }}
+            </span>
+            <button
+              v-for="opt in SORT_OPTIONS"
+              :key="opt.value"
+              type="button"
+              @click="setSort(opt.value)"
+              class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
+            >
+              <span>{{ opt.label }}</span>
+              <Check
+                v-if="sortFilter === opt.value"
+                class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
+              />
+            </button>
+          </div>
+        </FilterMenu>
+      </FilterBar>
+    </PageTransition>
+
+    <PageTransition v-if="loading" :delay="80" class="mt-6">
+      <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+        <Skeleton
+          v-for="i in 8"
+          :key="i"
+          class="aspect-video w-full rounded-lg"
+        />
+      </div>
+    </PageTransition>
+
+    <PageTransition v-else-if="!hasClips" :delay="80" class="mt-6">
+      <Empty>
+        <EmptyTitle>
+          {{
+            playerFilter || sinceFilter !== "all" || killsFilter !== "any"
+              ? $t("pages.highlights.empty.no_match_filters")
+              : $t("pages.highlights.empty.no_clips_yet")
+          }}
+        </EmptyTitle>
+        <EmptyDescription>
+          <template
+            v-if="playerFilter || sinceFilter !== 'all' || killsFilter !== 'any'"
+          >
+            {{ $t("pages.highlights.empty.try_widening") }}
+          </template>
+          <template v-else-if="isAdmin">
+            {{ $t("pages.highlights.empty.try_different_admin") }}
+          </template>
+          <template v-else>
+            {{ $t("pages.highlights.empty.check_back_soon") }}
+          </template>
+        </EmptyDescription>
+        <div
+          v-if="playerFilter || sinceFilter !== 'all' || killsFilter !== 'any'"
+          class="mt-3 flex flex-wrap items-center justify-center gap-2"
+        >
+          <button
+            v-if="playerFilter"
+            type="button"
+            :class="[filterTriggerBase, filterTriggerIdle]"
+            @click="clearPlayer"
+          >
+            <X class="h-3 w-3" />
+            {{ $t("pages.highlights.empty.clear_player") }}
+          </button>
+          <button
+            v-if="sinceFilter !== 'all'"
+            type="button"
+            :class="[filterTriggerBase, filterTriggerIdle]"
+            @click="setSince('all')"
+          >
+            <X class="h-3 w-3" />
+            {{ $t("pages.highlights.empty.clear_date") }}
+          </button>
+          <button
+            v-if="killsFilter !== 'any'"
+            type="button"
+            :class="[filterTriggerBase, filterTriggerIdle]"
+            @click="setKills('any')"
+          >
+            <X class="h-3 w-3" />
+            {{ $t("pages.highlights.empty.clear_kills") }}
+          </button>
+        </div>
+      </Empty>
+    </PageTransition>
+
+    <PageTransition v-else :delay="80" class="mt-6">
+      <Transition name="grid-fade" mode="out-in">
+        <div
+          :key="gridKey"
+          class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+        >
+          <template v-for="item in gridItems">
+            <MatchClipsGroupCard
+              v-if="item.kind === 'group'"
+              :key="`group-${item.matchId}`"
+              :match-id="item.matchId"
+              :clips="item.clips"
+            />
+            <HighlightCard
+              v-else
+              :key="`single-${item.clip.id}`"
+              :clip="item.clip"
+              :show-map="showMap"
+            />
+          </template>
+        </div>
+      </Transition>
+    </PageTransition>
+
+    <Pagination
+      v-if="!loading && totalCount > perPage"
+      class="mt-6"
+      :page="page"
+      :per-page="perPage"
+      :total="totalCount"
+      @page="(p) => (page = p)"
+    />
+  </div>
+</template>
+
+<style scoped>
+.grid-fade-enter-active,
+.grid-fade-leave-active {
+  transition: opacity 0.22s ease;
+}
+.grid-fade-enter-from,
+.grid-fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/components/events/EventHighlights.vue b/components/events/EventHighlights.vue
deleted file mode 100644
index 6e2c5d85e..000000000
--- a/components/events/EventHighlights.vue
+++ /dev/null
@@ -1,242 +0,0 @@
-<script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-  watchEffect,
-} from "vue";
-import { useI18n } from "vue-i18n";
-import { useApolloClient } from "@vue/apollo-composable";
-import { Film } from "lucide-vue-next";
-import HighlightCard from "~/components/clips/HighlightCard.vue";
-import HighlightSkeleton from "~/components/clips/HighlightSkeleton.vue";
-import AnimatedFilters from "~/components/common/AnimatedFilters.vue";
-import EventPlayerFilter from "~/components/events/EventPlayerFilter.vue";
-import { $, order_by } from "~/generated/zeus";
-import { typedGql } from "~/generated/zeus/typedDocumentNode";
-import { matchClipFields } from "~/graphql/matchClip";
-import { useClipModal, type ClipQueueItem } from "~/composables/useClipModal";
-import type { Clip } from "~/types/clip";
-
-const props = defineProps<{
-  eventId: string;
-}>();
-
-const PAGE_SIZE = 12;
-
-const HIGHLIGHTS_SUBSCRIPTION = typedGql("subscription")({
-  match_clips: [
-    {
-      where: $("where", "match_clips_bool_exp!"),
-      order_by: $("orderBy", "[match_clips_order_by!]!"),
-      limit: $("limit", "Int!"),
-    },
-    matchClipFields,
-  ],
-});
-
-const { t } = useI18n();
-const { client: apolloClient } = useApolloClient();
-
-const sort = ref("views");
-const sortOptions = computed(() => [
-  { key: "views", label: t("pages.highlights.sort.views") },
-  { key: "recent", label: t("pages.highlights.sort.recent") },
-]);
-
-const filterPlayer = ref<{ steam_id: string | number; name?: string } | null>(
-  null,
-);
-
-const clips = ref<Clip[]>([]);
-const loading = ref(true);
-const limit = ref(PAGE_SIZE);
-const reachedEnd = ref(false);
-const inFlight = ref(false);
-// Hides the toolbar only when the event has no highlights at all; a filter
-// that matches nothing must keep it so the filter can be cleared.
-const eventHasClips = ref(false);
-
-let activeSub: { unsubscribe: () => void } | null = null;
-function subscribe() {
-  activeSub?.unsubscribe();
-  loading.value = true;
-
-  const filtered = filterPlayer.value !== null;
-  const filters: any[] = [
-    { visibility: { _eq: "public" } },
-    {
-      match_map: {
-        match: { event_links: { event_id: { _eq: props.eventId } } },
-      },
-    },
-  ];
-  if (filterPlayer.value) {
-    filters.push({
-      target_steam_id: { _eq: String(filterPlayer.value.steam_id) },
-    });
-  }
-
-  activeSub = apolloClient
-    .subscribe({
-      query: HIGHLIGHTS_SUBSCRIPTION,
-      variables: {
-        where: { _and: filters },
-        orderBy:
-          sort.value === "views"
-            ? [
-                { views_count: order_by.desc_nulls_last },
-                { created_at: order_by.desc },
-              ]
-            : [{ created_at: order_by.desc }],
-        limit: limit.value,
-      },
-    })
-    .subscribe({
-      next: ({ data }: any) => {
-        const next = (data?.match_clips ?? []) as Clip[];
-        reachedEnd.value = next.length < limit.value;
-        clips.value = next;
-        if (!filtered && next.length > 0) {
-          eventHasClips.value = true;
-        }
-        loading.value = false;
-        inFlight.value = false;
-      },
-      error: (error: any) => {
-        console.error("Error subscribing to event highlights:", error);
-        loading.value = false;
-        inFlight.value = false;
-      },
-    });
-}
-
-watch(
-  [() => props.eventId, sort, () => filterPlayer.value?.steam_id],
-  () => {
-    limit.value = PAGE_SIZE;
-    subscribe();
-  },
-  { immediate: true },
-);
-
-const { setClipQueue, clearClipQueue } = useClipModal();
-const clipQueueScope = computed(() => `event-highlights:${props.eventId}`);
-function clipQueueItem(clip: Clip): ClipQueueItem {
-  return {
-    id: clip.id,
-    title: clip.title,
-    playerName: clip.target?.name ?? null,
-    teamName: null,
-    durationMs: clip.duration_ms,
-    thumbnailUrl: clip.thumbnail_download_url,
-    posterUrl: clip.match_map?.map?.poster ?? null,
-  };
-}
-watchEffect(() => {
-  if (clips.value.length === 0) {
-    return;
-  }
-  setClipQueue(clips.value.map(clipQueueItem), clipQueueScope.value);
-});
-
-function loadMore() {
-  if (reachedEnd.value || inFlight.value || loading.value) {
-    return;
-  }
-  inFlight.value = true;
-  limit.value += PAGE_SIZE;
-  subscribe();
-}
-
-const sentinel = ref<HTMLElement | null>(null);
-let observer: IntersectionObserver | null = null;
-onMounted(() => {
-  observer = new IntersectionObserver(
-    (entries) => {
-      if (entries.some((entry) => entry.isIntersecting)) {
-        loadMore();
-      }
-    },
-    { rootMargin: "600px 0px" },
-  );
-  watch(
-    sentinel,
-    (el) => {
-      observer?.disconnect();
-      if (el) {
-        observer?.observe(el);
-      }
-    },
-    { immediate: true },
-  );
-});
-
-onBeforeUnmount(() => {
-  observer?.disconnect();
-  activeSub?.unsubscribe();
-  clearClipQueue(clipQueueScope.value);
-});
-</script>
-
-<template>
-  <div class="space-y-4">
-    <div
-      v-if="eventHasClips"
-      class="flex flex-wrap items-center justify-between gap-2"
-    >
-      <div class="w-full max-w-xs">
-        <EventPlayerFilter
-          v-model="filterPlayer"
-          :event-id="eventId"
-          :label="$t('event.media.filter_by_player')"
-        />
-      </div>
-      <AnimatedFilters v-model="sort" :options="sortOptions" square />
-    </div>
-
-    <div
-      v-if="loading && clips.length === 0"
-      class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
-    >
-      <HighlightSkeleton v-for="i in 6" :key="i" />
-    </div>
-
-    <div
-      v-else-if="clips.length === 0"
-      class="flex flex-col items-center gap-3 rounded-md border border-dashed border-border px-4 py-16 text-center"
-    >
-      <Film class="h-6 w-6 text-muted-foreground" />
-      <p class="text-sm text-muted-foreground">
-        {{
-          filterPlayer
-            ? $t("event.highlights.none_for_player")
-            : $t("event.highlights.none")
-        }}
-      </p>
-    </div>
-
-    <template v-else>
-      <TransitionGroup
-        tag="div"
-        class="grid grid-cols-1 gap-3 transition-opacity sm:grid-cols-2 lg:grid-cols-3"
-        :class="{ 'opacity-60': loading && !inFlight }"
-        enter-active-class="transition-[opacity,transform] duration-500 ease-out"
-        enter-from-class="opacity-0 translate-y-3"
-        move-class="transition-transform duration-300 ease-out"
-      >
-        <HighlightCard v-for="clip in clips" :key="clip.id" :clip="clip" />
-      </TransitionGroup>
-
-      <div
-        v-if="!reachedEnd"
-        ref="sentinel"
-        class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"
-      >
-        <HighlightSkeleton v-for="i in 3" :key="i" />
-      </div>
-    </template>
-  </div>
-</template>
diff --git a/components/events/EventPlayerPicker.vue b/components/events/EventPlayerPicker.vue
index a6c71f597..21273d755 100644
--- a/components/events/EventPlayerPicker.vue
+++ b/components/events/EventPlayerPicker.vue
@@ -118,17 +118,21 @@ function select(player: any) {
 <template>
   <Popover v-model:open="open">
     <PopoverTrigger as-child>
-      <button
-        type="button"
-        :aria-expanded="open"
-        class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-      >
-        <div class="flex min-w-0 items-center gap-2">
-          <UserPlus class="h-4 w-4 shrink-0 text-muted-foreground" />
-          <span class="truncate">{{ labelText }}</span>
-        </div>
-        <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-      </button>
+      <div>
+        <slot>
+          <button
+            type="button"
+            :aria-expanded="open"
+            class="flex h-9 w-full items-center justify-between rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          >
+            <div class="flex min-w-0 items-center gap-2">
+              <UserPlus class="h-4 w-4 shrink-0 text-muted-foreground" />
+              <span class="truncate">{{ labelText }}</span>
+            </div>
+            <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </button>
+        </slot>
+      </div>
     </PopoverTrigger>
     <PopoverContent class="w-[340px] p-0">
       <div class="flex flex-col">
diff --git a/i18n/locales/ar_SA.json b/i18n/locales/ar_SA.json
index 3b5ae94e8..f3e7fb224 100644
--- a/i18n/locales/ar_SA.json
+++ b/i18n/locales/ar_SA.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "أدخل URL صالحًا يبدأ بـ http(s)",
       "link_added": "تمت إضافة الرابط"
     },
-    "highlights": {
-      "none": "لا توجد أبرز لقطات من مباريات هذا الحدث بعد.",
-      "none_for_player": "لا توجد أبرز لقطات لهذا اللاعب في هذا الحدث."
-    },
     "phase": {
       "upcoming": "قادم",
       "live": "مباشر",
diff --git a/i18n/locales/da_DK.json b/i18n/locales/da_DK.json
index 95d5a0182..fdaaf880d 100644
--- a/i18n/locales/da_DK.json
+++ b/i18n/locales/da_DK.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Indtast en gyldig http(s)-URL",
       "link_added": "Link tilføjet"
     },
-    "highlights": {
-      "none": "Ingen highlights fra dette events kampe endnu.",
-      "none_for_player": "Ingen highlights med denne spiller ved dette event."
-    },
     "phase": {
       "upcoming": "Kommende",
       "live": "Live",
diff --git a/i18n/locales/de_DE.json b/i18n/locales/de_DE.json
index 5c998b677..13a380e59 100644
--- a/i18n/locales/de_DE.json
+++ b/i18n/locales/de_DE.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Gib eine gültige http(s)-URL ein",
       "link_added": "Link hinzugefügt"
     },
-    "highlights": {
-      "none": "Noch keine Highlights aus den Matches dieses Events.",
-      "none_for_player": "Keine Highlights dieses Spielers bei diesem Event."
-    },
     "phase": {
       "upcoming": "Anstehend",
       "live": "Live",
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1c3cc250e..faed271da 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Enter a valid http(s) URL",
       "link_added": "Link added"
     },
-    "highlights": {
-      "none": "No highlights from this event's matches yet.",
-      "none_for_player": "No highlights of this player at this event."
-    },
     "phase": {
       "upcoming": "Upcoming",
       "live": "Live",
diff --git a/i18n/locales/es_ES.json b/i18n/locales/es_ES.json
index b6f5b94ab..80a759fcb 100644
--- a/i18n/locales/es_ES.json
+++ b/i18n/locales/es_ES.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Introduce una URL http(s) válida",
       "link_added": "Enlace añadido"
     },
-    "highlights": {
-      "none": "Todavía no hay highlights de las partidas de este evento.",
-      "none_for_player": "No hay highlights de este jugador en este evento."
-    },
     "phase": {
       "upcoming": "Próximo",
       "live": "En directo",
diff --git a/i18n/locales/fr_FR.json b/i18n/locales/fr_FR.json
index d607c0670..dfb6fde65 100644
--- a/i18n/locales/fr_FR.json
+++ b/i18n/locales/fr_FR.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Saisis une URL http(s) valide",
       "link_added": "Lien ajouté"
     },
-    "highlights": {
-      "none": "Aucun highlight pour les matchs de cet événement pour l'instant.",
-      "none_for_player": "Aucun highlight de ce joueur pour cet événement."
-    },
     "phase": {
       "upcoming": "À venir",
       "live": "En direct",
diff --git a/i18n/locales/it_IT.json b/i18n/locales/it_IT.json
index b712f116e..c67b7f72b 100644
--- a/i18n/locales/it_IT.json
+++ b/i18n/locales/it_IT.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Inserisci un URL http(s) valido",
       "link_added": "Link aggiunto"
     },
-    "highlights": {
-      "none": "Ancora nessun highlight dalle partite di questo evento.",
-      "none_for_player": "Nessun highlight di questo giocatore in questo evento."
-    },
     "phase": {
       "upcoming": "In arrivo",
       "live": "Live",
diff --git a/i18n/locales/ja_JP.json b/i18n/locales/ja_JP.json
index 2feef0574..3316b122f 100644
--- a/i18n/locales/ja_JP.json
+++ b/i18n/locales/ja_JP.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "有効な http(s) の URL を入力してください",
       "link_added": "リンクを追加しました"
     },
-    "highlights": {
-      "none": "このイベントの試合のハイライトはまだありません。",
-      "none_for_player": "このイベントでのこのプレイヤーのハイライトはありません。"
-    },
     "phase": {
       "upcoming": "開催予定",
       "live": "開催中",
diff --git a/i18n/locales/ko_KR.json b/i18n/locales/ko_KR.json
index 7667b7e20..71826f87d 100644
--- a/i18n/locales/ko_KR.json
+++ b/i18n/locales/ko_KR.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "유효한 http(s) URL을 입력하세요",
       "link_added": "링크가 추가되었습니다"
     },
-    "highlights": {
-      "none": "아직 이 이벤트 경기의 하이라이트가 없습니다.",
-      "none_for_player": "이 이벤트에서 이 플레이어의 하이라이트가 없습니다."
-    },
     "phase": {
       "upcoming": "예정",
       "live": "진행 중",
diff --git a/i18n/locales/pl_PL.json b/i18n/locales/pl_PL.json
index e4d2f3a76..38ded8f04 100644
--- a/i18n/locales/pl_PL.json
+++ b/i18n/locales/pl_PL.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Podaj prawidłowy adres URL http(s)",
       "link_added": "Link dodany"
     },
-    "highlights": {
-      "none": "Brak jeszcze highlightów z meczów tego wydarzenia",
-      "none_for_player": "Brak highlightów tego gracza w tym wydarzeniu"
-    },
     "phase": {
       "upcoming": "Nadchodzące",
       "live": "Na żywo",
diff --git a/i18n/locales/pt_BR.json b/i18n/locales/pt_BR.json
index bdbd8df4e..9d23c1c13 100644
--- a/i18n/locales/pt_BR.json
+++ b/i18n/locales/pt_BR.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Insira uma URL http(s) válida",
       "link_added": "Link adicionado"
     },
-    "highlights": {
-      "none": "Ainda não há highlights das partidas deste evento.",
-      "none_for_player": "Nenhum highlight deste jogador neste evento."
-    },
     "phase": {
       "upcoming": "Em breve",
       "live": "Ao Vivo",
diff --git a/i18n/locales/ru_RU.json b/i18n/locales/ru_RU.json
index 5cbe4d75a..718c8969c 100644
--- a/i18n/locales/ru_RU.json
+++ b/i18n/locales/ru_RU.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Введи корректный http(s) URL",
       "link_added": "Ссылка добавлена"
     },
-    "highlights": {
-      "none": "Пока нет хайлайтов с матчей этого события.",
-      "none_for_player": "Нет хайлайтов этого игрока на этом событии."
-    },
     "phase": {
       "upcoming": "Скоро",
       "live": "В эфире",
diff --git a/i18n/locales/sv_SE.json b/i18n/locales/sv_SE.json
index 9439b1ee1..a57381767 100644
--- a/i18n/locales/sv_SE.json
+++ b/i18n/locales/sv_SE.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Ange en giltig http(s)-URL",
       "link_added": "Länk tillagd"
     },
-    "highlights": {
-      "none": "Inga höjdpunkter från detta events matcher än.",
-      "none_for_player": "Inga höjdpunkter med denna spelare från detta event."
-    },
     "phase": {
       "upcoming": "Kommande",
       "live": "Live",
diff --git a/i18n/locales/tr_TR.json b/i18n/locales/tr_TR.json
index 1f2908444..084b09184 100644
--- a/i18n/locales/tr_TR.json
+++ b/i18n/locales/tr_TR.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Geçerli bir http(s) URL'si gir",
       "link_added": "Bağlantı eklendi"
     },
-    "highlights": {
-      "none": "Bu etkinliğin maçlarından henüz öne çıkan an yok.",
-      "none_for_player": "Bu oyuncunun bu etkinlikte öne çıkan anı yok."
-    },
     "phase": {
       "upcoming": "Yaklaşan",
       "live": "Canlı",
diff --git a/i18n/locales/uk_UA.json b/i18n/locales/uk_UA.json
index 9ed5148d0..4bb220b9c 100644
--- a/i18n/locales/uk_UA.json
+++ b/i18n/locales/uk_UA.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "Введи дійсний http(s) URL",
       "link_added": "Посилання додано"
     },
-    "highlights": {
-      "none": "Поки немає хайлайтів з матчів цієї події.",
-      "none_for_player": "Немає хайлайтів цього гравця на цій події."
-    },
     "phase": {
       "upcoming": "Майбутня",
       "live": "Наживо",
diff --git a/i18n/locales/zh_Hans.json b/i18n/locales/zh_Hans.json
index 7c5896803..1dc599f91 100644
--- a/i18n/locales/zh_Hans.json
+++ b/i18n/locales/zh_Hans.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "请输入有效的 http(s) URL",
       "link_added": "链接已添加"
     },
-    "highlights": {
-      "none": "此活动的比赛尚无高光时刻。",
-      "none_for_player": "此玩家在此活动中暂无高光时刻。"
-    },
     "phase": {
       "upcoming": "即将开始",
       "live": "进行中",
diff --git a/i18n/locales/zh_Hant.json b/i18n/locales/zh_Hant.json
index 141396765..34a0f2269 100644
--- a/i18n/locales/zh_Hant.json
+++ b/i18n/locales/zh_Hant.json
@@ -9467,10 +9467,6 @@
       "link_invalid": "請輸入有效的 http(s) URL",
       "link_added": "連結已新增"
     },
-    "highlights": {
-      "none": "此活動的比賽尚無精華時刻。",
-      "none_for_player": "此玩家在此活動中尚無精華時刻。"
-    },
     "phase": {
       "upcoming": "即將開始",
       "live": "進行中",
diff --git a/pages/events/[eventId]/index.vue b/pages/events/[eventId]/index.vue
index c9e355e66..bfbefbace 100644
--- a/pages/events/[eventId]/index.vue
+++ b/pages/events/[eventId]/index.vue
@@ -28,7 +28,7 @@ import EventStandings from "~/components/events/EventStandings.vue";
 import EventMembershipPanel from "~/components/events/EventMembershipPanel.vue";
 import EventForm from "~/components/events/EventForm.vue";
 import EventMediaPanel from "~/components/events/EventMediaPanel.vue";
-import EventHighlights from "~/components/events/EventHighlights.vue";
+import HighlightsBrowser from "~/components/clips/HighlightsBrowser.vue";
 import EventTeamsPanel from "~/components/events/EventTeamsPanel.vue";
 import EventOverview from "~/components/events/EventOverview.vue";
 import EventBannerUpload from "~/components/events/EventBannerUpload.vue";
@@ -50,6 +50,10 @@ import {
 } from "~/utilities/eventDisplay";
 import { useEventContext } from "~/composables/useEventContext";
 
+definePageMeta({
+  persistQueryKeys: ["player", "since", "kills", "view", "sort"],
+});
+
 // Reflect the event name in the browser tab / in-app title (nuxt.config's
 // titleTemplate appends " | 5Stack"). The context is populated by the
 // subscription in the Options block below.
@@ -436,7 +440,7 @@ const {
 
         <TabsContent value="highlights">
           <PageTransition>
-            <EventHighlights :event-id="event.id" />
+            <HighlightsBrowser :event-id="event.id" />
           </PageTransition>
         </TabsContent>
 
diff --git a/pages/highlights/index.vue b/pages/highlights/index.vue
index 87c0ed9ba..020953715 100644
--- a/pages/highlights/index.vue
+++ b/pages/highlights/index.vue
@@ -1,45 +1,11 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch, watchEffect } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import {
-  Film,
-  Lock,
-  Globe,
-  ListVideo,
-  Calendar,
-  Crosshair,
-  User,
-  X,
-  Layers,
-  ArrowUpDown,
-  ChevronDown,
-  Check,
-} from "lucide-vue-next";
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { ListVideo } from "lucide-vue-next";
 import { useAuthStore } from "~/stores/AuthStore";
 import getGraphqlClient from "~/graphql/getGraphqlClient";
-import { generateQuery, generateSubscription } from "~/graphql/graphqlGen";
-import { matchClipFields } from "~/graphql/matchClip";
-import { order_by, $ } from "~/generated/zeus";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "~/components/ui/select";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "~/components/ui/popover";
-import PlayerSearch from "~/components/PlayerSearch.vue";
+import { generateSubscription } from "~/graphql/graphqlGen";
 import TacticalPageHeader from "~/components/TacticalPageHeader.vue";
 import PageTransition from "~/components/ui/transitions/PageTransition.vue";
-import { Skeleton } from "~/components/ui/skeleton";
-import Empty from "~/components/ui/empty/Empty.vue";
-import EmptyTitle from "~/components/ui/empty/EmptyTitle.vue";
-import EmptyDescription from "~/components/ui/empty/EmptyDescription.vue";
 import { Button } from "~/components/ui/button";
 import {
   Sheet,
@@ -49,33 +15,17 @@ import {
   SheetDescription,
   SheetTrigger,
 } from "~/components/ui/sheet";
-import HighlightCard from "~/components/clips/HighlightCard.vue";
-import MatchClipsGroupCard from "~/components/clips/MatchClipsGroupCard.vue";
 import RenderQueuePanel from "~/components/clips/RenderQueuePanel.vue";
-import Pagination from "~/components/Pagination.vue";
-import type { Clip } from "~/types/clip";
-import { useClipModal, type ClipQueueItem } from "~/composables/useClipModal";
-import FilterBar from "~/components/common/FilterBar.vue";
-import FilterMenu from "~/components/common/FilterMenu.vue";
-import {
-  filterTriggerBase,
-  filterTriggerIdle,
-  filterTriggerActive,
-  filterTriggerValueClasses,
-} from "~/utilities/tacticalClasses";
+import HighlightsBrowser from "~/components/clips/HighlightsBrowser.vue";
+import { useClipModal } from "~/composables/useClipModal";
 
 definePageMeta({
   persistQueryKeys: ["player", "since", "kills", "view", "sort"],
 });
 
-const { t } = useI18n();
-const clipQueueScope = "highlights-index";
-const { activeClipId, clearClipQueue, setClipQueue } = useClipModal();
-
-type Filter = "all" | "public" | "private";
+const { activeClipId } = useClipModal();
 
 const auth = useAuthStore();
-const isAdmin = computed(() => auth.isAdmin);
 const canCurate = computed(
   () =>
     auth.isAdmin ||
@@ -84,10 +34,6 @@ const canCurate = computed(
     auth.isTournamentOrganizer,
 );
 
-type ClipGroup = { matchId: string; clips: Clip[] };
-const groups = ref<ClipGroup[]>([]);
-const loading = ref(true);
-const visibilityFilter = ref<Filter>("all");
 const queueOpen = ref(false);
 
 // Auto-close the render-queue sheet when any clip modal opens so the
@@ -96,136 +42,6 @@ watch(activeClipId, (id) => {
   if (id && queueOpen.value) queueOpen.value = false;
 });
 
-type ViewMode = "matches" | "singles";
-
-const page = ref(1);
-const perPage = 24;
-const totalCount = ref(0);
-
-const flatClips = computed<Clip[]>(() => groups.value.flatMap((g) => g.clips));
-
-const route = useRoute();
-const router = useRouter();
-
-type SincePreset = "all" | "24h" | "7d" | "30d" | "90d";
-const SINCE_VALUES = ["all", "24h", "7d", "30d", "90d"] as const;
-const SINCE_OPTIONS = computed<Array<{ value: SincePreset; label: string }>>(
-  () =>
-    SINCE_VALUES.map((value) => ({
-      value,
-      label: t(`pages.highlights.since.${value}`),
-    })),
-);
-
-type KillsPreset = "any" | "2" | "3" | "4" | "5";
-const KILLS_VALUES = ["any", "2", "3", "4", "5"] as const;
-const KILLS_OPTIONS = computed<Array<{ value: KillsPreset; label: string }>>(
-  () =>
-    KILLS_VALUES.map((value) => ({
-      value,
-      label: t(`pages.highlights.kills.${value}`),
-    })),
-);
-
-const playerFilter = computed<string | null>(() => {
-  const v = route.query.player;
-  return typeof v === "string" && v.length > 0 ? v : null;
-});
-const sinceFilter = computed<SincePreset>(() =>
-  (SINCE_VALUES as readonly string[]).includes(route.query.since as string)
-    ? (route.query.since as SincePreset)
-    : "all",
-);
-const killsFilter = computed<KillsPreset>(() =>
-  (KILLS_VALUES as readonly string[]).includes(route.query.kills as string)
-    ? (route.query.kills as KillsPreset)
-    : "any",
-);
-const viewMode = computed<ViewMode>(() =>
-  route.query.view === "singles" ? "singles" : "matches",
-);
-
-type SortPreset = "recent" | "views";
-const SORT_VALUES = ["recent", "views"] as const;
-const SORT_OPTIONS = computed<Array<{ value: SortPreset; label: string }>>(() =>
-  SORT_VALUES.map((value) => ({
-    value,
-    label: t(`pages.highlights.sort.${value}`),
-  })),
-);
-const sortFilter = computed<SortPreset>(() =>
-  (SORT_VALUES as readonly string[]).includes(route.query.sort as string)
-    ? (route.query.sort as SortPreset)
-    : "recent",
-);
-
-function setSort(v: SortPreset) {
-  const next = { ...route.query } as Record<string, any>;
-  if (v === "recent") delete next.sort;
-  else next.sort = v;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-function setViewMode(v: ViewMode) {
-  const next = { ...route.query } as Record<string, any>;
-  if (v === "matches") delete next.view;
-  else next.view = v;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-function setSince(v: SincePreset) {
-  const next = { ...route.query } as Record<string, any>;
-  if (v === "all") delete next.since;
-  else next.since = v;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-function setKills(v: KillsPreset) {
-  const next = { ...route.query } as Record<string, any>;
-  if (v === "any") delete next.kills;
-  else next.kills = v;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-function clearPlayer() {
-  pickedPlayerName.value = null;
-  const next = { ...route.query } as Record<string, any>;
-  delete next.player;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-const pickedPlayerName = ref<string | null>(null);
-function selectPlayer(player: { steam_id: string; name: string } | null) {
-  if (!player?.steam_id) return;
-  pickedPlayerName.value = player.name;
-  const next = { ...route.query } as Record<string, any>;
-  next.player = player.steam_id;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-const playerFilterName = computed<string | null>(() => {
-  const sid = playerFilter.value;
-  if (!sid) return null;
-  for (const c of flatClips.value) {
-    if (c.target?.steam_id === sid) return c.target.name;
-  }
-  return pickedPlayerName.value;
-});
-
-function sinceCutoffIso(preset: SincePreset): string | null {
-  const ms: Record<SincePreset, number> = {
-    all: 0,
-    "24h": 24 * 60 * 60 * 1000,
-    "7d": 7 * 24 * 60 * 60 * 1000,
-    "30d": 30 * 24 * 60 * 60 * 1000,
-    "90d": 90 * 24 * 60 * 60 * 1000,
-  };
-  if (!ms[preset]) return null;
-  return new Date(Date.now() - ms[preset]).toISOString();
-}
-
-// Hasura aggregate subs need a non-empty selection set to push deltas, so
-// we subscribe to (id, status) and split active/queued client-side.
 const activeClips = ref(0);
 const queuedClips = ref(0);
 const pendingClips = computed(() => activeClips.value + queuedClips.value);
@@ -268,348 +84,9 @@ function subscribePending() {
 }
 watch(canCurate, subscribePending, { immediate: true });
 
-const hasActiveFilter = computed(
-  () =>
-    playerFilter.value !== null ||
-    sinceFilter.value !== "all" ||
-    killsFilter.value !== "any" ||
-    (isAdmin.value && visibilityFilter.value !== "all"),
-);
-
-// Count of narrowing filters applied — drives the mobile "Filters" badge.
-const activeFilterCount = computed(() => {
-  let n = 0;
-  if (playerFilter.value) n++;
-  if (sinceFilter.value !== "all") n++;
-  if (killsFilter.value !== "any") n++;
-  if (isAdmin.value && visibilityFilter.value !== "all") n++;
-  return n;
-});
-
-const sinceLabel = computed(
-  () => SINCE_OPTIONS.value.find((o) => o.value === sinceFilter.value)?.label,
-);
-const killsLabel = computed(
-  () => KILLS_OPTIONS.value.find((o) => o.value === killsFilter.value)?.label,
-);
-const sortLabel = computed(
-  () => SORT_OPTIONS.value.find((o) => o.value === sortFilter.value)?.label,
-);
-const visibilityLabel = computed(
-  () => adminFilters.value.find((o) => o.value === visibilityFilter.value)?.label,
-);
-
-function resetHighlightFilters() {
-  // One router.replace — chaining the individual setters each reads the same
-  // stale route.query snapshot, so only the last write survives (which would
-  // leave `since`/`kills` behind).
-  pickedPlayerName.value = null;
-  visibilityFilter.value = "all";
-  const next = { ...route.query } as Record<string, any>;
-  delete next.player;
-  delete next.since;
-  delete next.kills;
-  router.replace({ path: route.path, query: next, hash: route.hash });
-}
-
-// Kills is a heavily-used filter — it lives as its own left-side trigger (the
-// rest are bundled in the Filters menu). Single-select → closes on pick.
-const killsOpen = ref(false);
-
-const forceSingles = computed(
-  () => hasActiveFilter.value || sortFilter.value === "views",
-);
-
-const effectiveMode = computed<ViewMode>(() =>
-  forceSingles.value ? "singles" : viewMode.value,
-);
-
-const innerClipFilter = computed<Record<string, any>>(() => {
-  const f: Record<string, any> = {};
-  if (isAdmin.value && visibilityFilter.value !== "all") {
-    f.visibility = { _eq: visibilityFilter.value };
-  } else if (!isAdmin.value) {
-    f.visibility = { _eq: "public" };
-  }
-  if (playerFilter.value) {
-    f.target_steam_id = { _eq: playerFilter.value };
-  }
-  const cutoff = sinceCutoffIso(sinceFilter.value);
-  if (cutoff) {
-    f.created_at = { _gte: cutoff };
-  }
-  if (killsFilter.value !== "any") {
-    f.kills_count = { _gte: parseInt(killsFilter.value, 10) };
-  }
-  return f;
-});
-
-let dataFetchId = 0;
-async function fetchData() {
-  const myId = ++dataFetchId;
-  if (groups.value.length === 0) {
-    loading.value = true;
-  }
-  const filter = innerClipFilter.value;
-  const filterIsEmpty = Object.keys(filter).length === 0;
-
-  try {
-    if (effectiveMode.value === "singles") {
-      const { data } = await getGraphqlClient().query({
-        query: generateQuery({
-          match_clips: [
-            {
-              where: filterIsEmpty ? {} : filter,
-              order_by:
-                sortFilter.value === "views"
-                  ? [{ views_count: order_by.desc }]
-                  : [{ created_at: order_by.desc }],
-              limit: perPage,
-              offset: (page.value - 1) * perPage,
-            } as any,
-            matchClipFields,
-          ],
-        } as any),
-        fetchPolicy: "network-only",
-      });
-      if (myId !== dataFetchId) return;
-      const list: Clip[] = (data as any)?.match_clips ?? [];
-      groups.value = list.map((clip) => ({
-        matchId: clip.match_map?.match?.id ?? clip.id,
-        clips: [clip],
-      }));
-      return;
-    }
-
-    const orderColumn = isAdmin.value
-      ? "latest_clip_at"
-      : "public_latest_clip_at";
-    const baseFilter: Record<string, any> = isAdmin.value
-      ? { clips_count: { _gt: 0 } }
-      : { public_clips_count: { _gt: 0 } };
-    const groupWhere = filterIsEmpty
-      ? baseFilter
-      : { ...baseFilter, match_clips: filter };
-    const { data } = await getGraphqlClient().query({
-      query: generateQuery({
-        match_maps: [
-          {
-            where: groupWhere,
-            order_by: $("groups_order_by", "[match_maps_order_by!]!"),
-            limit: perPage,
-            offset: (page.value - 1) * perPage,
-          } as any,
-          {
-            id: true,
-            match: { id: true },
-            match_clips: [
-              {
-                where: filterIsEmpty ? {} : filter,
-                order_by: $("clips_order_by", "[match_clips_order_by!]!"),
-              },
-              matchClipFields,
-            ],
-          },
-        ],
-      } as any),
-      variables: {
-        groups_order_by:
-          sortFilter.value === "views"
-            ? [{ match_clips_aggregate: { sum: { views_count: order_by.desc } } }]
-            : [{ [orderColumn]: order_by.desc_nulls_last }],
-        clips_order_by:
-          sortFilter.value === "views"
-            ? [{ views_count: order_by.desc }]
-            : [{ created_at: order_by.desc }],
-      },
-      fetchPolicy: "network-only",
-    });
-    if (myId !== dataFetchId) return;
-    const rows: Array<{
-      id: string;
-      match?: { id: string } | null;
-      match_clips: Clip[];
-    }> = (data as any)?.match_maps ?? [];
-    groups.value = rows
-      .filter((g) => (g.match_clips?.length ?? 0) > 0)
-      .map((g) => ({
-        matchId: g.match?.id ?? g.id,
-        clips: g.match_clips ?? [],
-      }));
-  } catch (err) {
-    if (myId === dataFetchId) {
-      console.error("[highlights] fetch error:", err);
-    }
-  } finally {
-    if (myId === dataFetchId) {
-      loading.value = false;
-    }
-  }
-}
-
-let aggregateFetchId = 0;
-async function fetchAggregate() {
-  const myId = ++aggregateFetchId;
-  const filter = innerClipFilter.value;
-  const filterIsEmpty = Object.keys(filter).length === 0;
-
-  try {
-    if (effectiveMode.value === "singles") {
-      const { data } = await getGraphqlClient().query({
-        query: generateQuery({
-          match_clips_aggregate: [
-            { where: filterIsEmpty ? {} : filter } as any,
-            { aggregate: { count: true } },
-          ],
-        } as any),
-        fetchPolicy: "network-only",
-      });
-      if (myId !== aggregateFetchId) return;
-      totalCount.value =
-        (data as any)?.match_clips_aggregate?.aggregate?.count ?? 0;
-      return;
-    }
-
-    const baseFilter: Record<string, any> = isAdmin.value
-      ? { clips_count: { _gt: 0 } }
-      : { public_clips_count: { _gt: 0 } };
-    const groupWhere = filterIsEmpty
-      ? baseFilter
-      : { ...baseFilter, match_clips: filter };
-    const { data } = await getGraphqlClient().query({
-      query: generateQuery({
-        match_maps_aggregate: [
-          { where: groupWhere } as any,
-          { aggregate: { count: true } },
-        ],
-      } as any),
-      fetchPolicy: "network-only",
-    });
-    if (myId !== aggregateFetchId) return;
-    totalCount.value =
-      (data as any)?.match_maps_aggregate?.aggregate?.count ?? 0;
-  } catch (err) {
-    if (myId === aggregateFetchId) {
-      console.error("[highlights] aggregate fetch error:", err);
-    }
-  }
-}
-
-fetchData();
-fetchAggregate();
-
-watch(
-  [
-    playerFilter,
-    sinceFilter,
-    killsFilter,
-    isAdmin,
-    visibilityFilter,
-    viewMode,
-    sortFilter,
-  ],
-  () => {
-    if (page.value !== 1) {
-      page.value = 1;
-    } else {
-      fetchData();
-    }
-    fetchAggregate();
-  },
-);
-watch(page, () => fetchData());
-
 onBeforeUnmount(() => {
   pendingSub?.unsubscribe();
-  clearClipQueue(clipQueueScope);
-});
-
-const showMap = computed(() => {
-  const seen = new Set<string>();
-  for (const c of flatClips.value) {
-    const name = c.match_map?.map?.name;
-    if (name) seen.add(name);
-    if (seen.size > 1) return true;
-  }
-  return false;
 });
-
-function clipQueueItem(c: Clip): ClipQueueItem {
-  return {
-    id: c.id,
-    title: c.title,
-    playerName: c.target?.name ?? null,
-    teamName: null,
-    durationMs: c.duration_ms,
-    thumbnailUrl: c.thumbnail_download_url,
-    posterUrl: c.match_map?.map?.poster ?? null,
-  };
-}
-
-watchEffect(() => {
-  setClipQueue(flatClips.value.map(clipQueueItem), clipQueueScope);
-});
-
-const hasClips = computed(() => groups.value.length > 0);
-
-type GridItem =
-  | { kind: "single"; clip: Clip }
-  | { kind: "group"; matchId: string; clips: Clip[] };
-const gridItems = computed<GridItem[]>(() => {
-  const items: GridItem[] = [];
-  for (const g of groups.value) {
-    if (g.clips.length === 0) continue;
-    if (g.clips.length === 1) {
-      items.push({ kind: "single", clip: g.clips[0] });
-      continue;
-    }
-    items.push({ kind: "group", matchId: g.matchId, clips: g.clips });
-  }
-  return items;
-});
-
-// Changes whenever the rendered set changes (filter/sort/page), driving the
-// grid cross-fade so a new result set eases in instead of snapping.
-const gridKey = computed(() =>
-  gridItems.value
-    .map((i) => (i.kind === "single" ? `s:${i.clip.id}` : `g:${i.matchId}`))
-    .join(","),
-);
-
-const adminFilters = computed<
-  Array<{ value: Filter; label: string; icon?: any }>
->(() => [
-  { value: "all", label: t("pages.highlights.visibility_filter.all") },
-  {
-    value: "public",
-    label: t("pages.highlights.visibility_filter.public"),
-    icon: Globe,
-  },
-  {
-    value: "private",
-    label: t("pages.highlights.visibility_filter.private"),
-    icon: Lock,
-  },
-]);
-
-const viewModeOptions = computed<
-  Array<{
-    value: ViewMode;
-    label: string;
-    icon: any;
-  }>
->(() => [
-  {
-    value: "matches",
-    label: t("pages.highlights.view_modes.matches"),
-    icon: Layers,
-  },
-  {
-    value: "singles",
-    label: t("pages.highlights.view_modes.singles"),
-    icon: Film,
-  },
-]);
 </script>
 
 <template>
@@ -663,320 +140,5 @@ const viewModeOptions = computed<
     </TacticalPageHeader>
   </PageTransition>
 
-  <PageTransition :delay="60" class="mt-4">
-    <FilterBar>
-      <!-- Player (left, widely used) -->
-      <button
-        v-if="playerFilter"
-        type="button"
-        :class="[filterTriggerBase, filterTriggerActive]"
-        :title="$t('pages.highlights.clear_player_filter')"
-        @click="clearPlayer"
-      >
-        <User class="h-3.5 w-3.5" />
-        <span class="max-w-[10rem] truncate normal-case tracking-normal">
-          {{ playerFilterName ?? $t("clips.default_player") }}
-        </span>
-        <X class="h-3 w-3 opacity-70" />
-      </button>
-      <PlayerSearch
-        v-else
-        :label="$t('pages.highlights.filter_by_player')"
-        :self="true"
-        @selected="selectPlayer"
-      >
-        <button
-          type="button"
-          :class="[filterTriggerBase, filterTriggerIdle]"
-          :title="$t('pages.highlights.filter_by_player')"
-        >
-          <User class="h-3.5 w-3.5" />
-          {{ $t("clips.default_player") }}
-          <ChevronDown class="h-3 w-3 opacity-50" />
-        </button>
-      </PlayerSearch>
-
-      <!-- Kills (widely used) — left trigger -->
-      <Popover v-model:open="killsOpen">
-        <PopoverTrigger as-child>
-          <button
-            type="button"
-            :class="[
-              filterTriggerBase,
-              killsFilter !== 'any' ? filterTriggerActive : filterTriggerIdle,
-            ]"
-          >
-            <Crosshair class="h-3.5 w-3.5" />
-            {{ $t("pages.highlights.filter_labels.kills") }}
-            <span v-if="killsFilter !== 'any'" :class="filterTriggerValueClasses">
-              {{ killsLabel }}
-            </span>
-            <ChevronDown class="h-3 w-3 opacity-50" />
-          </button>
-        </PopoverTrigger>
-        <PopoverContent align="start" class="w-44 p-1">
-          <button
-            v-for="opt in KILLS_OPTIONS"
-            :key="opt.value"
-            type="button"
-            @click="
-              setKills(opt.value);
-              killsOpen = false;
-            "
-            class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
-          >
-            <span>{{ opt.label }}</span>
-            <Check
-              v-if="killsFilter === opt.value"
-              class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
-            />
-          </button>
-        </PopoverContent>
-      </Popover>
-
-      <!-- View mode — pinned to the right of the trigger row -->
-      <div
-        class="relative ml-auto flex items-center rounded-full border border-border/60 bg-muted/30 p-0.5"
-        role="group"
-        :aria-label="$t('pages.highlights.view_mode')"
-      >
-          <!-- Sliding active-tab indicator -->
-          <span
-            aria-hidden="true"
-            class="absolute inset-y-0.5 left-0.5 w-[calc(50%-0.125rem)] rounded-full bg-[hsl(var(--tac-amber))] shadow-[0_0_12px_-2px_hsl(var(--tac-amber)/0.6)] transition-transform duration-300 ease-out"
-            :style="{
-              transform:
-                effectiveMode === 'singles'
-                  ? 'translateX(100%)'
-                  : 'translateX(0)',
-            }"
-          />
-          <button
-            v-for="opt in viewModeOptions"
-            :key="opt.value"
-            type="button"
-            :disabled="forceSingles && opt.value === 'matches'"
-            :title="
-              forceSingles && opt.value === 'matches'
-                ? $t('pages.highlights.view_mode_filter_disabled')
-                : undefined
-            "
-            :class="[
-              'relative z-10 inline-flex flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-full px-4 py-1 text-xs transition-colors',
-              effectiveMode === opt.value
-                ? 'font-bold text-black'
-                : 'text-muted-foreground hover:text-foreground',
-              forceSingles && opt.value === 'matches'
-                ? 'cursor-not-allowed opacity-40 hover:text-muted-foreground'
-                : '',
-            ]"
-            :aria-pressed="effectiveMode === opt.value"
-            @click="setViewMode(opt.value)"
-          >
-            <component :is="opt.icon" class="h-3 w-3" />
-            {{ opt.label }}
-          </button>
-        </div>
-
-      <!-- Filters (Visibility/Date/Kills/Sort bundled) + grouped reset -->
-      <FilterMenu
-        :count="
-          (isAdmin && visibilityFilter !== 'all' ? 1 : 0) +
-          (sinceFilter !== 'all' ? 1 : 0) +
-          (sortFilter !== 'recent' ? 1 : 0)
-        "
-        :active="
-          (isAdmin && visibilityFilter !== 'all') ||
-          sinceFilter !== 'all' ||
-          sortFilter !== 'recent'
-        "
-        :show-reset="hasActiveFilter"
-        content-class="w-[min(92vw,260px)] space-y-3 p-2"
-        @reset="resetHighlightFilters"
-      >
-        <!-- Visibility (admin) -->
-        <div v-if="isAdmin" class="space-y-0.5">
-          <span
-            class="block px-2 pb-1 font-mono text-[0.6rem] uppercase tracking-[0.16em] text-muted-foreground"
-          >
-            {{ $t("pages.highlights.filter_labels.visibility") }}
-          </span>
-          <button
-            v-for="opt in adminFilters"
-            :key="opt.value"
-            type="button"
-            @click="visibilityFilter = opt.value"
-            class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
-          >
-            <span class="flex items-center gap-2">
-              <component :is="opt.icon" v-if="opt.icon" class="h-3.5 w-3.5" />
-              {{ opt.label }}
-            </span>
-            <Check
-              v-if="visibilityFilter === opt.value"
-              class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
-            />
-          </button>
-        </div>
-
-        <!-- Date -->
-        <div
-          class="space-y-0.5"
-          :class="isAdmin ? 'border-t border-border/50 pt-3' : ''"
-        >
-          <span
-            class="block px-2 pb-1 font-mono text-[0.6rem] uppercase tracking-[0.16em] text-muted-foreground"
-          >
-            {{ $t("pages.highlights.filter_labels.date") }}
-          </span>
-          <button
-            v-for="opt in SINCE_OPTIONS"
-            :key="opt.value"
-            type="button"
-            @click="setSince(opt.value)"
-            class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
-          >
-            <span>{{ opt.label }}</span>
-            <Check
-              v-if="sinceFilter === opt.value"
-              class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
-            />
-          </button>
-        </div>
-
-        <!-- Sort -->
-        <div class="space-y-0.5 border-t border-border/50 pt-3">
-          <span
-            class="block px-2 pb-1 font-mono text-[0.6rem] uppercase tracking-[0.16em] text-muted-foreground"
-          >
-            {{ $t("pages.highlights.filter_labels.sort") }}
-          </span>
-          <button
-            v-for="opt in SORT_OPTIONS"
-            :key="opt.value"
-            type="button"
-            @click="setSort(opt.value)"
-            class="flex w-full items-center justify-between rounded px-2 py-1.5 text-xs text-foreground/90 transition-colors hover:bg-muted/50"
-          >
-            <span>{{ opt.label }}</span>
-            <Check
-              v-if="sortFilter === opt.value"
-              class="h-3.5 w-3.5 text-[hsl(var(--tac-amber))]"
-            />
-          </button>
-        </div>
-      </FilterMenu>
-    </FilterBar>
-  </PageTransition>
-
-  <PageTransition v-if="loading" :delay="80" class="mt-6">
-    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-      <Skeleton
-        v-for="i in 8"
-        :key="i"
-        class="aspect-video w-full rounded-lg"
-      />
-    </div>
-  </PageTransition>
-
-  <PageTransition v-else-if="!hasClips" :delay="80" class="mt-6">
-    <Empty>
-      <EmptyTitle>
-        {{
-          playerFilter || sinceFilter !== "all" || killsFilter !== "any"
-            ? $t("pages.highlights.empty.no_match_filters")
-            : $t("pages.highlights.empty.no_clips_yet")
-        }}
-      </EmptyTitle>
-      <EmptyDescription>
-        <template
-          v-if="playerFilter || sinceFilter !== 'all' || killsFilter !== 'any'"
-        >
-          {{ $t("pages.highlights.empty.try_widening") }}
-        </template>
-        <template v-else-if="isAdmin">
-          {{ $t("pages.highlights.empty.try_different_admin") }}
-        </template>
-        <template v-else>
-          {{ $t("pages.highlights.empty.check_back_soon") }}
-        </template>
-      </EmptyDescription>
-      <div
-        v-if="playerFilter || sinceFilter !== 'all' || killsFilter !== 'any'"
-        class="mt-3 flex flex-wrap items-center justify-center gap-2"
-      >
-        <button
-          v-if="playerFilter"
-          type="button"
-          :class="[filterTriggerBase, filterTriggerIdle]"
-          @click="clearPlayer"
-        >
-          <X class="h-3 w-3" />
-          {{ $t("pages.highlights.empty.clear_player") }}
-        </button>
-        <button
-          v-if="sinceFilter !== 'all'"
-          type="button"
-          :class="[filterTriggerBase, filterTriggerIdle]"
-          @click="setSince('all')"
-        >
-          <X class="h-3 w-3" />
-          {{ $t("pages.highlights.empty.clear_date") }}
-        </button>
-        <button
-          v-if="killsFilter !== 'any'"
-          type="button"
-          :class="[filterTriggerBase, filterTriggerIdle]"
-          @click="setKills('any')"
-        >
-          <X class="h-3 w-3" />
-          {{ $t("pages.highlights.empty.clear_kills") }}
-        </button>
-      </div>
-    </Empty>
-  </PageTransition>
-
-  <PageTransition v-else :delay="80" class="mt-6">
-    <Transition name="grid-fade" mode="out-in">
-      <div
-        :key="gridKey"
-        class="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
-      >
-        <template v-for="item in gridItems">
-          <MatchClipsGroupCard
-            v-if="item.kind === 'group'"
-            :key="`group-${item.matchId}`"
-            :match-id="item.matchId"
-            :clips="item.clips"
-          />
-          <HighlightCard
-            v-else
-            :key="`single-${item.clip.id}`"
-            :clip="item.clip"
-            :show-map="showMap"
-          />
-        </template>
-      </div>
-    </Transition>
-  </PageTransition>
-
-  <Pagination
-    v-if="!loading && totalCount > perPage"
-    class="mt-6"
-    :page="page"
-    :per-page="perPage"
-    :total="totalCount"
-    @page="(p) => (page = p)"
-  />
+  <HighlightsBrowser class="mt-4" />
 </template>
-
-<style scoped>
-.grid-fade-enter-active,
-.grid-fade-leave-active {
-  transition: opacity 0.22s ease;
-}
-.grid-fade-enter-from,
-.grid-fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/tests/components/clips/HighlightsBrowser.spec.ts b/tests/components/clips/HighlightsBrowser.spec.ts
new file mode 100644
index 000000000..ffeb7cb40
--- /dev/null
+++ b/tests/components/clips/HighlightsBrowser.spec.ts
@@ -0,0 +1,88 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { print } from "graphql";
+import HighlightsBrowser from "~/components/clips/HighlightsBrowser.vue";
+import EventPlayerPicker from "~/components/events/EventPlayerPicker.vue";
+import PlayerSearch from "~/components/PlayerSearch.vue";
+
+const { query } = vi.hoisted(() => ({ query: vi.fn() }));
+
+vi.mock("~/graphql/getGraphqlClient", () => ({
+  default: () => ({ query }),
+}));
+
+vi.mock("@vue/apollo-composable", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("@vue/apollo-composable")>()),
+  useApolloClient: () => ({ client: { query } }),
+}));
+
+const EVENT_SCOPE = 'event_links:{event_id:{_eq:"event-1"}}';
+
+function sentQueries(root: string) {
+  return query.mock.calls
+    .map(([options]) => print(options.query).replace(/\s+/g, ""))
+    .filter((text) => text.includes(`${root}(`));
+}
+
+async function mountBrowser(route: string, eventId?: string) {
+  query.mockResolvedValue({ data: {} });
+  const wrapper = await mountSuspended(HighlightsBrowser, {
+    route,
+    props: eventId ? { eventId } : {},
+  });
+  await flushPromises();
+  return wrapper;
+}
+
+beforeEach(() => {
+  query.mockReset();
+});
+
+describe("HighlightsBrowser", () => {
+  it("scopes grouped match clips and their count to the event's matches", async () => {
+    await mountBrowser("/events/event-1?tab=highlights", "event-1");
+
+    const groups = sentQueries("match_maps");
+    const counts = sentQueries("match_maps_aggregate");
+    expect(groups.length).toBeGreaterThan(0);
+    expect(counts.length).toBeGreaterThan(0);
+    for (const text of [...groups, ...counts]) {
+      expect(text).toContain(`match:{${EVENT_SCOPE}}`);
+    }
+  });
+
+  it("scopes single clips and their count to the event's matches", async () => {
+    await mountBrowser("/events/event-1?tab=highlights&sort=views", "event-1");
+
+    const clips = sentQueries("match_clips");
+    const counts = sentQueries("match_clips_aggregate");
+    expect(clips.length).toBeGreaterThan(0);
+    expect(counts.length).toBeGreaterThan(0);
+    for (const text of [...clips, ...counts]) {
+      expect(text).toContain(`match_map:{match:{${EVENT_SCOPE}}}`);
+    }
+  });
+
+  it("lists the event's participants in the player filter", async () => {
+    const wrapper = await mountBrowser(
+      "/events/event-1?tab=highlights",
+      "event-1",
+    );
+
+    expect(wrapper.findComponent(EventPlayerPicker).exists()).toBe(true);
+    expect(wrapper.findComponent(PlayerSearch).exists()).toBe(false);
+  });
+
+  it("stays unscoped with the global player search on the highlights page", async () => {
+    const wrapper = await mountBrowser("/highlights");
+
+    const sent = query.mock.calls.map(([options]) => print(options.query));
+    expect(sent.length).toBeGreaterThan(0);
+    for (const text of sent) {
+      expect(text).not.toContain("event_links");
+    }
+    expect(wrapper.findComponent(PlayerSearch).exists()).toBe(true);
+    expect(wrapper.findComponent(EventPlayerPicker).exists()).toBe(false);
+  });
+});
diff --git a/tests/components/events/EventHighlights.spec.ts b/tests/components/events/EventHighlights.spec.ts
deleted file mode 100644
index 79fdd64c2..000000000
--- a/tests/components/events/EventHighlights.spec.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { flushPromises } from "@vue/test-utils";
-import { mountSuspended } from "@nuxt/test-utils/runtime";
-import EventHighlights from "~/components/events/EventHighlights.vue";
-import EventPlayerFilter from "~/components/events/EventPlayerFilter.vue";
-
-const { subscribe, emitters } = vi.hoisted(() => {
-  const emitters: Array<(value: unknown) => void> = [];
-  const subscribe = vi.fn((_options: any) => ({
-    subscribe: ({ next }: { next: (value: unknown) => void }) => {
-      emitters.push(next);
-      return { unsubscribe: () => {} };
-    },
-  }));
-  return { subscribe, emitters };
-});
-
-vi.mock("@vue/apollo-composable", async (importOriginal) => ({
-  ...(await importOriginal<typeof import("@vue/apollo-composable")>()),
-  useApolloClient: () => ({ client: { subscribe } }),
-}));
-
-function lastVariables() {
-  return subscribe.mock.calls.at(-1)![0].variables;
-}
-
-async function emitClips(clips: Array<{ id: string }>) {
-  emitters.at(-1)!({ data: { match_clips: clips } });
-  await flushPromises();
-}
-
-async function mountHighlights() {
-  const wrapper = await mountSuspended(EventHighlights, {
-    props: { eventId: "event-1" },
-    global: {
-      stubs: {
-        HighlightCard: {
-          props: ["clip"],
-          template: '<div class="highlight-card">{{ clip.id }}</div>',
-        },
-      },
-    },
-  });
-  await flushPromises();
-  return wrapper;
-}
-
-beforeEach(() => {
-  subscribe.mockClear();
-  emitters.length = 0;
-});
-
-describe("EventHighlights", () => {
-  it("subscribes to public clips from every match linked to the event, most viewed first", async () => {
-    await mountHighlights();
-
-    expect(lastVariables().where).toEqual({
-      _and: [
-        { visibility: { _eq: "public" } },
-        {
-          match_map: {
-            match: { event_links: { event_id: { _eq: "event-1" } } },
-          },
-        },
-      ],
-    });
-    expect(lastVariables().orderBy[0]).toEqual({
-      views_count: "desc_nulls_last",
-    });
-  });
-
-  it("shows only the empty state when the event has no highlights", async () => {
-    const wrapper = await mountHighlights();
-    await emitClips([]);
-
-    expect(wrapper.text()).toContain(
-      "No highlights from this event's matches yet.",
-    );
-    expect(wrapper.findComponent(EventPlayerFilter).exists()).toBe(false);
-  });
-
-  it("narrows to one player and keeps the filter when that player has none", async () => {
-    const wrapper = await mountHighlights();
-    await emitClips([{ id: "clip-1" }]);
-    expect(wrapper.findAll(".highlight-card")).toHaveLength(1);
-
-    wrapper.findComponent(EventPlayerFilter).vm.$emit("update:modelValue", {
-      steam_id: "76561198000000001",
-      name: "Roster Player",
-    });
-    await flushPromises();
-
-    expect(lastVariables().where._and).toContainEqual({
-      target_steam_id: { _eq: "76561198000000001" },
-    });
-
-    await emitClips([]);
-
-    expect(wrapper.text()).toContain(
-      "No highlights of this player at this event.",
-    );
-    expect(wrapper.findComponent(EventPlayerFilter).exists()).toBe(true);
-  });
-
-  it("resubscribes newest first when switched to most recent", async () => {
-    const wrapper = await mountHighlights();
-    await emitClips([{ id: "clip-1" }]);
-
-    const recent = wrapper
-      .findAll("button")
-      .find((button) => button.text() === "Most recent");
-    expect(recent).toBeTruthy();
-    await recent!.trigger("click");
-    await flushPromises();
-
-    expect(lastVariables().orderBy).toEqual([{ created_at: "desc" }]);
-  });
-});