diff --git a/assets/search-solid.svg b/assets/search-solid.svg
new file mode 100644
index 00000000..f41bbdd4
--- /dev/null
+++ b/assets/search-solid.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/deploy/linux/spotube/spotube.desktop b/deploy/linux/spotube/spotube.desktop
index d20e228c..a5c80915 100644
--- a/deploy/linux/spotube/spotube.desktop
+++ b/deploy/linux/spotube/spotube.desktop
@@ -4,5 +4,5 @@ Name=Spotube
Exec=AppRun
Icon=default
Comment=A music streaming app combining the power of Spotify & Youtube
-Terminal=false
+Terminal=true
Categories=Music;
diff --git a/package.json b/package.json
index fdf25f5c..04c47e3a 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
"dev": "TSC_WATCHFILE=UseFsEvents webpack --mode=development",
"start": "qode ./dist/index.js",
"start:trace": "qode ./dist/index.js --trace",
- "debug": "qode --inspect ./dist/index.js"
+ "debug": "qode --inspect ./dist/index.js",
+ "pack": "nodegui-packer -p ./dist"
},
"dependencies": {
"@nodegui/nodegui": "^0.27.0",
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
new file mode 100644
index 00000000..3412f30f
--- /dev/null
+++ b/src/components/Search.tsx
@@ -0,0 +1,67 @@
+import { QIcon } from "@nodegui/nodegui";
+import { LineEdit, ScrollArea, Text, View } from "@nodegui/react-nodegui";
+import React, { useState } from "react";
+import { QueryCacheKeys } from "../conf";
+import showError from "../helpers/showError";
+import useSpotifyQuery from "../hooks/useSpotifyQuery";
+import { search } from "../icons";
+import { PlaylistCard } from "./Home";
+import { TrackButton, TrackTableIndex } from "./PlaylistView";
+import IconButton from "./shared/IconButton";
+
+function Search() {
+ const [searchQuery, setSearchQuery] = useState("");
+ const { data: searchResults, isError, refetch } = useSpotifyQuery(
+ QueryCacheKeys.search,
+ (spotifyApi) => spotifyApi.search(searchQuery, ["playlist", "track"]).then((res) => res.body),
+ { enabled: false }
+ );
+
+ async function handleSearch() {
+ try {
+ await refetch();
+ } catch (error) {
+ showError(error, "[Failed to search through spotify]: ");
+ }
+ }
+
+ return (
+
+
+
+ 0} icon={new QIcon(search)} on={{ clicked: handleSearch }} />
+
+
+
+
+ {`Songs
`}
+
+ {searchResults?.tracks?.items.map((track, index) => (
+ {}} />
+ ))}
+
+
+ {`Playlists
`}
+
+
+ {searchResults?.playlists?.items.map((playlist) => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+export default Search;
diff --git a/src/components/TabMenu.tsx b/src/components/TabMenu.tsx
index 9585be16..fce09cf9 100644
--- a/src/components/TabMenu.tsx
+++ b/src/components/TabMenu.tsx
@@ -12,6 +12,7 @@ function TabMenu() {
+
);
}
diff --git a/src/conf.ts b/src/conf.ts
index dffe27da..8c82c54e 100644
--- a/src/conf.ts
+++ b/src/conf.ts
@@ -15,5 +15,6 @@ export enum QueryCacheKeys{
genrePlaylists="genrePlaylists",
playlistTracks="playlistTracks",
userPlaylists = "user-palylists",
- userSavedTracks = "user-saved-tracks"
+ userSavedTracks = "user-saved-tracks",
+ search="search"
}
\ No newline at end of file
diff --git a/src/icons.ts b/src/icons.ts
index 34ca4251..45f5e11c 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -7,6 +7,7 @@ import _heartRegular from "../assets/heart-regular.svg"
import _heart from "../assets/heart-solid.svg"
import _random from "../assets/random-solid.svg"
import _stop from "../assets/stop-solid.svg"
+import _search from "../assets/search-solid.svg";
export const play = _play;
export const pause = _pause;
@@ -16,4 +17,5 @@ export const forward = _forward;
export const heartRegular = _heartRegular;
export const heart = _heart;
export const random = _random;
-export const stop = _stop;
\ No newline at end of file
+export const stop = _stop;
+export const search = _search;
\ No newline at end of file
diff --git a/src/routes.tsx b/src/routes.tsx
index 7d691883..bee64d49 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -8,6 +8,7 @@ import PlaylistGenreView from "./components/PlaylistGenreView";
import TabMenu from "./components/TabMenu";
import CurrentPlaylist from "./components/CurrentPlaylist";
import Library from "./components/Library";
+import Search from "./components/Search";
function Routes() {
const { isLoggedIn } = useContext(authContext);
@@ -32,6 +33,7 @@ function Routes() {
)}
+