add custom progressbar, adjust icons

package-lock.json

@@ -26,12 +26,14 @@
         "electron-builder": "^23.6.0",
         "flowbite": "^2.2.1",
         "flowbite-svelte": "^0.44.21",
+        "flowbite-svelte-icons": "^0.4.5",
         "postcss": "^8.4.32",
         "postcss-load-config": "^5.0.2",
         "rollup": "^4.9.2",
         "rollup-plugin-css-only": "^4.5.2",
         "rollup-plugin-livereload": "^2.0.5",
         "rollup-plugin-postcss": "^4.0.2",
+        "rollup-plugin-progress": "^1.1.2",
         "rollup-plugin-svelte": "^7.1.6",
         "sirv-cli": "^2.0.2",
         "svelte": "^4.2.8",
@@ -3475,6 +3477,17 @@
         "svelte": "^4.0.0"
       }
     },
+    "node_modules/flowbite-svelte-icons": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/flowbite-svelte-icons/-/flowbite-svelte-icons-0.4.5.tgz",
+      "integrity": "sha512-IBudEfw9B4UE2gCRMhbRnyE8p7qq7DDMauy0mPVIShzjaN3yVk2AmAHia1JRe9jUC98Wn7xNk/IdJlXeQj19Iw==",
+      "dev": true,
+      "peerDependencies": {
+        "svelte": "^3.54.0 || ^4.0.0",
+        "tailwind-merge": "^2.0.0",
+        "tailwindcss": "^3.3.2"
+      }
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.4",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
@@ -5986,6 +5999,86 @@
         "node": ">= 6"
       }
     },
+    "node_modules/rollup-plugin-progress": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-progress/-/rollup-plugin-progress-1.1.2.tgz",
+      "integrity": "sha512-6ehSZOMTZdAlRpe45kf56BnIOsDYC2GKWhGlK/Dh/Ae/AMUneMDyKdiv9ZlRrW/HVc986frTZcc2Zka+oF6W7Q==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.2"
+      }
+    },
+    "node_modules/rollup-plugin-progress/node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-progress/node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-progress/node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/rollup-plugin-progress/node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/rollup-plugin-progress/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/rollup-plugin-progress/node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/rollup-plugin-progress/node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/rollup-plugin-svelte": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.6.tgz",

package.json

@@ -50,12 +50,14 @@
     "electron-builder": "^23.6.0",
     "flowbite": "^2.2.1",
     "flowbite-svelte": "^0.44.21",
+    "flowbite-svelte-icons": "^0.4.5",
     "postcss": "^8.4.32",
     "postcss-load-config": "^5.0.2",
     "rollup": "^4.9.2",
     "rollup-plugin-css-only": "^4.5.2",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-svelte": "^7.1.6",
     "sirv-cli": "^2.0.2",
     "svelte": "^4.2.8",

rollup.config.js

@@ -8,6 +8,7 @@ import postcss from "rollup-plugin-postcss";
 import image from "@rollup/plugin-image";
 import sveltePreprocess from "svelte-preprocess";
 import typescript from "@rollup/plugin-typescript";
+import progress from "rollup-plugin-progress";
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -46,6 +47,7 @@ export default {
     file: "public/build/bundle.js",
   },
   plugins: [
+    progress({ clearLine: true }),
     svelte({
       preprocess: sveltePreprocess({ sourceMap: !production }),
       compilerOptions: {

src/App.svelte

@@ -8,11 +8,25 @@
     Button,
     Checkbox,
     DarkMode,
-    Progressbar,
   } from "flowbite-svelte";
+
+  import Progressbar from "./lib/Progressbar.svelte";
+
+  import {
+    AddressCardSolid,
+    ArrowRightFromBracketSolid,
+    ArrowRightToBracketSolid,
+    ReplyAllSolid,
+    UserPlusSolid,
+    UserSettingsSolid,
+  } from "flowbite-svelte-icons";
+
   import ezppLogo from "../public/favicon.png";
 
+  let loggedIn = true;
+
   let patch = true;
+  let loading = false;
   let rand = 0;
 </script>
 
@@ -27,52 +41,92 @@
     <DarkMode class="dark:border-gray-700"></DarkMode>
     <Avatar
       class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
-      src="https://a.ez-pp.farm/1001"
+      src={loggedIn ? "https://a.ez-pp.farm/1001" : "https://a.ez-pp.farm/0"}
       id="avatar-menu"
     />
   </div>
   <Dropdown placement="bottom" triggeredBy="#avatar-menu">
     <DropdownHeader>
-      <span class="block text-sm">Quetzalcoatl</span>
+      <span class="block text-sm">{loggedIn ? "Quetzalcoatl" : "Guest"}</span>
-      <span class="block truncate text-sm font-medium text-gray-200"
+      <span
-        >me@horizonco.de</span
+        class="block truncate text-sm font-medium text-gray-500 dark:text-gray-200"
       >
+        {loggedIn ? "me@horizonco.de" : "Please log in!"}
+      </span>
     </DropdownHeader>
+    {#if loggedIn}
+      <DropdownItem
+        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+      >
+        <AddressCardSolid class="select-none outline-none border-none" />
+        Profile
+      </DropdownItem>
+    {/if}
     <DropdownItem
-      class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+      class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-      >Profile</DropdownItem
-    >
-    <DropdownItem
-      class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-      >Settings</DropdownItem
     >
+      <UserSettingsSolid class="select-none outline-none border-none" />
+      Settings
+    </DropdownItem>
     <DropdownDivider />
-    <DropdownItem
+    {#if loggedIn}
-      class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+      <DropdownItem
-      >Sign out</DropdownItem
+        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
-    >
+        on:click={() => (loggedIn = false)}
+      >
+        <ArrowRightFromBracketSolid
+          class="select-none outline-none border-none"
+        />
+        Sign out
+      </DropdownItem>
+    {:else}
+      <DropdownItem
+        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+        on:click={() => (loggedIn = true)}
+      >
+        <ArrowRightToBracketSolid
+          class="select-none outline-none border-none"
+        />
+        Login
+      </DropdownItem>
+      <DropdownItem
+        class="flex flex-row gap-2 border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
+      >
+        <UserPlusSolid class="select-none outline-none border-none" />
+        Register
+      </DropdownItem>
+    {/if}
   </Dropdown>
 </div>
 
-<main class="p-5">
+<main class="h-[265px] my-auto flex flex-col justify-center items-center p-5">
   <div
     class="container flex flex-col items-center justify-center gap-5 border border-gray-300 dark:border-gray-700 rounded-lg"
   >
     <Button
       color="light"
       size="xl"
-      on:click={() => (rand = Math.random() * 100)}>Launch</Button
+      on:click={() => {
+        rand = Math.random() * 100;
+        loading = true;
+      }}>Launch</Button
     >
     <Checkbox color="primary" bind:checked={patch}>
       Patching {patch ? "enabled" : "disabled"}
     </Checkbox>
-    <Progressbar
+    {#if loading}
-      animate={true}
+      <div class="w-full flex flex-col justify-center items-center gap-2">
-      progress={rand}
+        <p class="m-0 p-0 dark:text-gray-100">Waiting...</p>
-      labelInside={true}
+        <Progressbar
-      size="h-6"
+          animate={true}
-      labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
+          progress={rand}
-    />
+          labelInside={true}
+          size="h-6"
+          indeterminate
+          labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
+        />
+      </div>
+    {/if}
   </div>
 </main>
 
@@ -80,6 +134,6 @@
   .container {
     text-align: center;
     padding: 1em;
-    margin: 0 auto;
+    margin: auto;
   }
 </style>

src/app.pcss

@@ -28,3 +28,31 @@ html.dark .cet-titlebar .cet-control-icon svg {
 .cet-titlebar .cet-icon {
   display: none;
 }
+
+.indeterminate {
+  background-image: repeating-linear-gradient(
+    90deg,
+    rgb(217 5 89) -1%,
+    rgb(217 5 89) 10%,
+    #d3d3d3 10%,
+    #d3d3d3 90%
+  );
+  background-size: 200%;
+  background-position-x: 15%;
+  animation: progress-loading 5s ease-in-out infinite;
+}
+
+html.dark .indeterminate {
+  background-image: repeating-linear-gradient(
+    90deg,
+    rgb(217 5 89) -1%,
+    rgb(217 5 89) 10%,
+    #535353 10%,
+    #535353 90%
+  );
+}
+@keyframes progress-loading {
+  50% {
+    background-position-x: -115%;
+  }
+}

src/lib/Progressbar.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { cubicOut } from "svelte/easing";
+  import { tweened } from "svelte/motion";
+  import { twMerge, twJoin } from "tailwind-merge";
+
+  export let progress: string | number | undefined = "45";
+  export let precision = 0;
+  export let tweenDuration = 400;
+  export let animate = false;
+  export let size = "h-2.5";
+  export let labelInside = false;
+  export let labelOutside = "";
+  export let easing = cubicOut;
+  export let color = "primary";
+  export let labelInsideClass =
+    "text-primary-100 text-xs font-medium text-center p-0.5 leading-none rounded-full";
+  export let divClass = "w-full bg-gray-200 rounded-full dark:bg-gray-700";
+  export let indeterminate = false;
+
+  const barColors: Record<string, string> = {
+    primary: "bg-primary-600",
+    blue: "bg-blue-600",
+    gray: "bg-gray-600 dark:bg-gray-300",
+    red: "bg-red-600 dark:bg-red-500",
+    green: "bg-green-600 dark:bg-green-500",
+    yellow: "bg-yellow-400",
+    purple: "bg-purple-600 dark:bg-purple-500",
+    indigo: "bg-indigo-600 dark:bg-indigo-500",
+  };
+
+  const _progress = tweened(0, {
+    duration: animate && !indeterminate ? tweenDuration : 0,
+    easing,
+  });
+
+  $: {
+    if (!indeterminate) {
+      _progress.set(Number(progress));
+    }
+  }
+</script>
+
+{#if labelOutside}
+  <div
+    {...$$restProps}
+    class={twMerge("flex justify-between mb-1", $$props.classLabelOutside)}
+  >
+    <span class="text-base font-medium text-blue-700 dark:text-white"
+      >{labelOutside}</span
+    >
+    <span class="text-sm font-medium text-blue-700 dark:text-white"
+      >{progress}%</span
+    >
+  </div>
+{/if}
+
+<div class={twMerge(divClass, size, $$props.class)}>
+  {#if labelInside}
+    {#if !indeterminate}
+      <div
+        class={twJoin(labelInsideClass, barColors[color])}
+        style="width: {$_progress}%"
+      >
+        {$_progress.toFixed(precision)}%
+      </div>
+    {:else}
+      <div
+        class={twJoin(
+          barColors[color],
+          size,
+          "indeterminate rounded-full animate-pulse"
+        )}
+      />
+    {/if}
+  {:else if !indeterminate}
+    <div
+      class={twJoin(barColors[color], size, "rounded-full")}
+      style="width: {$_progress}%"
+    />
+  {:else}
+    <div
+      class={twJoin(
+        barColors[color],
+        size,
+        "indeterminate rounded-full animate-pulse"
+      )}
+    />
+  {/if}
+</div>

tsconfig.json

@@ -4,6 +4,11 @@
   "include": ["src/**/*"],
   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
   "compilerOptions": {
-    "typeRoots": ["node_modules/@types", "src/types"]
+    "typeRoots": [
+      "node_modules/@types",
+      "node_modules/@sveltejs",
+      "node_modules/@sveltejs/types",
+      "src/types"
+    ]
   }
 }