Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-05 07:44:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: changed settings modal flow

Browse source
This commit is contained in:
Kentai Radiquum 2025-03-14 21:00:14 +05:00
parent 046ef3a9a4
commit 0c6c990c67
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 97 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/components/ReleasePlayer/ReleasePlayerCustom.tsx Normal file
View file

@ -0,0 +1,9 @@
import { Card } from "flowbite-react";
export const ReleasePlayerCustom = (props: { id: number }) => {
return (
<Card>
<p>ReleasePlayerCustom</p>
</Card>
);
};

112
app/components/SettingsModal/SettingsModal.tsx
View file

@ -41,8 +41,12 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
<Modal.Header>Настройки</Modal.Header>
<Modal.Body>
<div className="space-y-6">
<div className="flex items-center gap-2">
<span className="w-6 h-6 iconify material-symbols--palette-outline"></span>
<p className="text-lg font-bold dark:text-white">Интерфейс</p>
</div>
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white">Тема</p>
<p className=" dark:text-white">Тема</p>
<Button.Group>
<Button
color={computedMode == "light" ? "blue" : "gray"}
@ -59,30 +63,7 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
</Button.Group>
</div>
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white">
Показывать список изменений
</p>
<ToggleSwitch
color="blue"
theme={{
toggle: {
checked: {
color: {
blue: "border-blue-700 bg-blue-700",
},
},
},
}}
onChange={() =>
preferenceStore.setFlags({
showChangelog: !preferenceStore.flags.showChangelog,
})
}
checked={preferenceStore.flags.showChangelog}
/>
</div>
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white max-w-96">
<p className=" dark:text-white max-w-96">
Пропускать страницу выбора категорий на страницах Домашняя и
Закладки
</p>
@ -111,10 +92,17 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
{preferenceStore.params.skipToCategory.enabled ? (
<>
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white max-w-96">
<p className=" dark:text-white max-w-96">
Категория домашней страницы
</p>
<Dropdown color="blue" label={HomeCategory[preferenceStore.params.skipToCategory.homeCategory]}>
<Dropdown
color="blue"
label={
HomeCategory[
preferenceStore.params.skipToCategory.homeCategory
]
}
>
{Object.keys(HomeCategory).map((key) => {
return (
<Dropdown.Item
@ -135,10 +123,17 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
</Dropdown>
</div>
<div className="flex items-center justify-between">
<p className="font-bold dark:text-white max-w-96">
<p className=" dark:text-white max-w-96">
Категория страницы закладок
</p>
<Dropdown color="blue" label={BookmarksCategory[preferenceStore.params.skipToCategory.bookmarksCategory]}>
<Dropdown
color="blue"
label={
BookmarksCategory[
preferenceStore.params.skipToCategory.bookmarksCategory
]
}
>
{Object.keys(BookmarksCategory).map((key) => {
return (
<Dropdown.Item
@ -162,9 +157,35 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
) : (
""
)}
<HR className="my-4 dark:bg-slate-400" />
<div className="flex items-center gap-2">
<span className="w-6 h-6 iconify material-symbols--settings-outline"></span>
<p className="text-lg font-bold dark:text-white">Приложение</p>
</div>
<div className="flex items-center justify-between">
<p className=" dark:text-white">Показывать список изменений</p>
<ToggleSwitch
color="blue"
theme={{
toggle: {
checked: {
color: {
blue: "border-blue-700 bg-blue-700",
},
},
},
}}
onChange={() =>
preferenceStore.setFlags({
showChangelog: !preferenceStore.flags.showChangelog,
})
}
checked={preferenceStore.flags.showChangelog}
/>
</div>
<div className="flex items-center justify-between">
<div>
<p className="font-bold dark:text-white">Отправка аналитики</p>
<p className=" dark:text-white">Отправка аналитики</p>
<p className="text-gray-500 dark:text-gray-300">
Требуется перезагрузка для применения
</p>
@ -188,6 +209,37 @@ export const SettingsModal = (props: { isOpen: boolean; setIsOpen: any }) => {
checked={preferenceStore.flags.enableAnalytics}
/>
</div>
<HR className="my-4 dark:bg-slate-400" />
<div className="flex items-center gap-2">
<span className="w-6 h-6 iconify material-symbols--experiment-outline"></span>
<p className="text-lg font-bold dark:text-white">Эксперименты</p>
</div>
<div className="flex items-center justify-between">
<div>
<p className=" dark:text-white">Новый плеер</p>
</div>
<ToggleSwitch
color="blue"
theme={{
toggle: {
checked: {
color: {
blue: "border-blue-700 bg-blue-700",
},
},
},
}}
onChange={() =>
preferenceStore.setParams({
experimental: {
...preferenceStore.params.experimental,
newPlayer: !preferenceStore.params.experimental.newPlayer,
},
})
}
checked={preferenceStore.params.experimental.newPlayer}
/>
</div>
</div>
<HR className="my-4 dark:bg-slate-400" />
<div>

6
app/store/preferences.ts
View file

@ -18,6 +18,9 @@ interface preferencesState {
enabled: boolean;
homeCategory: string;
bookmarksCategory: string;
};
experimental?: {
newPlayer: boolean;
}
// color: {
// primary: string;
@ -47,6 +50,9 @@ export const usePreferencesStore = create<preferencesState>()(
enabled: false,
homeCategory: "last",
bookmarksCategory: "watching",
},
experimental: {
newPlayer: false
}
},
setHasHydrated: (state) => {