dreamteamprod · Tim020 · Jun 9, 2026 · Jun 9, 2026
diff --git a/client-v3/src/components/config/ConfigShows.vue b/client-v3/src/components/config/ConfigShows.vue
@@ -143,7 +143,7 @@ const isSubmittingLoad = ref(false);
 const isSubmittingShow = ref(false);
 const isDeleting = ref(false);
 const deletingId = ref<number | null>(null);
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_shows');
 
 const showFields = [
   { key: 'id', label: 'ID' },

diff --git a/client-v3/src/components/config/ConfigSystem.vue b/client-v3/src/components/config/ConfigSystem.vue
@@ -99,7 +99,7 @@ const { connectedSessions, versionStatus, serverInfo } = storeToRefs(systemStore
 
 const loading = ref(true);
 const isCheckingVersion = ref(false);
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_system_clients');
 const clientsModal = ref<InstanceType<typeof BModal>>();
 
 const clientFields = [

diff --git a/client-v3/src/components/show/config/acts_and_scenes/ConfigActs.vue b/client-v3/src/components/show/config/acts_and_scenes/ConfigActs.vue
@@ -142,7 +142,7 @@ const showStore = useShowStore();
 const { confirm } = useConfirm();
 
 const loading = ref(true);
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_acts');
 const submittingNewAct = ref(false);
 const submittingEditAct = ref(false);
 const deletingAct = ref(false);

diff --git a/client-v3/src/components/show/config/acts_and_scenes/ConfigScenes.vue b/client-v3/src/components/show/config/acts_and_scenes/ConfigScenes.vue
@@ -206,7 +206,7 @@ const showStore = useShowStore();
 const { confirm } = useConfirm();
 
 const loading = ref(true);
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_scenes');
 const submittingNewScene = ref(false);
 const submittingEditScene = ref(false);
 const submittingFirstScene = ref(false);

diff --git a/client-v3/src/components/show/config/characters/CharacterGroups.vue b/client-v3/src/components/show/config/characters/CharacterGroups.vue
@@ -146,7 +146,7 @@ const showStore = useShowStore();
 const { confirm } = useConfirm();
 
 const loading = ref(true);
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_character_groups');
 const submittingNewGroup = ref(false);
 const submittingEditGroup = ref(false);
 const deletingGroup = ref(false);

diff --git a/client-v3/src/components/show/config/mics/MicList.vue b/client-v3/src/components/show/config/mics/MicList.vue
@@ -103,7 +103,7 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_mics');
 const isSubmitting = ref(false);
 
 const newModal = ref<InstanceType<typeof BModal>>();

diff --git a/client-v3/src/components/show/config/script/StageDirectionStyles.vue b/client-v3/src/components/show/config/script/StageDirectionStyles.vue
@@ -156,7 +156,7 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'show_stage_direction_styles');
 const isSubmittingNew = ref(false);
 const isSubmittingEdit = ref(false);
 const isDeleting = ref(false);

diff --git a/client-v3/src/components/show/config/sessions/SessionTagList.vue b/client-v3/src/components/show/config/sessions/SessionTagList.vue
@@ -203,7 +203,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_session_tags');
 const isSubmittingNewTag = ref(false);
 const isSubmittingEditTag = ref(false);
 const isSubmittingDeleteTag = ref(false);

diff --git a/client-v3/src/components/show/config/stage/CrewList.vue b/client-v3/src/components/show/config/stage/CrewList.vue
@@ -111,7 +111,7 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_crew');
 const isSubmitting = ref(false);
 
 const newModal = ref<InstanceType<typeof BModal>>();

diff --git a/client-v3/src/components/show/config/stage/PropsList.vue b/client-v3/src/components/show/config/stage/PropsList.vue
@@ -220,8 +220,11 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const { perPage: propTypesPerPage, currentPage: currentPropTypesPage } = usePagination();
-const { perPage: propsPerPage, currentPage: currentPropsPage } = usePagination();
+const { perPage: propTypesPerPage, currentPage: currentPropTypesPage } = usePagination(
+  15,
+  'config_prop_types'
+);
+const { perPage: propsPerPage, currentPage: currentPropsPage } = usePagination(15, 'config_props');
 const isSubmitting = ref(false);
 
 const newPropTypeModal = ref<InstanceType<typeof BModal>>();

diff --git a/client-v3/src/components/show/config/stage/SceneryList.vue b/client-v3/src/components/show/config/stage/SceneryList.vue
@@ -222,8 +222,14 @@ const systemStore = useSystemStore();
 const { confirm } = useConfirm();
 const { validationState } = useFormValidation();
 
-const { perPage: sceneryTypesPerPage, currentPage: currentSceneryTypesPage } = usePagination();
-const { perPage: sceneryPerPage, currentPage: currentSceneryPage } = usePagination();
+const { perPage: sceneryTypesPerPage, currentPage: currentSceneryTypesPage } = usePagination(
+  15,
+  'config_scenery_types'
+);
+const { perPage: sceneryPerPage, currentPage: currentSceneryPage } = usePagination(
+  15,
+  'config_scenery'
+);
 const isSubmitting = ref(false);
 
 const newSceneryTypeModal = ref<InstanceType<typeof BModal>>();

diff --git a/client-v3/src/components/show/config/stage/StageManager.vue b/client-v3/src/components/show/config/stage/StageManager.vue
@@ -450,8 +450,14 @@ const setExpanded = ref(false);
 const strikeExpanded = ref(false);
 const savingAssignment = ref(false);
 const newCrewSelections = ref<Record<string, number | null>>({});
-const { perPage: sceneryAllocPerPage, currentPage: currentSceneryAllocPage } = usePagination();
-const { perPage: propsAllocPerPage, currentPage: currentPropsAllocPage } = usePagination();
+const { perPage: sceneryAllocPerPage, currentPage: currentSceneryAllocPage } = usePagination(
+  15,
+  'config_stage_scenery_alloc'
+);
+const { perPage: propsAllocPerPage, currentPage: currentPropsAllocPage } = usePagination(
+  15,
+  'config_stage_props_alloc'
+);
 
 const goToSceneModal = ref<InstanceType<typeof BModal>>();
 const addSceneryModal = ref<InstanceType<typeof BModal>>();

diff --git a/client-v3/src/components/user/settings/CueColourPreferences.vue b/client-v3/src/components/user/settings/CueColourPreferences.vue
@@ -187,7 +187,7 @@ const columns = [
   { key: 'example', label: 'Example Cue Button' },
   { key: 'btn', label: '' },
 ];
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'user_cue_colour_prefs');
 
 const cueTypes = ref<CueType[]>([]);
 const isSubmittingNew = ref(false);

diff --git a/client-v3/src/components/user/settings/StageDirectionStyles.vue b/client-v3/src/components/user/settings/StageDirectionStyles.vue
@@ -273,7 +273,7 @@ const columns = [
   { key: 'example', label: 'Example Stage Direction' },
   { key: 'btn', label: '' },
 ];
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'user_stage_direction_styles');
 
 const stageDirectionStyles = ref<StageDirectionStyle[]>([]);
 const isSubmittingNew = ref(false);

diff --git a/client-v3/src/composables/usePagination.ts b/client-v3/src/composables/usePagination.ts
@@ -1,4 +1,6 @@
 import { ref, watch } from 'vue';
+import { useUserStore } from '@/stores/user';
+import type { UserSettings } from '@/types/api/user';
 
 export const PER_PAGE_OPTIONS = [
   { value: 10, text: '10' },
@@ -8,12 +10,21 @@ export const PER_PAGE_OPTIONS = [
   { value: 0, text: 'All' },
 ] as const;
 
-export function usePagination(defaultPerPage = 15) {
-  const perPage = ref(defaultPerPage);
+export function usePagination(defaultPerPage = 15, tableKey?: string) {
+  const userStore = useUserStore();
+
+  const storedValue = tableKey
+    ? ((userStore.userSettings as UserSettings).table_page_sizes?.[tableKey] ?? defaultPerPage)
+    : defaultPerPage;
+
+  const perPage = ref(storedValue);
   const currentPage = ref(1);
 
-  watch(perPage, () => {
+  watch(perPage, (newValue) => {
     currentPage.value = 1;
+    if (tableKey) {
+      userStore.updateTablePageSize(tableKey, newValue);
+    }
   });
 
   return { perPage, currentPage };

diff --git a/client-v3/src/stores/user.ts b/client-v3/src/stores/user.ts
@@ -246,6 +246,15 @@ export const useUserStore = defineStore('user', {
       }
     },
 
+    async updateTablePageSize(tableKey: string, value: number): Promise<void> {
+      const current = (this.userSettings as UserSettings).table_page_sizes ?? {};
+      await fetch(makeURL('/api/v1/user/settings'), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ table_page_sizes: { ...current, [tableKey]: value } }),
+      });
+    },
+
     async setupTokenRefresh(): Promise<void> {
       if (this.tokenRefreshInterval) clearInterval(this.tokenRefreshInterval);
       const refreshInterval = setInterval(

diff --git a/client-v3/src/types/api/user.ts b/client-v3/src/types/api/user.ts
@@ -24,4 +24,5 @@ export interface UserSettings {
   character_mru_sort: boolean;
   character_combined_dropdown: boolean;
   preferred_ui: string | null;
+  table_page_sizes: Record<string, number> | null;
 }
diff --git a/client-v3/src/views/show/config/ConfigCast.vue b/client-v3/src/views/show/config/ConfigCast.vue
@@ -132,7 +132,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_cast');
 const submittingNewCast = ref(false);
 const submittingEditCast = ref(false);
 const deletingCast = ref(false);

diff --git a/client-v3/src/views/show/config/ConfigCharacters.vue b/client-v3/src/views/show/config/ConfigCharacters.vue
@@ -187,7 +187,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_characters');
 const submittingNewCharacter = ref(false);
 const submittingEditCharacter = ref(false);
 const deletingCharacter = ref(false);

diff --git a/client-v3/src/views/show/config/ConfigCues.vue b/client-v3/src/views/show/config/ConfigCues.vue
@@ -228,7 +228,7 @@ const systemStore = useSystemStore();
 const showStore = useShowStore();
 const { confirm } = useConfirm();
 
-const { perPage, currentPage } = usePagination();
+const { perPage, currentPage } = usePagination(15, 'config_cues');
 const submittingNewCueType = ref(false);
 const submittingEditCueType = ref(false);
 const deletingCueType = ref(false);

diff --git a/client/src/mixins/paginationMixin.ts b/client/src/mixins/paginationMixin.ts
@@ -1,15 +1,39 @@
 import { defineComponent } from 'vue';
+import type { UserSettings } from '@/types/api/user';
 
 export default defineComponent({
   data() {
     return {
       rowsPerPage: 15 as number,
       currentPage: 1 as number,
+      tableKey: '' as string,
     };
   },
   watch: {
-    rowsPerPage(this: { currentPage: number }) {
+    rowsPerPage(
+      this: {
+        currentPage: number;
+        tableKey: string;
+        $store: { dispatch: (a: string, p: unknown) => void };
+      },
+      newValue: number
+    ) {
       this.currentPage = 1;
+      if (this.tableKey) {
+        this.$store.dispatch('UPDATE_TABLE_PAGE_SIZE', {
+          tableKey: this.tableKey,
+          value: newValue,
+        });
+      }
     },
   },
+  created() {
+    if (this.tableKey) {
+      const settings = this.$store.getters.USER_SETTINGS as UserSettings | null;
+      const stored = settings?.table_page_sizes?.[this.tableKey];
+      if (stored != null) {
+        this.rowsPerPage = stored;
+      }
+    }
+  },
 });
diff --git a/client/src/store/modules/user/settings.ts b/client/src/store/modules/user/settings.ts
@@ -47,6 +47,19 @@ const module: Module<SettingsState, RootState> = {
         log.error('Unable to fetch user settings');
       }
     },
+    async UPDATE_TABLE_PAGE_SIZE(
+      context,
+      { tableKey, value }: { tableKey: string; value: number }
+    ) {
+      const current =
+        (context.state.userSettings as { table_page_sizes?: Record<string, number> })
+          .table_page_sizes ?? {};
+      await fetch(makeURL('/api/v1/user/settings'), {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ table_page_sizes: { ...current, [tableKey]: value } }),
+      });
+    },
     async UPDATE_SETTINGS(context, payload) {
       context.commit('UPDATE_SETTINGS', payload);
       await context.dispatch('SETTINGS_CHANGED');

diff --git a/client/src/types/api/user.ts b/client/src/types/api/user.ts
@@ -23,4 +23,5 @@ export interface UserSettings {
   console_log_level: string;
   character_mru_sort: boolean;
   character_combined_dropdown: boolean;
+  table_page_sizes: Record<string, number> | null;
 }
diff --git a/client/src/views/show/config/ConfigCast.vue b/client/src/views/show/config/ConfigCast.vue
@@ -156,6 +156,7 @@ export default defineComponent({
   mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
+      tableKey: 'config_cast',
       castFields: ['first_name', 'last_name', { key: 'btn', label: '' }],
       newFormState: {
         firstName: '',

diff --git a/client/src/views/show/config/ConfigCharacters.vue b/client/src/views/show/config/ConfigCharacters.vue
@@ -213,6 +213,7 @@ export default defineComponent({
   mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
+      tableKey: 'config_characters',
       characterFields: [
         'name',
         'description',

diff --git a/client/src/views/show/config/ConfigCues.vue b/client/src/views/show/config/ConfigCues.vue
@@ -236,6 +236,7 @@ export default defineComponent({
   mixins: [paginationMixin],
   data() {
     return {
+      tableKey: 'config_cues',
       cueTypeFields: ['prefix', 'description', 'colour', { key: 'btn', label: '' }],
       newCueTypeForm: {
         prefix: '',

diff --git a/client/src/vue_components/config/ConfigShows.vue b/client/src/vue_components/config/ConfigShows.vue
@@ -157,6 +157,7 @@ export default defineComponent({
   mixins: [paginationMixin],
   data() {
     return {
+      tableKey: 'config_shows',
       loaded: false,
       showFields: [
         { key: 'id', label: 'ID' },

diff --git a/client/src/vue_components/config/ConfigSystem.vue b/client/src/vue_components/config/ConfigSystem.vue
@@ -118,6 +118,7 @@ export default defineComponent({
   mixins: [paginationMixin],
   data() {
     return {
+      tableKey: 'config_system_clients',
       connectedClients: [] as unknown[],
       clientFields: [
         { key: 'internal_id', label: 'UUID' },

diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigActs.vue
@@ -172,6 +172,7 @@ export default defineComponent({
   mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
+      tableKey: 'config_acts',
       loading: true,
       actFields: [
         'name',

diff --git a/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue b/client/src/vue_components/show/config/acts_and_scenes/ConfigScenes.vue
@@ -222,6 +222,7 @@ export default defineComponent({
   mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
+      tableKey: 'config_scenes',
       loading: true,
       sceneFields: [
         'name',

diff --git a/client/src/vue_components/show/config/characters/CharacterGroups.vue b/client/src/vue_components/show/config/characters/CharacterGroups.vue
@@ -175,6 +175,7 @@ export default defineComponent({
   mixins: [formValidationMixin, paginationMixin],
   data() {
     return {
+      tableKey: 'config_character_groups',
       loading: true,
       characterGroupFields: ['name', 'description', 'characters', { key: 'btn', label: '' }],
       tempCharacterList: [] as any[],

diff --git a/client/src/vue_components/show/config/mics/MicList.vue b/client/src/vue_components/show/config/mics/MicList.vue
@@ -147,6 +147,7 @@ export default defineComponent({
   mixins: [paginationMixin],
   data() {
     return {
+      tableKey: 'config_mics',
       micFields: ['name', 'description', { key: 'btn', label: '' }],
       newMicrophoneForm: {
         name: '',

diff --git a/client/src/vue_components/show/config/script/StageDirectionStyles.vue b/client/src/vue_components/show/config/script/StageDirectionStyles.vue
@@ -347,11 +347,14 @@ import { defineComponent } from 'vue';
 import { mapGetters, mapActions } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import log from 'loglevel';
+import paginationMixin from '@/mixins/paginationMixin';
 
 export default defineComponent({
   name: 'StageDirectionConfigs',
+  mixins: [paginationMixin],
   data() {
     return {
+      tableKey: 'show_stage_direction_styles',
       exampleText: 'Your stage direction will look like this when formatted in the script!',
       columns: [
         'description',
@@ -363,8 +366,6 @@ export default defineComponent({
         { key: 'example', label: 'Example Stage Direction' },
         { key: 'btn', label: '' },
       ],
-      rowsPerPage: 15,
-      currentPage: 1,
       newStyleFormState: {
         description: '',
         styleOptions: [

diff --git a/client/src/vue_components/show/config/sessions/SessionTagList.vue b/client/src/vue_components/show/config/sessions/SessionTagList.vue
@@ -243,6 +243,7 @@ export default defineComponent({
   mixins: [paginationMixin],
   data() {
     return {
+      tableKey: 'config_session_tags',
       tagFields: [
         { key: 'tag', label: 'Tag' },
         { key: 'session_count', label: 'Sessions' },