feat: add notepad tool page

src/components/tools/notepad/notepad.tsx

@@ -1,10 +1,8 @@
-import { useRef, useEffect } from 'react';
 import { BiTrash } from 'react-icons/bi/index';
 import { LuCopy, LuDownload } from 'react-icons/lu/index';
 import { FaCheck } from 'react-icons/fa6/index';
 import { FaUndo } from 'react-icons/fa/index';
 
-import { Modal } from '@/components/modal';
 import { Button } from './button';
 
 import { useNoteStore } from '@/stores/note';
@@ -12,15 +10,9 @@ import { useCopy } from '@/hooks/use-copy';
 import { download } from '@/helpers/download';
 
 import styles from './notepad.module.css';
+import { Container } from '@/components/container';
 
-interface NotepadProps {
+export function Notepad() {
-  onClose: () => void;
-  show: boolean;
-}
-
-export function Notepad({ onClose, show }: NotepadProps) {
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
   const note = useNoteStore(state => state.note);
   const history = useNoteStore(state => state.history);
   const write = useNoteStore(state => state.write);
@@ -31,22 +23,8 @@ export function Notepad({ onClose, show }: NotepadProps) {
 
   const { copy, copying } = useCopy();
 
-  useEffect(() => {
-    if (show && textareaRef.current) {
-      setTimeout(() => {
-        textareaRef.current?.focus();
-      }, 10);
-    }
-  }, [show]);
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    e.stopPropagation();
-
-    if (e.key === 'Escape') onClose();
-  };
-
   return (
-    <Modal show={show} wide onClose={onClose}>
+    <Container>
       <header className={styles.header}>
         <h2 className={styles.label}>Your Note</h2>
         <div className={styles.buttons}>
@@ -74,17 +52,15 @@ export function Notepad({ onClose, show }: NotepadProps) {
         className={styles.textarea}
         dir="auto"
         placeholder="What is on your mind?"
-        ref={textareaRef}
         spellCheck={false}
         value={note}
         onChange={e => write(e.target.value)}
-        onKeyDown={handleKeyDown}
       />
 
       <p className={styles.counter}>
         {characters} character{characters !== 1 && 's'} • {words} word
         {words !== 1 && 's'}
       </p>
-    </Modal>
+    </Container>
   );
 }

src/pages/tools/notepad.astro

@@ -0,0 +1,21 @@
+---
+import Layout from '@/layouts/layout.astro';
+
+import Donate from '@/components/donate.astro';
+import Hero from '@/components/tools/hero.astro';
+import { Notepad as NotepadComponent } from '@/components/tools/notepad';
+import Footer from '@/components/footer.astro';
+import About from '@/components/tools/about.astro';
+import Source from '@/components/source.astro';
+---
+
+<Layout title="Online Notepad — Moodist">
+  <Donate />
+  <Hero desc="Distraction-free online notepad." title="Online Notepad" />
+  <NotepadComponent client:load />
+  <About
+    text="Capture your thoughts instantly with our simple online notepad. Lightweight and easy to use, it lets you jot down notes, ideas, and to-do lists anytime, anywhere, without distractions."
+  />
+  <Source />
+  <Footer />
+</Layout>