cinny/src/app/features/settings/notifications/Notifications.tsx

import React from 'react';
import { useAtomValue, useSetAtom } from 'jotai';
import { Box, Text, IconButton, Icon, Icons, Scroll, config, toRem } from 'folds';
import { Page, PageContent, PageHeader } from '../../../components/page';
import { SystemNotification } from './SystemNotification';
import { AllMessagesNotifications } from './AllMessages';
import { SpecialMessagesNotifications } from './SpecialMessages';
import { KeywordMessagesNotifications } from './KeywordMessages';
import { PushRuleEditor } from './PushRuleEditor';
import { SequenceCard } from '../../../components/sequence-card';
import { SequenceCardStyle } from '../styles.css';
import { SettingTile } from '../../../components/setting-tile';
import { settingsAtom, Settings } from '../../../state/settings';

const PRESETS: Array<{
  label: string;
  emoji: string;
  description: string;
  patch: Partial<Settings>;
}> = [
  {
    label: 'Gaming',
    emoji: '🎮',
    description: 'Notifications on, sounds off',
    patch: {
      showNotifications: true,
      isNotificationSounds: false,
      messageSoundId: 'none',
      inviteSoundId: 'none',
      quietHoursEnabled: false,
    },
  },
  {
    label: 'Work',
    emoji: '💼',
    description: 'All notifications and sounds on',
    patch: {
      showNotifications: true,
      isNotificationSounds: true,
      messageSoundId: 'notification',
      inviteSoundId: 'invite',
      quietHoursEnabled: false,
    },
  },
  {
    label: 'Sleep',
    emoji: '🌙',
    description: 'All notifications off',
    patch: {
      showNotifications: false,
      isNotificationSounds: false,
      quietHoursEnabled: false,
    },
  },
];

function NotificationPresets() {
  const settings = useAtomValue(settingsAtom);
  const setSettings = useSetAtom(settingsAtom);

  const applyPreset = (patch: Partial<Settings>) => {
    setSettings({ ...settings, ...patch });
  };

  return (
    <Box direction="Column" gap="100">
      <Text size="L400">Quick Presets</Text>
      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
        <Box gap="300" style={{ padding: config.space.S300, flexWrap: 'wrap' }}>
          {PRESETS.map((preset) => (
            <button
              key={preset.label}
              type="button"
              onClick={() => applyPreset(preset.patch)}
              title={preset.description}
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                gap: toRem(4),
                padding: `${toRem(8)} ${toRem(16)}`,
                borderRadius: config.radii.R300,
                border: '1px solid var(--border-interactive-normal)',
                background: 'var(--bg-surface-low)',
                color: 'inherit',
                cursor: 'pointer',
                minWidth: toRem(80),
              }}
            >
              <span style={{ fontSize: toRem(24) }}>{preset.emoji}</span>
              <Text size="T300" style={{ fontWeight: 600 }}>{preset.label}</Text>
              <Text size="T200" priority="300" style={{ textAlign: 'center', maxWidth: toRem(120) }}>
                {preset.description}
              </Text>
            </button>
          ))}
        </Box>
      </SequenceCard>
    </Box>
  );
}

type NotificationsProps = {
  requestClose: () => void;
};
export function Notifications({ requestClose }: NotificationsProps) {
  return (
    <Page>
      <PageHeader outlined={false}>
        <Box grow="Yes" gap="200">
          <Box grow="Yes" alignItems="Center" gap="200">
            <Text size="H3" truncate>
              Notifications
            </Text>
          </Box>
          <Box shrink="No">
            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
              <Icon src={Icons.Cross} />
            </IconButton>
          </Box>
        </Box>
      </PageHeader>
      <Box grow="Yes">
        <Scroll hideTrack visibility="Hover">
          <PageContent>
            <Box direction="Column" gap="700">
              <NotificationPresets />
              <SystemNotification />
              <AllMessagesNotifications />
              <SpecialMessagesNotifications />
              <KeywordMessagesNotifications />
              <PushRuleEditor />
              <Box direction="Column" gap="100">
                <Text size="L400">Block Messages</Text>
                <SequenceCard
                  className={SequenceCardStyle}
                  variant="SurfaceVariant"
                  direction="Column"
                  gap="400"
                >
                  <SettingTile description='This option has been moved to "Account > Block Users" section.' />
                </SequenceCard>
              </Box>
            </Box>
          </PageContent>
        </Scroll>
      </Box>
    </Page>
  );
}