New styling on connection profiles

src/app.d.ts

@@ -24,6 +24,7 @@ declare global {
     interface Service {
         type: 'jellyfin' | 'youtube-music'
         userId: string
+        username: string
         urlOrigin: string
     }
 
@@ -95,7 +96,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'
-            username: string
             serverName: string
         }
 
@@ -178,7 +178,6 @@ declare global {
     namespace YouTubeMusic {
         interface YTService extends Service {
             type: 'youtube-music'
-            username: string
             profilePicture?: string
         }
 

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

@@ -51,8 +51,8 @@ export const actions: Actions = {
         const serviceData: Jellyfin.JFService = {
             type: 'jellyfin',
             userId: authData.User.Id,
-            urlOrigin: serverUrl.toString(),
             username: userData.Name,
+            urlOrigin: serverUrl.toString(),
             serverName: systemData.ServerName,
         }
         const tokenData: Jellyfin.JFTokens = {
@@ -89,8 +89,8 @@ export const actions: Actions = {
         const serviceData: YouTubeMusic.YTService = {
             type: 'youtube-music',
             userId: userChannel.id as string,
-            urlOrigin: 'https://www.googleapis.com/youtube/v3',
             username: userChannel.snippet?.title as string,
+            urlOrigin: 'https://www.googleapis.com/youtube/v3',
             profilePicture: userChannel.snippet?.thumbnails?.default?.url as string | undefined,
         }
 

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

@@ -108,7 +108,7 @@
             </form>
         </div>
     </section>
-    <div class="grid gap-8">
+    <div class="grid gap-8 grid-cols-3">
         {#each connections as connection}
             <ConnectionProfile {connection} submitFunction={deleteConnection} />
         {/each}

src/routes/settings/connections/connectionProfile.svelte

@@ -3,22 +3,27 @@
     import IconButton from '$lib/components/util/iconButton.svelte'
     import Toggle from '$lib/components/util/toggle.svelte'
     import type { SubmitFunction } from '@sveltejs/kit'
-    import { fly, scale } from 'svelte/transition'
+    import { fly } from 'svelte/transition'
     import { enhance } from '$app/forms'
 
     export let connection: Connection
     export let submitFunction: SubmitFunction
 
-    const serviceData = Services[connection.service.type]
+    $: serviceData = Services[connection.service.type]
 
-    let showUnlinkModal = false
+    let showModal = false
 </script>
 
-<section class="overflow-hidden rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
+<section class="rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
     <header class="flex h-20 items-center gap-4 p-4">
-        <img src={serviceData.icon} alt="{serviceData.displayName} icon" class="aspect-square h-full p-1" />
+        <div class="h-full aspect-square p-1 relative">
+            <img src={serviceData.icon} alt="{serviceData.displayName} icon" />
+            {#if 'profilePicture' in connection.service && typeof connection.service.profilePicture === 'string'}
+                <img src="{connection.service.profilePicture}" alt="" class="absolute h-5 aspect-square bottom-0 right-0 rounded-full"/>
+            {/if}
+        </div>
         <div>
-            <div>{'username' in connection.service ? connection.service.username : 'Placeholder Account Name'}</div>
+            <div>{connection.service.username}</div>
             <div class="text-sm text-neutral-500">
                 {serviceData.displayName}
                 {#if 'serverName' in connection.service}
@@ -26,23 +31,20 @@
                 {/if}
             </div>
         </div>
-        <div class="relative ml-auto h-8">
+        <div class="relative ml-auto h-8 flex flex-row-reverse gap-2">
-            <IconButton halo={true} on:click={() => (showUnlinkModal = !showUnlinkModal)}>
+            <IconButton halo={true} on:click={() => showModal = !showModal}>
-                <i slot="icon" class="fa-solid fa-link-slash" />
+                <i slot="icon" class="fa-solid fa-ellipsis-vertical text-xl text-neutral-500" />
             </IconButton>
-            {#if showUnlinkModal}
+            {#if showModal}
                 <form
-                    transition:scale={{ start: 0.5 }}
                     use:enhance={submitFunction}
-                    action="?/deleteConnection"
                     method="post"
-                    class="absolute right-full top-0 flex -translate-x-3 flex-col items-center justify-center gap-3 rounded-md bg-neutral-925 p-4"
+                    class="absolute right-0 top-full flex flex-col items-center justify-center gap-3 rounded-md bg-neutral-900 p-2 text-xs"
                 >
-                    <span class="whitespace-nowrap">Delete Connection</span>
+                    <button formaction="?/deleteConnection" class="py-2 px-3 whitespace-nowrap hover:bg-neutral-800 rounded-md" on:click={() => showModal = false}>
-                    <div class="flex gap-4">
+                        <i class="fa-solid fa-link-slash mr-1" />
-                        <button class="w-20 rounded-md bg-red-500 px-2 py-1">Confirm</button>
+                        Delete Connection
-                        <button class="w-20 rounded-md bg-neutral-600 px-2 py-1" on:click|preventDefault={() => (showUnlinkModal = false)}>Cancel</button>
+                    </button>
-                    </div>
                     <input type="hidden" value={connection.id} name="connectionId" />
                 </form>
             {/if}
@@ -52,7 +54,7 @@
     <div class="p-4 text-sm text-neutral-400">
         <div class="grid grid-cols-[3rem_auto] gap-4">
             <Toggle on:toggled={(event) => console.log(event.detail.toggled)} />
-            <span>Enable Connection</span>
+            <span>Place for config</span>
         </div>
     </div>
 </section>