Public search

src/react/App.tsx

@@ -72,7 +72,7 @@ function AppWrapper({ children }: { children: React.ReactNode }) {
 	return (
 		<div style={{ height: "100vh" }}>
 			<Header />
-			{isAuth && <Navigation />}
+			<Navigation />
 			{children}
 		</div>
 	);
@@ -119,6 +119,7 @@ function App() {
 					</AppWrapper>
 				</BrowserRouter>
 			</ThemeProvider>
+
 		</Provider>
 	);
 }

src/react/components/Navigation.tsx

@@ -32,7 +32,7 @@ export function Navigation() {
 					setValue(newValue);
 				}}>
 				<BottomNavigationAction
-					label="Spotify tracks"
+					label="Spotify"
 					sx={bottomStyles}
 					onClick={() => navigate("/")}
 					icon={
@@ -44,13 +44,13 @@ export function Navigation() {
 				<BottomNavigationAction
 					onClick={() => navigate("/search")}
 					sx={bottomStyles}
-					label="Search"
+					label="BeatSaver"
 					icon={<SearchIcon />}
 				/>
 				<BottomNavigationAction
 					onClick={() => navigate("/local-maps")}
 					sx={bottomStyles}
-					label="Local maps"
+					label="Library"
 					icon={
 						<Badge badgeContent={beatSaberTotalMaps} max={99999}>
 							<StorageIcon />

src/react/pages/LocalMaps.tsx

@@ -3,15 +3,30 @@ import { RootState } from "store";
 import React from "react";
 import { useSelector } from "react-redux";
 
-import { Box } from "@mui/material";
+import {Avatar, ListItemAvatar, Paper} from "@mui/material";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
 
 export function LocalMaps() {
 	const maps = useSelector((state: RootState) => state.beatSaber.localMaps);
 	return (
-		<Box>
-			{maps.map(map => (
-				<Box>{map}</Box>
+		<Paper elevation={1}>
+			{maps.map((map, key) => (
+				<ListItemButton
+					key={key}
+					alignItems="center">
+					<ListItemAvatar sx={{ p: 1 }}>
+						<Avatar
+							sx={{ width: 64, height: 64 }}
+							alt={map}
+						/>
+					</ListItemAvatar>
+
+					<ListItemText>
+						{map}
+					</ListItemText>
+				</ListItemButton>
 			))}
-		</Box>
+		</Paper>
 	);
 }

src/react/pages/Search.tsx

@@ -1,17 +1,27 @@
 import React from "react";
 
-import { Box } from "@mui/material";
+import {Box, Typography} from "@mui/material";
 import TextField from '@mui/material/TextField';
 import {SearchList} from "components/Search/SearchList";
 import { useState } from "react";
+import QueueMusicIcon from "@mui/icons-material/QueueMusic";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
 
 export function Search() {
 	const [query, setQuery] = useState("");
 
 	return (
 		<Box sx={{margin: 4}}>
+			<div>
+				<Typography variant="subtitle1" align={"center"}>
+					Search and import maps from BeatSaver
+
+				</Typography>
+			</div>
+
 			<TextField
-				sx={{ width: "100%"}}
+				sx={{ width: "100%", mt: 4}}
 				id="outlined-multiline-flexible"
 				label="Enter text"
 				multiline

src/react/pages/Settings.tsx

@@ -1,5 +1,27 @@
-import React from "react";
+import React, {useState} from "react";
+import {Box, Typography} from "@mui/material";
+import TextField from "@mui/material/TextField";
 
 export function Settings() {
-	return <div>Settings page</div>;
+	const [clientId, setClientId] = useState("");
+
+	return <Box sx={{margin: 4}}>
+		<div>
+			<Typography>
+				Spotify Client ID
+			</Typography>
+		</div>
+
+		<TextField
+			sx={{ width: "100%", mt: 1}}
+			id="outlined-multiline-flexible"
+			label="Client ID"
+			value={clientId}
+			multiline
+			onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+				setClientId(event.target.value);
+			}}
+			maxRows={4}
+		/>
+	</Box>
 }