feat: remove lofi modal

src/components/menu/items/index.ts

@@ -5,7 +5,6 @@ export { Source as SourceItem } from './source';
 export { Presets as PresetsItem } from './presets';
 export { Shortcuts as ShortcutsItem } from './shortcuts';
 export { SleepTimer as SleepTimerItem } from './sleep-timer';
-export { Lofi as LofiItem } from './lofi';
 export { Notepad as NotepadItem } from './notepad';
 export { Pomodoro as PomodoroItem } from './pomodoro';
 export { Countdown as CountdownItem } from './countdown';

src/components/menu/items/lofi.tsx

@@ -1,18 +0,0 @@
-import { IoIosMusicalNotes } from 'react-icons/io/index';
-
-import { Item } from '../item';
-
-interface LofiProps {
-  open: () => void;
-}
-
-export function Lofi({ open }: LofiProps) {
-  return (
-    <Item
-      icon={<IoIosMusicalNotes />}
-      label="Lofi Radios"
-      shortcut="Shift + L"
-      onClick={open}
-    />
-  );
-}

src/components/menu/menu.tsx

@@ -12,7 +12,6 @@ import {
   PresetsItem,
   ShortcutsItem,
   SleepTimerItem,
-  LofiItem,
   NotepadItem,
   PomodoroItem,
   CountdownItem,
@@ -24,7 +23,6 @@ import { ShareLinkModal } from '@/components/modals/share-link';
 import { PresetsModal } from '@/components/modals/presets';
 import { ShortcutsModal } from '@/components/modals/shortcuts';
 import { SleepTimerModal } from '@/components/modals/sleep-timer';
-import { LofiModal } from '../modals/lofi';
 import { BreathingExerciseModal } from '../modals/breathing';
 import { Notepad, Countdown, Pomodoro, Todo } from '../toolbox';
 import { fade, mix, slideY } from '@/lib/motion';
@@ -43,7 +41,6 @@ export function Menu() {
     () => ({
       breathing: false,
       countdown: false,
-      lofi: false,
       notepad: false,
       pomodoro: false,
       presets: false,
@@ -83,7 +80,6 @@ export function Menu() {
   useHotkeys('shift+c', () => open('countdown'));
   useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected });
   useHotkeys('shift+alt+t', () => open('sleepTimer'));
-  useHotkeys('shift+l', () => open('lofi'));
 
   useCloseListener(closeAll);
 
@@ -120,7 +116,6 @@ export function Menu() {
                     <ShareItem open={() => open('shareLink')} />
                     <ShuffleItem />
                     <SleepTimerItem open={() => open('sleepTimer')} />
-                    <LofiItem open={() => open('lofi')} />
 
                     <Divider />
                     <CountdownItem open={() => open('countdown')} />
@@ -155,7 +150,6 @@ export function Menu() {
         show={modals.breathing}
         onClose={() => close('breathing')}
       />
-      <LofiModal show={modals.lofi} onClose={() => close('lofi')} />
       <Notepad show={modals.notepad} onClose={() => close('notepad')} />
       <Todo show={modals.todo} onClose={() => close('todo')} />
       <Countdown show={modals.countdown} onClose={() => close('countdown')} />

src/components/modals/lofi/index.ts

@@ -1 +0,0 @@
-export { LofiModal } from './lofi';

src/components/modals/lofi/lofi.module.css

@@ -1,94 +0,0 @@
-.title {
-  margin-bottom: 4px;
-  font-family: var(--font-heading);
-  font-size: var(--font-md);
-  font-weight: 600;
-}
-
-.desc {
-  color: var(--color-foreground-subtle);
-}
-
-.notice {
-  margin-top: 4px;
-  font-size: var(--font-sm);
-  color: var(--color-foreground-subtler);
-}
-
-.radios {
-  margin-top: 28px;
-
-  & .radio {
-    position: relative;
-    width: 100%;
-    padding: 24px 12px 12px;
-    background-color: var(--color-neutral-50);
-    border: 1px solid var(--color-neutral-200);
-    border-radius: 12px;
-
-    &:not(:last-of-type) {
-      margin-bottom: 24px;
-    }
-
-    &::before {
-      position: absolute;
-      bottom: -1px;
-      left: 50%;
-      width: 80%;
-      height: 1px;
-      content: '';
-      background: linear-gradient(
-        90deg,
-        transparent,
-        var(--color-neutral-400),
-        transparent
-      );
-      transform: translateX(-50%);
-    }
-
-    & .label {
-      position: absolute;
-      top: 0;
-      left: 16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 25px;
-      padding: 0 16px;
-      font-size: var(--font-2xsm);
-      font-weight: 500;
-      color: var(--color-foreground-subtle);
-      background: linear-gradient(
-        var(--color-neutral-50),
-        var(--color-neutral-100)
-      );
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 100px;
-      transform: translateY(-50%);
-
-      &::before {
-        position: absolute;
-        bottom: -1px;
-        left: 50%;
-        width: 70%;
-        height: 1px;
-        content: '';
-        background: linear-gradient(
-          90deg,
-          transparent,
-          var(--color-neutral-400),
-          transparent
-        );
-        transform: translateX(-50%);
-      }
-    }
-
-    & iframe {
-      width: 100%;
-      aspect-ratio: 560 / 315;
-      margin: 0;
-      border: none;
-      border-radius: 8px;
-    }
-  }
-}

src/components/modals/lofi/lofi.tsx

@@ -1,46 +0,0 @@
-import { Modal } from '@/components/modal';
-
-import { padNumber } from '@/helpers/number';
-
-import styles from './lofi.module.css';
-
-interface LofiModalProps {
-  onClose: () => void;
-  show: boolean;
-}
-
-export function LofiModal({ onClose, show }: LofiModalProps) {
-  const radios = [
-    {
-      src: 'https://www.youtube.com/embed/jfKfPfyJRdk?si=UiaAY0C8Rk6iBIsd',
-    },
-    {
-      src: 'https://www.youtube.com/embed/4xDzrJKXOOY?si=zyZlOXnoMKr_MWfW',
-    },
-    {
-      src: 'https://www.youtube.com/embed/S_MOd40zlYU?si=rf1_S-MMiAEIKJoi',
-    },
-  ];
-
-  return (
-    <Modal persist show={show} onClose={onClose}>
-      <h2 className={styles.title}>Lofi Radios</h2>
-      <p className={styles.desc}>A curated list of Lofi radios.</p>
-      <p className={styles.notice}>Works best on desktop.</p>
-
-      <div className={styles.radios}>
-        {radios.map((radio, index) => (
-          <div className={styles.radio} key={radio.src}>
-            <div className={styles.label}>Radio {padNumber(index + 1)}</div>
-            <iframe
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-              referrerPolicy="strict-origin-when-cross-origin"
-              src={radio.src}
-              title="YouTube video player"
-            />
-          </div>
-        ))}
-      </div>
-    </Modal>
-  );
-}