feature: phone cleanup across watch, clips, events, matches, servers and the left nav (#974)

Author: lukepolo

components/MatchOptions.vue

@@ -93,6 +93,7 @@ import { SELECT_NONE, nullableSelectField } from "~/utilities/selectNone";
               square
               size="lg"
               block
+              class="max-md:grid max-md:grid-cols-2 max-md:[&>button:last-of-type:nth-of-type(odd)]:col-span-2"
               @update:model-value="
                 (value) => !mapPoolLocked && form.setFieldValue('type', value)
               "
@@ -110,8 +111,8 @@ import { SELECT_NONE, nullableSelectField } from "~/utilities/selectNone";
 
       <FormField name="map_pool" v-if="!isRush">
         <FormItem>
-          <Card>
-            <div class="p-6 space-y-6">
+          <Card class="max-md:border-0 max-md:bg-transparent max-md:shadow-none">
+            <div class="p-6 space-y-6 max-md:p-0">
               <div
                 class="grid gap-6"
                 :class="hideBestOf ? 'sm:grid-cols-1' : 'sm:grid-cols-2'"
@@ -203,7 +204,7 @@ import { SELECT_NONE, nullableSelectField } from "~/utilities/selectNone";
               </div>
 
               <div
-                class="flex items-center justify-between gap-3 border-t border-border pt-4"
+                class="flex items-center justify-between gap-3 border-t border-border pt-4 max-md:flex-wrap max-md:gap-y-2"
               >
                 <div
                   class="min-w-0 font-mono text-[0.7rem] tracking-[0.22em] uppercase text-muted-foreground"
@@ -235,7 +236,7 @@ import { SELECT_NONE, nullableSelectField } from "~/utilities/selectNone";
                   enter-from-class="opacity-0"
                   leave-to-class="opacity-0"
                 >
-                <div v-show="form.values.map_veto" class="shrink-0">
+                <div v-show="form.values.map_veto" class="ml-auto shrink-0">
                   <FormField
                     v-slot="{ value, handleChange }"
                     name="custom_map_pool"

components/MatchTableRow.vue

@@ -1129,7 +1129,6 @@ import MatchOverviewDrawer from "~/components/match/MatchOverviewDrawer.vue";
               </span>
             </span>
             <ScrollArrows
-              v-if="filteredPlayerClips.length > 1"
               :can-left="highlightsScrollRef?.state?.canScrollLeft"
               :can-right="highlightsScrollRef?.state?.canScrollRight"
               @scroll="(d) => highlightsScrollRef?.scrollByDirection(d)"

components/clips/ClipDetailModal.vue

@@ -75,6 +75,8 @@ import { useClipModal } from "~/composables/useClipModal";
 import { useClipShare } from "~/composables/useClipShare";
 import { useClipFileSize } from "~/composables/useClipFileSize";
 import { useClipDelete } from "~/composables/useClipDelete";
+import { useScrollArrows } from "~/composables/useScrollArrows";
+import ScrollArrows from "~/components/common/ScrollArrows.vue";
 import { Spinner } from "~/components/ui/spinner";
 
 const apiDomain = computed(() => useRuntimeConfig().public.apiDomain as string);
@@ -684,6 +686,7 @@ watch(
 
 // Keep the playing tile centred in the "Up next" strip.
 const stripRef = ref<HTMLElement | null>(null);
+const stripScroll = useScrollArrows(stripRef);
 watch(
   [activeClipIndex, () => !!clip.value, expanded],
   async () => {
@@ -893,39 +896,21 @@ const edgeButton =
                       :kills="clip.kills_count"
                       :round="clip.round"
                       :title="clip.title"
-                      :size="expanded ? 'lg' : undefined"
-                      :class="expanded ? '' : '!bg-black/60 backdrop-blur-sm'"
+                      size="lg"
                     />
-                    <span
-                      v-if="duration"
-                      :class="
-                        expanded
-                          ? onVideoChip
-                          : [tileChip, 'bg-black/60 text-white/90 backdrop-blur-sm']
-                      "
-                    >
+                    <span v-if="duration" :class="onVideoChip">
                       {{ duration }}
                     </span>
                     <span
-                      :class="
-                        expanded
-                          ? onVideoChip
-                          : [
-                              tileChip,
-                              'gap-1 bg-black/60 text-white/90 backdrop-blur-sm',
-                            ]
-                      "
+                      :class="onVideoChip"
                       :title="$t('clips.tile.views', { count: views }, views)"
                     >
                       <Eye class="h-3.5 w-3.5" />
                       {{ views }}
                     </span>
                     <span
                       v-if="!expanded && hasQueueNav"
-                      :class="[
-                        tileChip,
-                        'bg-black/60 text-white/90 backdrop-blur-sm',
-                      ]"
+                      :class="onVideoChip"
                     >
                       {{ activeClipIndex + 1 }} / {{ clipQueue.length }}
                     </span>
@@ -948,6 +933,7 @@ const edgeButton =
                       :download-name="downloadFilename"
                       :size-label="fileSize"
                       content-class="z-[70]"
+                      trigger-class="h-[30px] rounded-md sm:h-9"
                       @copy="copyLink"
                     >
                       <template v-if="canAdminister">
@@ -1009,7 +995,7 @@ const edgeButton =
                     <button
                       v-if="!expanded"
                       type="button"
-                      :class="[onVideoAction, '!h-8 !w-8']"
+                      :class="onVideoAction"
                       :aria-label="$t('common.close')"
                       @click.stop="closeClip"
                     >
@@ -1528,9 +1514,10 @@ const edgeButton =
               </template>
             </div>
 
+            <!-- Full-screen on phones: Up next sits on the bottom edge. -->
             <section
               v-if="clipQueue.length > 1"
-              class="border-t border-white/[0.06] px-5 pb-6 pt-4 sm:px-6"
+              class="border-t border-white/[0.06] px-5 pb-6 pt-4 max-sm:mt-auto max-sm:pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-6"
             >
               <div
                 :class="[
@@ -1542,11 +1529,18 @@ const edgeButton =
                   <span :class="tacticalSectionTickClasses"></span>
                   {{ $t("clips.detail.up_next") }}
                 </span>
-                <span
-                  v-if="hasQueueNav"
-                  class="normal-case tabular-nums tracking-normal"
-                >
-                  {{ activeClipIndex + 1 }} / {{ clipQueue.length }}
+                <span class="inline-flex items-center gap-3">
+                  <span
+                    v-if="hasQueueNav"
+                    class="normal-case tabular-nums tracking-normal"
+                  >
+                    {{ activeClipIndex + 1 }} / {{ clipQueue.length }}
+                  </span>
+                  <ScrollArrows
+                    :can-left="stripScroll.state.canScrollLeft"
+                    :can-right="stripScroll.state.canScrollRight"
+                    @scroll="stripScroll.scrollByDirection"
+                  />
                 </span>
               </div>
               <div
@@ -1557,7 +1551,7 @@ const edgeButton =
                   v-for="q in clipQueue"
                   :key="q.id"
                   type="button"
-                  class="group/q relative isolate aspect-video w-52 shrink-0 snap-start overflow-hidden rounded-lg border bg-card text-left transition-[border-color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber))] motion-safe:active:scale-[0.97]"
+                  class="group/q relative isolate aspect-video w-52 shrink-0 snap-start overflow-hidden max-sm:w-[80%] rounded-lg border bg-card text-left transition-[border-color,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber))] motion-safe:active:scale-[0.97]"
                   :class="
                     q.id === clipId
                       ? 'border-[hsl(var(--tac-amber)/0.7)]'

components/clips/ClipPlayer.vue

@@ -840,7 +840,7 @@ defineExpose({ play, pause, toggle, videoEl: videoRef, isFullscreen });
       :fullscreen="isFullscreen"
       :muted="muted"
       :volume="volume"
-      :visible="true"
+      :visible="hudVisible"
       align="end"
       @toggle-fullscreen="toggleFullscreen"
       @toggle-mute="toggleMute"

components/clips/ClipShareMenu.vue

@@ -8,6 +8,7 @@ import {
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 import { backClosesMenus, useBackDismiss } from "~/composables/useBackDismiss";
+import { cn } from "@/lib/utils";
 
 // The one Share button a clip carries in its player's tray, on highlights and
 // lineups alike: copy the link, download the file, and whatever the surface
@@ -21,6 +22,7 @@ const props = withDefaults(
     downloadLabel?: string | null;
     sizeLabel?: string | null;
     contentClass?: string | null;
+    triggerClass?: string | null;
     // Back closes this menu first. Off where the page runs its own history,
     // as the highlight modal does.
     dismissOnBack?: boolean;
@@ -32,6 +34,7 @@ const props = withDefaults(
     downloadLabel: null,
     sizeLabel: null,
     contentClass: null,
+    triggerClass: null,
     dismissOnBack: false,
   },
 );
@@ -76,7 +79,12 @@ function onDownload(event: Event) {
     <DropdownMenuTrigger as-child>
       <button
         type="button"
-        class="inline-flex h-8 items-center justify-center gap-1.5 rounded-full border border-white/20 bg-black/70 pl-2.5 pr-3 text-xs font-medium text-white/85 backdrop-blur-md transition-colors hover:border-[hsl(var(--tac-amber)/0.55)] hover:text-[hsl(var(--tac-amber))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber))] data-[state=open]:border-[hsl(var(--tac-amber)/0.55)] data-[state=open]:text-[hsl(var(--tac-amber))]"
+        :class="
+          cn(
+            'inline-flex h-8 items-center justify-center gap-1.5 rounded-full border border-white/20 bg-black/70 pl-2.5 pr-3 text-xs font-medium text-white/85 backdrop-blur-md transition-colors hover:border-[hsl(var(--tac-amber)/0.55)] hover:text-[hsl(var(--tac-amber))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber))] data-[state=open]:border-[hsl(var(--tac-amber)/0.55)] data-[state=open]:text-[hsl(var(--tac-amber))]',
+            triggerClass,
+          )
+        "
         @click.stop
       >
         <Share2 class="h-3.5 w-3.5" />

components/common/BackLink.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import type { RouteLocationRaw } from "vue-router";
-import { useBackToList } from "~/composables/useHistoryBack";
+import {
+  useBackToList,
+  useTopBarBackShown,
+} from "~/composables/useHistoryBack";
 
 defineOptions({ inheritAttrs: false });
 
 const props = defineProps<{ to: RouteLocationRaw }>();
 
 const stepBackTo = useBackToList();
+const topBarBack = useTopBarBackShown();
 
 function onClick(event: MouseEvent, navigate: (event?: MouseEvent) => unknown) {
   const plain =
@@ -26,7 +30,7 @@ function onClick(event: MouseEvent, navigate: (event?: MouseEvent) => unknown) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate }" :to="to" custom>
+  <NuxtLink v-if="!topBarBack" v-slot="{ href, navigate }" :to="to" custom>
     <a :href="href" v-bind="$attrs" @click="onClick($event, navigate)">
       <slot />
     </a>

components/common/ScrollArrows.vue

@@ -15,7 +15,7 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div v-show="canLeft || canRight" class="inline-flex items-center gap-1">
+  <div class="inline-flex items-center gap-1">
     <button
       type="button"
       :aria-label="t('ui.scroll.left')"

components/events/EventPastTile.vue

@@ -20,7 +20,7 @@ const count = (key: string) =>
     :to="`/events/${event.id}`"
     class="group/tile flex w-56 shrink-0 snap-start flex-col overflow-hidden rounded-lg border border-border bg-card/40 text-left transition-colors duration-150 hover:border-[hsl(var(--tac-amber)/0.45)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
   >
-    <span class="relative block aspect-[2/1] overflow-hidden bg-muted/40">
+    <span class="relative block aspect-[3/1] overflow-hidden bg-muted/40">
       <img
         v-if="bannerSrc"
         :src="bannerSrc"

components/events/EventUpNext.vue

@@ -61,19 +61,27 @@ const facts = computed(() => {
     v-if="hero"
     class="grid overflow-hidden rounded-lg border border-[hsl(var(--tac-amber)/0.35)] bg-card/40 transition-colors duration-150 has-[[data-card-link]:hover]:border-[hsl(var(--tac-amber)/0.6)] lg:grid-cols-[minmax(0,1fr)_21rem]"
   >
+    <!-- One column: the whole 3:1 banner, the title under it. -->
     <NuxtLink
       :to="path"
       data-card-link
-      class="group/media relative isolate flex min-h-[18rem] items-end overflow-hidden px-4 pb-5 pt-28 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring sm:px-6 sm:pb-6"
+      class="group/media relative isolate flex flex-col overflow-hidden focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring lg:min-h-[18rem] lg:flex-row lg:items-end lg:px-6 lg:pb-6 lg:pt-28"
     >
-      <img
+      <div
         v-if="bannerSrc"
-        :src="bannerSrc"
-        alt=""
-        class="absolute inset-0 -z-20 h-full w-full object-cover object-[50%_40%] transition-transform [transition-duration:600ms] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none group-hover/media:scale-[1.03]"
-      />
-      <div aria-hidden="true" class="hero-scrim absolute inset-0 -z-10"></div>
-      <div class="grid min-w-0 max-w-[40rem] gap-2.5">
+        class="aspect-[3/1] overflow-hidden lg:absolute lg:inset-0 lg:-z-20 lg:aspect-auto"
+      >
+        <img
+          :src="bannerSrc"
+          alt=""
+          class="h-full w-full object-cover object-[50%_40%] transition-transform [transition-duration:600ms] [transition-timing-function:cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none group-hover/media:scale-[1.03]"
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        class="hero-scrim absolute inset-0 -z-10 max-lg:hidden"
+      ></div>
+      <div class="grid min-w-0 max-w-[40rem] gap-2.5 px-5 pb-5 pt-4 lg:p-0">
         <p
           class="m-0 flex flex-wrap items-center gap-x-1.5 text-[0.8125rem] text-foreground/80"
         >

components/match/MatchHighlightsReel.vue

@@ -15,9 +15,11 @@ import type { Clip } from "~/types/clip";
 import { resolveAvatarUrl } from "~/utilities/avatarUrl";
 import { useClipModal } from "~/composables/useClipModal";
 import { useClipShare } from "~/composables/useClipShare";
+import { useScrollArrows } from "~/composables/useScrollArrows";
 import { NuxtLink } from "#components";
 import ClipPlayer from "~/components/clips/ClipPlayer.vue";
 import ClipKillBadge from "~/components/clips/ClipKillBadge.vue";
+import ScrollArrows from "~/components/common/ScrollArrows.vue";
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";
 
@@ -150,6 +152,8 @@ const hasMoreQueue = computed(
   () => queueVisibleCount.value < fullQueue.value.length,
 );
 const queueScrollEl = ref<HTMLElement | null>(null);
+// Below lg the queue is a horizontal strip.
+const queueScroll = useScrollArrows(queueScrollEl);
 const queueSentinelEl = ref<HTMLElement | null>(null);
 let queueObserver: IntersectionObserver | null = null;
 function ensureQueueObserver() {
@@ -460,10 +464,20 @@ function clipTeamName(c: Clip): string | null {
           class="flex items-center justify-between gap-3 px-1 pb-1.5 pt-1 text-[13px] font-bold lg:px-3.5 lg:pb-2 lg:pt-3"
         >
           {{ $t("match.up_next") }}
-          <span class="font-medium tabular-nums text-muted-foreground">
-            {{
-              $t("match.highlights.clip_count", { count: filteredClips.length })
-            }}
+          <span class="inline-flex items-center gap-3">
+            <span class="font-medium tabular-nums text-muted-foreground">
+              {{
+                $t("match.highlights.clip_count", {
+                  count: filteredClips.length,
+                })
+              }}
+            </span>
+            <ScrollArrows
+              class="lg:hidden"
+              :can-left="queueScroll.state.canScrollLeft"
+              :can-right="queueScroll.state.canScrollRight"
+              @scroll="queueScroll.scrollByDirection"
+            />
           </span>
         </div>
         <ol