From 106aee31bd54b3148de1fce6d418f398c2631e8a Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 28 Apr 2022 14:12:19 +0200
Subject: [PATCH] fix: Team switching moved to IAM menu

---
 src/routes/__layout.svelte  | 28 +----------------
 src/routes/iam/index.svelte | 62 +++++++++++++++++++++++++++----------
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 87d55c9a3..c5c5daddf 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -25,7 +25,6 @@
 		if (res.ok) {
 			return {
 				props: {
-					selectedTeamId: session.teamId,
 					...(await res.json())
 				}
 			};
@@ -35,9 +34,6 @@
 </script>
 
 <script>
-	export let teams;
-	export let selectedTeamId;
-
 	import '../tailwind.css';
 	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
 	import { page, session } from '$app/stores';
@@ -89,17 +85,6 @@
 			return errorNotification(error);
 		}
 	}
-	async function switchTeam() {
-		try {
-			await post(`/dashboard.json?from=${$page.url.pathname}`, {
-				cookie: 'teamId',
-				value: selectedTeamId
-			});
-			return window.location.reload();
-		} catch (error) {
-			return window.location.reload();
-		}
-	}
 
 	async function update() {
 		updateStatus.loading = true;
@@ -525,21 +510,10 @@
 		</div>
 	</nav>
 	{#if $session.whiteLabeled}
-		<span class="fixed  bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
+		<span class="fixed bottom-0 left-[50px] z-50 m-2 px-4 text-xs text-stone-700"
 			>Powered by <a href="https://coolify.io" target="_blank">Coolify</a></span
 		>
 	{/if}
-
-	<select
-		class="fixed right-0 bottom-0 z-50 m-2 w-64 bg-opacity-30 p-2 px-4 hover:bg-opacity-100"
-		bind:value={selectedTeamId}
-		on:change={switchTeam}
-	>
-		<option value="" disabled selected>Switch to a different team...</option>
-		{#each teams as team}
-			<option value={team.teamId}>{team.team.name} - {team.permission}</option>
-		{/each}
-	</select>
 {/if}
 <main>
 	<slot />
diff --git a/src/routes/iam/index.svelte b/src/routes/iam/index.svelte
index 67b104baa..d7f214aca 100644
--- a/src/routes/iam/index.svelte
+++ b/src/routes/iam/index.svelte
@@ -25,7 +25,7 @@
 </script>
 
 <script lang="ts">
-	import { session } from '$app/stores';
+	import { page, session } from '$app/stores';
 	import { get, post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
 	import { toast } from '@zerodevx/svelte-toast';
@@ -81,6 +81,18 @@
 			return errorNotification(error);
 		}
 	}
+
+	async function switchTeam(selectedTeamId) {
+		try {
+			await post(`/dashboard.json?from=${$page.url.pathname}`, {
+				cookie: 'teamId',
+				value: selectedTeamId
+			});
+			return window.location.reload();
+		} catch (error) {
+			return window.location.reload();
+		}
+	}
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
@@ -175,20 +187,39 @@
 			<div class="flex flex-row flex-wrap justify-center px-2 pb-10 md:flex-row">
 				{#each ownTeams as team}
 					<a href="/iam/team/{team.id}" class="w-96 p-2 no-underline">
-						<div
-							class="box-selection relative"
-							class:hover:bg-fuchsia-600={team.id !== '0'}
-							class:hover:bg-red-500={team.id === '0'}
-						>
-							<div class="truncate text-center text-xl font-bold">
-								{team.name}
+						<div class="box-selection relative">
+							<div>
+								<div class="truncate text-center text-xl font-bold">
+									{team.name}
+								</div>
+								<div class="mt-1 text-center text-xs">
+									{team.permissions?.length} member(s)
+								</div>
 							</div>
-							<div class="truncate text-center font-bold">
-								{team.id === '0' ? 'root team' : ''}
-							</div>
-
-							<div class:mt-6={team.id !== '0'} class="mt-1 text-center">
-								{team.permissions?.length} member(s)
+							<div class="flex items-center justify-center pt-3">
+								<button
+									on:click|preventDefault={() => switchTeam(team.id)}
+									class:bg-fuchsia-600={$session.teamId !== team.id}
+									class:hover:bg-fuchsia-500={$session.teamId !== team.id}
+									class:bg-transparent={$session.teamId === team.id}
+									disabled={$session.teamId === team.id}
+									><svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="h-6 w-6"
+										viewBox="0 0 24 24"
+										stroke-width="1.5"
+										stroke="currentColor"
+										fill="none"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									>
+										<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+										<path d="M3 17h5l1.67 -2.386m3.66 -5.227l1.67 -2.387h6" />
+										<path d="M18 4l3 3l-3 3" />
+										<path d="M3 7h5l7 10h6" />
+										<path d="M18 20l3 -3l-3 -3" />
+									</svg></button
+								>
 							</div>
 						</div>
 					</a>
@@ -207,9 +238,6 @@
 								<div class="truncate text-center text-xl font-bold">
 									{team.name}
 								</div>
-								<div class="truncate text-center font-bold">
-									{team.id === '0' ? 'root team' : ''}
-								</div>
 
 								<div class="mt-1 text-center">{team.permissions?.length} member(s)</div>
 							</div>