From 269d79327ebbf7ec52c1cd412d8f732fb23559cd Mon Sep 17 00:00:00 2001
From: Eclypsed <nicholas.tamassia@gmail.com>
Date: Mon, 12 Feb 2024 12:22:17 -0500
Subject: [PATCH] New styling on connection profiles

---
 src/app.d.ts                                  |   3 +-
 src/lib/server/users.db                       | Bin 24576 -> 24576 bytes
 .../settings/connections/+page.server.ts      |   4 +-
 src/routes/settings/connections/+page.svelte  |   2 +-
 .../connections/connectionProfile.svelte      |  40 +++++++++---------
 5 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/app.d.ts b/src/app.d.ts
index 837385b..7e6ab48 100644
--- a/src/app.d.ts
+++ b/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
         }
 
diff --git a/src/lib/server/users.db b/src/lib/server/users.db
index df45a2b3d6ac2f9d12c6f35d316b8677d464070a..c1dfafcb281b70d892a3a3289ececeb6fcb236eb 100644
GIT binary patch
delta 899
zcma))&2G~`0E83T0-_ZGBqXFFfubG&v1q;C_1Z`vxlPifBynxWZQM&(@2=xCX`Q&_
z&l2KCz!gwlfHQ|mE#l5waN)``a3$~rxy)%s-$*mBe`H_($bMSSu719~m0dl1uHT7R
z$aDrV0|+w?up|m#f>3}}4QmhyDJiLUcog^8$p&H@3fw3MzINR4n!!lAVNul&%mJ)e
zYI)c$i-SkhFAqwaBI=H}CG=CfgQKP$?VsQMmD^YZb`F=XUB0lklv!K4`upt7pH=65
zYx$Dry(1r1DCHW~u>dM01YjlPfN>mxK&V;}GKdUL7Gcc1>eCx1GC5{PGXFSV<h^PC
zM2gwRDxLkRetlIqIxKXzlWM!;wFZs8J1(Z(lmc?((6kgzFfZ=Iq17s;jRKtv2#<>t
z9`2IOX8+hjNUCNpZjh8E`jGEYRH+&<aB!;;jJs{CJ057ti~5e??Z&1vtc4nMtlipV
zuQAeg^^T(@<DIS@mi%byM?E}_%}T>c{Gsg~)wdL;F=?@_w*SoJwre^yw`7;Mo2b?~
zWX$abBud&6c)h|w+1ZR)duG+wUrndbuZHb`Wh?V!#dJ(_+w|P}xCE+3CE53zu``*E
zHk?YM_M*{OT9b;$y1KB_G}#+9hi*D@+f~)o6k8mixWb#<KPdpm-HBX#=!;tZVO~!9
zon)GStWZd)2BAT81Yf?rwQ{lMd2gQ#bQKdRRRkcx^Lqtz2^dvCU|@-nU`9ygLfdJU
zIs0PWoQ<sev+vdeK!nC6;z$V<j5*Y~q98+1Rn>^Xgpz-GC6mcq$em_#KXa$wu3t-Y
s>AfW{tB05qWauEo#=K961E3pN2MkKVMJNP<^1p9^-Yfr%i=1=$F9H7!9RL6T

delta 859
zcma))y>8P`0ELql1cFLwg~U=MswhJT++JT_Utd=O$xg|S<JfT$w@H?8{TDmUpY4Ry
zk*XF1Y)C*Jfe9AW@&bJfhQ0?YS=e*-Pe(`RyShzZ-KM|nrgy$R%cpm)-;n1%$MHaP
zJis{E;Ta@Cm!TFQ3=$yVEsO~#*jixw;{lCxkmgvBbBiT8kX7gKAkpoJm(7C_00)Pn
zQHjf@I}j5;oDG}$(3fG!JFH=4QG@!;-d!fQPT38(xBW1+ol0$OZf#z_`}?^5vAglW
zG(Yg4?o*F*AaXs1vw_GU2LXl>z%v9<<N|~+X2CigOH+Nd{GoEoZ|c+Ko%-`KucE1>
zMzaw)9#4Fs-vhYRZbVX5R;12}Z$Wj|u1*|WD37h;)QZ9&5s6C5gHzQGhDL#Q%GBx%
z%322~at-oRi{YAss_RK}BP=yqsMDJDX7X8!Q(Zr%$D$IC{5gbj&==b6f|5jaFq!cq
z_MB=RJ)o`p!VON0aA6e_RbJ41uU(N^XAP-dZ4``Bu?4Gv)Hg8+=unG&2~`PRjJbJW
zEOl-7a^!enNkLs+NmgW8s!LK)G8@{wz^Gz5Iwj5aX@4Aa<xtXuO1<`aI7F6LSCuIo
z7=1|k;iT3L5~%|<{I*dcJ)WC3lsSk85@`x{E4H&QvhMjLh?49PD*!=YMUDWLMHi`5
zdbett?_Y+Vi$zNm5aUtSV-P|XLosq04ht@ZF2F2=Yn_F4Y57^-e=>{RXher@_9*+`
z$mNaBFjVjaggBQ41UaHZI7kU35ZVs(EC{j}k5a3wjLQ7V{Q14J_dR3mZ<^_KWZGDP
I`|Aw(2jVvShX4Qo

diff --git a/src/routes/settings/connections/+page.server.ts b/src/routes/settings/connections/+page.server.ts
index 1df60d4..611320e 100644
--- a/src/routes/settings/connections/+page.server.ts
+++ b/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,
         }
 
diff --git a/src/routes/settings/connections/+page.svelte b/src/routes/settings/connections/+page.svelte
index fb94def..c1a4990 100644
--- a/src/routes/settings/connections/+page.svelte
+++ b/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}
diff --git a/src/routes/settings/connections/connectionProfile.svelte b/src/routes/settings/connections/connectionProfile.svelte
index d2d19d5..3f0738d 100644
--- a/src/routes/settings/connections/connectionProfile.svelte
+++ b/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">
-            <IconButton halo={true} on:click={() => (showUnlinkModal = !showUnlinkModal)}>
-                <i slot="icon" class="fa-solid fa-link-slash" />
+        <div class="relative ml-auto h-8 flex flex-row-reverse gap-2">
+            <IconButton halo={true} on:click={() => showModal = !showModal}>
+                <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>
-                    <div class="flex gap-4">
-                        <button class="w-20 rounded-md bg-red-500 px-2 py-1">Confirm</button>
-                        <button class="w-20 rounded-md bg-neutral-600 px-2 py-1" on:click|preventDefault={() => (showUnlinkModal = false)}>Cancel</button>
-                    </div>
+                    <button formaction="?/deleteConnection" class="py-2 px-3 whitespace-nowrap hover:bg-neutral-800 rounded-md" on:click={() => showModal = false}>
+                        <i class="fa-solid fa-link-slash mr-1" />
+                        Delete Connection
+                    </button>
                     <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>