It's impossible to be set on a type schema

src/app.d.ts

@@ -15,16 +15,20 @@ declare global {
     // Use possibly undefined `?:` for when a property is optional, meaning it could be there, or it could be not applicable
     // Use possibly null `| null` for when the property is expected to be there but could possbily be explicitly empty
 
+    // Do not store data from other services in the database, only the data necessary to fetch whatever you need.
+    // This avoid syncronization issues. E.g. Store userId, and urlOrigin to fetch the user's name and profile picture.
+
     interface User {
         id: string
         username: string
         password?: string
     }
 
+    type serviceType = 'jellyfin' | 'youtube-music'
+
     interface Service {
-        type: 'jellyfin' | 'youtube-music'
+        type: serviceType
         userId: string
-        username: string
         urlOrigin: string
     }
 
@@ -46,7 +50,7 @@ declare global {
     // Big data should be fetched as needed in the app, these exist to ensure that the info necessary to fetch that data is there.
     interface MediaItem {
         connectionId: string
-        service: Service
+        serviceType: serviceType
         type: 'song' | 'album' | 'playlist' | 'artist'
         id: string
         name: string
@@ -96,7 +100,6 @@ declare global {
         // So, ONLY DEFINE THE INTERFACES FOR DATA THAT IS GARUNTEED TO BE RETURNED (unless the data value itself is inherently optional)
         interface JFService extends Service {
             type: 'jellyfin'
-            serverName: string
         }
 
         interface JFTokens implements Tokens {
@@ -178,7 +181,6 @@ declare global {
     namespace YouTubeMusic {
         interface YTService extends Service {
             type: 'youtube-music'
-            profilePicture?: string
         }
 
         interface YTTokens implements Tokens {

src/lib/service-managers/jellyfin.ts

@@ -29,7 +29,7 @@ export class Jellyfin {
 
         return {
             connectionId: id,
-            service,
+            serviceType: service.type,
             type: 'song',
             id: song.Id,
             name: song.Name,
@@ -60,7 +60,7 @@ export class Jellyfin {
 
         return {
             connectionId: id,
-            service,
+            serviceType: service.type,
             type: 'album',
             id: album.Id,
             name: album.Name,
@@ -78,7 +78,7 @@ export class Jellyfin {
 
         return {
             connectionId: id,
-            service,
+            serviceType: service.type,
             type: 'playlist',
             id: playlist.Id,
             name: playlist.Name,
@@ -93,7 +93,7 @@ export class Jellyfin {
 
         return {
             connectionId: id,
-            service,
+            serviceType: service.type,
             type: 'artist',
             id: artist.Id,
             name: artist.Name,

src/routes/settings/connections/+page.server.ts

@@ -51,9 +51,9 @@ export const actions: Actions = {
         const serviceData: Jellyfin.JFService = {
             type: 'jellyfin',
             userId: authData.User.Id,
-            username: userData.Name,
+            // username: userData.Name,
             urlOrigin: serverUrl.toString(),
-            serverName: systemData.ServerName,
+            // serverName: systemData.ServerName,
         }
         const tokenData: Jellyfin.JFTokens = {
             accessToken: authData.AccessToken,
@@ -89,9 +89,9 @@ export const actions: Actions = {
         const serviceData: YouTubeMusic.YTService = {
             type: 'youtube-music',
             userId: userChannel.id as string,
-            username: userChannel.snippet?.title as string,
+            // username: userChannel.snippet?.title as string,
             urlOrigin: 'https://www.googleapis.com/youtube/v3',
-            profilePicture: userChannel.snippet?.thumbnails?.default?.url as string | undefined,
+            // profilePicture: userChannel.snippet?.thumbnails?.default?.url as string | undefined,
         }
 
         const newConnectionResponse = await fetch(`/api/users/${locals.user.id}/connections`, {
@@ -105,9 +105,13 @@ export const actions: Actions = {
         const newConnection: YouTubeMusic.YTConnection = await newConnectionResponse.json()
         return { newConnection }
     },
+    refreshConnection: async ({ request }) => {
+        const formData = await request.formData()
+        const connectionId = formData.get('connectionId')?.toString() as string
+    },
     deleteConnection: async ({ request, fetch, locals }) => {
         const formData = await request.formData()
-        const connectionId = formData.get('connectionId')
+        const connectionId = formData.get('connectionId')?.toString() as string
 
         const deleteConnectionResponse = await fetch(`/api/users/${locals.user.id}/connections`, {
             method: 'DELETE',

src/routes/settings/connections/+page.svelte

@@ -74,7 +74,10 @@
         }
     }
 
-    const deleteConnection: SubmitFunction = () => {
+    const profileActions: SubmitFunction = ({ action, cancel }) => {
+        console.log(action)
+        cancel()
+
         return ({ result }) => {
             if (result.type === 'failure') {
                 return ($newestAlert = ['warning', result.data?.message])
@@ -108,9 +111,9 @@
             </form>
         </div>
     </section>
-    <div class="grid gap-8 grid-cols-3">
+    <div id="connection-profile-grid" class="grid gap-8">
         {#each connections as connection}
-            <ConnectionProfile {connection} submitFunction={deleteConnection} />
+            <ConnectionProfile {connection} submitFunction={profileActions} />
         {/each}
     </div>
     {#if newConnectionModal !== null}
@@ -122,4 +125,7 @@
     .add-connection-button {
         background-image: linear-gradient(to bottom, rgb(30, 30, 30), rgb(10, 10, 10));
     }
+    #connection-profile-grid {
+        grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
+    }
 </style>

src/routes/settings/connections/connectionProfile.svelte

@@ -23,7 +23,7 @@
             {/if}
         </div>
         <div>
-            <div>{connection.service.username}</div>
+            <div>Username</div>
             <div class="text-sm text-neutral-500">
                 {serviceData.displayName}
                 {#if 'serverName' in connection.service}
@@ -39,9 +39,9 @@
                 <form
                     use:enhance={submitFunction}
                     method="post"
-                    class="absolute right-0 top-full flex flex-col items-center justify-center gap-3 rounded-md bg-neutral-900 p-2 text-xs"
+                    class="absolute right-0 top-full flex flex-col items-center justify-center gap-1 rounded-md bg-neutral-900 p-2 text-xs"
                 >
-                    <button formaction="?/deleteConnection" class="py-2 px-3 whitespace-nowrap hover:bg-neutral-800 rounded-md" on:click={() => showModal = false}>
+                    <button formaction="?/deleteConnection" class="py-2 px-3 whitespace-nowrap hover:bg-neutral-800 rounded-md">
                         <i class="fa-solid fa-link-slash mr-1" />
                         Delete Connection
                     </button>