Alpha warning banner.

frontend/.env

@@ -1 +1,2 @@
 VITE_VINYL_API_URL=https://vinyl.localib.app
+VITE_BETA_BANNER="Localib is in alpha - use at your own risk"

frontend/index.html

@@ -7,7 +7,7 @@
 		<base href="/" />
 
 		<meta name="color-scheme" content="dark" />
-		<meta name="theme-color" content="#0d0d0d">
+		<meta name="theme-color" content="#0d0d0d" />
 		<meta
 			name="viewport"
 			content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

frontend/src/pages/Collection.tsx

@@ -60,6 +60,7 @@ const CollectionPage: React.FC = () => {
 	const [filter, setFilter] = useState<"release" | "label" | "artist" | "none">("none")
 	const [modalInfo, setModalInfo] = useState<IReleases | undefined>(undefined)
 	const [loading, setLoading] = useState<{ page: number; pages: number }>({ page: 0, pages: 0 })
+	const betaBanner = import.meta.env.VITE_BETA_BANNER
 
 	const [{ username, token }, saveAuth, clearAuth] = useAuth()
 
@@ -138,6 +139,11 @@ const CollectionPage: React.FC = () => {
 					</IonButtons>
 					<IonTitle>Collection</IonTitle>
 				</IonToolbar>
+				{betaBanner && (
+					<IonToolbar className="beta-banner" color="warning">
+						<IonTitle>{betaBanner}</IonTitle>
+					</IonToolbar>
+				)}
 			</IonHeader>
 			<IonContent fullscreen>
 				<IonRefresher slot="fixed" onIonRefresh={handleRefresh}>

frontend/src/pages/Profile.tsx

@@ -10,6 +10,7 @@ import {
 	IonHeader,
 	IonIcon,
 	IonPage,
+	IonTitle,
 	IonToolbar,
 } from "@ionic/react"
 import { useQuery } from "@tanstack/react-query"
@@ -22,6 +23,7 @@ import "./Profile.css"
 
 const ProfilePage: React.FC = () => {
 	const [openSettingsDialog, setOpenSettingsDialog] = useState<boolean>(false)
+	const betaBanner = import.meta.env.VITE_BETA_BANNER
 
 	const [{ username, token }, saveAuth, clearAuth] = useAuth()
 
@@ -76,6 +78,11 @@ const ProfilePage: React.FC = () => {
 								<IonIcon icon={cogOutline}></IonIcon>
 							</IonButton>
 						</IonToolbar>
+						{betaBanner && (
+							<IonToolbar className="beta-banner" color="warning">
+								<IonTitle>{betaBanner}</IonTitle>
+							</IonToolbar>
+						)}
 					</IonHeader>
 					<div className="profile-column">
 						<IonAvatar>

frontend/src/pages/Search.tsx

@@ -9,6 +9,7 @@ import { useAuth } from "../hooks"
 const SearchPage: React.FC = () => {
 	const [modalInfo, setModalInfo] = useState<IReleases | undefined>(undefined)
 	const [filterData, setFilterData] = useState<IReleases[]>([])
+	const betaBanner = import.meta.env.VITE_BETA_BANNER
 
 	const [{ username, token }, saveAuth, clearAuth] = useAuth()
 
@@ -69,6 +70,11 @@ const SearchPage: React.FC = () => {
 						onIonInput={(ev) => searchData(data ?? [], ev.target.value?.toLowerCase() ?? "")}
 					/>
 				</IonToolbar>
+				{betaBanner && (
+					<IonToolbar className="beta-banner" color="warning">
+						<IonTitle>{betaBanner}</IonTitle>
+					</IonToolbar>
+				)}
 			</IonHeader>
 			<IonContent fullscreen>
 				{filterData.length > 0 && (

frontend/src/theme/variables.css

@@ -1,2 +1,12 @@
 /* For information on how to create your own theme, please see:
 http://ionicframework.com/docs/theming/ */
+
+.beta-banner {
+	--min-height: 25px;
+	--padding-top: 5px;
+	--padding-bottom: 5px;
+}
+
+.beta-banner ion-title {
+	font-size: 12px;
+}