TypeCheck Frontend

[samfreund]

Description

We recently had an error that would've been caught by type checking in the frontend (see #2393). This PR implements type checking so that future errors will be caught.

Additionally, this PR contains miscellaneous frontend cleanup that's tangentially related to type-checking.

Meta

Merge checklist:

• Pull Request title is short, imperative summary of proposed changes
• The description documents the what and why, including events that led to this PR
• If this PR changes behavior or adds a feature, user documentation is updated
• If this PR touches photon-serde, all messages have been regenerated and hashes have not changed unexpectedly
• If this PR touches configuration, this is backwards compatible with all settings going back to the previous seasons's last release (seasons end after champs ends)
• If this PR touches pipeline settings or anything related to data exchange, the frontend typing is updated
• If this PR addresses a bug, a regression test for it is added
• If this PR adds a dependency, the license has been checked for compatibility and steps taken to follow it

[samfreund]

Grrrr, type checking didn't type check (error was introduced and uncaught)

[Gold856]

Too much use of as. Try using https://vuejs.org/api/sfc-script-setup.html#generics to fix most of the instances where you need as. We need to ensure the types are actually correct, not just promise that it's correct.

[Copilot]

Pull request overview

Copilot reviewed 42 out of 44 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• photon-client/pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (1)

photon-client/src/components/common/pv-select.vue:60

• SelectItem includes an optional disabled field, and some call sites populate it (e.g. to disable rotations for CSI cameras). However pv-select doesn't pass item-level disabled state through to v-select, so those options can still be selected. Wire SelectItem.disabled into Vuetify's item props (e.g. via item-props / item-disabled support) so disabled items are actually non-selectable.

export interface SelectItem<TValue extends string | number> {
  name: string | number;
  value: TValue;
  disabled?: boolean;
}

type SelectItems = SelectItem<T>[] | ReadonlyArray<T>;
const value = defineModel<T>({ required: true });

const props = withDefaults(
  defineProps<{
    label?: string;
    tooltip?: string;
    selectCols?: number;
    disabled?: boolean;
    items: SelectItems;
  }>(),
  {
    selectCols: 9,
    disabled: false
  }
);

const areSelectItems = (items: SelectItems): items is SelectItem<T>[] => typeof items[0] === "object";

// Computed in case items changes
const items = computed<SelectItem<T>[]>(() => {
  // Trivial case for empty list; we have no data
  if (!props.items.length) {
    return [];
  }

  if (areSelectItems(props.items)) {
    return props.items;
  }

  return props.items.map((item) => ({ name: item, value: item }));
});
</script>

<template>
  <div class="d-flex">
    <v-col :cols="12 - selectCols" class="d-flex align-center pl-0 pt-10px pb-10px">
      <tooltipped-label :tooltip="tooltip" :label="label" />
    </v-col>
    <v-col :cols="selectCols" class="d-flex align-center pr-0 pt-10px pb-10px">
      <v-select
        v-model="value"
        :items="items"
        item-title="name"
        item-value="value"
        :disabled="disabled"
        hide-details="auto"
        variant="underlined"
        density="compact"
      />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.