Merge pull request #32 from soup-bowl/soup-bowl/android-theme

Settings option for Android theme

Author: soup-bowl

frontend/src/App.tsx

@@ -17,6 +17,7 @@ import { IonReactRouter } from "@ionic/react-router"
 import { discOutline, searchOutline, settingsOutline, cogOutline } from "ionicons/icons"
 import { CollectionPage, SearchPage, SettingsPage } from "@/pages"
 import { createIDBPersister } from "@/persister"
+import { DeviceMode } from "@/types"
 
 /* Core CSS required for Ionic components to work properly */
 import "@ionic/react/css/core.css"
@@ -48,8 +49,16 @@ import "@ionic/react/css/palettes/dark.always.css"
 /* Theme variables */
 import "./theme/variables.css"
 
+const getDeviceMode = (): DeviceMode => {
+	const item = localStorage.getItem("DeviceTheme")
+	const parsedItem = item ? JSON.parse(item) : "ios"
+	const validItem = parsedItem ? (parsedItem as DeviceMode) : "ios"
+	localStorage.setItem("mode", validItem)
+	return validItem
+}
+
 setupIonicReact({
-	mode: import.meta.env.VITE_APP_MODE ?? "ios",
+	mode: getDeviceMode(),
 })
 
 const queryClient = new QueryClient({

frontend/src/pages/Collection.tsx

@@ -18,12 +18,12 @@ import {
 } from "@ionic/react"
 import { OverlayEventDetail } from "@ionic/react/dist/types/components/react-component-lib/interfaces"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { filterOutline, personOutline, pricetagOutline, timeOutline, listOutline, gridOutline } from "ionicons/icons"
+import { personOutline, personSharp } from "ionicons/icons"
 import { IReleaseSet, IReleases, getCollectionAndWants } from "@/api"
 import { FullpageLoading, AlbumGrid, FullpageInfo, AlbumListGroups, InfoBanners } from "@/components"
 import { ProfileModal, ViewAlbumDetails } from "@/modal"
 import { useAuth, useSettings } from "@/hooks"
-import { masterSort } from "@/utils"
+import { getFilterIcon, getLayoutIcon, masterSort } from "@/utils"
 import { IReleaseTuple } from "@/types"
 
 const filterActionButtons = [
@@ -77,30 +77,6 @@ const CollectionPage: React.FC = () => {
 
 	const [{ username, token }] = useAuth()
 
-	const getFilterIcon = (filter: string) => {
-		switch (filter) {
-			default:
-			case "none":
-				return filterOutline
-			case "label":
-				return pricetagOutline
-			case "artist":
-				return personOutline
-			case "release":
-				return timeOutline
-		}
-	}
-
-	const getLayoutIcon = (item: string) => {
-		switch (item) {
-			default:
-			case "grid":
-				return gridOutline
-			case "list":
-				return listOutline
-		}
-	}
-
 	if (!username) {
 		return (
 			<IonPage>
@@ -156,7 +132,7 @@ const CollectionPage: React.FC = () => {
 				<IonToolbar>
 					<IonButtons slot="secondary">
 						<IonButton onClick={() => setProfileModal(true)}>
-							<IonIcon slot="icon-only" icon={personOutline} />
+							<IonIcon slot="icon-only" ios={personOutline} md={personSharp} />
 						</IonButton>
 					</IonButtons>
 					<IonButtons slot="primary">
@@ -169,7 +145,11 @@ const CollectionPage: React.FC = () => {
 								}
 							}}
 						>
-							<IonIcon slot="icon-only" md={getLayoutIcon(layout)} />
+							<IonIcon
+								slot="icon-only"
+								ios={getLayoutIcon(layout, "ios")}
+								md={getLayoutIcon(layout, "md")}
+							/>
 						</IonButton>
 						<IonButton
 							onClick={() =>
@@ -184,7 +164,11 @@ const CollectionPage: React.FC = () => {
 								})
 							}
 						>
-							<IonIcon slot="icon-only" md={getFilterIcon(filter)} />
+							<IonIcon
+								slot="icon-only"
+								ios={getFilterIcon(filter, "ios")}
+								md={getFilterIcon(filter, "md")}
+							/>
 						</IonButton>
 					</IonButtons>
 					<IonSegment

frontend/src/pages/Search.tsx

@@ -10,7 +10,7 @@ import {
 	IonTitle,
 	IonToolbar,
 } from "@ionic/react"
-import { barcodeOutline } from "ionicons/icons"
+import { barcodeOutline, barcodeSharp } from "ionicons/icons"
 import { useQuery } from "@tanstack/react-query"
 import { IReleaseSet, IReleases, getCollectionAndWants } from "@/api"
 import { AlbumList, FullpageInfo, FullpageLoading, InfoBanners } from "@/components"
@@ -93,7 +93,7 @@ const SearchPage: React.FC = () => {
 					<IonTitle>Search</IonTitle>
 					<IonButtons slot="end">
 						<IonButton onClick={() => setOpenScanner(true)}>
-							<IonIcon slot="icon-only" icon={barcodeOutline} />
+							<IonIcon slot="icon-only" ios={barcodeOutline} md={barcodeSharp} />
 						</IonButton>
 					</IonButtons>
 				</IonToolbar>

frontend/src/pages/Settings.tsx

@@ -18,6 +18,9 @@ import {
 	IonRow,
 	IonToggle,
 	IonButtons,
+	IonSelectOption,
+	IonSelect,
+	getConfig,
 } from "@ionic/react"
 import { useHistory } from "react-router"
 import { useQueryClient } from "@tanstack/react-query"
@@ -26,6 +29,7 @@ import { IReleaseSet } from "@/api"
 import { useAuth, useSettings } from "@/hooks"
 import { formatBytes } from "@/utils"
 import { DonateButton, InfoBanners } from "@/components"
+import { DeviceMode } from "@/types"
 
 const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({ hasUpdate, onUpdate }) => {
 	const queryClient = useQueryClient()
@@ -35,7 +39,11 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 	const [newPassword, setNewPassword] = useState<string>(token ?? "")
 	const [storageInfo, setStorageInfo] = useState<{ usage: string; quota: string } | undefined>()
 	const [imageQuality, setImageQuality, clearImagequality] = useSettings<boolean>("ImagesAreHQ", false)
+	const [deviceTheme, setDeviceTheme] = useSettings<DeviceMode>("DeviceTheme", "ios")
+	const [restartAlert, setRestartAlert] = useState<boolean>(false)
 	const appVersion = import.meta.env.VITE_VER ?? "Unknown"
+	const ionConfig = getConfig()
+	const currentMode = ionConfig?.get("mode") || "ios"
 
 	useEffect(() => {
 		if ("storage" in navigator && "estimate" in navigator.storage) {
@@ -75,6 +83,8 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 		totalMissing: collectionMissing + wantedMissing,
 	}
 
+	const lightMode = currentMode === "ios" ? "light" : undefined
+
 	return (
 		<IonPage>
 			<IonHeader>
@@ -90,14 +100,14 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 			</IonHeader>
 			<IonContent className="ion-padding">
 				<IonList inset={true}>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
 						<IonInput
 							label="Username"
 							value={newUsername}
 							onIonChange={(e) => setNewUsername(`${e.target.value}`)}
 						/>
 					</IonItem>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
 						<IonInput
 							type="password"
 							label="Token"
@@ -114,7 +124,7 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 					token, or click Generate if you do not have one.
 				</IonNote>
 				<IonList inset={true}>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
 						<IonToggle checked={imageQuality} onIonChange={(e) => setImageQuality(e.detail.checked)}>
 							Increase image quality
 						</IonToggle>
@@ -124,7 +134,23 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 					If you have a large library, you may experience issues with this.
 				</IonNote>
 				<IonList inset={true}>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
+						<IonSelect
+							label="Theme mode"
+							interface="action-sheet"
+							value={deviceTheme}
+							onIonChange={(e) => {
+								setDeviceTheme(e.detail.value)
+								setRestartAlert(true)
+							}}
+						>
+							<IonSelectOption value="ios">Apple</IonSelectOption>
+							<IonSelectOption value="md">Android (beta)</IonSelectOption>
+						</IonSelect>
+					</IonItem>
+				</IonList>
+				<IonList inset={true}>
+					<IonItem color={lightMode}>
 						<IonLabel>App version</IonLabel>
 						<IonLabel slot="end">
 							{appVersion}
@@ -140,19 +166,19 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 							)}
 						</IonLabel>
 					</IonItem>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
 						<IonLabel>Storage used</IonLabel>
 						<IonLabel slot="end">
 							{storageInfo?.usage ?? "Unknown"} of {storageInfo?.quota ?? "Unknown"}
 						</IonLabel>
 					</IonItem>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
 						<IonLabel>Records stored</IonLabel>
 						<IonLabel id="reccount-tooltip" slot="end">
 							{inStorageInfo.totalCount}
 						</IonLabel>
 					</IonItem>
-					<IonItem color="light">
+					<IonItem color={lightMode}>
 						<IonLabel>Records unsynced</IonLabel>
 						<IonLabel id="missing-tooltip" slot="end">
 							{inStorageInfo.totalMissing}
@@ -202,6 +228,13 @@ const SettingsPage: React.FC<{ hasUpdate: boolean; onUpdate: () => void }> = ({
 						},
 					]}
 				/>
+				<IonAlert
+					isOpen={restartAlert}
+					onDidDismiss={() => setRestartAlert(false)}
+					header="Reload required"
+					message="For these changes to take effect, you will need to reload the app."
+					buttons={["OK"]}
+				/>
 				<IonNote color="medium" class="ion-margin-horizontal" style={{ display: "block", textAlign: "center" }}>
 					Made by <a href="https://subo.dev">soup-bowl</a> and{" "}
 					<a href="https://github.com/soup-bowl/Localib">open source</a>.

frontend/src/types.ts

@@ -11,3 +11,5 @@ export type IStatDisplay = {
 	value?: number
 	label: string
 }
+
+export type DeviceMode = "ios" | "md"

frontend/src/utils/iconUtils.ts

@@ -0,0 +1,39 @@
+import { DeviceMode } from "@/types"
+import {
+	filterOutline,
+	filterSharp,
+	pricetagOutline,
+	pricetagSharp,
+	personOutline,
+	personSharp,
+	timeOutline,
+	timeSharp,
+	gridOutline,
+	gridSharp,
+	listOutline,
+	listSharp,
+} from "ionicons/icons"
+
+export const getFilterIcon = (filter: string, platform: DeviceMode = "ios") => {
+	switch (filter) {
+		case "label":
+			return platform === "ios" ? pricetagOutline : pricetagSharp
+		case "artist":
+			return platform === "ios" ? personOutline : personSharp
+		case "release":
+			return platform === "ios" ? timeOutline : timeSharp
+		case "none":
+		default:
+			return platform === "ios" ? filterOutline : filterSharp
+	}
+}
+
+export const getLayoutIcon = (item: string, platform: DeviceMode = "ios") => {
+	switch (item) {
+		case "list":
+			return platform === "ios" ? listOutline : listSharp
+		case "grid":
+		default:
+			return platform === "ios" ? gridOutline : gridSharp
+	}
+}

frontend/src/utils/index.ts

@@ -1,2 +1,3 @@
 export { splitRecordsByYear, splitRecordsByLabel, splitRecordsByArtist, masterSort } from "./collectionSort"
+export { getFilterIcon, getLayoutIcon } from "./iconUtils"
 export { formatBytes, formatCurrency, isNullOrBlank } from "./stringUtils"