Force format documents

evwilliams · Jan 21, 2024 · 8e6bd87 · 8e6bd87
1 parent 3e5eaad
commit 8e6bd87
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -18,7 +18,7 @@ function App() {
     focusThought,
     clearThought,
     rememberThought,
-    countThoughts
+    countThoughts,
   } = useThoughts()
 
   const [activeTab, setActiveTab] = useState<TabKey>('write')
@@ -28,16 +28,15 @@ function App() {
   }
 
   const hasMultipleNotes = () => {
-    if (!sortedThoughts || !activeThought)
-      return false
+    if (!sortedThoughts || !activeThought) return false
     return sortedThoughts.length > 1 || activeThought.text.length > 0
   }
 
-  const emptyActiveThought = () => !activeThought || activeThought.text.length > 0
+  const emptyActiveThought = () =>
+    !activeThought || activeThought.text.length > 0
 
   const plusPressed = async () => {
-    if (emptyActiveThought())
-      await createThought()
+    if (emptyActiveThought()) await createThought()
     setActiveTab('write')
   }
 
@@ -49,8 +48,7 @@ function App() {
   const deletePressed = async (t: Thought) => {
     await clearThought(t)
     const numThoughts = await countThoughts()
-    if (numThoughts < 1)
-      setActiveTab('write')
+    if (numThoughts < 1) setActiveTab('write')
   }
 
   const rememberPressed = async (thoughtId: number, when: RememberWhen) => {
@@ -68,37 +66,45 @@ function App() {
         onDeleteClicked={deletePressed}
       />
     ),
-    write: (
-      activeThought ? <ThoughtPad
+    write: activeThought ? (
+      <ThoughtPad
         className="w-full"
         thought={activeThought}
-        showRememberButtons={sortedThoughts.length > 6 && activeThought.text.length > 0}
+        showRememberButtons={
+          sortedThoughts.length > 6 && activeThought.text.length > 0
+        }
         onUpdate={updateThought}
         onRemember={rememberPressed}
-      /> : <Welcome />
+      />
+    ) : (
+      <Welcome />
     ),
     settings: <SettingsList className="w-full" />,
   }
 
   return (
-    <div className="App flex h-dvh w-full flex-col items-center align-top font-serif text-neutral-800 bg-neutral-50 dark:bg-neutral-800 dark:text-neutral-200">
-      <div className="Content flex h-full w-full grow pt-8 pb-2 px-8 lg:px-96">
+    <div className="App flex h-dvh w-full flex-col items-center bg-neutral-50 align-top font-serif text-neutral-800 dark:bg-neutral-800 dark:text-neutral-200">
+      <div className="Content flex h-full w-full grow px-8 pb-2 pt-8 lg:px-96">
         {tabs[activeTab]}
       </div>
 
       <div className="Buttons flex flex-row items-center justify-center gap-16 py-4 lg:pb-12">
-        {hasMultipleNotes() && <ListIcon
-          className="h-6 w-6 text-neutral-400"
-          onClick={() => tabPressed('list')}
-        />}
+        {hasMultipleNotes() && (
+          <ListIcon
+            className="h-6 w-6 text-neutral-400"
+            onClick={() => tabPressed('list')}
+          />
+        )}
         <PlusIcon
           className="h-12 w-12 text-neutral-800 dark:text-neutral-200"
           onClick={plusPressed}
         />
-        {hasMultipleNotes() && <CogIcon
-          className="h-6 w-6 text-neutral-400"
-          onClick={() => tabPressed('settings')}
-        />}
+        {hasMultipleNotes() && (
+          <CogIcon
+            className="h-6 w-6 text-neutral-400"
+            onClick={() => tabPressed('settings')}
+          />
+        )}
       </div>
     </div>
   )

diff --git a/src/components/ThoughtList.tsx b/src/components/ThoughtList.tsx
@@ -16,7 +16,6 @@ const ThoughtList = ({
   onDeleteClicked,
   ...rest
 }: ThoughtListProps) => {
-
   return (
     <div {...rest}>
       <header className="text-2xl italic">Meditations</header>

diff --git a/src/components/ThoughtPad.tsx b/src/components/ThoughtPad.tsx
@@ -12,45 +12,57 @@ type ThoughtPadProps = {
   onRemember: RememberHandler
 } & React.HTMLAttributes<HTMLTextAreaElement>
 
-const ThoughtPad = ({ thought, showRememberButtons, onUpdate, onRemember, ...rest }: ThoughtPadProps) => {
-
-  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+const ThoughtPad = ({
+  thought,
+  showRememberButtons,
+  onUpdate,
+  onRemember,
+  ...rest
+}: ThoughtPadProps) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 
   useEffect(() => {
     focusTextArea()
   }, [])
 
   useEffect(() => {
-    if (thought.text == '')
-      focusTextArea()
+    if (thought.text == '') focusTextArea()
   }, [thought])
 
   const focusTextArea = () => {
     if (!textareaRef.current || window.isMobileDevice()) return
     textareaRef.current.focus()
-    textareaRef.current.selectionStart = textareaRef.current.selectionEnd = thought.text.length;
+    textareaRef.current.selectionStart = textareaRef.current.selectionEnd =
+      thought.text.length
   }
 
   return (
-    <div className={`${rest.className} flex flex-col gap-4 items-center`}>
+    <div className={`${rest.className} flex flex-col items-center gap-4`}>
       <textarea
-        id='thought-pad'
+        id="thought-pad"
         ref={textareaRef}
-        className="w-full grow resize-none text-2xl focus:outline-none bg-transparent"
+        className="w-full grow resize-none bg-transparent text-2xl focus:outline-none"
         placeholder="What's on your mind?"
         value={thought.text}
         onChange={(e) => thought.id && onUpdate(thought.id, e.target.value)}
       />
-      {showRememberButtons && <div className='grow-0 gap-4 flex flex-row'>
-        <button
-          className='text-sm border px-4 py-1 rounded-sm text-neutral-400 border-neutral-400'
-          onClick={() => thought.id && onRemember(thought.id, 'later')}>Remember Later</button>
-        <button
-          className='text-sm border px-4 py-1 rounded-sm text-neutral-400 border-neutral-400'
-          onClick={() => thought.id && onRemember(thought.id, 'soon')}>Remember Soon</button>
-      </div>}
+      {showRememberButtons && (
+        <div className="flex grow-0 flex-row gap-4">
+          <button
+            className="rounded-sm border border-neutral-400 px-4 py-1 text-sm text-neutral-400"
+            onClick={() => thought.id && onRemember(thought.id, 'later')}
+          >
+            Remember Later
+          </button>
+          <button
+            className="rounded-sm border border-neutral-400 px-4 py-1 text-sm text-neutral-400"
+            onClick={() => thought.id && onRemember(thought.id, 'soon')}
+          >
+            Remember Soon
+          </button>
+        </div>
+      )}
     </div>
-
   )
 }
 

diff --git a/src/components/Welcome.tsx b/src/components/Welcome.tsx
@@ -1,21 +1,37 @@
 type WelcomeProps = {} & React.HTMLAttributes<HTMLDivElement>
 
-const Emph = ({ children }: { children: React.ReactNode }) =>
-	<em className='text-neutral-600 dark:text-neutral-200'>{children}</em>
+const Emph = ({ children }: { children: React.ReactNode }) => (
+	<em className="text-neutral-600 dark:text-neutral-200">{children}</em>
+)
 
 const Welcome = ({ ...rest }: WelcomeProps) => {
 	return (
 		<div {...rest}>
 			<header className="text-2xl italic">Welcome to Meditations</header>
-			<div className="leading-relaxed flex flex-col gap-8 py-8 text-neutral-400 text-lg">
+			<div className="flex flex-col gap-8 py-8 text-lg leading-relaxed text-neutral-400">
 				<p>Inspired by Marcus Aurelius.</p>
-				<p>A simple notepad for <Emph>"repeating and reframing ideas long familiar but imperfectly absorbed"</Emph>.</p>
-				<p>There's <Emph>no server</Emph>, all your notes are <Emph>private & stored locally in this browser.</Emph></p>
-				<p>Unlike a notepad, this will <Emph>help resurface past thoughts</Emph>.</p>
-				<p><Emph>Press the + button below</Emph> to start collecting your thoughts.</p>
+				<p>
+					A simple notepad for{' '}
+					<Emph>
+						"repeating and reframing ideas long familiar but imperfectly
+						absorbed"
+					</Emph>
+					.
+				</p>
+				<p>
+					There's <Emph>no server</Emph>, all your notes are{' '}
+					<Emph>private & stored locally in this browser.</Emph>
+				</p>
+				<p>
+					Unlike a notepad, this will <Emph>help resurface past thoughts</Emph>.
+				</p>
+				<p>
+					<Emph>Press the + button below</Emph> to start collecting your
+					thoughts.
+				</p>
 			</div>
 		</div>
 	)
 }
 
-export default Welcome
+export default Welcome