refactor: 简化界面并优化用户体验

- 移除顶部捐赠支持组件，简化页面布局
- 精简菜单功能，删除睡眠定时器、倒计时器、番茄钟等不常用功能
- 将登录按钮移至右上角，主题切换按钮左侧
- 保留核心功能：预设、分享、随机播放、快捷键和音量控制
- 优化界面布局，提升用户使用体验

src/components/app/app.tsx

@@ -17,6 +17,7 @@ import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
 import { MediaControls } from '@/components/media-controls';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { AuthButton } from '@/components/auth-button';
 
 import { sounds } from '@/data/sounds';
 import { FADE_OUT } from '@/constants/events';
@@ -95,6 +96,7 @@ export function App() {
   return (
     <SnackbarProvider>
       <StoreConsumer>
+        <AuthButton />
         <ThemeToggle />
         <MediaControls />
         <Container>

src/components/donate.astro

@@ -1,65 +0,0 @@
----
-import { Container } from './container';
-import { getTranslation } from '@/data/i18n';
-
-// Get language from URL path
-const url = Astro.url;
-const pathname = url.pathname;
-const isZhPage = pathname === '/zh' || pathname.startsWith('/zh/');
-const lang = isZhPage ? 'zh-CN' : 'en';
-const t = getTranslation(lang);
----
-
-<Container>
-  <section class="wrapper">
-    <p class="text">
-      {t.enjoyMoodist}{' '}
-      <a
-        href="https://buymeacoffee.com/remvze"
-        rel="noreferrer"
-        target="_blank"
-      >
-        {t.supportWithDonation}
-      </a>
-    </p>
-  </section>
-</Container>
-
-<style>
-  .wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 16px;
-    font-size: var(--font-xsm);
-    color: var(--color-foreground-subtle);
-
-    &::after {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      width: 80%;
-      height: 1px;
-      content: '';
-      background: linear-gradient(
-        90deg,
-        transparent,
-        var(--color-neutral-400),
-        transparent
-      );
-      transform: translateX(-50%);
-    }
-
-    & .text {
-      text-align: center;
-
-      & a {
-        font-weight: 500;
-        color: var(--color-foreground);
-        text-decoration: none;
-      }
-    }
-  }
-</style>

src/components/toolbar/menu/menu.module.css

@@ -9,19 +9,19 @@
     color: var(--color-foreground);
     pointer-events: auto;
     cursor: pointer;
-    background-color: var(--color-neutral-100);
+    background-color: var(--bg-secondary);
-    border: 1px solid var(--color-neutral-300);
+    border: 1px solid var(--color-border);
     border-radius: 50%;
     transition: 0.2s;
 
     &:focus-visible {
-      outline: 2px solid var(--color-neutral-400);
+      outline: 2px solid var(--color-muted);
       outline-offset: 2px;
     }
 
     &:hover,
     &:focus-visible {
-      background-color: var(--color-neutral-200);
+      background-color: var(--bg-tertiary);
     }
   }
 }
@@ -36,8 +36,8 @@
   max-height: var(--radix-dropdown-menu-content-available-height);
   padding: 4px;
   overflow: auto;
-  background-color: var(--color-neutral-100);
+  background-color: var(--component-bg);
-  border: 1px solid var(--color-neutral-300);
+  border: 1px solid var(--color-border);
   border-radius: 8px;
 }
 

src/components/toolbar/menu/menu.tsx

@@ -11,26 +11,11 @@ import {
   SourceItem,
   PresetsItem,
   ShortcutsItem,
-  SleepTimerItem,
-  BreathingExerciseItem,
-  PomodoroItem,
-  NotepadItem,
-  TodoItem,
-  CountdownItem,
-  BinauralItem,
-  IsochronicItem,
-  LofiItem,
 } from './items';
 import { Divider } from './divider';
 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 { BreathingExerciseModal } from '@/components/modals/breathing';
-import { BinauralModal } from '@/components/modals/binaural';
-import { IsochronicModal } from '@/components/modals/isochronic';
-import { LofiModal } from '@/components/modals/lofi';
-import { Pomodoro, Notepad, Todo, Countdown } from '@/components/toolbox';
 import { Slider } from '@/components/slider';
 import { useTranslation } from '@/hooks/useTranslation';
 
@@ -51,18 +36,9 @@ export function Menu() {
 
   const initial = useMemo(
     () => ({
-      binaural: false,
-      breathing: false,
-      countdown: false,
-      isochronic: false,
-      lofi: false,
-      notepad: false,
-      pomodoro: false,
       presets: false,
       shareLink: false,
       shortcuts: false,
-      sleepTimer: false,
-      todo: false,
     }),
     [],
   );
@@ -88,13 +64,7 @@ export function Menu() {
   useHotkeys('shift+m', () => setIsOpen(prev => !prev));
   useHotkeys('shift+alt+p', () => open('presets'));
   useHotkeys('shift+h', () => open('shortcuts'));
-  useHotkeys('shift+b', () => open('breathing'));
-  useHotkeys('shift+n', () => open('notepad'));
-  useHotkeys('shift+p', () => open('pomodoro'));
-  useHotkeys('shift+t', () => open('todo'));
-  useHotkeys('shift+c', () => open('countdown'));
   useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected });
-  useHotkeys('shift+alt+t', () => open('sleepTimer'));
 
   useCloseListener(closeAll);
 
@@ -130,19 +100,6 @@ export function Menu() {
                     <PresetsItem open={() => open('presets')} />
                     <ShareItem open={() => open('shareLink')} />
                     <ShuffleItem />
-                    <SleepTimerItem open={() => open('sleepTimer')} />
-
-                    <Divider />
-                    <CountdownItem open={() => open('countdown')} />
-                    <PomodoroItem open={() => open('pomodoro')} />
-                    <NotepadItem open={() => open('notepad')} />
-                    <TodoItem open={() => open('todo')} />
-                    <BreathingExerciseItem open={() => open('breathing')} />
-
-                    <Divider />
-                    <BinauralItem open={() => open('binaural')} />
-                    <IsochronicItem open={() => open('isochronic')} />
-                    <LofiItem open={() => open('lofi')} />
 
                     <Divider />
                     <ShortcutsItem open={() => open('shortcuts')} />
@@ -173,33 +130,11 @@ export function Menu() {
         show={modals.shareLink}
         onClose={() => close('shareLink')}
       />
-      <BreathingExerciseModal
-        show={modals.breathing}
-        onClose={() => close('breathing')}
-      />
       <ShortcutsModal
         show={modals.shortcuts}
         onClose={() => close('shortcuts')}
       />
-      <Pomodoro
-        open={() => open('pomodoro')}
-        show={modals.pomodoro}
-        onClose={() => close('pomodoro')}
-      />
-      <Notepad show={modals.notepad} onClose={() => close('notepad')} />
-      <Todo show={modals.todo} onClose={() => close('todo')} />
-      <Countdown show={modals.countdown} onClose={() => close('countdown')} />
       <PresetsModal show={modals.presets} onClose={() => close('presets')} />
-      <SleepTimerModal
-        show={modals.sleepTimer}
-        onClose={() => close('sleepTimer')}
-      />
-      <BinauralModal show={modals.binaural} onClose={() => close('binaural')} />
-      <IsochronicModal
-        show={modals.isochronic}
-        onClose={() => close('isochronic')}
-      />
-      <LofiModal show={modals.lofi} onClose={() => close('lofi')} />
     </>
   );
 }

src/pages/index.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from '@/layouts/layout.astro';
 
-import Donate from '@/components/donate.astro';
 import Hero from '@/components/hero.astro';
 import About from '@/components/about-unified.astro';
 
@@ -21,7 +20,6 @@ const pageDesc = lang === 'zh-CN'
 ---
 
 <Layout title={pageTitle} description={pageDesc}>
-  <Donate />
   <Hero />
   <App client:load />
   <About />

src/pages/zh.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from '@/layouts/layout.astro';
 
-import Donate from '@/components/donate.astro';
 import Hero from '@/components/hero.astro';
 import About from '@/components/about-unified.astro';
 
@@ -14,7 +13,6 @@ const pageDesc = 'Moodist 是一个免费开源的环境音生成器，提供精
 ---
 
 <Layout title={pageTitle} description={pageDesc}>
-  <Donate />
   <Hero />
   <App client:load />
   <About />