add WIP design

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.FallbackProps = $props();
+</script>
+
+<AvatarPrimitive.Fallback
+	bind:ref
+	class={cn("bg-muted flex h-full w-full items-center justify-center rounded-full", className)}
+	{...restProps}
+/>

src/lib/components/ui/avatar/avatar-image.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.ImageProps = $props();
+</script>
+
+<AvatarPrimitive.Image
+	bind:ref
+	class={cn("aspect-square h-full w-full", className)}
+	{...restProps}
+/>

src/lib/components/ui/avatar/avatar.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Avatar as AvatarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AvatarPrimitive.RootProps = $props();
+</script>
+
+<AvatarPrimitive.Root
+	bind:ref
+	class={cn("relative flex size-10 shrink-0 overflow-hidden rounded-full", className)}
+	{...restProps}
+/>

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

@@ -0,0 +1,13 @@
+import Root from "./avatar.svelte";
+import Image from "./avatar-image.svelte";
+import Fallback from "./avatar-fallback.svelte";
+
+export {
+	Root,
+	Image,
+	Fallback,
+	//
+	Root as Avatar,
+	Image as AvatarImage,
+	Fallback as AvatarFallback,
+};

src/lib/components/ui/background/background.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import background from "../../../../assets/background.gif";
+</script>
+
+<div class="absolute w-screen h-screen overflow-hidden pointer-events-none">
+  <img
+    src={background}
+    alt="background"
+    class="absolute top-0 left-0 w-screen -z-10 pointer-events-none blur opacity-40"
+  />
+</div>

src/lib/components/ui/logo/logo.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import ezppLogo from "../../../../assets/logo.png";
+</script>
+
+<div class="w-screen pointer-events-none">
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="logo-animation relative w-44 h-44 mx-auto">
+    <img class="absolute main-logo" src={ezppLogo} alt="logo" />
+    <img class="absolute pulse-logo" src={ezppLogo} alt="logo-pulse" />
+  </div>
+</div>
+
+<style lang="scss">
+  .logo-animation {
+    .pulse-logo {
+      animation: 0.4s infinite forwards beat-pulse;
+    }
+    .main-logo {
+      animation: 0.4s infinite forwards beat;
+    }
+  }
+
+  @keyframes beat {
+    0%,
+    100% {
+      scale: 1;
+    }
+    90% {
+      scale: 1.05;
+    }
+  }
+  @keyframes beat-pulse {
+    0%,
+    100% {
+      scale: 0.9;
+      opacity: 0;
+    }
+    85% {
+      scale: 1.15;
+      opacity: 0.25;
+    }
+  }
+</style>

src/lib/components/ui/progressbar/progressbar.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  let {
+    loadingText,
+    progress,
+    indeterminate,
+  }: { loadingText: string; progress: number; indeterminate: boolean } =
+    $props();
+</script>
+
+<div
+  class="relative flex items-center justify-center w-[80vw] h-10 bg-gray-900/70 border rounded overflow-hidden"
+>
+  <div
+    class="absolute h-full rounded top-0 left-0 bg-pink-600 transition-all"
+    style="width: {indeterminate
+      ? 100
+      : Math.min(100, Math.max(0, progress))}%;"
+  ></div>
+  <p class="text-xs z-10">{loadingText}</p>
+</div>

src/lib/components/ui/titlebar/titlebar.svelte

@@ -17,22 +17,24 @@
   });
 </script>
 
-<div data-tauri-drag-region class="titlebar">
+<div data-tauri-drag-region class="titlebar z-[9999]">
+  <!-- <p class="mr-auto ms-2 text-sm">EZPPLauncher</p> -->
   <div class="titlebar-button" id="titlebar-minimize">
-    <Minimize size={14} />
+    <Minimize size={18} />
   </div>
   <div class="titlebar-button close" id="titlebar-close">
-    <Close size={14} />
+    <Close size={18} />
   </div>
 </div>
 
 <style lang="scss">
   .titlebar {
     height: 30px;
-    background: #040612;
+    /* background: #040612; */
     user-select: none;
     display: flex;
     justify-content: flex-end;
+    align-items: center;
     position: fixed;
     top: 0;
     left: 0;
@@ -43,8 +45,8 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: 35px;
-    height: 25px;
+    width: 45px;
+    height: 100%;
     user-select: none;
     -webkit-user-select: none;
   }