chore: update to allow sorting by last sign in at (#323)

Author: lukepolo

components/PlayerDisplay.vue

@@ -63,6 +63,12 @@ import FiveStackToolTip from "./FiveStackToolTip.vue";
       <div class="mt-2" v-if="$slots['avatar-sub']">
         <slot name="avatar-sub"></slot>
       </div>
+      <div
+        class="absolute -top-1 -right-1 z-10"
+        v-if="$slots['avatar-badge']"
+      >
+        <slot name="avatar-badge"></slot>
+      </div>
     </div>
     <div
       :class="{

components/match/LineupMember.vue

@@ -11,6 +11,9 @@ import PlayerStatusDisplay from "./PlayerStatusDisplay.vue";
       <template v-if="$slots['elo-postfix']" #elo-postfix>
         <slot name="elo-postfix"></slot>
       </template>
+      <template v-if="$slots['avatar-badge']" #avatar-badge>
+        <slot name="avatar-badge"></slot>
+      </template>
     </PlayerStatusDisplay>
   </template>
   <template v-else>

components/match/LineupOverviewRow.vue

@@ -8,7 +8,7 @@ import PlayerMatchClipsButton from "~/components/match/PlayerMatchClipsButton.vu
   <TableRow>
     <TableCell class="overflow-hidden">
       <LineupMember :match="match" :member="member">
-        <template v-if="member.player?.steam_id" #name-postfix>
+        <template v-if="member.player?.steam_id" #avatar-badge>
           <PlayerMatchClipsButton :steam-id="member.player.steam_id" />
         </template>
         <template v-if="memberEloChange" #elo-postfix>

components/match/PlayerMatchClipsButton.vue

@@ -53,24 +53,23 @@ function pickClip(c: Clip) {
     <button
       v-if="count === 1 && single"
       type="button"
-      class="ml-1.5 inline-flex h-5 items-center gap-1 rounded-full border border-[hsl(var(--tac-amber)/0.5)] bg-[hsl(var(--tac-amber)/0.12)] px-1.5 text-[hsl(var(--tac-amber))] hover:bg-[hsl(var(--tac-amber)/0.2)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber)/0.6)]"
+      class="relative inline-flex h-5 w-5 items-center justify-center rounded-full border-2 border-background bg-[hsl(var(--tac-amber))] text-background shadow-[0_0_0_1px_hsl(var(--tac-amber)),0_0_6px_hsl(var(--tac-amber)/0.6)] hover:brightness-110 transition cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber)/0.8)]"
       :title="single.title || 'Open highlight'"
       @click="onSingleClick"
     >
       <Film class="h-3 w-3" />
-      <span class="font-mono text-[0.55rem] uppercase tracking-[0.16em]">
-        Clip
-      </span>
     </button>
 
     <Popover v-else>
       <PopoverTrigger
-        class="ml-1.5 inline-flex h-5 items-center gap-1 rounded-full border border-[hsl(var(--tac-amber)/0.5)] bg-[hsl(var(--tac-amber)/0.12)] px-1.5 text-[hsl(var(--tac-amber))] hover:bg-[hsl(var(--tac-amber)/0.2)] transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber)/0.6)]"
+        class="relative inline-flex h-5 w-5 items-center justify-center rounded-full border-2 border-background bg-[hsl(var(--tac-amber))] text-background shadow-[0_0_0_1px_hsl(var(--tac-amber)),0_0_6px_hsl(var(--tac-amber)/0.6)] hover:brightness-110 transition cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--tac-amber)/0.8)]"
         :title="`${count} highlights for this player`"
         @click.stop
       >
         <Film class="h-3 w-3" />
-        <span class="font-mono text-[0.55rem] tabular-nums">
+        <span
+          class="absolute -top-1 -right-1 inline-flex min-w-[0.875rem] h-3.5 px-1 items-center justify-center rounded-full border border-background bg-red-500 text-[0.55rem] font-mono font-bold tabular-nums text-white"
+        >
           {{ count }}
         </span>
       </PopoverTrigger>

components/match/PlayerStatusDisplay.vue

@@ -40,6 +40,10 @@ const { isMobile } = useSidebar();
       <slot name="elo-postfix"></slot>
     </template>
 
+    <template v-if="$slots['avatar-badge']" #avatar-badge>
+      <slot name="avatar-badge"></slot>
+    </template>
+
     <template v-slot:status v-if="showStatus">
       <FiveStackToolTip side="bottom" :delay-duration="300">
         <template #trigger>

pages/players/index.vue

@@ -447,8 +447,26 @@ import {
             <TableHead v-if="canViewAdditionalDetails">{{
               $t("pages.players.table.privilege")
             }}</TableHead>
-            <TableHead v-if="canViewAdditionalDetails">
-              {{ $t("pages.players.table.last_sign_in_at") }}
+            <TableHead
+              v-if="canViewAdditionalDetails"
+              class="cursor-pointer"
+              @click="toggleSort('last_sign_in_at')"
+            >
+              <div class="flex items-center gap-1">
+                {{ $t("pages.players.table.last_sign_in_at") }}
+                <ArrowUpIcon
+                  v-if="
+                    sortField === 'last_sign_in_at' && sortDirection === 'desc'
+                  "
+                  class="w-4 h-4"
+                />
+                <ArrowDownIcon
+                  v-else-if="
+                    sortField === 'last_sign_in_at' && sortDirection === 'asc'
+                  "
+                  class="w-4 h-4"
+                />
+              </div>
             </TableHead>
           </TableRow>
         </TableHeader>
@@ -909,7 +927,7 @@ export default {
       this.saveFiltersToStorage();
       this.searchPlayers();
     },
-    toggleSort(field: "name" | "elo") {
+    toggleSort(field: "name" | "elo" | "last_sign_in_at") {
       if (this.sortField === field) {
         // If clicking the same column, toggle direction
         this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";

server/api/players-search.post.ts

@@ -57,7 +57,14 @@ export default defineEventHandler(async (event) => {
     });
   }
 
-  if (body.registeredOnly) {
+  // Use provided sort_by or default to name:asc
+  let sortBy = body.sort_by || "name:asc";
+
+  if (sortBy.includes("elo")) {
+    sortBy = sortBy.replace("elo", "elo_competitive");
+  }
+
+  if (body.registeredOnly || sortBy.includes("last_sign_in_at")) {
     filterBy.push(`last_sign_in_at:!~~`);
   }
 
@@ -129,13 +136,6 @@ export default defineEventHandler(async (event) => {
     filterBy.push(`is_muted:=${body.is_muted}`);
   }
 
-  // Use provided sort_by or default to name:asc
-  let sortBy = body.sort_by || "name:asc";
-
-  if (sortBy.includes("elo")) {
-    sortBy = sortBy.replace("elo", "elo_competitive");
-  }
-
   const searchParams: any = {
     q: query ?? "*",
     query_by: queryBy,