Merge pull request #3 from uhKayla/dev

Dev

package.json

@@ -48,9 +48,10 @@
 		"clsx": "^2.1.1",
 		"js-base64": "^3.7.7",
 		"lucide-svelte": "^0.395.0",
-		"mode-watcher": "^0.3.0",
+		"mode-watcher": "^0.3.1",
 		"node-fetch": "^3.3.2",
 		"p-limit": "^5.0.0",
+		"svelte-sonner": "^0.3.24",
 		"tailwind-merge": "^2.3.0",
 		"tailwind-variants": "^0.2.1"
 	}

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "SpectreVRC",
-    "version": "0.1.3"
+    "version": "0.1.5"
   },
   "tauri": {
     "allowlist": {

src/lib/components/Header.svelte

@@ -17,6 +17,7 @@
 	import CircleUser from 'lucide-svelte/icons/circle-user';
 	import Menu from 'lucide-svelte/icons/menu';
 	import Globe from 'lucide-svelte/icons/globe';
+	import Logo from '$lib/assets/favicon.png'
 	import type { UserData } from '$lib/types/user';
 
 	let currentUser: UserData | null;
@@ -54,7 +55,7 @@
 <header class="header sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
 	<nav class="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
 		<a href="/" class="flex items-center gap-2 text-lg font-semibold md:text-base">
-			<Globe class="h-6 w-6" />
+			<img class="h-4/6 w-4/6" alt="Spectre Logo" src="{Logo}"/>
 			<span class="sr-only">Spectre VRC</span>
 		</a>
 		<a href="/dash" class:text-foreground={$page.url.pathname === '/dash'} class:text-muted-foreground={$page.url.pathname !== '/dash'} class="hover:text-foreground">

src/lib/components/Instance.svelte

@@ -22,6 +22,7 @@
 	import type { GroupData } from '$lib/types/group';
 	import { loadGroup } from '$lib/utils/getGroupById';
 	import { sendInviteToMyself } from '$lib/utils/postInviteSelfToInstance';
+	import { toast } from 'svelte-sonner';
 
 	export let userId: string;
 	let instance: InstanceData | undefined;
@@ -30,7 +31,18 @@
 	let friendsInInstance: Friend[] = [];
 
 	const openUrl = (link: string) => {
-		open(link)
+		open(link);
+		toast("Opening instance in browser...")
+	}
+
+	const joinUrl = (link: string) => {
+		open(link);
+		toast("Joining instance through weblink...")
+	}
+
+	const inviteMyself = (worldId: string, instanceId: string) => {
+		sendInviteToMyself(worldId, instanceId);
+		toast("Invite sent!");
 	}
 
 	onMount(async () => {
@@ -53,7 +65,7 @@
 
 		<!--Section-->
 		<div class="flex items-center gap-4">
-			<Avatar.Root class="hidden h-9 w-9 sm:flex">
+			<Avatar.Root class="hidden h-11 w-11 sm:flex">
 				<Avatar.Image src={instance?.world.thumbnailImageUrl} alt="World Thumbnail" />
 				<Avatar.Fallback>{instance?.world?.name?.charAt(0).toUpperCase() || 'NA'}</Avatar.Fallback>
 			</Avatar.Root>
@@ -62,6 +74,21 @@
 					{instance?.world.name || 'World Name'}
 				</p>
 				<p class="text-sm text-muted-foreground">({instance?.userCount} / {instance?.recommendedCapacity}) [{instance?.capacity}]</p>
+				<p class="text-sm text-muted-foreground">
+					{#if instance?.type === "hidden"} Friends+
+					{:else if instance?.type === "friends"} Friends
+					{:else if instance?.type === "group"}
+						{#if instance?.groupAccessType === "plus"}
+							Group+
+						{:else if instance?.groupAccessType === "public"}
+							Group Public
+						{:else}
+							Group
+						{/if}
+					{:else if instance?.type === "public"} Public
+					{:else} Public
+					{/if}
+				</p>
 			</div>
 			<div class="ml-auto">
 				<DropdownMenu.Root>
@@ -72,8 +99,8 @@
 						<DropdownMenu.Group>
 							<DropdownMenu.Label>Options</DropdownMenu.Label>
 							<DropdownMenu.Separator />
-							<DropdownMenu.Item on:click={openUrl(`vrchat://launch?ref=vrchat.com&id=${instance?.worldId}:${instance?.instanceId}`)}>Join Instance</DropdownMenu.Item>
-							<DropdownMenu.Item on:click={sendInviteToMyself(instance?.worldId, instance?.instanceId)}>Invite Me</DropdownMenu.Item>
+							<DropdownMenu.Item on:click={joinUrl(`vrchat://launch?ref=vrchat.com&id=${instance?.worldId}:${instance?.instanceId}`)}>Join Instance</DropdownMenu.Item>
+							<DropdownMenu.Item on:click={inviteMyself(instance?.worldId, instance?.instanceId)}>Invite Me</DropdownMenu.Item>
 							<DropdownMenu.Item on:click={openUrl(`https://vrchat.com/home/launch?worldId=${instance?.worldId}&instanceId=${instance?.instanceId}`)}>Open Instance</DropdownMenu.Item>
 						</DropdownMenu.Group>
 					</DropdownMenu.Content>
@@ -92,7 +119,7 @@
 		<!--Section-->
 		<div class="flex flex-col space-y-2">
 			<h1>Users:</h1>
-			<div class="flex gap-4">
+			<div class="grid grid-cols-2 gap-4">
 				{#if instanceOwnerUser !== undefined}
 					<div class="flex items-center gap-4">
 						<Avatar.Root class="hidden h-9 w-9 sm:flex">

src/lib/components/UserInfo.svelte

@@ -110,7 +110,7 @@
 				</p>
 				<p class="text-sm text-muted-foreground">{user?.statusDescription || user?.status}</p>
 			</div>
-			<Button class="ml-auto font-medium">View Instance</Button>
+			<Button disabled class="ml-auto" variant="outline" size="icon">...</Button>
 		</div>
 		<p>
 			{#each getFilteredTags(user?.tags) as tag}

src/lib/components/cards/CalloutCard.svelte

@@ -13,7 +13,7 @@
 		</div>
 	</Card.Content>
 	<Card.Footer class="flex justify-center items-center">
-		<Button>Discover Worlds</Button>
+		<Button disabled>Discover Worlds</Button>
 	</Card.Footer>
 </Card.Root>
 

src/lib/components/cards/EventsCard.svelte

@@ -2,7 +2,15 @@
 	import { Button } from "$lib/components/ui/button";
 	import * as Card from "$lib/components/ui/card";
 
+	import ArrowUpRight from "lucide-svelte/icons/square-arrow-up-right";
+
 	import { onMount } from 'svelte';
+	import { ArrowUp } from 'lucide-svelte';
+	import { open } from '@tauri-apps/api/shell';
+
+	const openTl = () => {
+		open('https://vrc.tl');
+	};
 </script>
 
 
@@ -12,7 +20,7 @@
 				<Card.Description>Explore events around VRChat!</Card.Description>
 	</Card.Header>
 	<Card.Content class="flex justify-center items-center">
-		<Button>Explore</Button>
+		<Button on:click={openTl}>vrc.tl&nbsp;<ArrowUpRight class="w-4 h-4" /> </Button>
 	</Card.Content>
 	<Card.Footer class="flex justify-center items-center">
 	</Card.Footer>

src/lib/components/cards/FriendsCard.svelte

@@ -19,7 +19,7 @@
 		</div>
 	</Card.Content>
 	<Card.Footer class="flex justify-center items-center">
-		<Button>Friends List</Button>
+		<Button href="/friends">Friends List</Button>
 	</Card.Footer>
 </Card.Root>
 

src/lib/components/cards/JoinableCard.svelte

@@ -19,7 +19,7 @@
 		</div>
 	</Card.Content>
 	<Card.Footer class="flex justify-center items-center">
-		<Button>Friends List</Button>
+		<Button href="/friends">Friends List</Button>
 	</Card.Footer>
 </Card.Root>
 

src/lib/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";

src/lib/components/ui/sonner/sonner.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...$$restProps}
+/>

src/lib/utils/getGroupById.ts

@@ -11,7 +11,6 @@ export const loadGroup = async (groupId: string): Promise<GroupData> => {
 			}
 		});
 		const group: GroupData = JSON.parse(response);
-		console.log(group);
 		return group;
 	} catch (error) {
 		console.error(`Error fetching location data for ${groupId}:`, error);

src/lib/utils/getJoinableUsers.ts

@@ -10,7 +10,7 @@ export const getJoinableUsers = (): number => {
 
 	friendsData.forEach(friend => {
 		const user = userData.get(friend.id);
-		if (user?.location !== "private") {
+		if (user?.location !== "private" && user?.location !== "offline") {
 			joinableUsersCount++;
 		}
 	});

src/lib/utils/getUsersOnline.ts

@@ -0,0 +1,18 @@
+import { invoke } from '@tauri-apps/api/tauri';
+
+export const getUsersOnline = async (): Promise<number> => {
+	try {
+		const response = await invoke<number>('make_request', {
+			params: {
+				url: `https://api.vrchat.cloud/api/1/visits`,
+				method: 'GET',
+				body: null
+			}
+		});
+		console.log(`Users Online: ${response}`);
+		return response;
+	} catch (error) {
+		console.error(`Error fetching online users:`, error);
+		throw error;
+	}
+};

src/routes/+layout.svelte

@@ -2,10 +2,13 @@
 	import "../app.css";
 	import { ModeWatcher } from "mode-watcher";
 	import Header from "$lib/components/Header.svelte"
+	import { Toaster } from "$lib/components/ui/sonner";
+
 </script>
 <style>
 
 </style>
 <ModeWatcher />
 <Header />
+<Toaster />
 <slot />

src/routes/dash/+page.svelte

@@ -6,15 +6,25 @@
 	import BarCard from '$lib/components/cards/BarCard.svelte';
 	import EventsCard from '$lib/components/cards/EventsCard.svelte';
 
+	import ArrowUpRight from "lucide-svelte/icons/square-arrow-up-right";
+
 	import { user } from '$lib/stores/user';
 	import type { UserData } from '$lib/types/user';
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { getJoinableUsers } from '$lib/utils/getJoinableUsers';
+	import { getUsersOnline } from '$lib/utils/getUsersOnline';
+	import { get } from 'svelte/store';
+	import { friends } from '$lib/stores/friendsStore';
+	import { externalUserData } from '$lib/stores/externalUserStore';
+	import { instanceDataStore } from '$lib/stores/instanceStore';
+	import { loadFriendsAndUserData } from '$lib/utils/loadFriendList';
 
 	// Subscribe to the user store and get the online friends count
 	let onlineFriendsCount = 0;
 	let joinableUsersCount = 0;
+	let onlineUsers = 0;
+	let loading = true;
 
 	user.subscribe((userData: UserData | null) => {
 		if (userData) {
@@ -25,10 +35,28 @@
 		}
 	});
 
-	onMount(() => {
+	onMount(async () => {
 		joinableUsersCount = getJoinableUsers();
-		console.log(joinableUsersCount)
+		console.log(joinableUsersCount);
+
+		onlineUsers = await getUsersOnline();
+		console.log(onlineUsers);
+
+		await initializeData();
 	});
+
+	const initializeData = async (forceReload = false) => {
+		const friendsStore = get(friends);
+		const externalUserDataStore = get(externalUserData);
+		const instanceStore = get(instanceDataStore);
+
+		if (forceReload || friendsStore.size === 0 || externalUserDataStore.size === 0 || instanceStore.size === 0) {
+			loading = true;
+			console.log(`Reloading Data: ${forceReload}`);
+			await loadFriendsAndUserData();
+			loading = false;
+		}
+	};
 </script>
 
 <div class="grid grid-cols-4 p-4 h-1/2">
@@ -42,7 +70,7 @@
 		<CalloutCard />
 	</div>
 	<div class="col-span-2 p-4 gap-4 h-1/2">
-		<TotalPlayerCard totalOnline={24760} />
+		<TotalPlayerCard totalOnline={onlineUsers} />
 	</div>
 	<div class="p-4 gap-4 h-1/2">
 		<BarCard />

src/routes/home/+page.svelte

@@ -6,6 +6,7 @@
 	import { user } from '$lib/stores/user';
 	import type { UserData } from '$lib/types/user';
 	import { goto } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
 
 	let onlineFriendsCount = 0;