fix(ts): replace `import { type ...` with `import type { ...` to babysit ts/vite?

front/src/App.vue

@@ -4,7 +4,7 @@ import { watchEffect, computed, onMounted, nextTick } from 'vue'
 import { type QueueTrack, useQueue } from '~/composables/audio/queue'
 import { useStore } from '~/store'
 import useLogger from '~/composables/useLogger'
-import { useLocalStorage, useStyleTag, useIntervalFn} from '@vueuse/core'
+import { useStyleTag, useIntervalFn} from '@vueuse/core'
 import { color } from '~/composables/color';
 
 import { generateTrackCreditStringFromQueue } from '~/utils/utils'
@@ -80,7 +80,18 @@ store.dispatch('auth/fetchUser')
 <template>
   <div class="funkwhale responsive">
     <Sidebar />
-    <RouterView v-bind="color({}, ['default', 'solid'])()" />
+    <RouterView v-bind="color({}, ['default', 'solid'])()" v-slot="{ Component }">
+      <Transition v-if="Component" name="main" mode="out-in">
+        <KeepAlive :max="10">
+          <Suspense>
+            <component :is="Component" />
+            <template #fallback>
+              FALLBACK
+            </template>
+          </Suspense>
+        </KeepAlive>
+      </Transition>
+    </RouterView>
     <transition name="queue">
       <Queue v-show="store.state.ui.queueFocused" />
     </transition>

front/src/components/library/FileUpload.vue

@@ -88,10 +88,8 @@ const library = ref<Library>()
 
 watch(privacyLevel, (newValue) =>
   get({
-    query: {
       privacy_level: newValue,
       scope: 'me'
-    }
   })
   .then((data) =>
     library.value = data?.results.find(({name}) => name === privacyLevel.value)
@@ -100,20 +98,20 @@ watch(privacyLevel, (newValue) =>
 )
 
 // Old implementation:
-/*
-watch(privacyLevel, async(newValue) => { try {
-  const response = await axios.get<paths['/api/v2/libraries/']['get']['responses']['200']['content']['application/json']>('libraries/', {
-    params: {
-      privacy_level: privacyLevel.value,
-      scope: 'me'
-    }
-  })
 
-  library.value = response.data.results.find(({name})=>name===privacyLevel.value)
-} catch (error) {
-  useErrorHandler(error as Error)
-}}, { immediate: true })
-*/
+// watch(privacyLevel, async(newValue) => { try {
+//   const response = await axios.get<paths['/api/v2/libraries/']['get']['responses']['200']['content']['application/json']>('libraries/', {
+//     params: {
+//       privacy_level: privacyLevel.value,
+//       scope: 'me'
+//     }
+//   })
+
+//   library.value = response.data.results.find(({name})=>name===privacyLevel.value)
+// } catch (error) {
+//   useErrorHandler(error as Error)
+// }}, { immediate: true })
+
 
 //
 // File counts

front/src/store/channels.ts

@@ -28,6 +28,7 @@ const store: Module<State, RootState> = {
   state: {
     subscriptions: [],
     count: 0,
+    // TODO: Remove this. It has been moved to store/ui
     showUploadModal: false,
     latestPublication: null,
     uploadModalConfig: {

front/src/store/ui.ts

@@ -32,6 +32,8 @@ interface Message {
 
 type NotificationsKey = 'inbox' | 'pendingReviewEdits' | 'pendingReviewReports' | 'pendingReviewRequests'
 
+type IsOpen = 'true' | 'undefined'
+
 export interface State {
   currentLanguage: 'en_US' | keyof typeof SUPPORTED_LOCALES
   selectedLanguage: boolean
@@ -152,7 +154,7 @@ const store: Module<State, RootState> = {
         return 'large'
       }
     },
-    modalShown: (state, key) =>
+    modalIsOpen: (state, key) =>
       state.modalsOpen.has(key)
   },
   mutations: {
@@ -197,20 +199,15 @@ const store: Module<State, RootState> = {
 
     addModal (state, key) {
       state.modalsOpen.add(key)
-      console.log("Added", key, "->", state.modalsOpen)
     },
     removeModal (state, key) {
       state.modalsOpen.delete(key)
-      console.log("Removed", key, "->", state.modalsOpen)
     },
     toggleModal (state, key) {
       state.modalsOpen.has(key) ? state.modalsOpen.delete(key) : state.modalsOpen.add(key)
-      console.log("Toggled", key, "->", state.modalsOpen)
     },
-    setModal (state, [key, isOpen]:[string, boolean]) {
-      console.log("Set", key, "was:", state.modalsOpen.has(key) )
+    setModal (state, [key, isOpen]:[string, IsOpen]) {
       isOpen ? state.modalsOpen.add(key) : state.modalsOpen.delete(key)
-      console.log("Set", key, isOpen, "->", state.modalsOpen)
     },
 
     notifications (state, { type, count }: { type: NotificationsKey, count: number }) {

front/src/types.ts

@@ -68,6 +68,7 @@ export type LibraryFollow = components["schemas"]["LibraryFollow"]
 export type Cover = components["schemas"]["CoverField"]
 export type RateLimitStatus = components["schemas"]["RateLimit"]
 export type PaginatedAlbumList = components["schemas"]["PaginatedAlbumList"]
+export type SimpleArtist = components["schemas"]["SimpleArtist"]
 
 export type Artist = components['schemas']['SimpleArtist']
 

front/src/ui/composables/useClient.ts

@@ -1,5 +1,5 @@
-import { type paths } from '~/generated/types.ts'
-import { type Simplify } from 'type-fest'
+import type { paths } from '~/generated/types.ts'
+import type { Simplify } from 'type-fest'
 
 import axios from 'axios'
 import useErrorHandler from '~/composables/useErrorHandler'
@@ -16,7 +16,9 @@ type Get<TPath extends Path> = paths[`${Prefix}${TPath}/`]['get']
 type Post<TPath extends Path> = paths[`${Prefix}${TPath}/`]['post']
 
 type GetRequestParameters<TPath extends Path> =
-  Get<TPath> extends { parameters: any }
+  Get<TPath> extends { parameters: { query? : any } }
+  ? Get<TPath>['parameters']['query']
+  : Get<TPath> extends { parameters: any }
   ? Get<TPath>['parameters']
   : never
 
@@ -57,7 +59,7 @@ export const useClient = <TPath extends Path>( path: TPath ) => ({
 
   get: async (parameters: GetRequestParameters<TPath>) =>
     await axios.get<OK<TPath>>(`${prefix}${path}/`, {
-      params: parameters.query || parameters
+      params: parameters
     })
     .then(({ data }) => { return data })
     .catch (useErrorHandler),