feature: an amber ring marks your team in the match header and its stat tables

components/match/ClutchTeamPanel.vue

@@ -75,11 +75,25 @@ const outcomeClass = (outcome: ClutchOutcome) => {
   <section
     class="relative border border-border bg-[hsl(var(--card)/0.2)]"
   >
-    <header class="px-4 py-3 border-b border-border">
+    <header
+      class="px-4 py-3 border-b border-border"
+      :class="
+        lineup.is_on_lineup &&
+        'shadow-[inset_2px_0_0_hsl(var(--tac-amber)/0.55)]'
+      "
+    >
       <div
         class="flex items-center justify-between gap-3 mb-2 font-mono text-[0.65rem] tracking-[0.22em] uppercase text-muted-foreground"
       >
-        <span class="truncate text-foreground/90">{{ lineup.name }}</span>
+        <span
+          class="truncate"
+          :class="
+            lineup.is_on_lineup
+              ? 'text-[hsl(var(--tac-amber))]'
+              : 'text-foreground/90'
+          "
+          >{{ lineup.name }}</span
+        >
         <span class="shrink-0">
           <AnimatedStat :value="totals.won" /> /
           <AnimatedStat :value="totals.total" />

components/match/LineupAimStats.vue

@@ -6,7 +6,10 @@ import AnimatedStat from "~/components/AnimatedStat.vue";
 import StatChevron from "~/components/StatChevron.vue";
 import { useTableSort } from "~/composables/useTableSort";
 import { useAimColumns } from "~/composables/useMatchTableColumns";
-import { useCurrentUserRow } from "~/composables/useCurrentUserRow";
+import {
+  teamHeadClass,
+  useCurrentUserRow,
+} from "~/composables/useCurrentUserRow";
 
 const { visibility: aimVis } = useAimColumns();
 const { rowClass, stickyCellClass } = useCurrentUserRow();
@@ -51,7 +54,8 @@ const { sortKey, sortDir, toggle, sortRows } = useTableSort<string>();
         <TableRow>
           <TableHead
             v-if="!hideMember"
-            class="w-[110px] md:w-[220px] text-left whitespace-nowrap sticky left-0 z-20 bg-card border-r border-border shadow-[3px_0_6px_-3px_hsl(0_0%_0%/0.7)] [transform:translateZ(0)]"
+            class="w-[110px] md:w-[220px] text-left whitespace-nowrap sticky left-0 z-20 bg-card border-r border-border [transform:translateZ(0)]"
+            :class="teamHeadClass(lp)"
           >
             {{ lp.name }}
           </TableHead>

components/match/LineupBuyTypes.vue

@@ -646,7 +646,12 @@ const expandedRows = computed(() =>
             class="text-[0.6rem] uppercase tracking-[0.16em] truncate"
             :class="lpIdx === 0 ? 'text-[#fbbf24]' : 'text-[#38bdf8]'"
           >
-            {{ lp.name }}
+            <span
+              v-if="lp.is_on_lineup"
+              aria-hidden="true"
+              class="mr-1.5 inline-block size-1.5 rounded-full bg-[hsl(var(--tac-amber))] align-middle"
+            ></span
+            >{{ lp.name }}
           </span>
           <template v-if="(lpIdx === 0 ? row.aRounds : row.bRounds) > 0">
             <div

components/match/LineupOpeningDuels.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { teamHeadClass } from "~/composables/useCurrentUserRow";
 import { computed, ref, watch, onUnmounted } from "vue";
 import { useApolloClient } from "@vue/apollo-composable";
 import gql from "graphql-tag";
@@ -226,7 +227,8 @@ function sortGettersFor(lp: any): Record<string, (m: any) => unknown> {
       >
         <TableRow>
           <TableHead
-            class="w-[110px] md:w-[220px] text-left whitespace-nowrap sticky left-0 z-20 bg-card border-r border-border shadow-[3px_0_6px_-3px_hsl(0_0%_0%/0.7)] [transform:translateZ(0)]"
+            class="w-[110px] md:w-[220px] text-left whitespace-nowrap sticky left-0 z-20 bg-card border-r border-border [transform:translateZ(0)]"
+            :class="teamHeadClass(lp)"
           >
             {{ lp.name }}
           </TableHead>

components/match/LineupOverview.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { teamHeadClass } from "~/composables/useCurrentUserRow";
 import LineupOverviewRow from "~/components/match/LineupOverviewRow.vue";
 import SortableTableHead from "~/components/common/SortableTableHead.vue";
 import StatLabel from "~/components/common/StatLabel.vue";
@@ -154,7 +155,8 @@ import {
         <TableRow>
           <TableHead
             v-if="!hideMember"
-            class="w-[110px] md:w-[220px] text-left sticky left-0 z-20 bg-card border-r border-border shadow-[3px_0_6px_-3px_hsl(0_0%_0%/0.7)] touch-pan-y [transform:translateZ(0)]"
+            class="w-[110px] md:w-[220px] text-left sticky left-0 z-20 bg-card border-r border-border touch-pan-y [transform:translateZ(0)]"
+            :class="teamHeadClass(lp)"
           >
             <div class="flex items-center gap-1 md:gap-4">
               <div

components/match/LineupTradeStats.vue

@@ -5,7 +5,10 @@ import SortableTableHead from "~/components/common/SortableTableHead.vue";
 import AnimatedStat from "~/components/AnimatedStat.vue";
 import { useTableSort } from "~/composables/useTableSort";
 import { useTradeColumns } from "~/composables/useMatchTableColumns";
-import { useCurrentUserRow } from "~/composables/useCurrentUserRow";
+import {
+  teamHeadClass,
+  useCurrentUserRow,
+} from "~/composables/useCurrentUserRow";
 
 const { visibility: tradeVis } = useTradeColumns();
 const { rowClass, stickyCellClass } = useCurrentUserRow();
@@ -80,7 +83,8 @@ const tradeColumns = computed(() =>
         <TableRow>
           <TableHead
             v-if="!hideMember"
-            class="w-[110px] md:w-[220px] text-left whitespace-nowrap sticky left-0 z-20 bg-card border-r border-border shadow-[3px_0_6px_-3px_hsl(0_0%_0%/0.7)] [transform:translateZ(0)]"
+            class="w-[110px] md:w-[220px] text-left whitespace-nowrap sticky left-0 z-20 bg-card border-r border-border [transform:translateZ(0)]"
+            :class="teamHeadClass(lp)"
           >
             {{ lp.name }}
           </TableHead>

components/match/MatchHeader.vue

@@ -126,6 +126,8 @@ const teams = computed(() =>
       mapsWon: maps.value.filter((m) => id && m.winning_lineup_id === id)
         .length,
       won: isEnded.value && !!id && props.match.winning_lineup_id === id,
+      // Your side gets an amber ring on its crest.
+      mine: !!lineup?.is_on_lineup,
       lost:
         isEnded.value &&
         !!props.match.winning_lineup_id &&
@@ -267,8 +269,13 @@ const resultText = computed(() =>
             :to="team.teamId ? `/teams/${team.teamId}` : undefined"
             aria-hidden="true"
             :tabindex="team.teamId ? -1 : undefined"
-            class="grid size-14 shrink-0 place-items-center overflow-hidden rounded-[10px] bg-muted text-sm font-extrabold tracking-wide text-foreground/85 shadow-[0_8px_24px_-8px_rgb(0_0_0/0.8)] ring-1 ring-inset ring-white/10"
-            :class="team.teamId && 'transition-opacity hover:opacity-80'"
+            class="grid size-14 shrink-0 place-items-center overflow-hidden rounded-[10px] bg-muted text-sm font-extrabold tracking-wide text-foreground/85 shadow-[0_8px_24px_-8px_rgb(0_0_0/0.8)]"
+            :class="[
+              team.mine
+                ? 'ring-2 ring-[hsl(var(--tac-amber))]'
+                : 'ring-1 ring-inset ring-white/10',
+              team.teamId && 'transition-opacity hover:opacity-80',
+            ]"
           >
             <img
               v-if="team.crest"
@@ -422,7 +429,12 @@ const resultText = computed(() =>
       >
         <span
           aria-hidden="true"
-          class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-lg bg-muted text-xs font-extrabold tracking-wide text-foreground/85 ring-1 ring-inset ring-white/10"
+          class="grid size-10 shrink-0 place-items-center overflow-hidden rounded-lg bg-muted text-xs font-extrabold tracking-wide text-foreground/85"
+          :class="
+            team.mine
+              ? 'ring-2 ring-[hsl(var(--tac-amber))]'
+              : 'ring-1 ring-inset ring-white/10'
+          "
         >
           <img
             v-if="team.crest"

components/match/MatchTeamStats.vue

@@ -553,6 +553,7 @@ const sideComparison = computed(() => {
                     rounds: row.a.rounds,
                     comp: row.a.comp,
                     text: 'text-[#fbbf24]',
+                    mine: teamA?.is_on_lineup,
                   },
                   {
                     id: 'b',
@@ -562,6 +563,7 @@ const sideComparison = computed(() => {
                     rounds: row.b.rounds,
                     comp: row.b.comp,
                     text: 'text-[#38bdf8]',
+                    mine: teamB?.is_on_lineup,
                   },
                 ]"
                 :key="team.id"
@@ -571,7 +573,12 @@ const sideComparison = computed(() => {
                   class="w-20 sm:w-28 shrink-0 truncate text-xs font-semibold uppercase tracking-[0.1em]"
                   :class="team.text"
                 >
-                  {{ team.name }}
+                  <span
+                    v-if="team.mine"
+                    aria-hidden="true"
+                    class="mr-1.5 inline-block size-1.5 rounded-full bg-[hsl(var(--tac-amber))] align-middle"
+                  ></span
+                  >{{ team.name }}
                 </span>
                 <!-- One bar: fills to win rate, internally split by the buy mix
                      of the rounds the team won (counts/rounds sum to win%). -->

composables/useCurrentUserRow.ts

@@ -15,6 +15,14 @@ const ROW_CLASS = "";
 const STICKY_CELL_CLASS =
   "bg-card group-hover:bg-muted shadow-[inset_2px_0_0_hsl(var(--tac-amber)/0.55),3px_0_6px_-3px_hsl(0_0%_0%/0.7)]";
 
+// The viewer's own team in the same tables: its header cell gets the rail
+// their row has, and its name the accent.
+export function teamHeadClass(lineup: any) {
+  return lineup?.is_on_lineup
+    ? "text-[hsl(var(--tac-amber))] shadow-[inset_2px_0_0_hsl(var(--tac-amber)/0.55),3px_0_6px_-3px_hsl(0_0%_0%/0.7)]"
+    : "shadow-[3px_0_6px_-3px_hsl(0_0%_0%/0.7)]";
+}
+
 // Lets a surface pin a different player's row (e.g. the profile being viewed)
 // instead of the logged-in user's.
 const FOCUS_ROW_STEAM_ID: InjectionKey<Ref<string | null>> =