feat(extension): add notes page

Author: collectedmind

clients/extension/components/action-container/index.tsx

@@ -1,16 +1,18 @@
+import { useState } from 'react'
+import { ExtensionError } from '../action-error'
 import { ExtensionHeader } from '../action-header'
+import { Notes } from '../notes'
 import { SavedScreen } from '../saved'
+import { SavedLoader } from '../saved-loader'
 
 // Types
-import { ExtensionFooter } from '../action-footer'
 import type { ExtPreview } from '../../types'
 import type { NoteEdge } from '@common/types/pocket'
 
 export function ActionContainer({
   isOpen = false,
   errorMessage,
   preview,
-  saveStatus,
   notes,
   tags
 }: {
@@ -22,15 +24,28 @@ export function ActionContainer({
   tags?: string[]
   actionUnSave: () => void
 }) {
+  const [showNotes, setShowNotes] = useState<boolean>(false)
+
   return isOpen ? (
     <div className="extension">
-      <ExtensionHeader saveStatus={saveStatus} />
+      <ExtensionHeader />
       {preview ? (
         <>
-          <SavedScreen preview={preview} notes={notes} tags={tags} />
-          <ExtensionFooter errorMessage={errorMessage} />
+          {showNotes ? (
+            <Notes notes={notes} setShowNotes={setShowNotes} />
+          ) : (
+            <SavedScreen
+              preview={preview}
+              tags={tags}
+              errorMessage={errorMessage}
+              setShowNotes={setShowNotes}
+            />
+          )}
         </>
-      ) : null}
+      ) : (
+        <SavedLoader />
+      )}
+      {errorMessage ? <ExtensionError errorMessage={errorMessage} /> : null}
     </div>
   ) : null
 }

clients/extension/components/action-error/component.story.tsx

@@ -0,0 +1,22 @@
+// Components
+import { ExtensionError as Component } from '.'
+
+// Types
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Storybook Meta
+const meta: Meta<typeof Component> = {
+  title: 'Action - Error',
+  component: Component
+}
+export default meta
+
+// Stories
+export const ActionError: StoryObj<typeof Component> = {
+  render: (args) => {
+    return <Component errorMessage={args.errorMessage} />
+  },
+  args: {
+    errorMessage: 'Oops, something is awry.'
+  }
+}

clients/extension/components/action-error/index.tsx

@@ -0,0 +1,5 @@
+import style from './style.module.css'
+
+export function ExtensionError({ errorMessage }: { errorMessage?: string }) {
+  return <div className={style.error}> {errorMessage} </div>
+}

clients/extension/components/action-error/style.module.css

@@ -0,0 +1,7 @@
+.error {
+  border-top: 1px solid var(--color-divider);
+  padding: 1rem;
+  font-size: 0.85rem;
+  font-style: italic;
+  color: var(--color-error);
+}

clients/extension/components/action-header/index.tsx

@@ -3,15 +3,12 @@ import { OverflowMenuIcon } from '../icons/OverflowMenuIcon'
 import { PocketLogo } from '../icons/Pocket'
 // import { SaveFilledIcon } from '../icons/SaveFilledIcon'
 // import { SaveIcon } from '../icons/SaveIcon'
-import { SavedLoader } from '../saved-loader'
 
-export function ExtensionHeader({ saveStatus }: { saveStatus?: string }) {
-  const loaded = saveStatus !== 'saving'
+export function ExtensionHeader() {
   return (
     <header className={style.header}>
       {/* {loaded ? <SaveFilledIcon className={style.icon} /> : <SaveIcon className={style.icon} />} */}
       <PocketLogo />
-      {loaded ? <div /> : <SavedLoader />}
       <OverflowMenuIcon />
     </header>
   )

clients/extension/components/action-header/style.module.css

@@ -1,6 +1,6 @@
 .header {
   display: grid;
-  grid-template-columns: 32px auto 32px;
+  grid-template-columns: auto 32px;
   align-items: center;
   padding: 0.5rem 1rem;
   font-size: 1rem;

clients/extension/components/icons/AddNoteIcon.tsx

@@ -0,0 +1,56 @@
+import type { SVGProps } from 'react'
+
+export const AddNoteIcon = ({ className, ...rest }: SVGProps<SVGSVGElement>) => {
+  const iconClass = ['icon', className && className].join(' ')
+  return (
+    <svg
+      className={iconClass}
+      {...rest}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M4 5H20V19.6522C20 19.9609 19.8601 20.2907 19.553 20.5577C19.2415 20.8286 18.7925 21 18.3 21H5.7C5.2075 21 4.75852 20.8286 4.44699 20.5577C4.13989 20.2907 4 19.9609 4 19.6522V5Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 3V4"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 3V4"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 3V4"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12.0001 17.5C11.4478 17.5 11.0001 17.0523 11.0001 16.5V8.5C11.0001 7.94772 11.4478 7.5 12.0001 7.5C12.5523 7.5 13.0001 7.94772 13.0001 8.5V16.5C13.0001 17.0523 12.5523 17.5 12.0001 17.5Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7 12.4998C7 11.9475 7.44772 11.4998 8 11.4998H16C16.5523 11.4998 17 11.9475 17 12.4998C17 13.052 16.5523 13.4998 16 13.4998H8C7.44772 13.4998 7 13.052 7 12.4998Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

clients/extension/components/icons/ArrowLeftIcon.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from 'react'
+
+export const ArrowLeftIcon = ({ className, ...rest }: SVGProps<SVGSVGElement>) => {
+  const iconClass = ['icon', className && className].join(' ')
+  return (
+    <svg
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={iconClass}
+      {...rest}>
+      <path d="M12.707 5.707a1 1 0 0 0-1.414-1.414l-7 7a1 1 0 0 0 0 1.414l7 7a1 1 0 0 0 1.414-1.414L7.414 13H19.05c.525 0 .95-.448.95-1s-.425-1-.95-1H7.414z" />
+    </svg>
+  )
+}

clients/extension/components/icons/ChevronLeftIcon.tsx

@@ -0,0 +1,20 @@
+import type { SVGProps } from 'react'
+
+export const ChevronLeftIcon = ({ className, ...rest }: SVGProps<SVGSVGElement>) => {
+  const iconClass = ['icon', className && className].join(' ')
+  return (
+    <svg
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={iconClass}
+      {...rest}>
+      <path
+        fillRule="evenodd"
+        d="M14.707 4.293a1 1 0 0 1 0 1.414L8.414 12l6.293 6.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}

clients/extension/components/notes-add/component.story.tsx

@@ -0,0 +1,22 @@
+// Components
+import { useRef } from 'react'
+import { NotesAdd as Component } from '.'
+
+// Types
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Storybook Meta
+const meta: Meta<typeof Component> = {
+  title: 'Notes - Add',
+  component: Component
+}
+export default meta
+
+// Stories
+export const NotesAdd: StoryObj<typeof Component> = {
+  render: () => {
+    const textRef = useRef<HTMLTextAreaElement | null>(null)
+    return <Component textRef={textRef} />
+  },
+  args: {}
+}

clients/extension/components/notes-add/index.tsx

@@ -0,0 +1,11 @@
+import style from './style.module.css'
+
+import type { RefObject } from 'react'
+
+export function NotesAdd({ textRef }: { textRef?: RefObject<HTMLTextAreaElement | null> }) {
+  return (
+    <div className={style.container}>
+      <textarea name="note" id="note" ref={textRef}></textarea>
+    </div>
+  )
+}

clients/extension/components/notes-add/style.module.css

@@ -0,0 +1,6 @@
+.container {
+  padding: 0.5rem 1rem 1rem;
+  textarea {
+    margin: 0 0 0.5rem 0;
+  }
+}

clients/extension/components/notes-footer/component.story.tsx

@@ -0,0 +1,28 @@
+// Components
+import { NotesFooter as Component } from '.'
+
+// Types
+import type { Meta, StoryObj } from '@storybook/react'
+
+// Storybook Meta
+const meta: Meta<typeof Component> = {
+  title: 'Notes - Footer',
+  component: Component
+}
+export default meta
+
+// Stories
+export const NotesFooter: StoryObj<typeof Component> = {
+  render: () => {
+    const setShowNotes = () => {}
+    return (
+      <Component
+        setShowNotes={setShowNotes}
+        handleAddNote={function (): void {
+          throw new Error('Function not implemented.')
+        }}
+      />
+    )
+  },
+  args: {}
+}

clients/extension/components/notes-footer/index.tsx

@@ -0,0 +1,26 @@
+import style from './style.module.css'
+import { AddNoteIcon } from '../icons/AddNoteIcon'
+import { ChevronLeftIcon } from '../icons/ChevronLeftIcon'
+
+// Types
+import type { Dispatch, SetStateAction } from 'react'
+
+export function NotesFooter({
+  setShowNotes,
+  handleAddNote = () => {}
+}: {
+  setShowNotes: Dispatch<SetStateAction<boolean>>
+  handleAddNote: () => void
+}) {
+  const handleBackClick = () => setShowNotes(false)
+  return (
+    <footer className={style.footer}>
+      <button onClick={handleBackClick}>
+        <ChevronLeftIcon className={style.backIcon} /> Back
+      </button>
+      <button onClick={handleAddNote}>
+        <AddNoteIcon /> Add Note
+      </button>
+    </footer>
+  )
+}

clients/extension/components/action-footer/style.module.css clients/extension/components/notes-footer/style.module.css

@@ -10,8 +10,6 @@
   letter-spacing: -0.03em;
 }
 
-.error {
-  font-size: 0.85rem;
-  font-style: italic;
-  color: var(--color-error);
+.backIcon {
+  margin-right: 0;
 }

clients/extension/components/action-footer/component.story.tsx clients/extension/components/notes-list/component.story.tsx

@@ -1,18 +1,18 @@
 // Components
-import { ExtensionFooter as Component } from '.'
+import { NotesList as Component } from '.'
 
 // Types
 import type { Meta, StoryObj } from '@storybook/react'
 
 // Storybook Meta
 const meta: Meta<typeof Component> = {
-  title: 'Action - Footer',
+  title: 'Notes - List',
   component: Component
 }
 export default meta
 
 // Stories
-export const ActionFooter: StoryObj<typeof Component> = {
+export const NotesList: StoryObj<typeof Component> = {
   render: () => {
     return <Component />
   },

clients/extension/components/notes-list/index.tsx

@@ -0,0 +1,26 @@
+import style from './style.module.css'
+
+// Types
+import type { Note, NoteEdge } from '@common/types/pocket'
+
+export function NotesList({ notes }: { notes?: NoteEdge[] }) {
+  return (
+    <div className={style.notes}>
+      {Array.isArray(notes) && notes.length ? (
+        notes.map((note) => <Note key={note?.cursor} note={note} />)
+      ) : (
+        <NoNotes />
+      )}
+    </div>
+  )
+}
+
+function Note({ note }: { note?: NoteEdge }) {
+  const node = note?.node
+  const contentPreview = node?.contentPreview as string
+  return contentPreview ? <div>{contentPreview}</div> : null
+}
+
+function NoNotes() {
+  return <div className={style.noNotes}>Add your first note to this page</div>
+}

clients/extension/components/notes-list/style.module.css

@@ -0,0 +1,9 @@
+.notes {
+  padding: 1rem;
+}
+
+.noNotes {
+  font-size: 0.825rem;
+  font-style: italic;
+  color: var(--color-text-secondary);
+}