Merge pull request #17 from maotovisk/dev

fix toast notification not working as expected

.github/workflows/main.yml

@@ -5,7 +5,7 @@ on:
       - main
 permissions:
   contents: write
-  
+
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
   cancel-in-progress: true
@@ -67,7 +67,7 @@ jobs:
         run: |
           sudo apt-get update
           sudo apt-get install -y libgtk-3-dev webkit2gtk-4.0 libappindicator3-dev librsvg2-dev patchelf
-          
+
       - name: Install node dependencies
         run: pnpm install
 
@@ -99,9 +99,9 @@ jobs:
         env:
           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
         with:
-          tag_name: ${{ github.ref }}
-          name: Release ${{ github.ref }}
-          body: 'This is a automated release.'
+          tag_name: v__VERSION__
+          name: Release v__VERSION__
+          body: "This is a automated release."
           prerelease: false
           draft: true
           files: ./artifacts/**/*

package.json

@@ -1,7 +1,7 @@
 {
   "name": "hitsound-copier",
   "private": true,
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "hitsound-copier"
-version = "0.0.7"
+version = "0.0.8"
 description = "A osu! mapping toolbox made in TS with tauri"
 authors = ["maotovisk"]
 license = ""

src-tauri/tauri.conf.json

@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "hitsound-copier",
-    "version": "0.0.7"
+    "version": "0.0.8"
   },
   "tauri": {
     "allowlist": {

src/main.ts

@@ -4,12 +4,6 @@ import "material-dynamic-colors";
 import "material-icons/iconfont/material-icons.css";
 import "./view/style/main.scss";
 
-declare global {
-  interface Window {
-    sendNotification: any;
-  }
-}
-
 const app = new App({
   target: document.getElementById("app"),
 });

src/view/App.svelte

@@ -4,20 +4,27 @@
   import HitsoundCopier from "./tabs/HitsoundCopier.svelte";
   import Changelog from "./tabs/Changelog.svelte";
   import { onMount } from "svelte";
-  import Toast from "./lib/Toast.svelte";
   import Settings from "./tabs/Settings.svelte";
+  import { appWindow } from "@tauri-apps/api/window";
 
   onMount(async () => {
     await ui("theme", "#c43b80");
+    const mode = await appWindow.theme();
+    await ui("mode", mode);
   });
 </script>
 
 <Router url={"/home"}>
   <SideBar />
   <main class="surface responsive max">
-    <Route path="/home" component={Changelog} />
-    <Route path="/hs-copier" component={HitsoundCopier} />
-    <Route path="/settings" component={Settings} />
+    <Route path="/home">
+      <div class="page active"><Changelog /></div>
+    </Route>
+    <Route path="/hs-copier">
+      <div class="page active"><HitsoundCopier /></div>
+    </Route>
+    <Route path="/settings">
+      <div class="page active"><Settings /></div>
+    </Route>
   </main>
 </Router>
-<Toast />

src/view/tabs/HitsoundCopier.svelte

@@ -14,13 +14,38 @@
   let overwriteNotDefinedOption: boolean = true;
   let timingThresholdOption: number = 5;
 
+  let toastIcon: string = "";
+  let toastMessage: string = "";
+  let toastColor: string = "";
+
+  // This is a hack to make sure that the toast notification is triggered in the first time it is called;
+  let hasNotification: boolean = false;
+
+  const sendNotification = async ({
+    notificationColor,
+    notificationIcon,
+    notificationMessage,
+  }: {
+    notificationIcon;
+    notificationMessage;
+    notificationColor;
+  }) => {
+    // Hack mentioned above
+    hasNotification = true;
+    await ui("#notificacao");
+
+    toastIcon = notificationIcon;
+    toastMessage = notificationMessage;
+    toastColor = notificationColor;
+  };
+
   const copyHitsoundsAction = async () => {
     try {
       if (selectedFrom.length == 0 || !(await exists(selectedFrom[0])))
-        return window.sendNotification({
-          color: "error",
-          message: "Selected origin beatmap file not found",
-          icon: "error",
+        return await sendNotification({
+          notificationColor: "error",
+          notificationMessage: "Selected origin beatmap file not found",
+          notificationIcon: "error",
         });
 
       const fromContent: string = await readTextFile(selectedFrom[0]);
@@ -30,10 +55,11 @@
       );
 
       if (arrayToPathExists.includes(false)) {
-        return window.sendNotification({
-          color: "error",
-          message: "Selected destination beatmap(s) file(s) not found",
-          icon: "error",
+        return await sendNotification({
+          notificationColor: "error",
+          notificationMessage:
+            "Selected destination beatmap(s) file(s) not found",
+          notificationIcon: "error",
         });
       }
 
@@ -53,14 +79,19 @@
         await writeFile(selectedTo[key], hitsoundedBeatmap);
       });
 
-      window.sendNotification({
-        color: "primary",
-        message: `Hitsounds copied successfully to ${copiedHitsound.length} beatmaps!`,
-        icon: "check",
+      return await sendNotification({
+        notificationColor: "primary",
+        notificationMessage: `Hitsounds copied successfully to ${copiedHitsound.length} beatmaps!`,
+        notificationIcon: "check",
       });
     } catch (e) {
       console.log(e);
-      return message(e, { title: "Hitsound Copier", type: "error" });
+      return await sendNotification({
+        notificationColor: "error",
+        notificationMessage:
+          "An error occourred while copying hitosunds: " + e.getMessage(),
+        notificationIcon: "error",
+      });
     }
   };
 </script>
@@ -171,13 +202,10 @@
     </button>
   </div>
 </div>
+<div class="toast {toastColor}" class:active={hasNotification} id="notificacao">
+  <i>{toastIcon}</i>
+  <span>{toastMessage}</span>
+</div>
 
 <style>
-  .btn-row {
-    padding: 2rem;
-    position: fixed;
-    bottom: 0;
-    right: 0;
-    z-index: 1;
-  }
 </style>

src/view/tabs/Settings.svelte

@@ -1,12 +1,38 @@
+<script lang="ts">
+  import { appWindow } from "@tauri-apps/api/window";
+  import { onMount } from "svelte";
+
+  let darkMode: boolean = true;
+  const onChange = () => {
+    ui("mode", darkMode ? "dark" : "light");
+  };
+
+  onMount(async () => {
+    darkMode = ui("mode") == "dark" ? true : false;
+  });
+</script>
+
 <div class="padding">
   <h6>Settings</h6>
   <div class="small-divider" />
-  <div class="medium-height middle-align center-align">
-    <div class="center-align">
-      <i class="extra">info</i>
-      <h5>Not implemented</h5>
-      <p>This tab is not yet implemented</p>
-      <div class="space" />
+  <div class="row max">
+    <div class="row max">
+      <div class="field middle-align max">
+        <nav>
+          <div class="max">
+            <strong>Dark mode</strong>
+            <div>Enable dark mode for the applicaiton</div>
+          </div>
+          <label class="switch">
+            <input
+              type="checkbox"
+              bind:checked={darkMode}
+              on:change={onChange}
+            />
+            <span />
+          </label>
+        </nav>
+      </div>
     </div>
   </div>
 </div>