chore: fix a bunch of tsc errors

prolly needs testing

frontend/src/app.vue

@@ -7,13 +7,11 @@ import { computed } from "vue";
 import { useSettingsStore } from "~/store/useSettingsStore";
 import { settingsLog } from "~/composables/useLog";
 import { useAuthStore } from "~/store/auth";
-import { onErrorCaptured, transformAxiosError, useAccentColor, useRoute, useRuntimeConfig } from "#imports";
+import { onErrorCaptured, transformAxiosError, useAccentColor, useRuntimeConfig } from "#imports";
 
 // popper needs this?
 import "regenerator-runtime/runtime";
 
-const route = useRoute();
-
 // keep in sync with error.vue, cause reasons
 const runtimeConfig = useRuntimeConfig();
 const authStore = useAuthStore();

frontend/src/app/router.options.ts

@@ -3,7 +3,7 @@ import type { RouterHistory, RouterOptions } from "vue-router";
 
 type RouterConfig = Partial<Omit<RouterOptions, "history" | "routes">> & {
   history?: (baseURL?: string) => RouterHistory;
-  routes?: (_routes: RouterOptions$1["routes"]) => RouterOptions$1["routes"];
+  routes?: (_routes: RouterOptions["routes"]) => RouterOptions["routes"];
   hashMode?: boolean;
 };
 

frontend/src/components/Flags.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useRoute } from "vue-router";
 import { ref } from "vue";
 import type { Flag, HangarFlagNotification } from "hangar-internal";
 import type { PaginatedResult } from "hangar-api";
@@ -20,7 +19,6 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
-const route = useRoute();
 const flags = await (props.resolved ? useResolvedFlags() : useUnresolvedFlags());
 const loading = ref<{ [key: number]: boolean }>({});
 

frontend/src/components/Markdown.vue

@@ -1,17 +1,16 @@
 <script lang="ts" setup>
 import { computed, watchPostEffect } from "vue";
-import { useI18n } from "vue-i18n";
 import { usePrismStore } from "~/store/prism";
 import { parseMarkdown } from "~/composables/useMarked";
 import { useDomPurify } from "~/composables/useDomPurify";
 
-const i18n = useI18n();
 const props = withDefaults(
   defineProps<{
-    raw: string;
+    raw?: string;
     inline?: boolean;
   }>(),
   {
+    raw: undefined,
     inline: false,
   }
 );

frontend/src/components/MarkdownEditor.client.vue

@@ -14,7 +14,7 @@ import { hasSlotContent } from "~/composables/useSlot";
 
 const props = withDefaults(
   defineProps<{
-    raw: string;
+    raw?: string | null;
     editing: boolean;
     deletable: boolean;
     cancellable: boolean;
@@ -27,6 +27,7 @@ const props = withDefaults(
     label?: string;
   }>(),
   {
+    raw: undefined,
     maxlength: 30_000,
     errorMessages: undefined,
     rules: undefined,

frontend/src/components/MarkdownEditor.server.vue

@@ -4,7 +4,7 @@ import Markdown from "~/components/Markdown.vue";
 import Button from "~/components/design/Button.vue";
 withDefaults(
   defineProps<{
-    raw: string;
+    raw?: string | null;
     editing: boolean;
     deletable: boolean;
     cancellable: boolean;
@@ -17,6 +17,7 @@ withDefaults(
     label?: string;
   }>(),
   {
+    raw: undefined,
     maxlength: 30_000,
     errorMessages: undefined,
     rules: undefined,

frontend/src/components/SortableTable.vue

@@ -29,8 +29,6 @@ const expanded = ref<Record<number, boolean>>({});
 const sorter = reactive<Record<string, number>>(props.initialSorter || {});
 const sorted = ref<T[]>(props.items);
 
-const page = ref(0);
-
 function sort() {
   if (props.serverPagination) {
     // if we use server fetched data, we don't want to sort on the client, ever

frontend/src/components/UserHeader.vue

@@ -123,14 +123,14 @@ const canEditCurrentUser = computed<boolean>(() => {
         <span>{{ i18n.t("author.memberSince", [i18n.d(viewingUser.createdAt, "date")]) }}</span>
         <span>{{ i18n.t("author.numProjects", [viewingUser.projectCount], viewingUser.projectCount) }}</span>
         <span class="inline-flex space-x-1">
-          <Tag v-for="roleId in viewingUser.roles" :key="roleId" :color="{ background: getRole(roleId).color }" :name="getRole(roleId).title" />
+          <Tag v-for="roleId in viewingUser.roles" :key="roleId" :color="{ background: getRole(roleId)?.color }" :name="getRole(roleId)?.title" />
         </span>
       </div>
     </div>
     <div class="md:hidden flex flex-col items-center space-y-1 flex-shrink-0">
       <span>{{ i18n.t("author.memberSince", [i18n.d(viewingUser.createdAt, "date")]) }}</span>
       <span>{{ i18n.t("author.numProjects", [viewingUser.projectCount], viewingUser.projectCount) }}</span>
-      <Tag v-for="roleId in viewingUser.roles" :key="roleId" :color="{ background: getRole(roleId).color }" :name="getRole(roleId).title" />
+      <Tag v-for="roleId in viewingUser.roles" :key="roleId" :color="{ background: getRole(roleId)?.color }" :name="getRole(roleId)?.title" />
     </div>
   </Card>
   <hr class="border-gray-400 dark:border-gray-500 my-4 mb-4" />

frontend/src/components/design/Button.vue

@@ -5,7 +5,7 @@ import Spinner from "~/components/design/Spinner.vue";
 import { NuxtLink } from "#components";
 
 defineEmits<{
-  (e: "click"): void;
+  click: [event: MouseEvent];
 }>();
 const props = withDefaults(
   defineProps<{

frontend/src/components/layout/Header.vue

@@ -114,7 +114,8 @@ function updateNavData() {
   useInternalApi<HangarUser>("users/@me")
     .catch((e) => handleRequestError(e))
     .then((user) => {
-      return (authStore.user = unref(user));
+      if (!user) return;
+      authStore.user = unref(user);
     });
 }
 

frontend/src/components/logos/licenses/LicenseLogo.vue

@@ -4,7 +4,7 @@ import GPLLogo from "~/components/logos/licenses/GPLLogo.vue";
 import LGPLLogo from "~/components/logos/licenses/LGPLLogo.vue";
 import AGPLLogo from "~/components/logos/licenses/AGPLLogo.vue";
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     license: string;
     size?: number;

frontend/src/components/modals/ChannelModal.vue

@@ -7,7 +7,7 @@ import Button from "~/components/design/Button.vue";
 import Modal from "~/components/modals/Modal.vue";
 import { useBackendData } from "~/store/backendData";
 import InputText from "~/components/ui/InputText.vue";
-import { isSame, maxLength, minLength, pattern, required } from "~/composables/useValidationHelpers";
+import { isSame, maxLength, pattern, required } from "~/composables/useValidationHelpers";
 import { validChannelName, validChannelColor } from "~/composables/useHangarValidations";
 import InputCheckbox from "~/components/ui/InputCheckbox.vue";
 import { ChannelFlag } from "~/types/enums";
@@ -105,7 +105,7 @@ reset();
             required(),
             maxLength()(useBackendData.validations.project.channels.max),
             pattern()(useBackendData.validations.project.channels.regex),
-            validChannelName()(props.projectId, props.channel?.name),
+            validChannelName()(String(props.projectId), props.channel?.name),
           ]"
           counter
         />
@@ -130,7 +130,7 @@ reset();
         <InputText
           v-model="color"
           :label="i18n.t('channel.modal.pickedColor')"
-          :rules="[required(), validChannelColor()(props.projectId, props.channel?.color)]"
+          :rules="[required(), validChannelColor()(String(props.projectId), props.channel?.color)]"
           readonly
           disabled
         />

frontend/src/components/modals/DeleteUserModal.vue

@@ -2,7 +2,6 @@
 import { useI18n } from "vue-i18n";
 import type { User } from "hangar-api";
 import { ref } from "vue";
-import { useRouter } from "vue-router";
 import { useVuelidate } from "@vuelidate/core";
 import Button from "~/components/design/Button.vue";
 import Modal from "~/components/modals/Modal.vue";
@@ -18,7 +17,6 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
-const router = useRouter();
 const v = useVuelidate();
 const comment = ref<string>("");
 

frontend/src/components/modals/DependencyEditModal.vue

@@ -2,7 +2,7 @@
 import { useI18n } from "vue-i18n";
 import type { HangarProject, HangarVersion, IPlatform } from "hangar-internal";
 import { computed, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import type { DependencyVersion, PluginDependency } from "hangar-api";
 import { cloneDeep } from "lodash-es";
 import { hasPerms } from "~/composables/usePerm";
@@ -21,7 +21,6 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
-const route = useRoute();
 const router = useRouter();
 
 const projectVersion = computed(() => {

frontend/src/components/modals/DiffModal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { type TranslateResult, useI18n } from "vue-i18n";
+import { type TranslateResult } from "vue-i18n";
 import { DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, diff_match_patch as Diff } from "diff-match-patch";
 import { computed } from "vue";
 import Modal from "~/components/modals/Modal.vue";
@@ -11,8 +11,6 @@ const props = defineProps<{
   right: string;
 }>();
 
-const i18n = useI18n();
-
 const diff = computed(() => {
   const differ = new Diff();
   const textDiff = differ.diff_main(props.left, props.right);

frontend/src/components/modals/FlagModal.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
 import { ref } from "vue";
 import type { HangarProject } from "hangar-internal";
 import Button from "~/components/design/Button.vue";
@@ -25,7 +24,6 @@ const emit = defineEmits<{
 }>();
 
 const i18n = useI18n();
-const router = useRouter();
 
 const flagReason = ref<string>();
 const flagComment = ref<string>();

frontend/src/components/modals/MarkdownModal.vue

@@ -3,7 +3,7 @@ import type { TranslateResult } from "vue-i18n";
 import Markdown from "~/components/Markdown.vue";
 import Modal from "~/components/modals/Modal.vue";
 
-const props = defineProps<{
+defineProps<{
   title: string | TranslateResult;
   markdownInput: string;
 }>();

frontend/src/components/modals/NewPageModal.vue

@@ -29,13 +29,13 @@ const modal = ref<any | null>(null); // Filled by vue
 
 const pageRoots = computed(() => [{ value: -1, text: "<none>" }, ...flatDeep(props.pages, "")]);
 const name = ref("");
-const parent = ref<number | null>(null);
+const parent = ref<number>();
 const loading = ref<boolean>(false);
 
 const body = computed(() => ({
   projectId: props.projectId,
   name: name.value,
-  parentId: parent.value === -1 ? null : parent.value,
+  parentId: parent.value === -1 ? undefined : parent.value,
 }));
 const rules = [
   required(),
@@ -66,7 +66,7 @@ async function createPage() {
     });
 
     name.value = "";
-    parent.value = null;
+    parent.value = undefined;
 
     if (updateProjectPagesCallback) {
       updateProjectPagesCallback(await useInternalApi<HangarProjectPage[]>(`pages/list/${props.projectId}`, "get"));

frontend/src/components/modals/OrgTransferModal.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import { useRouter } from "vue-router";
 import { ref } from "vue";
 import type { PaginatedResult, User } from "hangar-api";
 import Button from "~/components/design/Button.vue";
@@ -15,7 +14,6 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
-const router = useRouter();
 const notificationStore = useNotificationStore();
 
 const search = ref<string>("");

frontend/src/components/modals/OrgVisibilityModal.vue

@@ -42,7 +42,7 @@ async function changeOrgVisibility(org: string) {
     <p>{{ i18n.t("author.orgVisibilityModal") }}</p>
 
     <ul class="p-2">
-      <li v-for="(hidden, org) in internalVisibility" :key="org">
+      <li v-for="(_, org) in internalVisibility" :key="org">
         <InputCheckbox v-model="internalVisibility[org]" :label="org" :disabled="loading" @change="changeOrgVisibility(org)"></InputCheckbox>
       </li>
     </ul>

frontend/src/components/modals/PlatformVersionEditModal.vue

@@ -2,7 +2,7 @@
 import { useI18n } from "vue-i18n";
 import type { HangarProject, HangarVersion, IPlatform } from "hangar-internal";
 import { computed, ref } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRouter } from "vue-router";
 import { useVuelidate } from "@vuelidate/core";
 import Button from "~/components/design/Button.vue";
 import Modal from "~/components/modals/Modal.vue";
@@ -19,7 +19,6 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
-const route = useRoute();
 const router = useRouter();
 
 const projectVersion = computed(() => {

frontend/src/components/modals/ReportNotificationModal.vue

@@ -8,7 +8,6 @@ import Modal from "~/components/modals/Modal.vue";
 import InputTextarea from "~/components/ui/InputTextarea.vue";
 import { useInternalApi } from "~/composables/useApi";
 import { handleRequestError } from "~/composables/useErrorHandling";
-import { useNotificationStore } from "~/store/notification";
 import InputCheckbox from "~/components/ui/InputCheckbox.vue";
 
 const props = defineProps<{
@@ -17,7 +16,6 @@ const props = defineProps<{
 }>();
 
 const i18n = useI18n();
-const notification = useNotificationStore();
 const router = useRouter();
 
 const content = ref<string>("");
@@ -43,11 +41,11 @@ async function submit() {
     "
     window-classes="w-150"
   >
-    <template #default="{ on }">
+    <template #default>
       <span v-if="!sendToReporter">Note that changing the visibility already sends a notification to the project's members.</span>
       <InputTextarea v-model.trim="content" rows="2" :label="i18n.t('flagReview.notification.prompt')" class="pb-2" />
       <InputCheckbox v-model="warning" :label="i18n.t('flagReview.notification.asWarning')" />
-      <Button class="mt-3" :disabled="content.length === 0" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
+      <Button class="mt-3" :disabled="content.length === 0" @click="submit">{{ i18n.t("general.submit") }}</Button>
     </template>
     <template #activator="{ on }">
       <Button v-bind="$attrs" class="mr-1" v-on="on">

frontend/src/components/modals/VisibilityChangerModal.vue

@@ -50,8 +50,8 @@ async function submit(): Promise<void> {
 
 <template>
   <Modal :title="i18n.t('visibility.modal.title', [type])" window-classes="w-150">
-    <template #default="{ on }">
-      Currently: {{ i18n.t(currentVisibility.title) }}
+    <template #default>
+      Currently: {{ i18n.t(currentVisibility?.title) }}
       <InputRadio v-for="vis in visibilities" :key="vis.name" v-model="visibility" :value="vis.name" :label="i18n.t(vis.title)" class="block" />
 
       <div v-if="showTextarea">
@@ -60,7 +60,7 @@ async function submit(): Promise<void> {
         <br />
       </div>
 
-      <Button class="mt-3" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
+      <Button class="mt-3" @click="submit">{{ i18n.t("general.submit") }}</Button>
     </template>
     <template #activator="{ on }">
       <Button v-bind="$attrs" class="mr-1" v-on="on">

frontend/src/components/projects/DependencyTable.vue

@@ -69,7 +69,7 @@ function reset() {
   selectedTab.value.splice(0);
 }
 
-async function onSearch(val: string, index: number) {
+async function onSearch(val: string | undefined, index: number) {
   if (val) {
     const projects = await useApi<PaginatedResult<Project>>(`projects?limit=25&offset=0&q=${val.replace("/", " ")}`);
     completionResults.value[index] = projects.result
@@ -99,7 +99,7 @@ const selectedUploadTabs: Tab[] = [
   { value: "url", header: "URL" },
 ];
 
-function changeTabs(val: string, idx: number) {
+function changeTabs(val: string | undefined, idx: number) {
   if (val === "file") {
     dependencies.value[idx].externalUrl = null;
   } else if (val === "url") {

frontend/src/components/projects/DownloadButton.vue

@@ -85,9 +85,9 @@ function trackDownload(platform: Platform, version: DownloadableVersion & { id?:
 <template>
   <div class="flex items-center">
     <div v-if="pinnedVersion">
-      <div v-if="Object.keys(props.pinnedVersion.downloads).length === 1">
+      <div v-if="pinnedVersion && Object.keys(pinnedVersion.downloads).length === 1">
         <a
-          v-for="(v, p) in pinnedVersion.platformDependenciesFormatted"
+          v-for="(_, p) in pinnedVersion.platformDependenciesFormatted"
           :key="p"
           class="flex items-center"
           :href="downloadLink(p, pinnedVersion)"