fix(extension): update save flow

Author: collectedmind

clients/extension/action/app.tsx

@@ -7,7 +7,7 @@ import type { NoteEdge } from '@common/types/pocket'
 
 export function App() {
   const [isOpen, setIsOpen] = useState(false)
-  const [saveStatus, setSaveStatus] = useState('unsaved')
+  const [saveStatus, setSaveStatus] = useState('saving')
   const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined)
   const [preview, setPreview] = useState<ExtPreview | undefined>(undefined)
   const [tags, setTags] = useState<string[]>([])

clients/extension/background/icon-updates/index.ts

@@ -6,7 +6,8 @@ export async function setDefaultIcon() {
 }
 
 export async function setToolbarIcon(tabId: number, isSaved: boolean) {
-  const imageData = isSaved ? savedIcon() : inactiveIcon()
+  // const imageData = isSaved ? savedIcon() : inactiveIcon()
+  const imageData = inactiveIcon()
   await chrome.action.setIcon({ tabId, imageData })
 }
 

clients/extension/background/index.ts

@@ -18,19 +18,18 @@ let saveQueue: ExtSave | null = null
 chrome.runtime.onInstalled.addListener(function () {
   // Use SVG icons over the png for more control
   void setDefaultIcon()
-
   // handle.setContextMenus()
 })
 
 /* Tab Changes
 –––––––––––––––––––––––––––––––––––––––––––––––––– */
-chrome.tabs.onUpdated.addListener(tabUpdated)
-function tabUpdated(tabId: number, changeInfo: chrome.tabs.TabChangeInfo) {
-  // if actively loading a new page, unset save state on icon
-  if (changeInfo.status === 'loading' && changeInfo.url) {
-    void setToolbarIcon(tabId, false)
-  }
-}
+// chrome.tabs.onUpdated.addListener(tabUpdated)
+// function tabUpdated(tabId: number, changeInfo: chrome.tabs.TabChangeInfo) {
+//   // if actively loading a new page, unset save state on icon
+//   // if (changeInfo.status === 'loading' && changeInfo.url) {
+//   //   void setToolbarIcon(tabId, false)
+//   // }
+// }
 
 /* Message handling
 –––––––––––––––––––––––––––––––––––––––––––––––––– */

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

@@ -10,6 +10,7 @@ export function ActionContainer({
   isOpen = false,
   errorMessage,
   preview,
+  saveStatus,
   notes,
   tags
 }: {
@@ -23,7 +24,7 @@ export function ActionContainer({
 }) {
   return isOpen ? (
     <div className="extension">
-      <ExtensionHeader />
+      <ExtensionHeader saveStatus={saveStatus} />
       {preview ? (
         <>
           <SavedScreen preview={preview} notes={notes} tags={tags} />

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

@@ -7,7 +7,7 @@ export function ExtensionFooter({ errorMessage }: { errorMessage?: string }) {
   return (
     <footer className={style.footer}>
       <button>
-        <NotesIcon /> Attach Notes
+        <NotesIcon /> Notes
       </button>
       <button>
         <DeleteIcon />

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

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

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

@@ -1,11 +1,18 @@
 .header {
-  display: flex;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 32px auto 32px;
   align-items: center;
   padding: 0.5rem 1rem;
   font-size: 1rem;
   font-weight: 600;
   line-height: 19.09px;
   letter-spacing: -0.03em;
   border-bottom: 1px solid var(--color-divider);
+  min-height: 2.5rem;
+}
+
+.icon {
+  color: var(--color-brandPocket);
+  width: 24px;
+  height: 24px;
 }

clients/extension/components/icons/SaveFilledIcon.tsx

@@ -1,8 +1,20 @@
-import type { SVGProps } from "react"
+import type { SVGProps } from 'react'
 
-export const SaveFilledIcon = ({className, ...rest}: SVGProps<SVGSVGElement>) => {
+export const SaveFilledIcon = ({ 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="M12 21c5.523 0 10-4.477 10-10V5a2 2 0 0 0-2-2H4c-1.105 0-2 .893-2 1.998V11c0 5.523 4.477 10 10 10M8.707 9.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L12 12.586z" clipRule="evenodd"/></svg>
-)}
-  
+    <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="M12 21c5.523 0 10-4.477 10-10V5a2 2 0 0 0-2-2H4c-1.105 0-2 .893-2 1.998V11c0 5.523 4.477 10 10 10M8.707 9.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L12 12.586z"
+        clipRule="evenodd"
+      />
+    </svg>
+  )
+}