v0.3.0 - Smart query

- Disabled Artist's toolkit on production build while it's in WIP
- Fixed click outside issue

package.json

@@ -1,7 +1,7 @@
 {
   "name": "musicat",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/tauri.conf.json

@@ -9,7 +9,7 @@
   },
   "package": {
     "productName": "Musicat",
-    "version": "0.2.0"
+    "version": "0.3.0"
   },
   "tauri": {
     "macOSPrivateApi": true,

src/App.svelte

@@ -38,8 +38,10 @@
     //     console.log("drag enter");
     // }
 
-    function onPageClick() {
-        $isInfoPopupOpen = false;
+    function onCloseAppInfo() {
+        if ($isInfoPopupOpen) {
+            $isInfoPopupOpen = false;
+        }
     }
 
     let mouseX;
@@ -123,7 +125,7 @@
 
 {#if $isInfoPopupOpen}
     <div class="info">
-        <InfoPopup />
+        <InfoPopup onClickOutside={onCloseAppInfo} />
     </div>
 {/if}
 

src/lib/InfoPopup.svelte

@@ -2,17 +2,15 @@
     import { getVersion } from "@tauri-apps/api/app";
 
     import { isInfoPopupOpen } from "../data/store";
+    import { clickOutside } from "../utils/ClickOutside";
     import ReleaseNotes from "./ReleaseNotes.svelte";
 
     let version = getVersion();
-
-    function onPageClick() {
-        $isInfoPopupOpen = false;
-    }
+    export let onClickOutside;
 </script>
 
-<container on:click={onPageClick}>
-    <div class="popup">
+<container>
+    <div class="popup" use:clickOutside={onClickOutside}>
         <!-- <img src="images/cd6.gif" /> -->
         <section class="info">
             <div>

src/lib/ReleaseNotes.svelte

@@ -1,6 +1,13 @@
 <ul>
     <h3>Release Notes</h3>
 
+    <section>
+        <h3>📦 0.3.0 <i>"Enhance, enhance!"</i></h3>
+        <li>
+            The new Smart Query section allows you to create powerful query chains, made up of condition blocks such as "where genre is x" and "released between year1 and year2". 
+        </li>
+    </section>
+
     <section>
         <h3>📦 0.2.0 <i>"Very meta"</i></h3>
         <li>

src/lib/Sidebar.svelte

@@ -29,6 +29,9 @@
     import SpectrumAnalyzer from "./SpectrumAnalyzer.svelte";
     import "./tippy.css";
 
+    // Env
+    let isArtistToolkitEnabled = process.env.NODE_ENV === 'development';
+
     // What to show in the sidebar
     let title;
     let artist;
@@ -148,6 +151,10 @@
         console.log("clicked");
         $isInfoPopupOpen = true;
     }
+    $: {
+        console.log('info popup:', $isInfoPopupOpen);
+        
+    }
     let height = 0;
     let width = 0;
     let hasDecorations = false;
@@ -362,6 +369,7 @@
                 >
                     <iconify-icon icon="fluent:search-20-filled" />Smart Query</item
                 >
+                {#if isArtistToolkitEnabled}
                 <item
                     class:selected={$uiView === "your-music"}
                     on:click={() => {
@@ -371,6 +379,7 @@
                     <iconify-icon icon="mdi:music-clef-treble" />Artist's
                     toolkit</item
                 >
+                {/if}
                 <!-- <item> <iconify-icon icon="mdi:playlist-music" />Playlists</item> -->
 
                 <!-- <hr />

src/utils/ClickOutside.ts

@@ -6,7 +6,11 @@ export function clickOutside(element, callbackFunction) {
         }
     }
 
-    document.body.addEventListener('click', onClick);
+    // For some reason the click event from the button that shows the component is fired here
+    // so we need to wait before adding a listener. 
+    setTimeout(() => {
+        document.body.addEventListener('click', onClick);
+    }, 100);
 
     return {
         update(newCallbackFunction) {