0.4.0 bug patch✨

muzik-offline/src/interface/App/App.tsx

@@ -115,7 +115,7 @@ const App = () => {
                               <Route path="/AllAlbums" element={<AllAlbums/>}/>
                               <Route path="/AllGenres" element={<AllGenres/>}/>
                               <Route path="/AllPlaylists" element={<AllPlaylists/>}/>
-                              <Route path="/SearchPage" element={<SearchPage/>}/>
+                              <Route path="/SearchPage/*" element={<SearchPage/>}/>
                               <Route path="/AlbumDetails/:album_key/:artist_name" element={<AlbumDetails/>}/>
                               <Route path="/ArtistCatalogue/:artist_name" element={<ArtistCatalogue/>}/>
                               <Route path="/GenreView/:genre_key" element={<GenreView/>}/>

muzik-offline/src/interface/components/navbar/HeaderLinuxOS.tsx

@@ -63,7 +63,7 @@ const HeaderLinuxOS: FunctionComponent<HeaderLinuxOSProps> = (props: HeaderLinux
                     id="gsearch" 
                     placeholder="Search..."
                     onChange={captureSearch} 
-                    onFocus={() => navigate("/SearchPage")}/>
+                    onFocus={() => navigate("/SearchPage/songs")}/>
                 {
                     searchText !== "" &&
                     <motion.div onClick={clearSearch} whileTap={{scale: 0.97}}>

muzik-offline/src/interface/components/navbar/HeaderMacOS.tsx

@@ -62,7 +62,7 @@ const HeaderMacOS: FunctionComponent<HeaderMacOSProps>  = (props: HeaderMacOSPro
                     id="gsearch" 
                     placeholder="Search..."
                     onChange={captureSearch} 
-                    onFocus={() => navigate("/SearchPage")}/>
+                    onFocus={() => navigate("/SearchPage/songs")}/>
                 {
                     searchText !== "" &&
                     <motion.div onClick={clearSearch} whileTap={{scale: 0.97}}>

muzik-offline/src/interface/components/navbar/HeaderWindows.tsx

@@ -19,6 +19,7 @@ const HeaderWindows: FunctionComponent<HeaderWindowsProps> = (props: HeaderWindo
 
     const navigate = useNavigate();
     const [searchText, setSearchText] = useState<string>("");
+    const [isFS, setIsFS] = useState<boolean>(false);
     const { setSearch } = useSearchStore((state) => { return { setSearch: state.setSearch}; });
 
     function captureSearch(e: any){setSearchText(e.target.value);}
@@ -65,6 +66,8 @@ const HeaderWindows: FunctionComponent<HeaderWindowsProps> = (props: HeaderWindo
                 if(maximizebtn)maximizebtn.style.visibility = "visible";
                 if(restorebtn)restorebtn.style.visibility = "hidden";
             }
+            const fs_conf: boolean = await appWindow.isFullscreen();
+            setIsFS(fs_conf);
         }
 
         window.addEventListener("resize", handleScreenResize);
@@ -104,7 +107,7 @@ const HeaderWindows: FunctionComponent<HeaderWindowsProps> = (props: HeaderWindo
                     id="gsearch" 
                     placeholder="Search..."
                     onChange={captureSearch} 
-                    onFocus={() => navigate("/SearchPage")}/>
+                    onFocus={() => navigate("/SearchPage/songs")}/>
                 {
                     searchText !== "" &&
                     <motion.div onClick={clearSearch} whileTap={{scale: 0.97}}>
@@ -117,7 +120,7 @@ const HeaderWindows: FunctionComponent<HeaderWindowsProps> = (props: HeaderWindo
                     <Empty_user />
                     <h2>settings</h2>
                 </motion.div>
-                <div className="window_controls_section">
+                <div className={"window_controls_section " + (isFS === true ? "window_controls_section-hidden" : "")}>
                     <div className="button_area" id="minimize">
                         <img className="icon" srcSet={`${min_w_10} 1x, ${min_w_12} 1.25x, ${min_w_15} 1.5x, ${min_w_15} 1.75x,
                             ${min_w_20} 2x, ${min_w_20} 2.25x, ${min_w_24} 2.5x, ${min_w_30} 3x, ${min_w_30} 3.5x`}/>
@@ -134,7 +137,6 @@ const HeaderWindows: FunctionComponent<HeaderWindowsProps> = (props: HeaderWindo
                             </div>
                         </div>
                     </div>
-
                     <div className="button_area" id="close">
                         <img className="icon" srcSet={`${close_w_10} 1x, ${close_w_12} 1.25x, ${close_w_15} 1.5x, ${close_w_15} 1.75x,
                             ${close_w_20} 2x, ${close_w_20} 2.25x, ${close_w_24} 2.5x, ${close_w_30} 3x, ${close_w_30} 3.5x`}/>

muzik-offline/src/interface/layouts/SearchArtists.tsx

@@ -18,7 +18,7 @@ const SearchArtists = () => {
 
     function setMenuOpenData(key: number, n_co_ords: {xPos: number; yPos: number;}){
         setCoords(n_co_ords);
-        const matching_artist = artists.find(artist => { return artist.key === key; })
+        const matching_artist = artists.find(artist => { return artist.key === key; });
         setArtistMenuToOpen(matching_artist ? matching_artist : null);
     }
 
@@ -47,7 +47,10 @@ const SearchArtists = () => {
         }
     }
 
-    function navigateTo(key: number){ navigate("/ArtistCatalogue/" + artists[key].artist_name); }
+    function navigateTo(key: number){ 
+        const matching_artist = artists.find(artist => { return artist.key === key; });
+        if(matching_artist !== undefined)navigate("/ArtistCatalogue/" + matching_artist.artist_name); 
+    }
 
     useEffect(() => {
         const resetArtists = () => {

muzik-offline/src/interface/layouts/SearchPlaylists.tsx

@@ -1,4 +1,4 @@
-import { SquareTitleBox, GeneralContextMenu, LoaderAnimated, AddSongsToPlaylistModal, PropertiesModal } from "@components/index";
+import { SquareTitleBox, GeneralContextMenu, LoaderAnimated, AddSongsToPlaylistModal, PropertiesModal, DeletePlaylistModal } from "@components/index";
 import { playlist, mouse_coOrds, contextMenuEnum, contextMenuButtons } from "@muziktypes/index";
 import { useEffect, useState } from "react";
 import "@styles/layouts/SearchPlaylists.scss";
@@ -13,6 +13,7 @@ const SearchPlaylists = () => {
     const [isPlaylistModalOpen, setIsPlaylistModalOpen] = useState<boolean>(false);
     const [isPropertiesModalOpen, setIsPropertiesModalOpen] = useState<boolean>(false);
     const [playlistMenuToOpen, setPlaylistMenuToOpen] = useState<playlist | null>(null);
+    const [isDeletePlaylistModalOpen, setIsDeletePlaylistModalOpen] = useState<boolean>(false);
     const { query } = useSearchStore((state) => { return { query: state.query}; });
     const [playlists, setPlaylists] = useState<playlist[]>([]);
     const navigate = useNavigate();
@@ -33,6 +34,7 @@ const SearchPlaylists = () => {
         if(arg == contextMenuButtons.ShowPlaylist && playlistMenuToOpen)navigateTo(playlistMenuToOpen.key);
         else if(arg === contextMenuButtons.ShowInfo){ setIsPropertiesModalOpen(true); }
         else if(arg === contextMenuButtons.AddToPlaylist){ setIsPlaylistModalOpen(true); }
+        else if(arg === contextMenuButtons.Delete){ setIsDeletePlaylistModalOpen(true); }
         else if(arg === contextMenuButtons.PlayNext && playlistMenuToOpen){ 
             addTheseSongsToPlayNext({playlist: playlistMenuToOpen.title});
             closeContextMenu(); 
@@ -47,6 +49,13 @@ const SearchPlaylists = () => {
         }
     }
 
+    async function shouldDeletePlaylist(deletePlaylist: boolean){
+        if(deletePlaylist && playlistMenuToOpen)await local_playlists_db.playlists.delete(playlistMenuToOpen.key);
+        setPlaylistMenuToOpen(null);
+        setCoords({xPos: 0, yPos: 0});
+        setIsDeletePlaylistModalOpen(false);
+    }
+
     function navigateTo(passed_key: number){ navigate(`/PlaylistView/${passed_key}`); }
 
     useEffect(() => {
@@ -61,7 +70,7 @@ const SearchPlaylists = () => {
         }
 
         resetPlaylists();
-    }, [query])
+    }, [query, isDeletePlaylistModalOpen])
 
     return (
         <div className="SearchPlaylists">
@@ -108,6 +117,10 @@ const SearchPlaylists = () => {
                 title={playlistMenuToOpen? playlistMenuToOpen.title : ""} 
                 values={{playlist: playlistMenuToOpen? playlistMenuToOpen.title : ""}}
                 closeModal={() => setIsPlaylistModalOpen(false)} />
+            <DeletePlaylistModal 
+                isOpen={isDeletePlaylistModalOpen} 
+                title={playlistMenuToOpen? playlistMenuToOpen.title : ""} 
+                closeModal={shouldDeletePlaylist} />
         </div>
     )
 }

muzik-offline/src/interface/pages/AllPlaylists.tsx

@@ -57,15 +57,9 @@ const AllPlaylists = () => {
     }
 
     async function shouldDeletePlaylist(deletePlaylist: boolean){
-        if(deletePlaylist && state.playlistMenuToOpen){
-            await local_playlists_db.playlists.delete(state.playlistMenuToOpen.key);
-            dispatch({ type: reducerType.SET_DELETE_MODAL, payload: false});
-            dispatch({ type: reducerType.SET_PLAYLIST_MENU, payload: null});
-        }
-        else{
-            dispatch({ type: reducerType.SET_DELETE_MODAL, payload: false});
-            dispatch({ type: reducerType.SET_PLAYLIST_MENU, payload: null});
-        }
+        if(deletePlaylist && state.playlistMenuToOpen)await local_playlists_db.playlists.delete(state.playlistMenuToOpen.key);
+        dispatch({ type: reducerType.SET_DELETE_MODAL, payload: false});
+        dispatch({ type: reducerType.SET_PLAYLIST_MENU, payload: null});
     }
 
     useEffect(() => { setList(); }, [state.sort, state.isCreatePlaylistModalOpen, state.isDeletePlayListModalOpen])

muzik-offline/src/interface/pages/SearchPage.tsx

@@ -2,14 +2,19 @@ import { Disk, LayersThree, Menu, Microphone, MusicalNote } from "@assets/icons"
 import { SearchNavigator } from "@components/index";
 import {SearchAlbums, SearchArtists, SearchGenres, SearchPlaylists, SearchSongs} from "@layouts/index";
 import { motion } from "framer-motion";
-import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 import "@styles/pages/SearchPage.scss";
+import {  Route, Routes } from 'react-router-dom';
+import { useState } from "react";
 
 const SearchPage = () => {
-    const [selected, setSelected] = useState<string>("songs");
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [selected, setSelected] = useState<string>(location.pathname.replace("/SearchPage/", ""));
 
     function setSelectedF(arg: string){ 
         setSelected(arg);
+        navigate(`/SearchPage/${arg}`);
     }
 
     return (
@@ -25,18 +30,13 @@ const SearchPage = () => {
                 <SearchNavigator icon={Menu} text={"playlists"} selected={selected} select={setSelectedF}/>
             </div>
             <div className="content-container">
-                {
-                    selected === "songs" ?
-                        <SearchSongs />
-                    : selected === "artists" ?
-                        <SearchArtists />
-                    : selected === "albums" ?
-                        <SearchAlbums />
-                    : selected === "genres" ?
-                        <SearchGenres />
-                    :
-                        <SearchPlaylists />
-                }
+                <Routes>
+                    <Route index path="songs" element={<SearchSongs/>}/>
+                    <Route path="artists" element={<SearchArtists/>}/>
+                    <Route path="albums" element={<SearchAlbums/>}/>
+                    <Route path="genres" element={<SearchGenres/>}/>
+                    <Route path="playlists" element={<SearchPlaylists/>}/>
+                </Routes>
             </div>
         </motion.div>
     )

muzik-offline/src/interface/styles/components/cards/RectangleSongBox.scss

@@ -84,6 +84,7 @@
 
     .PlayIcon{
         margin-right: 23px;
+        cursor: default;
         svg{
             path{
                 fill: $app-theme-col;

muzik-offline/src/interface/styles/components/navbar/Header.scss

@@ -150,6 +150,10 @@
             #close:active{background: #F1707A;}
 
         }
+
+        .window_controls_section-hidden{
+            display: none;
+        }
     }