improve: ui

src/data/store.ts

@@ -361,7 +361,7 @@ export const currentSongLyrics: Writable<CurrentSongLyrics> = writable(null);
 
 // Queue
 export const isQueueOpen: Writable<boolean> = writable(
-    /true/.test(localStorage.getItem("isQueueOpen")) || false,
+    localStorage.getItem("isQueueOpen") === "true",
 );
 isQueueOpen.subscribe((val) =>
     localStorage.setItem("isQueueOpen", String(val)),
@@ -373,13 +373,17 @@ export const isWikiOpen = writable(false);
 export const wikiArtist: Writable<string> = writable(null);
 
 // Sidebar
-export const isSidebarOpen = writable(true);
-export const sidebarManuallyOpened = writable(false);
-export const sidebarTogglePos = writable({ x: 0, y: 0 });
-export const isCmdOrCtrlPressed = writable(false);
+export const isSidebarOpen: Writable<boolean> = writable(
+    localStorage.getItem("isSidebarOpen") === "true",
+);
+isSidebarOpen.subscribe((val) =>
+    localStorage.setItem("isSidebarOpen", String(val)),
+);
+export const isSidebarFloating = writable(false);
+export const isSidebarShowing = writable(true);
 
 export const isWaveformOpen: Writable<boolean> = writable(
-    /true/.test(localStorage.getItem("isWaveformOpen")) || false,
+    localStorage.getItem("isWaveformOpen") === "true",
 );
 isWaveformOpen.subscribe((val) => {
     localStorage.setItem("isWaveformOpen", String(val));
@@ -504,4 +508,7 @@ export const webPlayerVolume: Writable<number> = writable(0.6);
 export const webPlayerIsLoading = writable(false);
 export const fileToDownload: Writable<IAFile> = writable(null);
 
+// Info Popup
+export const canShowInfoPopup = writable(true);
+
 init();

src/lib/albums/AlbumsHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from "svelte";
     import {
         isQueueOpen,
         isSidebarOpen,
@@ -9,10 +10,20 @@
     import Divider from "../ui/Divider.svelte";
     import Dropdown from "../ui/Dropdown.svelte";
     import Icon from "../ui/Icon.svelte";
+    import { throttle } from "lodash-es";
+    import Menu from "../ui/menu/Menu.svelte";
+    import MenuDivider from "../ui/menu/MenuDivider.svelte";
 
-    $: showSingles = $uiPreferences.albumsViewShowSingles;
+    let element: HTMLElement;
+    let optionsPanelPosition = { x: 0, y: 0 };
+    let showOptionsPanel = false;
+
+    $: innerWidth = 800;
     $: showInfo = $uiPreferences.albumsViewShowInfo;
     $: minWidth = $uiPreferences.albumsViewGridSize;
+    $: showAllOptions = innerWidth >= 480;
+    $: showSingles = $uiPreferences.albumsViewShowSingles;
+
     const fields = [
         {
             value: "title",
@@ -31,9 +42,28 @@
     $: orderBy = fields.find(
         (f) => f.value === $uiPreferences.albumsViewSortBy,
     );
+
+    onMount(() => {
+        const resizeObserver = new ResizeObserver(() => {
+            innerWidth = element.getBoundingClientRect().width;
+        });
+
+        resizeObserver.observe(element);
+
+        return () => resizeObserver.unobserve(element);
+    });
+
+    function toogleOptionsPanel(e) {
+        if (showOptionsPanel) {
+            showOptionsPanel = false;
+        } else {
+            optionsPanelPosition = { x: e.clientX, y: e.clientY };
+            showOptionsPanel = true;
+        }
+    }
 </script>
 
-<div class="header" data-tauri-drag-region>
+<div class="header" data-tauri-drag-region bind:this={element}>
     <h1
         class:window-controls-offset={!$isSidebarOpen &&
             !$isQueueOpen &&
@@ -42,59 +72,149 @@
     >
         {$LL.albums.title()}
     </h1>
-    <!-- {#if count}<p>{count} {count === 1 ? "album" : "albums"}</p>{/if} -->
     <div class="options" data-tauri-drag-region>
-        <div class="order-by">
-            <p>{$LL.albums.options.orderBy()}</p>
-            <Dropdown
-                options={fields}
-                selected={orderBy}
-                onSelect={(v) => {
-                    $uiPreferences.albumsViewSortBy = v;
-                }}
-            />
-        </div>
-        <Divider />
-        <div class="toggle">
-            <Icon
-                icon={showSingles ? "mdi:show" : "mdi:hide"}
-                color={showSingles
-                    ? "var(--icon-primary)"
-                    : "var(--icon-secondary)"}
-                boxed
-                onClick={() => {
-                    $uiPreferences.albumsViewShowSingles = !showSingles;
-                }}
-            />
-            <p>{$LL.albums.options.showSingles()}</p>
-        </div>
-        <div class="toggle">
+        {#if showAllOptions}
+            <div class="order-by">
+                <Icon
+                    icon="heroicons-solid:sort-descending"
+                    color="var(--icon-primary)"
+                    boxed
+                />
+                <Dropdown
+                    options={fields}
+                    selected={orderBy}
+                    onSelect={(v) => {
+                        $uiPreferences.albumsViewSortBy = v;
+                    }}
+                />
+            </div>
+            <Divider />
+            <div class="toggle">
+                <Icon
+                    icon={showSingles
+                        ? "mynaui:one-circle-solid"
+                        : "mynaui:one-circle-solid-off"}
+                    color={showSingles
+                        ? "var(--icon-primary)"
+                        : "var(--icon-secondary)"}
+                    boxed
+                    onClick={() => {
+                        $uiPreferences.albumsViewShowSingles = !showSingles;
+                    }}
+                />
+            </div>
+            <div class="toggle">
+                <Icon
+                    icon={showInfo ? "mdi:information" : "mdi:information-off"}
+                    color={showInfo
+                        ? "var(--icon-primary)"
+                        : "var(--icon-secondary)"}
+                    boxed
+                    onClick={() => {
+                        $uiPreferences.albumsViewShowInfo = !showInfo;
+                    }}
+                />
+            </div>
+            <Divider />
+            <label>
+                <Icon
+                    icon="material-symbols:grid-view-rounded"
+                    color="var(--icon-primary)"
+                    boxed
+                />
+                <input
+                    type="range"
+                    min={100}
+                    max={400}
+                    value={minWidth}
+                    on:input={(ev) => {
+                        $uiPreferences.albumsViewGridSize = Number(
+                            ev.target.value,
+                        );
+                    }}
+                />
+            </label>
+        {:else}
             <Icon
-                icon={showInfo ? "mdi:show" : "mdi:hide"}
-                color={showInfo
-                    ? "var(--icon-primary)"
-                    : "var(--icon-secondary)"}
+                icon="iconamoon:settings-fill"
+                color="var(--icon-primary)"
                 boxed
-                onClick={() => {
-                    $uiPreferences.albumsViewShowInfo = !showInfo;
-                }}
+                onClick={toogleOptionsPanel}
             />
-            <p>{$LL.albums.options.showInfo()}</p>
-        </div>
-        <Divider />
-        <label
-            >{$LL.albums.options.gridSize()}
-            <input
-                type="range"
-                min={100}
-                max={400}
-                value={minWidth}
-                on:input={(ev) => {
-                    $uiPreferences.albumsViewGridSize = Number(ev.target.value);
-                }}
-            /></label
-        >
+        {/if}
     </div>
+
+    {#if showOptionsPanel}
+        <div class="options-panel">
+            <Menu {...optionsPanelPosition} onClickOutside={toogleOptionsPanel}>
+                <div class="order-by">
+                    <Icon
+                        icon="heroicons-solid:sort-descending"
+                        color="var(--icon-primary)"
+                        boxed
+                    />
+                    <Dropdown
+                        options={fields}
+                        selected={orderBy}
+                        onSelect={(v) => {
+                            $uiPreferences.albumsViewSortBy = v;
+                        }}
+                    />
+                </div>
+                <MenuDivider />
+                <div class="controls">
+                    <div class="toggle">
+                        <Icon
+                            icon={showSingles
+                                ? "mynaui:one-circle-solid"
+                                : "mynaui:one-circle-solid-off"}
+                            color={showSingles
+                                ? "var(--icon-primary)"
+                                : "var(--icon-secondary)"}
+                            boxed
+                            onClick={() => {
+                                $uiPreferences.albumsViewShowSingles =
+                                    !showSingles;
+                            }}
+                        />
+                    </div>
+                    <div class="toggle">
+                        <Icon
+                            icon={showInfo
+                                ? "mdi:information"
+                                : "mdi:information-off"}
+                            color={showInfo
+                                ? "var(--icon-primary)"
+                                : "var(--icon-secondary)"}
+                            boxed
+                            onClick={() => {
+                                $uiPreferences.albumsViewShowInfo = !showInfo;
+                            }}
+                        />
+                    </div>
+                </div>
+                <MenuDivider />
+                <label>
+                    <input
+                        type="range"
+                        min={100}
+                        max={400}
+                        value={minWidth}
+                        on:input={(ev) => {
+                            $uiPreferences.albumsViewGridSize = Number(
+                                ev.target.value,
+                            );
+                        }}
+                    />
+                    <Icon
+                        icon="material-symbols:grid-view-rounded"
+                        color="var(--icon-primary)"
+                        boxed
+                    />
+                </label>
+            </Menu>
+        </div>
+    {/if}
 </div>
 
 <style lang="scss">
@@ -103,7 +223,6 @@
         display: flex;
         align-items: center;
         justify-content: flex-end;
-        gap: 20px;
         grid-column: 1 /3;
         grid-row: 1;
 
@@ -127,7 +246,7 @@
             display: flex;
             gap: 10px;
             align-items: center;
-            margin-right: 5px;
+            margin: 0 5px 0 20px;
             * {
                 margin: 0;
                 line-height: initial;
@@ -191,4 +310,25 @@
             }
         }
     }
+
+    .options-panel {
+        .order-by {
+            display: flex;
+            gap: 3px;
+            color: var(--text-secondary);
+        }
+        .controls {
+            display: flex;
+            justify-content: center;
+        }
+        .toggle {
+            display: flex;
+            align-items: center;
+            color: var(--text-secondary);
+            cursor: default;
+            :global(svg) {
+                opacity: 0.7;
+            }
+        }
+    }
 </style>

src/lib/library/BottomBar.svelte

@@ -13,7 +13,6 @@
         isFolderWatchUpdate,
         isLyricsOpen,
         isQueueOpen,
-        isSidebarOpen,
         nextUpSong,
         uiView,
         userSettings,
@@ -54,8 +53,6 @@
         }, 200);
     });
 
-    let wasSidebarOpen = $isSidebarOpen;
-
     function onResize() {
         if (nextUp?.getBoundingClientRect()) {
             // calculate remaining space for spectroscope visualizer