Add preview theme functionality to SettingsPage

This commit is contained in:
Marcos Rios 2024-02-18 01:23:53 -03:00
parent 90d8d2428f
commit 247362a4a9
4 changed files with 47 additions and 13 deletions

View File

@ -33,7 +33,7 @@ import { AccountWithToken, useAuthStore } from "@/stores/auth";
import { useLanguageStore } from "@/stores/language";
import { usePreferencesStore } from "@/stores/preferences";
import { useSubtitleStore } from "@/stores/subtitles";
import { useThemeStore } from "@/stores/theme";
import { usePreviewThemeStore, useThemeStore } from "@/stores/theme";
import { SubPageLayout } from "./layouts/SubPageLayout";
import { PreferencesPart } from "./parts/settings/PreferencesPart";
@ -101,8 +101,10 @@ export function AccountSettings(props: {
export function SettingsPage() {
const { t } = useTranslation();
const activeTheme = useThemeStore((s) => s.theme);
const activeTheme = useThemeStore((s) => s.theme) ?? "default";
const setTheme = useThemeStore((s) => s.setTheme);
const previewTheme = usePreviewThemeStore((s) => s.previewTheme) ?? "default";
const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
const appLanguage = useLanguageStore((s) => s.language);
const setAppLanguage = useLanguageStore((s) => s.setLanguage);
@ -143,6 +145,14 @@ export function SettingsPage() {
enableThumbnails,
);
const setThemeWithPreview = useCallback(
(v: string | null) => {
state.theme.set(v === "default" ? null : v);
setPreviewTheme(v);
},
[state.theme, setPreviewTheme],
);
const saveChanges = useCallback(async () => {
if (account) {
if (
@ -241,7 +251,11 @@ export function SettingsPage() {
/>
</div>
<div id="settings-appearance" className="mt-48">
<ThemePart active={state.theme.state} setTheme={state.theme.set} />
<ThemePart
active={previewTheme}
inUse={activeTheme}
setTheme={setThemeWithPreview}
/>
</div>
<div id="settings-captions" className="mt-48">
<CaptionsPart

View File

@ -10,13 +10,13 @@ export function BlurEllipsis(props: { positionClass?: string }) {
<div
className={classNames(
props.positionClass ?? "fixed",
"top-0 -right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentA blur-[100px] pointer-events-none opacity-25",
"top-0 -right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentA blur-[100px] pointer-events-none opacity-25 transition-colors duration-75",
)}
/>
<div
className={classNames(
props.positionClass ?? "fixed",
"top-0 right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentB blur-[100px] pointer-events-none opacity-25",
"top-0 right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentB blur-[100px] pointer-events-none opacity-25 transition-colors duration-75",
)}
/>
</>

View File

@ -5,6 +5,10 @@ import { Icon, Icons } from "@/components/Icon";
import { Heading1 } from "@/components/utils/Text";
const availableThemes = [
{
id: "default",
key: "settings.appearance.themes.default",
},
{
id: "blue",
key: "settings.appearance.themes.blue",
@ -26,6 +30,7 @@ const availableThemes = [
function ThemePreview(props: {
selector?: string;
active?: boolean;
inUse?: boolean;
name: string;
onClick?: () => void;
}) {
@ -105,7 +110,7 @@ function ThemePreview(props: {
<span
className={classNames(
"inline-block px-3 py-1 leading-tight text-sm transition-opacity duration-150 rounded-full bg-pill-activeBackground text-white/85",
props.active ? "opacity-100" : "opacity-0 pointer-events-none",
props.inUse ? "opacity-100" : "opacity-0 pointer-events-none",
)}
>
{t("settings.appearance.activeTheme")}
@ -117,6 +122,7 @@ function ThemePreview(props: {
export function ThemePart(props: {
active: string | null;
inUse: string | null;
setTheme: (theme: string | null) => void;
}) {
const { t } = useTranslation();
@ -126,16 +132,11 @@ export function ThemePart(props: {
<Heading1 border>{t("settings.appearance.title")}</Heading1>
<div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-6 max-w-[700px]">
{/* default theme */}
<ThemePreview
name={t("settings.appearance.themes.default")}
selector="theme-default"
active={props.active === null}
onClick={() => props.setTheme(null)}
/>
{availableThemes.map((v) => (
<ThemePreview
selector={`theme-${v.id}`}
active={props.active === v.id}
inUse={props.inUse === v.id}
name={t(v.key)}
key={v.id}
onClick={() => props.setTheme(v.id)}

View File

@ -25,12 +25,31 @@ export const useThemeStore = create(
),
);
export interface PreviewThemeStore {
previewTheme: string | null;
setPreviewTheme(v: string | null): void;
}
export const usePreviewThemeStore = create(
immer<PreviewThemeStore>((set) => ({
previewTheme: null,
setPreviewTheme(v) {
set((s) => {
s.previewTheme = v;
});
},
})),
);
export function ThemeProvider(props: {
children?: ReactNode;
applyGlobal?: boolean;
}) {
const previewTheme = usePreviewThemeStore((s) => s.previewTheme);
const theme = useThemeStore((s) => s.theme);
const themeSelector = theme ? `theme-${theme}` : undefined;
const themeToDisplay = previewTheme ?? theme;
const themeSelector = themeToDisplay ? `theme-${themeToDisplay}` : undefined;
return (
<div className={themeSelector}>