feat: Global Account Controller implented with Context's

Author: LynithDev

apps/desktop/build.rs

@@ -10,6 +10,8 @@ fn main() {
 					"get_users",
 					"get_user",
 					"remove_user",
+					"get_default_user",
+					"set_default_user",
 					// Cluster
 					"create_cluster",
 					"remove_cluster",

apps/desktop/permissions/onelauncher/default.toml

@@ -6,6 +6,8 @@ permissions = [
   "allow-get-users",
   "allow-get-user",
   "allow-remove-user",
+  "allow-get-default-user",
+  "allow-set-default-user",
 
   # Cluster
   "allow-create-cluster",

apps/desktop/src/api/commands.rs

@@ -25,6 +25,8 @@ macro_rules! collect_commands {
 				auth_login,
 				get_users,
 				get_user,
+				get_default_user,
+				set_default_user,
 				remove_user,
 				// Cluster
 				create_cluster,
@@ -212,6 +214,24 @@ pub async fn get_user(uuid: Uuid) -> Result<MinecraftCredentials, String> {
 	Ok(minecraft::get_user(uuid).await?)
 }
 
+#[specta::specta]
+#[tauri::command]
+pub async fn get_default_user() -> Result<Option<MinecraftCredentials>, String> {
+	let uuid = minecraft::get_default_user().await?;
+
+	match uuid {
+		Some(uuid) => Ok(Some(minecraft::get_user(uuid).await?)),
+		None => Ok(None),
+	}
+}
+
+#[specta::specta]
+#[tauri::command]
+pub async fn set_default_user(uuid: Uuid) -> Result<(), String> {
+	minecraft::set_default_user(uuid).await?;
+	Ok(())
+}
+
 #[specta::specta]
 #[tauri::command]
 pub async fn auth_login(handle: AppHandle) -> Result<Option<MinecraftCredentials>, String> {

apps/frontend/src/ui/App.tsx

@@ -8,6 +8,7 @@ import NotificationOverlay from './components/overlay/notifications/Notification
 import { SettingsProvider } from './hooks/useSettings';
 import { ClusterModalController } from './components/overlay/cluster/ClusterCreationModal';
 import { MultiProvider } from './components/MultiProvider';
+import { AccountControllerProvider } from './components/overlay/account/AddAccountModal';
 import { AppInfo } from '~utils/program-info';
 
 function App(props: ParentProps) {
@@ -50,6 +51,7 @@ function GlobalContexts(props: ParentProps) {
 			values={[
 				SettingsProvider,
 				ClusterModalController,
+				AccountControllerProvider,
 			]}
 		>
 			{props.children}

apps/frontend/src/ui/components/Navbar.tsx

@@ -3,13 +3,13 @@ import { createSignal } from 'solid-js';
 import { Bell01Icon, Cloud01Icon, Settings01Icon, TerminalBrowserIcon } from '@untitled-theme/icons-solid';
 import { open } from '@tauri-apps/plugin-shell';
 import { WEBSITE } from '@onelauncher/client';
-import useAccount from '../hooks/useAccount';
 import PolyfrostFull from './logos/PolyfrostFull';
-import AccountPopup from './overlay/AccountPopup';
+import AccountPopup from './overlay/account/AccountsPopup';
 import PlayerHead from './game/PlayerHead';
 import Button from './base/Button';
 import NotificationPopup from './overlay/notifications/NotificationPopup';
 import Popup from './overlay/Popup';
+import useAccountController from './overlay/account/AddAccountModal';
 
 interface NavbarLinkProps {
 	path: string;
@@ -33,9 +33,9 @@ function NavbarLink(props: NavbarLinkProps) {
 function Navbar() {
 	const [profileMenuOpen, setProfileMenuOpen] = createSignal(false);
 	const [notificationMenuOpen, setNotificationMenuOpen] = createSignal(false);
-	const navigate = useNavigate();
+	const controller = useAccountController();
 
-	const account = useAccount();
+	const navigate = useNavigate();
 
 	let profileButton!: HTMLButtonElement;
 	let notificationButton!: HTMLButtonElement;
@@ -81,7 +81,7 @@ function Navbar() {
 					ref={profileButton}
 					onClick={() => setProfileMenuOpen(!profileMenuOpen())}
 				>
-					<PlayerHead class="w-[30px] h-[30px] rounded-md hover:opacity-70" uuid={account.uuid} />
+					<PlayerHead class="w-[30px] h-[30px] rounded-md hover:opacity-70" uuid={controller.defaultAccount()?.id} />
 				</button>
 			</div>
 

apps/frontend/src/ui/components/game/PlayerHead.tsx

@@ -3,7 +3,7 @@ import type { JSX } from 'solid-js';
 import steveSrc from '../../../assets/images/steve.png';
 
 type PlayerHeadProps = JSX.IntrinsicElements['img'] & {
-	uuid: string;
+	uuid: string | null | undefined;
 	onError?: () => any;
 };
 
@@ -24,13 +24,15 @@ function PlayerHead(props: PlayerHeadProps) {
 					{...rest}
 				/>
 			</Show>
-			<img
-				src={headSrc(split.uuid)}
-				onLoad={() => setLoading(false)}
-				onError={() => props.onError && props.onError()}
-				class={`image-render-pixel ${isLoading() ? 'hidden' : ''} ${split.class}`}
-				{...rest}
-			/>
+			<Show when={props.uuid !== null && props.uuid !== undefined}>
+				<img
+					src={headSrc(split.uuid!)}
+					onLoad={() => setLoading(false)}
+					onError={() => props.onError && props.onError()}
+					class={`image-render-pixel ${isLoading() ? 'hidden' : ''} ${split.class}`}
+					{...rest}
+				/>
+			</Show>
 		</>
 	);
 }

apps/frontend/src/ui/components/overlay/AccountPopup.tsx

@@ -0,0 +1,94 @@
+import { For, Show } from 'solid-js';
+import { LogOut01Icon, PlusIcon, Settings01Icon } from '@untitled-theme/icons-solid';
+import { useNavigate } from '@solidjs/router';
+import Button from '../../base/Button';
+import PlayerHead from '../../game/PlayerHead';
+import Popup from '../Popup';
+import useAccountController from './AddAccountModal';
+import type { MinecraftCredentials } from '~bindings';
+
+interface AccountComponentProps {
+	account: MinecraftCredentials | null | undefined;
+	loggedIn?: boolean;
+}
+
+function AccountComponent(props: AccountComponentProps) {
+	return (
+		<Show when={props.account}>
+			<div class={`flex flex-row justify-between p-2 rounded-lg ${!props.loggedIn && 'hover:bg-gray-05 active:bg-gray-10 hover:text-fg-primary-hover'}`}>
+				<div class="flex flex-row justify-start flex-1 gap-x-3">
+					<PlayerHead class="w-8 h-8 rounded-md" uuid={props.account!.id} />
+					<div class="flex flex-col items-center justify-center">
+						<div class="flex flex-col items-start justify-between">
+							<p class="font-semibold h-[18px]">{props.account!.username}</p>
+							{props.loggedIn && <p class="text-xs">Logged in</p>}
+						</div>
+					</div>
+				</div>
+				{props.loggedIn && (
+					<Button buttonStyle="icon">
+						<LogOut01Icon class=" stroke-danger" />
+					</Button>
+				)}
+			</div>
+		</Show>
+	);
+}
+
+function AccountPopup(props: Popup.PopupProps) {
+	const controller = useAccountController();
+
+	const filteredAccounts = () => controller.accounts()?.filter(account => account.id !== controller.defaultAccount()?.id) ?? [];
+
+	const navigate = useNavigate();
+
+	return (
+		<Popup {...props}>
+			<div class="bg-secondary rounded-xl border border-gray-10 w-72 p-2 shadow-md shadow-black/30">
+				<div class="flex flex-col gap-y-2 text-fg-primary">
+					<AccountComponent account={controller.defaultAccount()} loggedIn />
+
+					<Show when={filteredAccounts().length !== 0}>
+						<div class="w-full h-px bg-gray-05 rounded-md" />
+						<For each={filteredAccounts()}>
+							{account => (
+								<AccountComponent account={account} />
+							)}
+						</For>
+						<div class="w-full h-px bg-gray-05 rounded-md" />
+					</Show>
+
+					<div class="flex flex-row justify-between">
+						<div>
+							<Button
+								buttonStyle="ghost"
+								iconLeft={<PlusIcon />}
+								onClick={() => {
+									props.setVisible(false);
+									controller.displayAddAccount();
+								}}
+							>
+								Add Account
+							</Button>
+						</div>
+						<div class="flex flex-row">
+							<Button
+								buttonStyle="icon"
+								large
+								onClick={() => {
+									props.setVisible(false);
+									navigate('/settings/accounts');
+								}}
+							>
+								<Settings01Icon class="stroke-fg-primary" />
+							</Button>
+						</div>
+					</div>
+
+				</div>
+			</div>
+		</Popup>
+	);
+}
+
+export default AccountPopup;