From 36c34b8fcb7307c9ad8420f2df9fb8656192b998 Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 18 Apr 2026 15:10:53 -0400
Subject: [PATCH 1/3] web: migrate times lists to unified /api/times endpoint
 with filter bar

Adds sort/best/has_replay/invalidated filter controls to map and player
pages via a shared TimesFilterBar component. Uses the new { data, total }
envelope for accurate "Page X of Y" pagination. Moderator-gated invalidated
control with permission stripping on URL parse.
---
 src/api/offstylesApi.ts                | 124 ++++++++------------
 src/components/CheckboxInput.vue       |   8 +-
 src/components/CustomDropdown.vue      |  10 +-
 src/components/MapDetails.vue          |  63 +++++++----
 src/components/PlayerDetails.vue       |  90 ++++++++-------
 src/components/RecentTimes.vue         |   9 +-
 src/components/TimesFilterBar.vue      | 149 +++++++++++++++++++++++++
 src/components/TimesListPagination.vue |  24 +++-
 src/types/Time.ts                      |   9 +-
 src/types/TimesFilter.ts               |  15 +++
 src/utils/timesFilterFromQuery.ts      |  38 +++++++
 src/utils/urlParams.ts                 |  15 ++-
 src/views/IndividualRecordView.vue     |   4 +-
 src/views/MapsView.vue                 |  44 ++++----
 src/views/PlayersView.vue              |  67 +++++------
 src/views/RecentRecordsView.vue        |  44 +++++---
 16 files changed, 482 insertions(+), 231 deletions(-)
 create mode 100644 src/components/TimesFilterBar.vue
 create mode 100644 src/types/TimesFilter.ts
 create mode 100644 src/utils/timesFilterFromQuery.ts

diff --git a/src/api/offstylesApi.ts b/src/api/offstylesApi.ts
index e1c9c9e..8789b3a 100644
--- a/src/api/offstylesApi.ts
+++ b/src/api/offstylesApi.ts
@@ -1,18 +1,10 @@
 import { Style } from '@/types/Style';
 import Api from './api';
-import type { Time } from '@/types/Time';
+import type { Time, TimesPage } from '@/types/Time';
+import type { TimesFilter } from '@/types/TimesFilter';
 import type { User } from '@/types/User';
 import type { RecentModAction, ModerationTargetFilter, ModerationAction } from '@/types/moderation';
 
-// Add new interfaces based on the API spec
-export interface RankAwareRecord extends Time {
-  rank: number;
-}
-
-export interface WRAwareRecord extends Time {
-  wr_time: number;
-}
-
 export interface ReturnStyle {
   name: string;
   s_id: number;
@@ -89,74 +81,36 @@ export interface ModerationLogResponse {
 class OffstylesApi extends Api {
   static offstylesApiUrl = "/api";
 
-  // Fixed method signature to require style parameter
-  static async getTimesByMap(
-    mapName: string,
-    style: number = Style.normal,
-    steamid?: string,
-    limit: number = 50,
-    page: number = 1,
-  ): Promise<RankAwareRecord[]> {
-    const params = new URLSearchParams({
-      map: mapName,
-      style: style.toString(),
-      limit: limit.toString(),
-      page: page.toString(),
-    });
-
-    if (steamid) {
-      params.append("steamid", steamid);
-    }
-
-    this.url = `${this.offstylesApiUrl}/map?${params.toString()}`;
-    return await this.fetchFromUrl();
-  }
-
-  static async getTimesByPlayer(
-    steamID: string,
-    map?: string,
-    style: number = Style.all,
-    limit: number = 50,
-    page: number = 1,
-    best: boolean = false,
-  ): Promise<WRAwareRecord[]> {
-    const params = new URLSearchParams({
-      steamid: steamID,
-      limit: limit.toString(),
-      page: page.toString(),
-      best: best.toString(),
-    });
+  static async getTimes(filter: TimesFilter): Promise<TimesPage> {
+    const params = new URLSearchParams();
 
-    if (map) {
-      params.append("map", map);
+    if (filter.map) params.append("map", filter.map);
+    if (filter.steamid) params.append("steamid", filter.steamid);
+    if (filter.style !== undefined && filter.style !== Style.all) {
+      params.append("style", filter.style.toString());
     }
-
-    if (style !== undefined && style !== Style.all) {
-      params.append("style", style.toString());
+    if (filter.sort) params.append("sort", filter.sort);
+    if (filter.best !== undefined) params.append("best", filter.best.toString());
+    if (filter.has_replay) params.append("has_replay", "true");
+    if (filter.invalidated !== undefined) {
+      params.append("invalidated", filter.invalidated.toString());
     }
+    if (filter.wr !== undefined) params.append("wr", filter.wr.toString());
+    if (filter.recent) params.append("recent", "true");
+    params.append("page", filter.page.toString());
+    params.append("limit", filter.limit.toString());
 
-    this.url = `${this.offstylesApiUrl}/times?${params.toString()}`;
-    return await this.fetchFromUrl();
-  }
-
-  static async getRecentTimes(
-    style: number = Style.all,
-    limit: number = 15,
-    page: number = 1,
-    wr: boolean = true,
-  ): Promise<WRAwareRecord[]> {
-    const params = new URLSearchParams({
-      limit: limit.toString(),
-      page: page.toString(),
-      wr: wr.toString(),
-    });
-
-    if (style !== undefined && style !== Style.all) {
-      params.append("style", style.toString());
+    const response = await fetch(`${this.offstylesApiUrl}/times?${params.toString()}`);
+    if (!response.ok) {
+      const errorText = await response.text();
+      try {
+        const error: JsonError = JSON.parse(errorText);
+        throw new Error(`${error.code}: ${error.reason}`);
+      } catch {
+        throw new Error(`${response.status}: ${response.statusText}`);
+      }
     }
-
-    this.url = `${this.offstylesApiUrl}/recent?${params.toString()}`;
-    return await this.fetchFromUrl();
+    return await response.json();
   }
 
   // New methods based on the API spec
@@ -178,13 +132,23 @@ class OffstylesApi extends Api {
     return await this.fetchFromUrl();
   }
 
-  static async getSingleTime(id: string): Promise<WRAwareRecord> {
-    const params = new URLSearchParams({
-      id: id,
-    });
-
-    this.url = `${this.offstylesApiUrl}/time?${params.toString()}`;
-    return await this.fetchFromUrl();
+  static async getSingleTime(id: string): Promise<Time> {
+    const params = new URLSearchParams({ ids: id, limit: '1', page: '1' });
+    const response = await fetch(`${this.offstylesApiUrl}/times?${params.toString()}`);
+    if (!response.ok) {
+      const errorText = await response.text();
+      try {
+        const error: JsonError = JSON.parse(errorText);
+        throw new Error(`${error.code}: ${error.reason}`);
+      } catch {
+        throw new Error(`${response.status}: ${response.statusText}`);
+      }
+    }
+    const page: TimesPage = await response.json();
+    if (page.data.length === 0) {
+      throw new Error('404: Record not found');
+    }
+    return page.data[0];
   }
 
   static async getStyles(): Promise<ReturnStyle[]> {
diff --git a/src/components/CheckboxInput.vue b/src/components/CheckboxInput.vue
index 42b90cf..a21e8f8 100644
--- a/src/components/CheckboxInput.vue
+++ b/src/components/CheckboxInput.vue
@@ -6,9 +6,13 @@
   const props = defineProps<{
     name: string,
     label: string,
+    default?: boolean,
   }>()
-  const currentInput : Ref<boolean> = ref(urlParams.getAsObject().wr ? urlParams.getAsObject().wr === 'true' : true);
-  
+  const initial = urlParams.getAsObject()[props.name];
+  const currentInput : Ref<boolean> = ref(
+    initial !== undefined ? initial === 'true' : (props.default ?? false)
+  );
+
   watch(currentInput, async() => {
     emit('checkbox-Changed', props.name, currentInput.value);
   });
diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 1a96aaf..b2b330d 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -4,19 +4,19 @@
   import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
   import IconCheck from './icons/IconCheck.vue';
   import IconChevronUpDown from './icons/IconChevronUpDown.vue';
-  import { Style } from '@/types/Style';
   import urlParams from '@/utils/urlParams';
   const emit = defineEmits(['dropdown-Changed']);
-  
+
   const props = defineProps<{
-    options: (number)[], 
+    options: (number)[],
     name: string,
     format: (value: number) => string,
     default: number
   }>()
 
-  const currentInput : Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : props.default);
-  
+  const initial = urlParams.getAsObject()[props.name];
+  const currentInput : Ref<number> = ref(initial !== undefined ? Number(initial) : props.default);
+
   watch(currentInput, async() => {
     emit('dropdown-Changed', props.name, currentInput.value);
   });
diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index a0455bb..af98d37 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
   import TimesList from './TimesList.vue';
+  import TimesFilterBar from './TimesFilterBar.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
-  import CustomDropdown from './CustomDropdown.vue';
-  import styleFormat from '@/utils/styleFormat';
+  import type { SortOrder } from '@/types/TimesFilter';
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
-  import { useRouter } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
+  import { computed } from 'vue';
   import TimesListPagination from './TimesListPagination.vue';
+
+  const route = useRoute();
   const router = useRouter();
 
   const emit = defineEmits(['updateMap']);
@@ -16,27 +19,45 @@
   const props = defineProps<{
     mapName : string,
     mapTimes: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
- 
-  const dropdownChanged = async (name : string, value : number)=>{
-    await router.replace({query:urlParams.update(name, value)});
-    emit('updateMap', props.mapName);
-  }
-  const paginationChanged = async (page: number)=>{
-    await router.replace({query:urlParams.update('page', page)});
-    emit('updateMap', props.mapName);
-  }
+
+  const mapStyleOptions = [Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented];
+
+  const currentFilter = computed(() => {
+    const q = route.query as Record<string, string>;
+    return {
+      style: q.style ? Number(q.style) : Style.normal,
+      sort: (q.sort as SortOrder) || 'Fastest',
+      best: q.best !== undefined ? q.best === 'true' : true,
+      hasReplay: q.has_replay === 'true',
+      invalidated: q.invalidated !== undefined ? q.invalidated === 'true' : undefined,
+    };
+  });
+
+  const filterChanged = async (name: string, value: string | number | boolean | undefined) => {
+    await router.replace({ query: urlParams.updateMany({ [name]: value }) });
+  };
+
+  const paginationChanged = async (page: number) => {
+    await router.replace({ query: urlParams.update('page', page) });
+  };
 </script>
 
 
 <template>
   <div class="text-white w-full max-w-[800px] p-4 text-center flex flex-col justify-center rounded-lg mt-8">
     <h1 class="text-2xl mb-3">{{ mapName }}</h1>
-    <div class="flex py-2">
-      <CustomDropdown :options="[Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" :default="Style.normal" @dropdown-Changed="dropdownChanged"></CustomDropdown>
-    </div>
+    <TimesFilterBar
+      :styleValue="currentFilter.style"
+      :sort="currentFilter.sort"
+      :best="currentFilter.best"
+      :hasReplay="currentFilter.hasReplay"
+      :invalidated="currentFilter.invalidated"
+      :styleOptions="mapStyleOptions"
+      @filter-Changed="filterChanged"
+    />
     <TimesList v-if="props.mapTimes" :times="props.mapTimes" :cols="[{
       label: 'Player',
       data: 'name',
@@ -44,7 +65,7 @@
       width:'25%',
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
-    }, 
+    },
     {
       label: 'Server',
       data: 'server',
@@ -67,7 +88,7 @@
     }]"
     @refresh-data="() => emit('updateMap', props.mapName)"
     ></TimesList>
-    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected map & style</h1>
-    <TimesListPagination :limitPerPage="50" :times="props.mapTimes" :isLoading = "props.isLoading" @pagination-changed="paginationChanged"></TimesListPagination>
+    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected map & filters</h1>
+    <TimesListPagination :limitPerPage="50" :times="props.mapTimes" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index f7f6c69..0bf3531 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -1,20 +1,22 @@
 <script setup lang="ts">
   import TimesList from './TimesList.vue';
+  import TimesFilterBar from './TimesFilterBar.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
   import type { User } from '@/types/User';
-  import CustomDropdown from './CustomDropdown.vue';
-  import styleFormat from '@/utils/styleFormat';
+  import type { SortOrder } from '@/types/TimesFilter';
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
-  import { useRouter } from 'vue-router';
+  import { useRoute, useRouter } from 'vue-router';
   import { ref, onMounted, watch, computed } from 'vue';
   import type { Ref } from 'vue';
   import OffstylesApi from '@/api/offstylesApi';
   import ModerationModal from './Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
   import TimesListPagination from './TimesListPagination.vue';
+
+  const route = useRoute();
   const router = useRouter();
 
   const emit = defineEmits(['updatePlayer']);
@@ -23,10 +25,10 @@
     playerName: string,
     playerSteamId: string,
     playerTimes: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
 
-  // Validate required props
   if (!props.playerSteamId) {
     console.warn('PlayerDetails: playerSteamId is required but not provided');
   }
@@ -37,8 +39,20 @@
 
   const moderationStore = useModerationStore();
 
+  const playerStyleOptions = [Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented];
+
+  const currentFilter = computed(() => {
+    const q = route.query as Record<string, string>;
+    return {
+      style: q.style ? Number(q.style) : Style.all,
+      sort: (q.sort as SortOrder) || 'Newest',
+      best: q.best !== undefined ? q.best === 'true' : true,
+      hasReplay: q.has_replay === 'true',
+      invalidated: q.invalidated !== undefined ? q.invalidated === 'true' : undefined,
+    };
+  });
+
   const moderationTarget = computed((): ModerationTarget | null => {
-    // If we have a full user profile, use that data
     if (userProfile.value) {
       return {
         id: userProfile.value.steam_id,
@@ -48,19 +62,17 @@
         ban_ref: userProfile.value.ban_ref
       };
     }
-    
-    // Fallback: Create a basic moderation target even if profile doesn't exist in DB
-    // This allows moderation of players who haven't been indexed yet
+
     if (props.playerSteamId && props.playerName) {
       return {
         id: props.playerSteamId,
         type: 'player',
         name: props.playerName,
-        is_banned: false, // Default to not banned since we don't have profile data
+        is_banned: false,
         ban_ref: undefined
       };
     }
-    
+
     return null;
   });
 
@@ -68,43 +80,39 @@
     if (isLoadingProfile.value) {
       return { message: 'Loading...', class: 'text-gray-400' };
     }
-    
+
     if (userProfile.value?.is_banned) {
       return { message: '⚠️ Banned', class: 'text-red-400' };
     }
-    
+
     if (userProfile.value === null && !isLoadingProfile.value) {
       return { message: '⚠️ Profile not found in database', class: 'text-yellow-400' };
     }
-    
+
     return null;
   });
- 
+
   const fetchUserProfile = async () => {
     isLoadingProfile.value = true;
     try {
       userProfile.value = await OffstylesApi.getUserProfile(props.playerSteamId);
     } catch (error) {
       console.warn('Player profile not found or error occurred:', error);
-      // Set to null to indicate profile doesn't exist or couldn't be loaded
-      // This will trigger the fallback moderation target
       userProfile.value = null;
     } finally {
       isLoadingProfile.value = false;
     }
   };
 
-  const dropdownChanged = async (name : string, value : number)=>{
-    await router.replace({query:urlParams.update(name, value)});
-    emit('updatePlayer', props.playerSteamId);
-  }
-  const paginationChanged = async (page: number)=>{
-    await router.replace({query:urlParams.update('page', page)});
-    emit('updatePlayer', props.playerSteamId);
-  }
+  const filterChanged = async (name: string, value: string | number | boolean | undefined) => {
+    await router.replace({ query: urlParams.updateMany({ [name]: value }) });
+  };
+
+  const paginationChanged = async (page: number) => {
+    await router.replace({ query: urlParams.update('page', page) });
+  };
 
   const handleModerationComplete = () => {
-    // Refresh player data and profile after moderation action
     emit('updatePlayer', props.playerSteamId);
     fetchUserProfile();
     showModerationModal.value = false;
@@ -135,9 +143,9 @@
   <div class="text-white w-full max-w-[800px] p-4 text-center flex flex-col justify-center rounded-lg mt-8">
     <div class="flex justify-between items-center mb-3">
       <div class="flex items-center gap-3">
-        <img 
-          v-if="userProfile?.avatar_url" 
-          :src="userProfile.avatar_url" 
+        <img
+          v-if="userProfile?.avatar_url"
+          :src="userProfile.avatar_url"
           :alt="playerName"
           class="w-12 h-12 rounded-full"
         />
@@ -146,7 +154,7 @@
           <div v-if="playerStatus" :class="`text-sm ${playerStatus.class}`">{{ playerStatus.message }}</div>
         </div>
       </div>
-      <button 
+      <button
         v-if="moderationStore.canModerate.value && moderationTarget"
         @click="openModerationModal"
         class="flex items-center gap-2 px-4 py-2 bg-main-700 hover:bg-main-600 border border-main-500 text-gray-200 rounded transition-colors cursor-pointer"
@@ -154,10 +162,15 @@
         <span>Moderate</span>
       </button>
     </div>
-    <div class="flex py-2">
-      <CustomDropdown :options="[Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
-       :name="'style'" :format="styleFormat.name" :default="Style.all" @dropdown-Changed="dropdownChanged"></CustomDropdown>
-    </div>
+    <TimesFilterBar
+      :styleValue="currentFilter.style"
+      :sort="currentFilter.sort"
+      :best="currentFilter.best"
+      :hasReplay="currentFilter.hasReplay"
+      :invalidated="currentFilter.invalidated"
+      :styleOptions="playerStyleOptions"
+      @filter-Changed="filterChanged"
+    />
     <TimesList v-if="props.playerTimes" :times="props.playerTimes" :cols="[
     {
       label: 'Map',
@@ -165,7 +178,7 @@
       width:'25%',
       alignmentClasses: 'text-left',
       link: timeLinks.mapLink
-    }, 
+    },
     {
       label: 'Server',
       data: 'server',
@@ -188,10 +201,9 @@
     }]"
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>
-    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected player & style</h1>
-    <TimesListPagination :limitPerPage="50" :times="props.playerTimes" :isLoading = "props.isLoading" @pagination-changed="paginationChanged"></TimesListPagination>
+    <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected player & filters</h1>
+    <TimesListPagination :limitPerPage="50" :times="props.playerTimes" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
 
-    <!-- Moderation Modal -->
     <ModerationModal
       v-if="moderationTarget"
       :target="moderationTarget"
@@ -206,4 +218,4 @@
   .monospace {
     font-family: 'Courier New', Courier, monospace;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index 3abe8fa..ebdbdac 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -20,7 +20,8 @@
 
   const props = defineProps<{
     recentTimes: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total: number,
   }>()
  
   const currentStyle: Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : Style.all);
@@ -90,11 +91,9 @@
       currentStyle.value = value;
     }
     await router.replace({query:urlParams.update(name, value)});
-    emit('updateRecentTimes');
   }
   const paginationChanged = async (page: number)=>{
     await router.replace({query:urlParams.update('page', page)});
-    emit('updateRecentTimes');
   }
 </script>
 
@@ -106,12 +105,12 @@
     <div class="flex py-2 justify-between flex-wrap gap-3">
       <CustomDropdown :options="[Style.all, Style.normal, Style.sideways, Style.wonly, Style.legit_scroll, Style.half_sideways, Style.a_d_only, Style.segmented]"
        :name="'style'" :format="styleFormat.name" :default="Style.all" @dropdown-Changed="dropdownChanged"></CustomDropdown>
-      <CheckboxInput @checkbox-Changed="dropdownChanged" :name="'wr'" :label="'Only show WR times'"></CheckboxInput>
+      <CheckboxInput @checkbox-Changed="dropdownChanged" :name="'wr'" :label="'Only show WR times'" :default="true"></CheckboxInput>
     </div>
     <TimesList v-if="props.recentTimes" :times="props.recentTimes" :cols="tableColumns"
     @refresh-data="emit('updateRecentTimes')"
     ></TimesList>
     <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected parameters</h1>
-    <TimesListPagination :limitPerPage="15" :times="props.recentTimes" :isLoading = "props.isLoading" @pagination-changed="paginationChanged"></TimesListPagination>
+    <TimesListPagination :limitPerPage="15" :times="props.recentTimes" :isLoading = "props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/TimesFilterBar.vue b/src/components/TimesFilterBar.vue
new file mode 100644
index 0000000..70ee8f8
--- /dev/null
+++ b/src/components/TimesFilterBar.vue
@@ -0,0 +1,149 @@
+<script setup lang="ts">
+  import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue';
+  import { computed } from 'vue';
+  import IconCheck from './icons/IconCheck.vue';
+  import IconChevronUpDown from './icons/IconChevronUpDown.vue';
+  import CustomDropdown from './CustomDropdown.vue';
+  import styleFormat from '@/utils/styleFormat';
+  import type { SortOrder } from '@/types/TimesFilter';
+  import { useModerationStore } from '@/stores/moderation';
+
+  type InvalidatedChoice = 'hide' | 'mix' | 'only';
+
+  const SORT_OPTIONS: SortOrder[] = ['Fastest', 'Slowest', 'Newest', 'Oldest'];
+  const INVALIDATED_OPTIONS: { value: InvalidatedChoice, label: string }[] = [
+    { value: 'hide', label: 'Valid only' },
+    { value: 'mix', label: 'Show all' },
+    { value: 'only', label: 'Only invalidated' },
+  ];
+
+  const props = defineProps<{
+    styleValue: number,
+    sort: SortOrder,
+    best: boolean,
+    hasReplay: boolean,
+    invalidated: boolean | undefined,
+    styleOptions: number[],
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'filter-Changed', name: string, value: string | number | boolean | undefined): void;
+  }>();
+
+  const moderationStore = useModerationStore();
+
+  const invalidatedValue = computed<InvalidatedChoice>(() => {
+    if (props.invalidated === undefined) return 'hide';
+    return props.invalidated ? 'only' : 'mix';
+  });
+
+  const invalidatedLabel = computed(() =>
+    INVALIDATED_OPTIONS.find(o => o.value === invalidatedValue.value)?.label,
+  );
+
+  const styleChanged = (_: string, value: number) => {
+    emit('filter-Changed', 'style', value);
+  };
+
+  const sortChanged = (value: SortOrder) => {
+    emit('filter-Changed', 'sort', value);
+  };
+
+  const bestChanged = (event: Event) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    emit('filter-Changed', 'best', checked);
+  };
+
+  const hasReplayChanged = (event: Event) => {
+    const checked = (event.target as HTMLInputElement).checked;
+    emit('filter-Changed', 'has_replay', checked ? true : undefined);
+  };
+
+  const invalidatedChanged = (value: InvalidatedChoice) => {
+    const mapped = value === 'hide' ? undefined : value === 'only';
+    emit('filter-Changed', 'invalidated', mapped);
+  };
+</script>
+
+<template>
+  <div class="flex py-2 flex-wrap gap-3 items-center">
+    <CustomDropdown
+      :options="props.styleOptions"
+      :name="'style'"
+      :format="styleFormat.name"
+      :default="props.styleValue"
+      @dropdown-Changed="styleChanged"
+    />
+
+    <Listbox :model-value="props.sort" @update:model-value="sortChanged" class="w-auto">
+      <div class="relative min-w-40">
+        <ListboxButton class="w-full" v-slot="{open}">
+          <div :class="[
+            open ? 'border border-main-400' : 'border border-transparent',
+            'bg-main-700 p-2 px-5 rounded-md w-full text-left']">
+            {{ props.sort }}
+            <span class="pointer-events-none absolute right-0 inset-y-0 flex items-center pe-1">
+              <IconChevronUpDown />
+            </span>
+          </div>
+        </ListboxButton>
+        <ListboxOptions class="absolute mt-1 w-full overflow-auto rounded-md bg-main-800 p-1 py-0 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm z-[999] border border-main-400 drop-shadow-lg">
+          <ListboxOption v-for="option in SORT_OPTIONS" :value="option" :key="option" v-slot="{ active, selected }" as="template">
+            <li :class="[
+              active ? 'bg-main-400 text-gray-100' : selected ? 'bg-main-600 text-gray-200' : 'text-gray-300',
+              'relative cursor-default select-none py-2 my-1 pl-9 pr-4 rounded',
+            ]">
+              <span class="block truncate">{{ option }}</span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-200">
+                <IconCheck class="h-4 w-4" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+
+    <label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" :checked="props.best" @change="bestChanged">
+      <span>Best per map</span>
+    </label>
+
+    <label class="flex items-center gap-2 cursor-pointer">
+      <input type="checkbox" :checked="props.hasReplay" @change="hasReplayChanged">
+      <span>Has replay</span>
+    </label>
+
+    <Listbox
+      v-if="moderationStore.canInvalidateTimes.value"
+      :model-value="invalidatedValue"
+      @update:model-value="invalidatedChanged"
+      class="w-auto"
+    >
+      <div class="relative min-w-40">
+        <ListboxButton class="w-full" v-slot="{open}">
+          <div :class="[
+            open ? 'border border-main-400' : 'border border-transparent',
+            'bg-main-700 p-2 px-5 rounded-md w-full text-left']">
+            {{ invalidatedLabel }}
+            <span class="pointer-events-none absolute right-0 inset-y-0 flex items-center pe-1">
+              <IconChevronUpDown />
+            </span>
+          </div>
+        </ListboxButton>
+        <ListboxOptions class="absolute mt-1 w-full overflow-auto rounded-md bg-main-800 p-1 py-0 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm z-[999] border border-main-400 drop-shadow-lg">
+          <ListboxOption v-for="option in INVALIDATED_OPTIONS" :value="option.value" :key="option.value" v-slot="{ active, selected }" as="template">
+            <li :class="[
+              active ? 'bg-main-400 text-gray-100' : selected ? 'bg-main-600 text-gray-200' : 'text-gray-300',
+              'relative cursor-default select-none py-2 my-1 pl-9 pr-4 rounded',
+            ]">
+              <span class="block truncate">{{ option.label }}</span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-2 text-gray-200">
+                <IconCheck class="h-4 w-4" aria-hidden="true" />
+              </span>
+            </li>
+          </ListboxOption>
+        </ListboxOptions>
+      </div>
+    </Listbox>
+  </div>
+</template>
diff --git a/src/components/TimesListPagination.vue b/src/components/TimesListPagination.vue
index e5a1f55..67516c2 100644
--- a/src/components/TimesListPagination.vue
+++ b/src/components/TimesListPagination.vue
@@ -5,17 +5,28 @@ import { useRoute } from 'vue-router';
   const props = defineProps<{
     limitPerPage: number,
     times: Time[] | null,
-    isLoading: boolean
+    isLoading: boolean,
+    total?: number,
   }>()
   const emit = defineEmits(['pagination-Changed']);
   const route = useRoute();
-  
-  // Make currentPage reactive to URL changes
+
   const currentPage = computed(() => {
     const pageParam = route.query.page;
     return pageParam ? Number(pageParam) : 1;
   });
 
+  const totalPages = computed(() => {
+    if (props.total === undefined) return null;
+    return Math.max(1, Math.ceil(props.total / props.limitPerPage));
+  });
+
+  const nextDisabled = computed(() => {
+    if (props.isLoading) return true;
+    if (totalPages.value !== null) return currentPage.value >= totalPages.value;
+    return props.times !== null && props.times.length < props.limitPerPage;
+  });
+
   function paginationChanged(page : number){
     emit('pagination-Changed', page);
   }
@@ -26,6 +37,9 @@ import { useRoute } from 'vue-router';
   <div class="w-full py-2 flex justify-between align-end">
     <div class="text-gray-400 text-sm my-auto">
       Page <span class="text-base text-gray-200">{{ currentPage }}</span>
+      <template v-if="totalPages !== null">
+        of <span class="text-base text-gray-200">{{ totalPages }}</span>
+      </template>
     </div>
     <div class="flex items-center gap-1 text-gray-200">
       <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage-1)" :disabled="props.isLoading || currentPage <= 1">
@@ -33,11 +47,11 @@ import { useRoute } from 'vue-router';
           <path d="M15 6l-6 6l6 6"></path>
         </svg>
       </button>
-      <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage+1)" :disabled="props.isLoading || (props.times !== null && props.times.length < props.limitPerPage)">
+      <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage+1)" :disabled="nextDisabled">
         <svg xmlns="http://www.w3.org/2000/svg" x-bind:width="size" x-bind:height="size" viewBox="0 0 24 24" fill="none" stroke="currentColor" x-bind:stroke-width="stroke" stroke-linecap="round" stroke-linejoin="round" width="24" height="24" stroke-width="2">
           <path d="M9 6l6 6l-6 6"></path>
         </svg>
       </button>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/types/Time.ts b/src/types/Time.ts
index 96e34e6..2e46f3c 100644
--- a/src/types/Time.ts
+++ b/src/types/Time.ts
@@ -19,6 +19,11 @@ export interface Time {
   is_banned: boolean;
   invalid_ref?: string | null;
   server?: RecordHeaders | null;
-  rank?: number;
-  wr_time?: number;
+  rank?: number | null;
+  wr_time?: number | null;
+}
+
+export interface TimesPage {
+  data: Time[];
+  total: number;
 }
diff --git a/src/types/TimesFilter.ts b/src/types/TimesFilter.ts
new file mode 100644
index 0000000..9aa3e56
--- /dev/null
+++ b/src/types/TimesFilter.ts
@@ -0,0 +1,15 @@
+export type SortOrder = 'Fastest' | 'Slowest' | 'Newest' | 'Oldest';
+
+export interface TimesFilter {
+  style?: number;
+  page: number;
+  limit: number;
+  sort?: SortOrder;
+  best?: boolean;
+  has_replay?: boolean;
+  invalidated?: boolean;
+  map?: string;
+  steamid?: string;
+  wr?: boolean;
+  recent?: boolean;
+}
diff --git a/src/utils/timesFilterFromQuery.ts b/src/utils/timesFilterFromQuery.ts
new file mode 100644
index 0000000..25eca5a
--- /dev/null
+++ b/src/utils/timesFilterFromQuery.ts
@@ -0,0 +1,38 @@
+import type { TimesFilter, SortOrder } from '@/types/TimesFilter';
+import { Style } from '@/types/Style';
+
+export interface FilterDefaults {
+  style: number;
+  sort: SortOrder;
+  best: boolean;
+  limit: number;
+}
+
+const VALID_SORTS: readonly SortOrder[] = ['Fastest', 'Slowest', 'Newest', 'Oldest'];
+
+const parseSort = function(raw: string | undefined, fallback: SortOrder): SortOrder {
+  return VALID_SORTS.includes(raw as SortOrder) ? (raw as SortOrder) : fallback;
+};
+
+const fromQuery = function(
+  query: Record<string, string>,
+  defaults: FilterDefaults,
+  canSeeInvalidated: boolean = false,
+): TimesFilter {
+  const styleRaw = query.style ? parseInt(query.style) : defaults.style;
+  const style = styleRaw === Style.all || Number.isNaN(styleRaw) ? undefined : styleRaw;
+
+  return {
+    style,
+    page: Math.max(1, query.page ? parseInt(query.page) : 1),
+    limit: defaults.limit,
+    sort: parseSort(query.sort, defaults.sort),
+    best: query.best !== undefined ? query.best === 'true' : defaults.best,
+    has_replay: query.has_replay === 'true' ? true : undefined,
+    invalidated: canSeeInvalidated && query.invalidated !== undefined
+      ? query.invalidated === 'true'
+      : undefined,
+  };
+};
+
+export default { fromQuery };
diff --git a/src/utils/urlParams.ts b/src/utils/urlParams.ts
index ea81191..83cd054 100644
--- a/src/utils/urlParams.ts
+++ b/src/utils/urlParams.ts
@@ -28,4 +28,17 @@ const clearPage = function() {
   return Object.fromEntries(params)
 }
 
-export default {update, get, getAsObject, clearPage};
+const updateMany = function(updates: Record<string, string | number | boolean | undefined>) {
+  const params = new URLSearchParams(window.location.search);
+  for (const [key, value] of Object.entries(updates)) {
+    if (value === undefined || (key === 'style' && value === Style.all)) {
+      params.delete(key);
+    } else {
+      params.set(key, String(value));
+    }
+  }
+  params.delete('page');
+  return Object.fromEntries(params);
+};
+
+export default {update, get, getAsObject, clearPage, updateMany};
diff --git a/src/views/IndividualRecordView.vue b/src/views/IndividualRecordView.vue
index b55d048..210d478 100644
--- a/src/views/IndividualRecordView.vue
+++ b/src/views/IndividualRecordView.vue
@@ -2,7 +2,7 @@
   import { ref, onMounted, computed } from 'vue'
   import type { Ref } from 'vue'
   import OffstylesApi from '@/api/offstylesApi';
-  import type { WRAwareRecord } from '@/api/offstylesApi';
+  import type { Time } from '@/types/Time';
   import loadWheel from '@/components/icons/loadWheel.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import RelativeDate from '@/components/RelativeDate.vue';
@@ -18,7 +18,7 @@
   const router = useRouter();
   const { isLoggedIn } = useAuth();
   const isLoading: Ref<boolean> = ref(false);
-  const record: Ref<WRAwareRecord | null> = ref(null);
+  const record: Ref<Time | null> = ref(null);
   const error: Ref<string | null> = ref(null);
   const showReplayViewer: Ref<boolean> = ref(false);
 
diff --git a/src/views/MapsView.vue b/src/views/MapsView.vue
index ea37cde..17209ba 100644
--- a/src/views/MapsView.vue
+++ b/src/views/MapsView.vue
@@ -9,6 +9,8 @@
   import type { Time } from '@/types/Time';
   import SearchBoxMap from '@/components/SearchBoxMap.vue';
   import { Style } from '@/types/Style';
+  import timesFilterFromQuery from '@/utils/timesFilterFromQuery';
+  import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps({
     mapName: {
@@ -16,41 +18,44 @@
       required: false,
     },
   });
-  
+
   const route = useRoute();
+  const moderationStore = useModerationStore();
   const isLoading: Ref<boolean> = ref(false);
   const mapTimes: Ref<Time[] | null> = ref(null);
+  const mapTotal: Ref<number> = ref(0);
   const mapName: Ref<string> = ref(props.mapName ?? '');
 
-  //update selected_map & url
-  async function updateMap(map:string){
+  async function updateMap(map: string){
     await getMapTimes(map);
   }
 
-  onMounted(async ()=>{
-    //set initial map from url
-    if(typeof props.mapName !== 'undefined'){
+  onMounted(async () => {
+    if (typeof props.mapName !== 'undefined') {
       updateMap(props.mapName);
     }
   });
 
   watch(() => route.query, () => {
-    getMapTimes(props.mapName!);
-  })
+    if (props.mapName) getMapTimes(props.mapName);
+  });
 
   async function getMapTimes(name: string){
     mapName.value = name;
     isLoading.value = true;
     mapTimes.value = null;
-    const paramsObj = urlParams.getAsObject();
-    
-    // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.normal;
-    const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
-    
-    const apiMapTimes = await OffstylesApi.getTimesByMap(name, style, undefined, undefined, page);
-    if(apiMapTimes.length){
-      mapTimes.value = apiMapTimes;
+
+    const filter = timesFilterFromQuery.fromQuery(
+      urlParams.getAsObject(),
+      { style: Style.normal, sort: 'Fastest', best: true, limit: 50 },
+      moderationStore.canInvalidateTimes.value,
+    );
+    filter.map = name;
+
+    const result = await OffstylesApi.getTimes(filter);
+    mapTotal.value = result.total;
+    if (result.data.length) {
+      mapTimes.value = result.data;
     }
     isLoading.value = false;
   }
@@ -59,11 +64,10 @@
 <template>
   <main>
     <div class="flex flex-col items-center justify-center">
-      <!--<ComboBox :select_options="maps" :selected_option="selected_map" :is_loading="maps.length === 0" :type="'map'" @select-Changed="selectChanged"></ComboBox>-->
       <SearchBoxMap @updateMap="updateMap" :placeholder="'Enter a Map'"></SearchBoxMap>
-      <MapDetails v-if="mapName !== ''" :mapTimes="mapTimes" :mapName="mapName" :isLoading="isLoading" @updateMap="updateMap"></MapDetails>
+      <MapDetails v-if="mapName !== ''" :mapTimes="mapTimes" :mapName="mapName" :isLoading="isLoading" :total="mapTotal" @updateMap="updateMap"></MapDetails>
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
       <h1 v-if="mapName === ''" class="text-lg text-gray-100 mt-5">Select a map above to view leaderboards</h1>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/PlayersView.vue b/src/views/PlayersView.vue
index f5edff7..4b3d74f 100644
--- a/src/views/PlayersView.vue
+++ b/src/views/PlayersView.vue
@@ -9,6 +9,8 @@
   import type { Time } from '@/types/Time';
   import SearchBoxPlayer from '@/components/SearchBoxPlayer.vue';
   import { Style } from '@/types/Style';
+  import timesFilterFromQuery from '@/utils/timesFilterFromQuery';
+  import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps({
     playerSteamId: {
@@ -16,47 +18,42 @@
       required: false,
     },
   });
-  
+
   const route = useRoute();
+  const moderationStore = useModerationStore();
   const isLoading: Ref<boolean> = ref(false);
   const playerTimes: Ref<Time[] | null> = ref(null);
+  const playerTotal: Ref<number> = ref(0);
   const playerSteamId: Ref<string> = ref(props.playerSteamId ?? '');
   const playerName: Ref<string> = ref('');
 
-  //update selected_map & url
-  async function updatePlayer(playerId:string){
+  async function updatePlayer(playerId: string){
     await getPlayerTimes(playerId);
   }
 
-  // Clear player data and reset to initial state
   function clearPlayerData() {
     playerSteamId.value = '';
     playerName.value = '';
     playerTimes.value = null;
+    playerTotal.value = 0;
     isLoading.value = false;
   }
 
-  onMounted(async ()=>{
-    //set initial map from url
-    if(typeof props.playerSteamId !== 'undefined'){
+  onMounted(async () => {
+    if (typeof props.playerSteamId !== 'undefined') {
       updatePlayer(props.playerSteamId);
     }
   });
 
-  // Watch for changes in playerSteamId prop to handle navigation between specific player and general page
   watch(() => props.playerSteamId, (newPlayerSteamId) => {
     if (!newPlayerSteamId) {
-      // If navigating to general players page, clear the data
       clearPlayerData();
     } else {
-      // If navigating to a specific player, load their data
       updatePlayer(newPlayerSteamId);
     }
   });
 
-  // Also watch for route changes to handle navigation
   watch(() => route.path, (newPath) => {
-    // If navigating to the base players page, clear everything
     if (newPath === '/players' && !props.playerSteamId) {
       clearPlayerData();
     }
@@ -64,27 +61,31 @@
 
   watch(() => route.query, () => {
     if (props.playerSteamId) {
-      getPlayerTimes(props.playerSteamId)
+      getPlayerTimes(props.playerSteamId);
     }
-  })
+  });
 
   async function getPlayerTimes(playerId: string){
-    // Don't proceed if playerId is undefined or empty
     if (!playerId) return;
-    
+
     playerSteamId.value = playerId;
     isLoading.value = true;
     playerTimes.value = null;
-    const paramsObj = urlParams.getAsObject();
-    
-    // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
-    const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
-    
-    const apiPlayerTimes = await OffstylesApi.getTimesByPlayer(playerId, undefined, style, undefined, page);
-    if(apiPlayerTimes.length){
-      playerTimes.value = apiPlayerTimes;
-      playerName.value = apiPlayerTimes[0].name;
+
+    const filter = timesFilterFromQuery.fromQuery(
+      urlParams.getAsObject(),
+      { style: Style.all, sort: 'Newest', best: true, limit: 50 },
+      moderationStore.canInvalidateTimes.value,
+    );
+    filter.steamid = playerId;
+
+    const result = await OffstylesApi.getTimes(filter);
+    playerTotal.value = result.total;
+    if (result.data.length) {
+      playerTimes.value = result.data;
+      playerName.value = result.data[0].name;
+    } else if (!playerName.value) {
+      playerName.value = playerId;
     }
     isLoading.value = false;
   }
@@ -93,18 +94,18 @@
 <template>
   <main>
     <div class="flex flex-col items-center justify-center">
-      <!--<SearchBox @updateMap="updatePlayer"></SearchBox>-->
       <SearchBoxPlayer @updatePlayer="updatePlayer" :placeholder="'Enter a Player'"></SearchBoxPlayer>
-      <PlayerDetails 
+      <PlayerDetails
         v-if="playerSteamId && playerName && playerSteamId !== ''"
-        :playerTimes="playerTimes" 
-        :playerSteamId="playerSteamId" 
-        :playerName="playerName" 
-        :isLoading="isLoading" 
+        :playerTimes="playerTimes"
+        :playerSteamId="playerSteamId"
+        :playerName="playerName"
+        :isLoading="isLoading"
+        :total="playerTotal"
         @updatePlayer="updatePlayer"
       />
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
       <h1 v-if="playerSteamId === ''" class="text-lg text-gray-100 mt-5">Select a player above to view their times</h1>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/views/RecentRecordsView.vue b/src/views/RecentRecordsView.vue
index b388a38..349a845 100644
--- a/src/views/RecentRecordsView.vue
+++ b/src/views/RecentRecordsView.vue
@@ -1,31 +1,43 @@
 <script setup lang="ts">
-  import { ref, onMounted } from 'vue'
+  import { ref, onMounted, watch } from 'vue'
+  import { useRoute } from 'vue-router';
   import type { Ref } from 'vue'
   import OffstylesApi from '@/api/offstylesApi';
   import loadWheel from '@/components/icons/loadWheel.vue';
   import RecentTimes from '@/components/RecentTimes.vue';
   import urlParams from '@/utils/urlParams';
   import type { Time } from '@/types/Time';
+  import type { TimesFilter } from '@/types/TimesFilter';
   import { Style } from '@/types/Style';
 
+  const route = useRoute();
   const isLoading: Ref<boolean> = ref(false);
   const recentTimes: Ref<Time[] | null> = ref(null);
-  onMounted(async ()=>{
-    getRecentTimes();
-  });
+  const recentTotal: Ref<number> = ref(0);
+
+  onMounted(getRecentTimes);
+
+  watch(() => route.query, getRecentTimes);
+
   async function getRecentTimes(){
     isLoading.value = true;
     recentTimes.value = null;
     const paramsObj = urlParams.getAsObject();
-    
-    // Convert string params to numbers with defaults
-    const style = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
-    const page = paramsObj.page ? parseInt(paramsObj.page) : 1;
-    const wr = paramsObj.wr ? paramsObj.wr === 'true' : true; // Convert string to boolean
-    
-    const apiRecentTimes = await OffstylesApi.getRecentTimes(style, undefined, page, wr);
-    if(apiRecentTimes.length){
-      recentTimes.value = apiRecentTimes;
+
+    const styleRaw = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
+    const filter: TimesFilter = {
+      style: styleRaw === Style.all ? undefined : styleRaw,
+      page: paramsObj.page ? parseInt(paramsObj.page) : 1,
+      limit: 15,
+      wr: paramsObj.wr !== undefined ? paramsObj.wr === 'true' : true,
+      recent: true,
+      best: false,
+    };
+
+    const result = await OffstylesApi.getTimes(filter);
+    recentTotal.value = result.total;
+    if (result.data.length) {
+      recentTimes.value = result.data;
     }
     isLoading.value = false;
   }
@@ -34,9 +46,9 @@
 <template>
   <main>
     <div class="flex flex-col items-center justify-center">
-      <RecentTimes :recentTimes="recentTimes" :isLoading="isLoading" @updateRecentTimes="getRecentTimes"></RecentTimes>
+      <RecentTimes :recentTimes="recentTimes" :isLoading="isLoading" :total="recentTotal" @updateRecentTimes="getRecentTimes"></RecentTimes>
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
-      <p v-if="!recentTimes && !isLoading">No recent times available.</p> <!-- Added message for no data -->
+      <p v-if="!recentTimes && !isLoading">No recent times available.</p>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>

From f87021131c1df31fa1a34ff17c46fe2b773158eb Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 18 Apr 2026 15:18:14 -0400
Subject: [PATCH 2/3] web: handle times fetch errors and harden filter bar
 types

Wraps getTimes calls in try/catch/finally with a loadError ref and retry
button so failed requests no longer leave the spinner running indefinitely.
NaN-guards page parsing, narrows TimesFilterBar emit name to a union of
known filter keys, and makes TimesListPagination.total required now that
all callers provide it.
---
 src/components/MapDetails.vue          |  4 ++--
 src/components/PlayerDetails.vue       |  4 ++--
 src/components/RecentTimes.vue         |  2 +-
 src/components/TimesFilterBar.vue      |  5 ++++-
 src/components/TimesListPagination.vue | 27 +++++++++---------------
 src/utils/timesFilterFromQuery.ts      |  6 +++++-
 src/utils/urlParams.ts                 |  1 +
 src/views/MapsView.vue                 | 22 ++++++++++++++-----
 src/views/PlayersView.vue              | 29 +++++++++++++++++++-------
 src/views/RecentRecordsView.vue        | 29 +++++++++++++++++++-------
 10 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index af98d37..59ed1ae 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -36,7 +36,7 @@
     };
   });
 
-  const filterChanged = async (name: string, value: string | number | boolean | undefined) => {
+  const filterChanged = async (name: 'style' | 'sort' | 'best' | 'has_replay' | 'invalidated', value: string | number | boolean | undefined) => {
     await router.replace({ query: urlParams.updateMany({ [name]: value }) });
   };
 
@@ -89,6 +89,6 @@
     @refresh-data="() => emit('updateMap', props.mapName)"
     ></TimesList>
     <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected map & filters</h1>
-    <TimesListPagination :limitPerPage="50" :times="props.mapTimes" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
+    <TimesListPagination :limitPerPage="50" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
   </div>
 </template>
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index 0bf3531..7fc42ab 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -104,7 +104,7 @@
     }
   };
 
-  const filterChanged = async (name: string, value: string | number | boolean | undefined) => {
+  const filterChanged = async (name: 'style' | 'sort' | 'best' | 'has_replay' | 'invalidated', value: string | number | boolean | undefined) => {
     await router.replace({ query: urlParams.updateMany({ [name]: value }) });
   };
 
@@ -202,7 +202,7 @@
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>
     <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected player & filters</h1>
-    <TimesListPagination :limitPerPage="50" :times="props.playerTimes" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
+    <TimesListPagination :limitPerPage="50" :isLoading="props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
 
     <ModerationModal
       v-if="moderationTarget"
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index ebdbdac..8cf5e6b 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -111,6 +111,6 @@
     @refresh-data="emit('updateRecentTimes')"
     ></TimesList>
     <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected parameters</h1>
-    <TimesListPagination :limitPerPage="15" :times="props.recentTimes" :isLoading = "props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
+    <TimesListPagination :limitPerPage="15" :isLoading = "props.isLoading" :total="props.total" @pagination-changed="paginationChanged"></TimesListPagination>
   </div>
 </template>
\ No newline at end of file
diff --git a/src/components/TimesFilterBar.vue b/src/components/TimesFilterBar.vue
index 70ee8f8..345b9df 100644
--- a/src/components/TimesFilterBar.vue
+++ b/src/components/TimesFilterBar.vue
@@ -9,6 +9,7 @@
   import { useModerationStore } from '@/stores/moderation';
 
   type InvalidatedChoice = 'hide' | 'mix' | 'only';
+  type FilterKey = 'style' | 'sort' | 'best' | 'has_replay' | 'invalidated';
 
   const SORT_OPTIONS: SortOrder[] = ['Fastest', 'Slowest', 'Newest', 'Oldest'];
   const INVALIDATED_OPTIONS: { value: InvalidatedChoice, label: string }[] = [
@@ -27,11 +28,13 @@
   }>();
 
   const emit = defineEmits<{
-    (e: 'filter-Changed', name: string, value: string | number | boolean | undefined): void;
+    (e: 'filter-Changed', name: FilterKey, value: string | number | boolean | undefined): void;
   }>();
 
   const moderationStore = useModerationStore();
 
+  // Tri-state round-trip: backend reads `invalidated` as omitted = valid-only (hide),
+  // `false` = mix valid + invalidated, `true` = only invalidated. UI mirrors that exact mapping.
   const invalidatedValue = computed<InvalidatedChoice>(() => {
     if (props.invalidated === undefined) return 'hide';
     return props.invalidated ? 'only' : 'mix';
diff --git a/src/components/TimesListPagination.vue b/src/components/TimesListPagination.vue
index 67516c2..ffa5036 100644
--- a/src/components/TimesListPagination.vue
+++ b/src/components/TimesListPagination.vue
@@ -1,31 +1,26 @@
 <script setup lang="ts">
-import type { Time } from '@/types/Time';
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
   const props = defineProps<{
     limitPerPage: number,
-    times: Time[] | null,
     isLoading: boolean,
-    total?: number,
+    total: number,
   }>()
   const emit = defineEmits(['pagination-Changed']);
   const route = useRoute();
 
   const currentPage = computed(() => {
-    const pageParam = route.query.page;
-    return pageParam ? Number(pageParam) : 1;
+    const n = route.query.page ? Number(route.query.page) : 1;
+    return Number.isFinite(n) && n >= 1 ? n : 1;
   });
 
-  const totalPages = computed(() => {
-    if (props.total === undefined) return null;
-    return Math.max(1, Math.ceil(props.total / props.limitPerPage));
-  });
+  const totalPages = computed(() =>
+    Math.max(1, Math.ceil(props.total / props.limitPerPage))
+  );
 
-  const nextDisabled = computed(() => {
-    if (props.isLoading) return true;
-    if (totalPages.value !== null) return currentPage.value >= totalPages.value;
-    return props.times !== null && props.times.length < props.limitPerPage;
-  });
+  const nextDisabled = computed(() =>
+    props.isLoading || currentPage.value >= totalPages.value
+  );
 
   function paginationChanged(page : number){
     emit('pagination-Changed', page);
@@ -37,9 +32,7 @@ import { useRoute } from 'vue-router';
   <div class="w-full py-2 flex justify-between align-end">
     <div class="text-gray-400 text-sm my-auto">
       Page <span class="text-base text-gray-200">{{ currentPage }}</span>
-      <template v-if="totalPages !== null">
-        of <span class="text-base text-gray-200">{{ totalPages }}</span>
-      </template>
+      of <span class="text-base text-gray-200">{{ totalPages }}</span>
     </div>
     <div class="flex items-center gap-1 text-gray-200">
       <button class="btn bg-main-900 rounded p-1.5 cursor-pointer disabled:opacity-50 disabled:pointer-events-none" @click="paginationChanged(currentPage-1)" :disabled="props.isLoading || currentPage <= 1">
diff --git a/src/utils/timesFilterFromQuery.ts b/src/utils/timesFilterFromQuery.ts
index 25eca5a..e8f7120 100644
--- a/src/utils/timesFilterFromQuery.ts
+++ b/src/utils/timesFilterFromQuery.ts
@@ -22,13 +22,17 @@ const fromQuery = function(
   const styleRaw = query.style ? parseInt(query.style) : defaults.style;
   const style = styleRaw === Style.all || Number.isNaN(styleRaw) ? undefined : styleRaw;
 
+  const pageRaw = query.page ? parseInt(query.page) : 1;
+  const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? pageRaw : 1;
+
   return {
     style,
-    page: Math.max(1, query.page ? parseInt(query.page) : 1),
+    page,
     limit: defaults.limit,
     sort: parseSort(query.sort, defaults.sort),
     best: query.best !== undefined ? query.best === 'true' : defaults.best,
     has_replay: query.has_replay === 'true' ? true : undefined,
+    // Non-moderators never send invalidated to the server even if it leaks into a shared URL.
     invalidated: canSeeInvalidated && query.invalidated !== undefined
       ? query.invalidated === 'true'
       : undefined,
diff --git a/src/utils/urlParams.ts b/src/utils/urlParams.ts
index 83cd054..5de41fa 100644
--- a/src/utils/urlParams.ts
+++ b/src/utils/urlParams.ts
@@ -31,6 +31,7 @@ const clearPage = function() {
 const updateMany = function(updates: Record<string, string | number | boolean | undefined>) {
   const params = new URLSearchParams(window.location.search);
   for (const [key, value] of Object.entries(updates)) {
+    // Style.all is the implicit default — keep it out of the URL so shared links stay clean.
     if (value === undefined || (key === 'style' && value === Style.all)) {
       params.delete(key);
     } else {
diff --git a/src/views/MapsView.vue b/src/views/MapsView.vue
index 17209ba..63a9014 100644
--- a/src/views/MapsView.vue
+++ b/src/views/MapsView.vue
@@ -25,6 +25,7 @@
   const mapTimes: Ref<Time[] | null> = ref(null);
   const mapTotal: Ref<number> = ref(0);
   const mapName: Ref<string> = ref(props.mapName ?? '');
+  const loadError: Ref<string | null> = ref(null);
 
   async function updateMap(map: string){
     await getMapTimes(map);
@@ -44,6 +45,7 @@
     mapName.value = name;
     isLoading.value = true;
     mapTimes.value = null;
+    loadError.value = null;
 
     const filter = timesFilterFromQuery.fromQuery(
       urlParams.getAsObject(),
@@ -52,12 +54,18 @@
     );
     filter.map = name;
 
-    const result = await OffstylesApi.getTimes(filter);
-    mapTotal.value = result.total;
-    if (result.data.length) {
-      mapTimes.value = result.data;
+    try {
+      const result = await OffstylesApi.getTimes(filter);
+      mapTotal.value = result.total;
+      if (result.data.length) {
+        mapTimes.value = result.data;
+      }
+    } catch (err) {
+      loadError.value = err instanceof Error ? err.message : 'Failed to load times';
+      console.error('Failed to fetch map times:', err);
+    } finally {
+      isLoading.value = false;
     }
-    isLoading.value = false;
   }
 </script>
 
@@ -67,6 +75,10 @@
       <SearchBoxMap @updateMap="updateMap" :placeholder="'Enter a Map'"></SearchBoxMap>
       <MapDetails v-if="mapName !== ''" :mapTimes="mapTimes" :mapName="mapName" :isLoading="isLoading" :total="mapTotal" @updateMap="updateMap"></MapDetails>
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
+      <div v-if="loadError && !isLoading" class="text-red-400 bg-red-900/20 p-4 rounded-lg mt-5 max-w-[600px]">
+        <p>Failed to load times: {{ loadError }}</p>
+        <button @click="updateMap(mapName)" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">Retry</button>
+      </div>
       <h1 v-if="mapName === ''" class="text-lg text-gray-100 mt-5">Select a map above to view leaderboards</h1>
     </div>
   </main>
diff --git a/src/views/PlayersView.vue b/src/views/PlayersView.vue
index 4b3d74f..c9a6619 100644
--- a/src/views/PlayersView.vue
+++ b/src/views/PlayersView.vue
@@ -26,6 +26,7 @@
   const playerTotal: Ref<number> = ref(0);
   const playerSteamId: Ref<string> = ref(props.playerSteamId ?? '');
   const playerName: Ref<string> = ref('');
+  const loadError: Ref<string | null> = ref(null);
 
   async function updatePlayer(playerId: string){
     await getPlayerTimes(playerId);
@@ -37,6 +38,7 @@
     playerTimes.value = null;
     playerTotal.value = 0;
     isLoading.value = false;
+    loadError.value = null;
   }
 
   onMounted(async () => {
@@ -71,6 +73,7 @@
     playerSteamId.value = playerId;
     isLoading.value = true;
     playerTimes.value = null;
+    loadError.value = null;
 
     const filter = timesFilterFromQuery.fromQuery(
       urlParams.getAsObject(),
@@ -79,15 +82,21 @@
     );
     filter.steamid = playerId;
 
-    const result = await OffstylesApi.getTimes(filter);
-    playerTotal.value = result.total;
-    if (result.data.length) {
-      playerTimes.value = result.data;
-      playerName.value = result.data[0].name;
-    } else if (!playerName.value) {
-      playerName.value = playerId;
+    try {
+      const result = await OffstylesApi.getTimes(filter);
+      playerTotal.value = result.total;
+      if (result.data.length) {
+        playerTimes.value = result.data;
+        playerName.value = result.data[0].name;
+      } else if (!playerName.value) {
+        playerName.value = playerId;
+      }
+    } catch (err) {
+      loadError.value = err instanceof Error ? err.message : 'Failed to load times';
+      console.error('Failed to fetch player times:', err);
+    } finally {
+      isLoading.value = false;
     }
-    isLoading.value = false;
   }
 </script>
 
@@ -105,6 +114,10 @@
         @updatePlayer="updatePlayer"
       />
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
+      <div v-if="loadError && !isLoading" class="text-red-400 bg-red-900/20 p-4 rounded-lg mt-5 max-w-[600px]">
+        <p>Failed to load times: {{ loadError }}</p>
+        <button @click="updatePlayer(playerSteamId)" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">Retry</button>
+      </div>
       <h1 v-if="playerSteamId === ''" class="text-lg text-gray-100 mt-5">Select a player above to view their times</h1>
     </div>
   </main>
diff --git a/src/views/RecentRecordsView.vue b/src/views/RecentRecordsView.vue
index 349a845..2f2a38e 100644
--- a/src/views/RecentRecordsView.vue
+++ b/src/views/RecentRecordsView.vue
@@ -14,6 +14,7 @@
   const isLoading: Ref<boolean> = ref(false);
   const recentTimes: Ref<Time[] | null> = ref(null);
   const recentTotal: Ref<number> = ref(0);
+  const loadError: Ref<string | null> = ref(null);
 
   onMounted(getRecentTimes);
 
@@ -22,24 +23,32 @@
   async function getRecentTimes(){
     isLoading.value = true;
     recentTimes.value = null;
+    loadError.value = null;
     const paramsObj = urlParams.getAsObject();
 
     const styleRaw = paramsObj.style ? parseInt(paramsObj.style) : Style.all;
+    const pageRaw = paramsObj.page ? parseInt(paramsObj.page) : 1;
     const filter: TimesFilter = {
-      style: styleRaw === Style.all ? undefined : styleRaw,
-      page: paramsObj.page ? parseInt(paramsObj.page) : 1,
+      style: styleRaw === Style.all || Number.isNaN(styleRaw) ? undefined : styleRaw,
+      page: Number.isFinite(pageRaw) && pageRaw >= 1 ? pageRaw : 1,
       limit: 15,
       wr: paramsObj.wr !== undefined ? paramsObj.wr === 'true' : true,
       recent: true,
       best: false,
     };
 
-    const result = await OffstylesApi.getTimes(filter);
-    recentTotal.value = result.total;
-    if (result.data.length) {
-      recentTimes.value = result.data;
+    try {
+      const result = await OffstylesApi.getTimes(filter);
+      recentTotal.value = result.total;
+      if (result.data.length) {
+        recentTimes.value = result.data;
+      }
+    } catch (err) {
+      loadError.value = err instanceof Error ? err.message : 'Failed to load times';
+      console.error('Failed to fetch recent times:', err);
+    } finally {
+      isLoading.value = false;
     }
-    isLoading.value = false;
   }
 </script>
 
@@ -48,7 +57,11 @@
     <div class="flex flex-col items-center justify-center">
       <RecentTimes :recentTimes="recentTimes" :isLoading="isLoading" :total="recentTotal" @updateRecentTimes="getRecentTimes"></RecentTimes>
       <loadWheel v-if="isLoading" class="text-gray-200 mt-5"></loadWheel>
-      <p v-if="!recentTimes && !isLoading">No recent times available.</p>
+      <div v-if="loadError && !isLoading" class="text-red-400 bg-red-900/20 p-4 rounded-lg mt-5 max-w-[600px]">
+        <p>Failed to load times: {{ loadError }}</p>
+        <button @click="getRecentTimes" class="mt-2 px-3 py-1 bg-blue-600 hover:bg-blue-700 rounded text-sm">Retry</button>
+      </div>
+      <p v-if="!recentTimes && !isLoading && !loadError">No recent times available.</p>
     </div>
   </main>
 </template>

From 1b89db99f7c1febb4685c35f8c5a91ddd0f39e5c Mon Sep 17 00:00:00 2001
From: tommy <t@tommyy.dev>
Date: Sat, 18 Apr 2026 16:09:03 -0400
Subject: [PATCH 3/3] web: show style column on player times list when All
 selected

When the style filter is set to All, times across different styles are
indistinguishable in the player list. Mirrors the recent-globals pattern:
adds a Style column (with column widths adjusted to fit) whenever the
current style filter is All, and hides it otherwise.
---
 src/components/PlayerDetails.vue | 81 +++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 28 deletions(-)

diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index 7fc42ab..9b13892 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -3,7 +3,9 @@
   import TimesFilterBar from './TimesFilterBar.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
+  import styleFormat from '@/utils/styleFormat';
   import type { Time } from '@/types/Time';
+  import type { TimeListColumn } from '@/types/TimeListColumn';
   import type { User } from '@/types/User';
   import type { SortOrder } from '@/types/TimesFilter';
   import { Style } from "@/types/Style";
@@ -52,6 +54,56 @@
     };
   });
 
+  const showStyleColumn = computed(() => currentFilter.value.style === Style.all);
+
+  const tableColumns = computed((): TimeListColumn[] => {
+    const columns: TimeListColumn[] = [
+      {
+        label: 'Map',
+        data: 'map',
+        width: showStyleColumn.value ? '22%' : '25%',
+        alignmentClasses: 'text-left',
+        link: timeLinks.mapLink,
+      },
+      {
+        label: 'Server',
+        data: 'server',
+        width: showStyleColumn.value ? '25%' : '30%',
+        classes: 'text-sm text-gray-400',
+        alignmentClasses: 'text-left text-gray-300',
+      },
+    ];
+
+    if (showStyleColumn.value) {
+      columns.push({
+        label: 'Style',
+        data: 'style',
+        width: '12%',
+        classes: 'text-sm text-gray-400',
+        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
+        numFormat: styleFormat.name,
+      });
+    }
+
+    columns.push(
+      {
+        label: 'Date',
+        data: 'date',
+        width: showStyleColumn.value ? '13%' : '15%',
+        alignmentClasses: 'text-right justify-end',
+      },
+      {
+        label: 'Time',
+        data: 'time',
+        width: showStyleColumn.value ? '28%' : '30%',
+        alignmentClasses: 'text-right justify-end monospace',
+        numFormat: dateTimeFormats.time,
+      },
+    );
+
+    return columns;
+  });
+
   const moderationTarget = computed((): ModerationTarget | null => {
     if (userProfile.value) {
       return {
@@ -171,34 +223,7 @@
       :styleOptions="playerStyleOptions"
       @filter-Changed="filterChanged"
     />
-    <TimesList v-if="props.playerTimes" :times="props.playerTimes" :cols="[
-    {
-      label: 'Map',
-      data: 'map',
-      width:'25%',
-      alignmentClasses: 'text-left',
-      link: timeLinks.mapLink
-    },
-    {
-      label: 'Server',
-      data: 'server',
-      width: '30%',
-      classes: 'text-sm text-gray-400',
-      alignmentClasses: 'text-left text-gray-300'
-    },
-    {
-      label: 'Date',
-      data: 'date',
-      width:'15%',
-      alignmentClasses: 'text-right justify-end',
-    },
-    {
-      label: 'Time',
-      data: 'time',
-      width: '30%',
-      alignmentClasses: 'text-right justify-end monospace',
-      numFormat: dateTimeFormats.time
-    }]"
+    <TimesList v-if="props.playerTimes" :times="props.playerTimes" :cols="tableColumns"
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>
     <h1 v-else-if="!props.isLoading" class="text-gray-200 mt-3">No times found for selected player & filters</h1>