feat: dashboard overhaul and remove mock data

Author: realtlos

package-lock.json

@@ -4,86 +4,164 @@
   import { Button } from '$lib/components/ui/button/index.js';
   import { userState, userToken } from '$lib/store/LocalStorage.svelte';
   import { env } from '$env/dynamic/public';
-  import { onMount } from 'svelte';
+  import { onMount, onDestroy } from 'svelte';
+  import { toast } from 'svelte-sonner';
+
+  type LoginPayload = {
+    token: string;
+    id: string;
+    login: string;
+    name: string;
+    stv_id?: string | null;
+    is_channel?: boolean;
+    pfp?: string | null;
+  };
+
+  const DEFAULT_LOGIN_URL = 'https://api.potat.app/login';
 
   let { open = $bindable(), empty = false } = $props();
+  let loginWindow: Window | null = null;
 
-  let onLogin = async (): Promise<void> => {
-    window.open(
-      env.PUBLIC_LOGIN_URL ?? 'https://api.potat.app/login',
-      '_blank',
-      'width=600,height=400'
-    );
+  const isLoginPayload = (value: unknown): value is LoginPayload => {
+    if (typeof value !== 'object' || value === null) {
+      return false;
+    }
 
-    // Mocked example result of postMessage from the window after successful login
-    userToken.set('mock-test-token-definitely-real');
-    userState.set({
-      id: '457260003',
-      login: 'ryanpotat',
-      name: 'RyanPotat',
-      stv_id: '01G6HF7Y9R000AE6YXS14X580S',
-      is_channel: false,
-    });
+    const payload = value as Record<string, unknown>;
+    return typeof payload.token === 'string' && typeof payload.id === 'string';
+  };
 
-    open = false;
+  const resolveLoginUrl = (): string => {
+    const rawUrl = env.PUBLIC_LOGIN_URL ?? DEFAULT_LOGIN_URL;
+
+    if (!browser) {
+      return rawUrl;
+    }
+
+    try {
+      return new URL(rawUrl, window.location.origin).href;
+    } catch {
+      return DEFAULT_LOGIN_URL;
+    }
   };
 
-  const handleMessage = (event: MessageEvent) => {
-    const { id, login, name, stv_id, token, is_channel } = event.data ?? {};
+  const resolveLoginOrigin = (): string => {
+    if (!browser) {
+      return new URL(DEFAULT_LOGIN_URL).origin;
+    }
+
+    try {
+      return new URL(resolveLoginUrl()).origin;
+    } catch {
+      return new URL(DEFAULT_LOGIN_URL).origin;
+    }
+  };
+
+  const onLogin = (): void => {
+    if (!browser) {
+      return;
+    }
+
+    const loginUrl = resolveLoginUrl();
+    loginWindow = window.open(loginUrl, 'potat-login', 'width=600,height=800');
+
+    if (!loginWindow) {
+      toast.error('Popup blocked', {
+        description: 'Please allow popups for this site and try again.',
+        duration: 5000,
+      });
+    }
+  };
 
-    if (!token || !id) {
+  const handleMessage = (event: MessageEvent<unknown>): void => {
+    if (event.origin !== resolveLoginOrigin()) {
       return;
     }
 
+    if (!isLoginPayload(event.data)) {
+      return;
+    }
+
+    const { id, login, name, stv_id, token, is_channel, pfp } = event.data;
+
     userToken.set(token);
     userState.set({
       id,
       login,
       name,
-      stv_id,
-      is_channel,
+      stv_id: stv_id ?? '',
+      is_channel: Boolean(is_channel),
+      pfp: pfp ?? undefined,
     });
+
+    if (!pfp) {
+      fetch(`https://api.potat.app/users/${login}`)
+        .then(r => r.json())
+        .then(res => {
+          const connections: { platform: string; pfp?: string }[] = res?.data?.[0]?.user?.connections ?? [];
+          const twitchConn = connections.find(c => c.platform === 'TWITCH');
+          if (twitchConn?.pfp) {
+            userState.update(s => s ? { ...s, pfp: twitchConn.pfp } : s);
+          }
+        })
+        .catch(() => {/* non-fatal */});
+    }
+
+    open = false;
+
+    if (loginWindow && !loginWindow.closed) {
+      loginWindow.close();
+    }
+    loginWindow = null;
   };
 
   onMount((): void => {
-    if (browser) {
-      window.addEventListener('message', handleMessage);
+    if (!browser) {
+      return;
+    }
+
+    window.addEventListener('message', handleMessage);
+  });
+
+  onDestroy((): void => {
+    if (!browser) {
+      return;
+    }
+
+    window.removeEventListener('message', handleMessage);
+
+    if (loginWindow && !loginWindow.closed) {
+      loginWindow.close();
     }
   });
 </script>
 
-<AlertDialog.Root bind:open on:cancel={() => (open = false)}>
+<AlertDialog.Root bind:open>
   <AlertDialog.Trigger>
     {#if !empty}
-      <Button variant="outline" size="default">
-        Login
-      </Button>
+      <Button variant="outline" size="default">Login</Button>
     {/if}
   </AlertDialog.Trigger>
 
   <AlertDialog.Content>
-
     <AlertDialog.Header>
-      <AlertDialog.Action on:click={onLogin}>
-        Sign in with Twitch
-      </AlertDialog.Action>
+      <AlertDialog.Title>Sign in to PotatBotat</AlertDialog.Title>
+      <AlertDialog.Description>
+        By signing in, you agree to our
+        <a href="/dashboard/privacy-policy">Privacy Policy</a>
+        and <a href="/dashboard/terms">Terms of Service</a>.
+      </AlertDialog.Description>
     </AlertDialog.Header>
-
     <AlertDialog.Footer>
-      <p>
-        By signing in, you agree to our
-        <a href="/dashboard/privacy-policy"> Privacy Policy </a>
-        and
-        <a href="/dashboard/terms"> Terms of Service</a>.
-      </p>
+      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action onclick={onLogin}>Sign in with Twitch</AlertDialog.Action>
     </AlertDialog.Footer>
-
   </AlertDialog.Content>
 </AlertDialog.Root>
 
 <style>
   a {
-    color: #2196f3;
+    color: hsl(var(--primary));
     text-decoration: none;
     white-space: nowrap;
   }

src/lib/components/login-popup/+login-popup.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   import Dropdown from '$lib/components/user-dropdown/user-dropdown.svelte';
-  import { CircleAlert, X } from 'lucide-svelte';
   import { Button } from '$lib/components/ui/button';
   import { Input } from '$lib/components/ui/input';
-  import * as Alert from '$lib/components/ui/alert';
+
   // TODO: $types?
   import type { ChannelPartial } from '../../../routes/+layout';
   import { userState } from '$lib/store/LocalStorage.svelte';
@@ -12,7 +11,6 @@
 
   let { channels }: { channels: ChannelPartial[] } = $props();
 
-  let show = $state(true);
   let searchQuery: string = $state('');
   let openPopup = $state(false);
 
@@ -49,16 +47,14 @@
 
 <nav>
   <div class="left-section">
-    <Button variant="outline">
-      <a href="/dashboard/">PotatBotat</a>
-    </Button>
-    <Button variant="outline" onclick={handleClickington}>
-      {#if $userState?.login}
-        <a href="/dashboard/channel/{$userState?.login ?? ''}">My Channel</a>
-      {:else}
-        My channel
-      {/if}
-    </Button>
+    <Button variant="outline" href="/dashboard/">PotatBotat</Button>
+    {#if $userState?.login}
+      <Button variant="outline" href="/dashboard/channel/{$userState.login}">My Channel</Button>
+    {:else}
+      <Button variant="outline" on:click={handleClickington}>My Channel</Button>
+    {/if}
+    <Button variant="outline" href="/dashboard/docs">Docs</Button>
+    <Button variant="outline" href="/dashboard/faq">FAQ</Button>
   </div>
   <div class="search-container">
     <Input
@@ -89,24 +85,6 @@
   </div>
 </nav>
 
-{#if show}
-  <Alert.Root
-    variant="warning"
-    class="relative items-center justify-between p-4"
-  >
-    <CircleAlert class="h-4 w-4" />
-    <Alert.Description>
-      This website is currently in beta and nothing is functional. Stay tuned for poggers happy funtime features!
-    </Alert.Description>
-    <Button
-      variant="ghost"
-      class="absolute right-2 top-1/2 transform -translate-y-1/2 text-yellow-900 dark:text-yellow-100 hover:opacity-70"
-      on:click={() => (show = false)}
-    >
-      <X class="w-4 h-4" />
-    </Button>
-  </Alert.Root>
-{/if}
 
 {#if openPopup}
   <LoginPopup bind:open={openPopup} empty={true} />