vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve sleep timer ui

Browse Source
This commit is contained in:
jeffvli
2026-03-15 18:20:12 -07:00
parent 122552287a
commit e987049f20
1 changed files with 50 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/player/components/sleep-timer-button.tsx
+50 -17
View File
@@ -13,7 +13,9 @@ import {
} from '/@/renderer/store/sleep-timer.store'; } from '/@/renderer/store/sleep-timer.store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Button } from '/@/shared/components/button/button'; import { Button } from '/@/shared/components/button/button';
import { Divider } from '/@/shared/components/divider/divider';
import { Flex } from '/@/shared/components/flex/flex'; import { Flex } from '/@/shared/components/flex/flex';
import { Grid } from '/@/shared/components/grid/grid';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
import { NumberInput } from '/@/shared/components/number-input/number-input'; import { NumberInput } from '/@/shared/components/number-input/number-input';
import { Popover } from '/@/shared/components/popover/popover'; import { Popover } from '/@/shared/components/popover/popover';
@@ -30,6 +32,8 @@ const PRESET_OPTIONS = [
{ minutes: 45, mode: 'timed' as const }, { minutes: 45, mode: 'timed' as const },
{ minutes: 60, mode: 'timed' as const }, { minutes: 60, mode: 'timed' as const },
{ minutes: 120, mode: 'timed' as const }, { minutes: 120, mode: 'timed' as const },
{ minutes: 180, mode: 'timed' as const },
{ minutes: 240, mode: 'timed' as const },
]; ];
function formatRemaining(totalSeconds: number): string { function formatRemaining(totalSeconds: number): string {
@@ -209,7 +213,7 @@ export const SleepTimerButton = () => {
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown>
<Stack gap="xs" p="xs"> <Stack gap="xs" p="xs">
<Text fw="600" size="sm" ta="center"> <Text fw="600" pb="md" size="sm" ta="center">
{t('player.sleepTimer', { postProcess: 'titleCase' })} {t('player.sleepTimer', { postProcess: 'titleCase' })}
</Text> </Text>
@@ -249,21 +253,49 @@ export const SleepTimerButton = () => {
</Flex> </Flex>
)} )}
{PRESET_OPTIONS.map((option, index) => ( {PRESET_OPTIONS.filter((option) => option.mode === 'endOfSong').map(
<Button (option, index) => (
fullWidth <Button
justify="flex-start" fullWidth
key={index} justify="flex-start"
onClick={(e) => { key={index}
e.stopPropagation(); onClick={(e) => {
handlePreset(option); e.stopPropagation();
}} handlePreset(option);
size="xs" }}
variant="subtle" size="xs"
> variant="outline"
{getPresetLabel(option)} >
</Button> {getPresetLabel(option)}
))} </Button>
),
)}
<Divider my="md" />
<Grid gutter="xs">
{PRESET_OPTIONS.filter((option) => option.mode === 'timed').map(
(option, index) => (
<Grid.Col key={index} span={4}>
<Button
fullWidth
justify="flex-start"
key={index}
onClick={(e) => {
e.stopPropagation();
handlePreset(option);
}}
size="xs"
variant="outline"
>
{getPresetLabel(option)}
</Button>
</Grid.Col>
),
)}
</Grid>
<Divider my="md" />
{!showCustom ? ( {!showCustom ? (
<Button <Button
@@ -274,7 +306,8 @@ export const SleepTimerButton = () => {
setShowCustom(true); setShowCustom(true);
}} }}
size="xs" size="xs"
variant="subtle" ta="center"
variant="outline"
> >
{t('player.sleepTimer_custom', { postProcess: 'sentenceCase' })} {t('player.sleepTimer_custom', { postProcess: 'sentenceCase' })}
</Button> </Button>