Changes...

.fleet/run.json

@@ -0,0 +1,12 @@
+{
+    "configurations": [
+        {
+            "name": "Start Frontend",
+            "type": "command",
+            "program": "npm",
+            "args": [
+                "start"
+            ]
+        }
+    ]
+}

package-lock.json

@@ -15,14 +15,17 @@
         "@types/node": "^16.18.10",
         "@types/react": "^18.0.26",
         "@types/react-dom": "^18.0.9",
+        "@types/react-router-bootstrap": "^0.24.5",
         "axios": "^1.2.1",
         "bootstrap": "^5.2.3",
+        "bootstrap-icons": "^1.10.3",
         "react": "^18.2.0",
         "react-bootstrap": "^2.7.0",
         "react-dom": "^18.2.0",
         "react-router-bootstrap": "^0.26.2",
         "react-router-dom": "^6.6.0",
         "react-scripts": "5.0.1",
+        "sass": "^1.57.1",
         "typescript": "^4.9.4",
         "web-vitals": "^2.1.4"
       }
@@ -3817,6 +3820,11 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -3928,6 +3936,34 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-bootstrap": {
+      "version": "0.24.5",
+      "resolved": "https://registry.npmjs.org/@types/react-router-bootstrap/-/react-router-bootstrap-0.24.5.tgz",
+      "integrity": "sha512-GRx/8xF/skw4/Pmm6d+xbExi8gobCLOe8Eoz9kXPQGbYo7p5Wbi61tjpOF5AbfJ5XMN+fIzweToTi56odj/LOQ==",
+      "dependencies": {
+        "@types/react": "*",
+        "@types/react-router-dom": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -5266,6 +5302,11 @@
         "@popperjs/core": "^2.11.6"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz",
+      "integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -8748,6 +8789,11 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
+      "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -14742,6 +14788,22 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "node_modules/sass": {
+      "version": "1.57.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",
@@ -19642,6 +19704,11 @@
         "@types/node": "*"
       }
     },
+    "@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
+    },
     "@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -19753,6 +19820,34 @@
         "@types/react": "*"
       }
     },
+    "@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "@types/react-router-bootstrap": {
+      "version": "0.24.5",
+      "resolved": "https://registry.npmjs.org/@types/react-router-bootstrap/-/react-router-bootstrap-0.24.5.tgz",
+      "integrity": "sha512-GRx/8xF/skw4/Pmm6d+xbExi8gobCLOe8Eoz9kXPQGbYo7p5Wbi61tjpOF5AbfJ5XMN+fIzweToTi56odj/LOQ==",
+      "requires": {
+        "@types/react": "*",
+        "@types/react-router-dom": "*"
+      }
+    },
+    "@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "requires": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "@types/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -20759,6 +20854,11 @@
       "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
       "requires": {}
     },
+    "bootstrap-icons": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz",
+      "integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -23291,6 +23391,11 @@
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.16.tgz",
       "integrity": "sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ=="
     },
+    "immutable": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.1.tgz",
+      "integrity": "sha512-7WYV7Q5BTs0nlQm7tl92rDYYoyELLKHoDMBKhrxEoiV4mrfVdRz8hzPiYOzH7yWjzoVEamxRuAqhxL2PLRwZYQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -27417,6 +27522,16 @@
       "resolved": "https://registry.npmjs.org/sanitize.css/-/sanitize.css-13.0.0.tgz",
       "integrity": "sha512-ZRwKbh/eQ6w9vmTjkuG0Ioi3HBwPFce0O+v//ve+aOq1oeCy7jMV2qzzAlpsNuqpqCBjjriM1lbtZbF/Q8jVyA=="
     },
+    "sass": {
+      "version": "1.57.1",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz",
+      "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sass-loader": {
       "version": "12.6.0",
       "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-12.6.0.tgz",

package.json

@@ -10,14 +10,17 @@
     "@types/node": "^16.18.10",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
+    "@types/react-router-bootstrap": "^0.24.5",
     "axios": "^1.2.1",
     "bootstrap": "^5.2.3",
+    "bootstrap-icons": "^1.10.3",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-router-bootstrap": "^0.26.2",
     "react-router-dom": "^6.6.0",
     "react-scripts": "5.0.1",
+    "sass": "^1.57.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.tsx

@@ -1,21 +1,20 @@
-import axios from 'axios';
 import React, {useEffect, useState} from 'react';
-import './App.css';
+import TrackDisplay from './components/TrackDisplay';
-import SongDisplay from './components/SongDisplay';
+import api from "./api";
-import Song from './model/song.model';
+import Track from './model/track.model';
 
 const App: React.FC = () => {
-    const [songs, setSongs] = useState(new Array<Song>());
+    const [tracks, setTracks] = useState(new Array<Track>());
 
     useEffect(() => {
-        axios.get("http://localhost:8080/api/v1/song/")
+        api.get("/tracks/")
-            .then(response => setSongs(response.data));
+            .then(response => setTracks(response.data));
     }, []);
 
     return (
         <div className="App">
-            {songs.map(s => (
+            {tracks.map(t => (
-                    <SongDisplay key={s.id} song={s}/>
+                <TrackDisplay key={t.id} track={t}/>
             ))}
         </div>
     );

src/api.ts

@@ -0,0 +1,8 @@
+import axios from "axios";
+
+const api = axios.create({
+    baseURL: "http://localhost:8080/api/v1",
+    withCredentials: true
+});
+
+export default api;

src/components/ExternalTrackCard.tsx

@@ -0,0 +1,43 @@
+import React, {FC} from "react";
+import ExternalTrack from "../model/externalTrack.model";
+import Icon from "./Icon";
+
+const ExternalTrackCard: FC<ExternalTrackCardProps> = ({
+                                                           track,
+                                                           source,
+                                                           imported,
+                                                           previewing,
+                                                           onImportClick,
+                                                           onPreviewClick,
+                                                           onSpotifyIconClick
+                                                       }) => (
+    <div className="external-track-card">
+        <img className="external-track-thumbnail" src={track.thumbnailUrl} alt={'Thumbnail - ' + track.name}/>
+        <div className="external-track-description">
+            <p className="external-track-title" onClick={onSpotifyIconClick}
+               title={'Open on ' + source}>{track.name}</p>
+            <p className="external-track-subtitle">{track.authors.join(', ') + ' - ' + track.albumName}</p>
+        </div>
+        <div className="external-track-actions">
+            {previewing ?
+                <Icon name="pause" hover="pause-fill" onClick={onPreviewClick} title="Stop preview"/> :
+                <Icon name="play" hover="play-fill" onClick={onPreviewClick} title="Preview track"/>}
+
+            {imported ?
+                <Icon name="check" hover="check-circle-fill" onClick={onImportClick} title="Remove from library"/> :
+                <Icon name="plus" hover="plus-circle-fill" onClick={onImportClick} title="Import in library"/>}
+        </div>
+    </div>
+);
+
+interface ExternalTrackCardProps {
+    track: ExternalTrack,
+    source: string,
+    imported: boolean,
+    previewing: boolean,
+    onImportClick: () => void,
+    onPreviewClick: () => void,
+    onSpotifyIconClick: () => void
+}
+
+export default ExternalTrackCard;

src/components/Icon.tsx

@@ -0,0 +1,35 @@
+import {FC, useEffect, useState} from "react";
+
+const Icon: FC<IconProps> = ({name, hover, title, onClick}) => {
+    const [hovering, setHovering] = useState(false);
+    const [className, setClassName] = useState("bi bi-" + name);
+
+    useEffect(() => {
+        let icon;
+
+        if (hover && hovering) {
+            icon = hover;
+        } else {
+            icon = name;
+        }
+
+        setClassName("bi bi-" + icon);
+    }, [hovering, name, hover]);
+
+    return (
+        <i className={className}
+           title={title}
+           onMouseEnter={() => setHovering(true)}
+           onMouseLeave={() => setHovering(false)}
+           onClick={onClick}></i>
+    );
+};
+
+interface IconProps {
+    name: string
+    hover?: string
+    title?: string
+    onClick?: () => void
+}
+
+export default Icon;

src/components/NavTab.tsx

@@ -0,0 +1,27 @@
+import React, {FC} from "react";
+import {Nav} from "react-bootstrap";
+import {Link} from "react-router-dom";
+
+const NavTab: FC<NavTabProps> = ({eventKey, label, icon, activeIcon, activeKey, onTabClick}) => {
+    const isActive = () => activeKey === eventKey;
+
+    return (
+        <Nav.Link as={Link} eventKey={eventKey} to={'/' + eventKey} onClick={() => onTabClick(eventKey)}>
+            {!isActive() || activeIcon == null ?
+                <i className={'bi bi-' + icon}></i> :
+                <i className={'bi bi-' + activeIcon}></i>}
+            <span>{label}</span>
+        </Nav.Link>
+    );
+};
+
+interface NavTabProps {
+    eventKey: string,
+    label: string,
+    icon: string,
+    activeIcon?: string,
+    activeKey: string,
+    onTabClick: (key: string) => void
+}
+
+export default NavTab;

src/components/SearchSongForm.tsx

@@ -0,0 +1,29 @@
+import {FC, FormEvent, useState} from "react";
+
+const SearchSongForm: FC<SearchSongFormProps> = ({submitSearchHandler}) => {
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const submitFormHandler = (e: FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        submitSearchHandler(searchQuery);
+    };
+
+    return (
+        <form onSubmit={submitFormHandler}>
+            <input
+                name="query"
+                type="string"
+                placeholder="Search query"
+                required
+                value={searchQuery}
+                onChange={e => setSearchQuery(e.currentTarget.value)}/>
+            <button>Search</button>
+        </form>
+    );
+};
+
+interface SearchSongFormProps {
+    submitSearchHandler: (query: string) => void
+}
+
+export default SearchSongForm;

src/components/SongDisplay.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import Song from "../model/song.model";
-
-const SongDisplay: React.FC<SongDisplayProps> = ({song}) => {
-    return (
-        <div>
-            <p>{song.name} - {song.authors.join(" and ")}</p>
-        </div>
-    );
-};
-
-export interface SongDisplayProps {
-    song: Song
-}
-
-export default SongDisplay;

src/components/TrackDisplay.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Track from "../model/track.model";
+
+const TrackDisplay: React.FC<TrackDisplayProps> = ({track}) => {
+    return (
+        <div>
+            <p>{track.name} - {track.authors.join(" and ")}</p>
+        </div>
+    );
+};
+
+export interface TrackDisplayProps {
+    track: Track
+}
+
+export default TrackDisplay;

src/containers/Navbar.container.tsx

@@ -0,0 +1,28 @@
+import {FC, useState} from "react";
+import {Container, Nav, Navbar} from "react-bootstrap";
+import NavTab from "../components/NavTab";
+import "../style/navbar.scss";
+
+const NavbarContainer: FC = () => {
+    const [activeKey, setActiveKey] = useState("library");
+
+    return (
+        <Navbar bg="dark">
+            <Container>
+                <Nav className="me-auto" activeKey={activeKey}>
+                    <NavTab eventKey="library" label="Library" icon="vinyl" activeIcon="vinyl-fill"
+                            activeKey={activeKey} onTabClick={setActiveKey}/>
+                    <NavTab eventKey="search" label="Search" icon="search" activeKey={activeKey}
+                            onTabClick={setActiveKey}/>
+                    <NavTab eventKey="playlists" label="Playlists" icon="bookmarks" activeIcon="bookmarks-fill"
+                            activeKey={activeKey} onTabClick={setActiveKey}/>
+                    <NavTab eventKey="spotify-login" label="Spotify Login" icon="spotify" activeIcon="spotify"
+                            activeKey={activeKey}
+                            onTabClick={() => window.open("http://localhost:8080/module/spotify/login", "_blank")}/>
+                </Nav>
+            </Container>
+        </Navbar>
+    );
+};
+
+export default NavbarContainer;

src/containers/Search.container.tsx

@@ -1,15 +1,71 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
+import SearchSongForm from "../components/SearchSongForm";
+import api from "../api";
+import SearchResultContainer from "./SearchResult.container";
+import ExternalTrack from "../model/externalTrack.model";
+
+const audio = new Audio();
 
 const SearchContainer: React.FC = () => {
+    const [results, setResults] = useState({});
+    const [previewTrackId, setPreviewTrackId] = useState("");
+    const [importedTracksIds, setImportedTracksIds] = useState(new Array<string>());
+
+    const submitSearchHandler = async (query: string) => {
+        const response = await api.get("/tracks/search?q=" + query, {withCredentials: true});
+        setResults(response.data);
+    };
+
+    const onPreviewClick = (trackId: string, previewUrl: string) => {
+        audio.pause();
+
+        if (trackId !== previewTrackId) {
+            audio.src = previewUrl;
+            audio.play();
+            setPreviewTrackId(trackId);
+        } else {
+            setPreviewTrackId("");
+        }
+    };
+
+    const onImportClick = async (trackId: string) => {
+        if (importedTracksIds.some(id => trackId === id)) {
+            await api.delete(`/tracks/trackId/spotify/${trackId}`);
+            setImportedTracksIds(importedTracksIds.filter(id => trackId !== id));
+        } else {
+            await api.post("/tracks/", {source: "spotify", trackId}, {withCredentials: true});
+            setImportedTracksIds([...importedTracksIds, trackId]);
+        }
+    };
+
+    const onSpotifyIconClick = (trackId: string) => {
+        const spotifyTrackUrl = "https://open.spotify.com/track/" + trackId;
+        window.open(spotifyTrackUrl, "_blank");
+    };
+
+    useEffect(() => {
+        const getLibraryTrackIds = async () => {
+            const response = await api.get("/tracks/trackIds/");
+            if (response.data.spotify) {
+                setImportedTracksIds(response.data.spotify);
+            }
+        };
+
+        getLibraryTrackIds();
+    }, []);
+
     return (
-            <>
+        <>
-                <div>
+            <SearchSongForm submitSearchHandler={submitSearchHandler}/>
-                    <form>
+            {Object.entries(results).map(([source, tracks]) => (
-                        <input name="query" type="string" placeholder="Search query" required />
+                <SearchResultContainer key={source} source={source} importedTracksIds={importedTracksIds}
-                        <button>Search</button>
+                                       previewTrackId={previewTrackId}
-                    </form>
+                                       tracks={tracks as ExternalTrack[]}
-                </div>
+                                       onImportClick={onImportClick}
-            </>
+                                       onPreviewClick={onPreviewClick}
+                                       onSpotifyIconClick={onSpotifyIconClick}/>
+            ))}
+        </>
     )
 }
 

src/containers/SearchResult.container.tsx

@@ -0,0 +1,44 @@
+import {FC} from "react";
+import ExternalTrackCard from "../components/ExternalTrackCard";
+import ExternalTrack from "../model/externalTrack.model";
+import SpotifyLogo from "../images/Spotify_Logo_RGB_White.png";
+import "../style/search-results.scss";
+
+const SearchResultContainer: FC<SearchResultContainerProps> = ({
+                                                                   source,
+                                                                   importedTracksIds,
+                                                                   previewTrackId,
+                                                                   tracks,
+                                                                   onImportClick,
+                                                                   onPreviewClick,
+                                                                   onSpotifyIconClick
+                                                               }) => {
+    return (
+        <div className="d-flex flex-column">
+            <img className="search-results-source-logo" src={SpotifyLogo} alt="Spotify logo"/>
+            <div className="search-results-wrapper d-flex flex-row">
+                {tracks.map(s => (
+                    <ExternalTrackCard key={s.trackId} track={s}
+                                       source={source}
+                                       imported={importedTracksIds.some(id => s.trackId === id)}
+                                       previewing={previewTrackId === s.trackId}
+                                       onImportClick={() => onImportClick(s.trackId)}
+                                       onPreviewClick={() => onPreviewClick(s.trackId, s.previewUrl)}
+                                       onSpotifyIconClick={() => onSpotifyIconClick(s.trackId)}/>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+interface SearchResultContainerProps {
+    source: string,
+    importedTracksIds: string[],
+    previewTrackId: string,
+    tracks: ExternalTrack[],
+    onImportClick: (trackId: string) => void,
+    onPreviewClick: (trackId: string, previewUrl: string) => void,
+    onSpotifyIconClick: (trackId: string) => void
+}
+
+export default SearchResultContainer;

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import reportWebVitals from './reportWebVitals';
-import {RouterProvider} from 'react-router-dom';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
-import router from './router';
+import './style/index.scss';
+import NavbarContainer from "./containers/Navbar.container";
+import SearchContainer from "./containers/Search.container";
+import MainContainer from './containers/Main.container';
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
@@ -11,7 +13,20 @@ const root = ReactDOM.createRoot(
 
 root.render(
     <React.StrictMode>
-        <RouterProvider router={router}/>
+        <BrowserRouter>
+            <div className="d-flex flex-row">
+                <div className="sidebar">
+                    <NavbarContainer/>
+                </div>
+                <div className="p-3">
+                    <Routes>
+                        <Route path="/" element={<MainContainer/>}/>
+                        <Route path="/library" element={<MainContainer/>}/>
+                        <Route path="/search" element={<SearchContainer/>}/>
+                    </Routes>
+                </div>
+            </div>
+        </BrowserRouter>
     </React.StrictMode>
 );
 

src/model/externalTrack.model.ts

@@ -0,0 +1,41 @@
+export default class ExternalTrack {
+    private readonly _trackId: string;
+    private readonly _name: string;
+    private readonly _albumName: string;
+    private readonly _authors: string[];
+    private readonly _thumbnailUrl: string;
+    private readonly _previewUrl: string;
+
+    public constructor(trackId: string, name: string, albumName: string, authors: string[], thumbnailUrl: string, previewUrl: string) {
+        this._trackId = trackId;
+        this._name = name;
+        this._albumName = albumName;
+        this._authors = authors;
+        this._thumbnailUrl = thumbnailUrl;
+        this._previewUrl = previewUrl;
+    }
+
+    public get trackId(): string {
+        return this._trackId;
+    }
+
+    public get name(): string {
+        return this._name;
+    }
+
+    public get albumName(): string {
+        return this._albumName;
+    }
+
+    public get authors(): string[] {
+        return this._authors;
+    }
+
+    public get thumbnailUrl(): string {
+        return this._thumbnailUrl;
+    }
+
+    public get previewUrl(): string {
+        return this._previewUrl;
+    }
+}

src/model/track.model.ts

@@ -1,12 +1,12 @@
-export default class Song {
+export default class Track {
     private readonly _id: string;
-    private readonly _songId: string;
+    private readonly _trackId: string;
     private readonly _name: string;
     private readonly _authors: string[];
 
-    public constructor(id: string, songId: string, name: string, authors: string[]) {
+    public constructor(id: string, trackId: string, name: string, authors: string[]) {
         this._id = id;
-        this._songId = songId;
+        this._trackId = trackId;
         this._name = name;
         this._authors = authors;
     }
@@ -15,8 +15,8 @@ export default class Song {
         return this._id;
     }
 
-    public get songId(): string {
+    public get trackId(): string {
-        return this._songId;
+        return this._trackId;
     }
 
     public get name(): string {

src/style/_theme.scss

@@ -0,0 +1,32 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+/* https://coolors.co/fc8607-8d99ae-edf2f4-29262c-1f1c21 */
+
+$color-primary: #fc8607;
+$color-background: #191919;
+$color-background-2: darken($color-background, 5%);
+$font-color-background: white;
+
+$body-bg: $color-background !default;
+$body-color: white;
+
+$navbar-width: 15rem;
+
+$theme-colors: (
+        "primary": $color-primary,
+        "secondary": #6c757d,
+        "success": #28a745,
+        "danger": #dc3545,
+        "warning": #ffc107,
+        "info": #17a2b8,
+        "light": #f8f9fa,
+        "dark": $color-background-2
+);
+//$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
+//$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
+//$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
+//$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
+
+@import "~bootstrap/scss/bootstrap";

src/style/index.scss

@@ -0,0 +1,28 @@
+@import "~bootstrap/scss/bootstrap";
+@import "~bootstrap-icons/font/bootstrap-icons";
+@import "theme";
+
+body {
+  margin: 0;
+  padding: 0;
+  //  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  //  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  //  sans-serif;
+  font-family: 'Helvetica Neue', sans-serif;
+  background-color: $color-background !important;
+  color: $font-color-background;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  monospace;
+}
+
+.sidebar {
+  background-color: $color-background-2;
+  min-width: 15rem;
+  height: 100vh;
+}

src/style/navbar.scss

@@ -0,0 +1,34 @@
+@import "theme";
+
+nav {
+  background-color: $color-background-2;
+  width: $navbar-width;
+
+  .navbar-nav {
+    width: $navbar-width;
+    flex-direction: column !important;
+    color: white;
+  }
+
+  .nav-link {
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: bold;
+    font-size: 1.2em;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    i, span {
+      color: rgba(255, 255, 255, 0.7);
+      margin-right: 1em;
+    }
+
+    &:hover i, &:hover span, &.active span {
+      color: white;
+    }
+
+    &.active i {
+      color: $color-primary !important;
+    }
+  }
+}

src/style/search-results.scss

@@ -0,0 +1,59 @@
+@import "theme";
+
+$thumbnail-size: 15em;
+$wrapper-margin: 1em;
+$wrapper-width: calc(100vw - $navbar-width - (2 * $wrapper-margin));
+
+.search-results-wrapper {
+  overflow-x: scroll;
+  width: $wrapper-width;
+}
+
+.search-results-source-logo {
+  width: 10em;
+  margin-top: $wrapper-margin;
+  margin-left: $wrapper-margin;
+}
+
+.external-track-card {
+  width: $thumbnail-size;
+  margin: 1em;
+
+  img.external-track-thumbnail {
+    width: $thumbnail-size;
+    height: $thumbnail-size;
+    margin-bottom: .5em;
+  }
+
+  .external-track-description {
+    p {
+      margin: 0;
+    }
+
+    .external-track-title {
+      font-weight: bold;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      .bi {
+        margin-left: .25em;
+      }
+    }
+
+    .external-track-subtitle {
+      color: rgba(255, 255, 255, 0.7);
+      line-height: 1.2em;
+    }
+  }
+
+  .external-track-actions {
+    font-size: 1.2em;
+    margin-bottom: 1em;
+  }
+
+  .bi, .external-track-title {
+    cursor: pointer;
+  }
+}