feat(extension): ui for delete confirm

Author: collectedmind

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

@@ -1,5 +1,6 @@
 import style from './style.module.css'
 import { CrossIcon } from '@ui/icons/CrossIcon'
+import { useState, useRef } from 'react'
 import ReactMarkdown from 'react-markdown'
 
 // Types
@@ -18,26 +19,47 @@ export function NotesList({ notes }: { notes?: NoteEdge[] }) {
 }
 
 function Note({ note }: { note?: NoteEdge }) {
+  const [confirmDelete, setConfirmDelete] = useState<boolean>(false)
+  const noteRef = useRef<HTMLDivElement>(null)
+
   const node = note?.node
   const title = node?.title
   const contentPreview = node?.contentPreview as string
+
+  const handleDeleteClick = () => {
+    if (noteRef.current) noteRef.current.scrollIntoView({ behavior: 'smooth' })
+    setConfirmDelete(true)
+  }
+  const handleCancelClick = () => setConfirmDelete(false)
+
   return contentPreview ? (
-    <div className={style.container}>
+    <div className={`${style.container} ${confirmDelete && style.active}`} ref={noteRef}>
       <div className={style.note}>
         {title ? <h3>{title}</h3> : null}
         <ReactMarkdown allowedElements={['div']} unwrapDisallowed={true}>
           {contentPreview}
         </ReactMarkdown>
       </div>
       <div className={style.actions}>
-        <button>
-          <CrossIcon />
-        </button>
+        {!confirmDelete ? (
+          <button onClick={handleDeleteClick}>
+            <CrossIcon />
+          </button>
+        ) : null}
       </div>
+      {confirmDelete ? <NoteDeleteConfirm handleCancelClick={handleCancelClick} /> : null}
     </div>
   ) : null
 }
 
+function NoteDeleteConfirm({ handleCancelClick }: { handleCancelClick: () => void }) {
+  return (
+    <div className={style.confirm}>
+      <button>Delete this note</button>
+      <button onClick={handleCancelClick}>Cancel</button>
+    </div>
+  )
+}
 function NoNotes() {
   return <div className={style.noNotes}>Add your first note to this page</div>
 }

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

@@ -6,11 +6,14 @@
 }
 
 .container {
-  padding: 1rem 0.5rem 1rem 1rem;
+  padding: 1rem;
   border-bottom: 1px solid var(--color-divider);
   display: grid;
   grid-template-columns: auto 42px;
   column-gap: 1rem;
+  &.active {
+    background-color: var(--color-canvas-active);
+  }
   &:last-child {
     border-bottom: none;
   }
@@ -61,3 +64,17 @@
   font-style: italic;
   color: var(--color-text-secondary);
 }
+
+.confirm {
+  margin-top: 1rem;
+  grid-column: span 2;
+  display: flex;
+  justify-content: space-between;
+  column-gap: 1rem;
+  button {
+    display: block;
+    text-align: center;
+    padding: 0.5rem;
+    width: 100%;
+  }
+}

clients/extension/public/styles/global.css

@@ -20,6 +20,7 @@
   --font-sans-serif: 'Graphik Web', 'Helvetica Neue', Helvetica, Arial, Sans-Serif;
 
   --color-canvas: #ffffff;
+  --color-canvas-active: hsl(0, 0%, 90%);
   --color-loader: #42414d;
   --color-text-primary: #15141a;
   --color-text-secondary: #333;
@@ -36,6 +37,7 @@
 
   @media (prefers-color-scheme: dark) {
     --color-canvas: #42414d;
+    --color-canvas-active: hsl(245, 8%, 38%);
     --color-loader: #15141a;
     --color-text-primary: #fbfbfe;
     --color-text-secondary: var(--color-grey85);
@@ -54,6 +56,7 @@
 
     .colormode-light {
       --color-canvas: #ffffff;
+      --color-canvas-active: hsl(0, 0%, 90%);
       --color-loader: #42414d;
       --color-text-primary: #15141a;
       --color-text-secondary: #333;