Merge pull request #27 from Rue-pro/feat-add-edit-last-note-fields

feat: add editing latest note fields

.gitignore

@@ -36,3 +36,5 @@ coverage
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+
+*.circleDep.txt

package.json

@@ -49,6 +49,7 @@
     "stylelint-prettier": "5.0.0",
     "typescript": "5.4.2",
     "vite": "5.1.5",
+    "vite-plugin-circular-dependency": "0.4.1",
     "vitest": "1.3.1"
   }
 }

public/_locales/en/messages.json

@@ -112,6 +112,15 @@
   "CONTEXT_MENU_ADD_NOTE_AUTOMATICALLY": {
     "message": "Add note"
   },
+  "CONTEXT_MENU_EDIT_LATEST_NOTE_TRANSLATION": {
+    "message": "Edit latest note translation"
+  },
+  "CONTEXT_MENU_EDIT_LATEST_NOTE_CONTEXT": {
+    "message": "Edit latest note context"
+  },
+  "CONTEXT_MENU_EDIT_LATEST_NOTE_TRANSCRIPTION": {
+    "message": "Edit latest note transcription"
+  },
   "ERROR_CAN_NOT_IDENTIFY_DICTIONARY_ADD_NOTE_AUTOMATICALLY": {
     "message": "Adding note automatically failed, can't identify dictionary"
   },
@@ -180,5 +189,11 @@
   },
   "CLEAR": {
     "message": "Clear"
+  },
+  "ERROR_CAN_NOT_GET_ACTIVE_TAB": {
+    "message": "Can't get active tab"
+  },
+  "ERROR_CAN_NOT_GET_ACTIVE_TAB_ON_ACTIVATED": {
+    "message": "Can't get active tab while activating"
   }
 }

src/__tests__/setupTests.ts

@@ -1,3 +1,14 @@
-import { chromeMock } from '@shared/shared/browser/__mocks__/chrome'
+import { vi } from 'vitest'
 
-global.chrome = chromeMock
+import { i18nMock } from '@shared/shared/browser/i18n/__mocks__'
+import { storageMock } from '@shared/shared/browser/storage/__mocks__/index.ts'
+
+vi.mock('@shared/shared/browser/storage', () => {
+  return {
+    storage: storageMock,
+  }
+})
+
+vi.mock('@shared/shared/browser/i18n', () => ({
+  i18n: i18nMock,
+}))

src/background/app/index.ts

@@ -1,5 +1,6 @@
 import { addNewWord } from '@background/features/addNewWord'
 import { autoAddNewNote } from '@background/features/autoAddNewNote'
+import { editLatestNote } from '@background/features/editLatestNote'
 
 import { browser } from '@background/shared/browser'
 
@@ -18,6 +19,8 @@ browser.contextMenus.removeAll(() => {
   addNewWord(PARENT_ID)
 
   autoAddNewNote(PARENT_ID)
+
+  editLatestNote(PARENT_ID)
 })
 
 $notes.listen(() => {})

src/background/features/editLatestNote/index.ts

@@ -0,0 +1 @@
+export * from './ui'

src/background/features/editLatestNote/ui.tsx

@@ -0,0 +1,55 @@
+import { browser } from '@background/shared/browser'
+import {
+  TOnClickContextMenuInfoProps,
+  TOnClickContextMenuTabProps,
+} from '@background/shared/browser/contextMenus'
+import { currentPageLanguageStore } from '@background/shared/entities/language'
+
+import { INoteSelectors } from '@shared/entities/note'
+import { editNote } from '@shared/entities/note/model/store'
+
+export const editLatestNote = (parentId: string) => {
+  currentPageLanguageStore.$currentPageLanguage.listen(() => {})
+
+  const fields: Array<keyof Omit<INoteSelectors, 'text'>> = [
+    'translation',
+    'context',
+    'transcription',
+  ]
+  fields.forEach((field) => {
+    const handleClick = async (
+      info: TOnClickContextMenuInfoProps,
+      tab?: TOnClickContextMenuTabProps,
+    ) => {
+      if (info.menuItemId === `edit_latest_note_${field}`) {
+        if (!tab?.id) return
+
+        editNote(currentPageLanguageStore.$currentPageLanguage.get(), {
+          ...currentPageLanguageStore.$latestNote.get(),
+          translation: info.selectionText,
+        })
+      }
+    }
+
+    currentPageLanguageStore.$latestNote.listen((latestNote) => {
+      if (latestNote) {
+        browser.contextMenus.update(`edit_latest_note_${field}`, {
+          title: `${browser.i18n.getMessage(`CONTEXT_MENU_EDIT_LATEST_NOTE_${field.toUpperCase()}`)} ${latestNote.text}`,
+        })
+      } else {
+        browser.contextMenus.remove(`edit_latest_note_${field}`)
+      }
+    })
+
+    browser.contextMenus.create({
+      title: browser.i18n.getMessage(
+        `CONTEXT_MENU_EDIT_LATEST_NOTE_${field.toUpperCase()}`,
+      ),
+      id: `edit_latest_note_${field}`,
+      parentId: parentId,
+      contexts: ['selection'],
+    })
+
+    browser.contextMenus.onClicked.addListener(handleClick)
+  })
+}

src/background/shared/browser/contextMenus/chromeContextMenus.ts

@@ -3,7 +3,11 @@ import { IContextMenus } from './types'
 export const chromeContextMenus: IContextMenus = {
   create: chrome.contextMenus.create,
 
+  update: chrome.contextMenus.update,
+
   onClicked: chrome.contextMenus.onClicked,
 
   removeAll: chrome.contextMenus.removeAll,
+
+  remove: chrome.contextMenus.remove,
 }

src/background/shared/browser/contextMenus/types.ts

@@ -3,6 +3,13 @@ import { TTab } from '@shared/shared/browser/tabs'
 export interface IContextMenus {
   create: (menuConfig: IMenuConfig) => string | number
 
+  update: (
+    menuItemId: string | number,
+    menuConfig: Partial<IMenuConfig>,
+  ) => void
+
+  remove: (menuItemId: string | number) => void
+
   onClicked: {
     addListener: (
       callback: (

src/background/shared/browser/index.ts

@@ -1,8 +1,10 @@
 import { i18n } from '@shared/shared/browser/i18n'
+import { tabs } from '@shared/shared/browser/tabs'
 
 import { contextMenus } from './contextMenus'
 
 export const browser = {
   contextMenus,
   i18n,
+  tabs,
 }

src/content/dictionary/index.ts

@@ -5,19 +5,21 @@ import {
   getNoteFromDictionaryPageHandler,
 } from '@shared/features/note/AutoAddNewNote'
 
-import { GOOGLE_TRANSLATE } from '@shared/entities/dictionary'
+import {
+  GOOGLE_TRANSLATE,
+  getDictionaryLanguageCodeByPageUrl,
+} from '@shared/entities/dictionary'
 import {
   TLanguageCode,
   getLanguageCodeByPageMetaData,
-  getLanguageCodeByPageUrl,
 } from '@shared/entities/language'
 import { $languages } from '@shared/entities/language/model/store'
 
 import { getNotesFields } from './helpers/getNotesFields'
 
-$languages.listen(() => {})
-
 browser.runtime.onConnect.addListener(async function (port) {
+  $languages.listen(() => {})
+
   if (port.name === 'CurrentPage') {
     getLanguageFromPageHandler(port, () => {
       let pageLanguage: TLanguageCode = 'other'
@@ -27,7 +29,7 @@ browser.runtime.onConnect.addListener(async function (port) {
       if (isTranslatorPage) {
         pageLanguage = GOOGLE_TRANSLATE.getLanguage()
       } else {
-        pageLanguage = getLanguageCodeByPageUrl(window.location.href)
+        pageLanguage = getDictionaryLanguageCodeByPageUrl(window.location.href)
         if (pageLanguage === 'other') {
           pageLanguage = getLanguageCodeByPageMetaData()
         }

src/popup/app/Popup.tsx

@@ -1,12 +1,9 @@
 import { NoteList } from '@popup/widgets/note/NoteList'
 import { Settings } from '@popup/widgets/settings'
 
-import { ErrorAlert } from '@popup/entities/error'
-
 export const Popup = () => {
   return (
     <main>
-      <ErrorAlert />
       <Settings />
       <NoteList />
     </main>

src/popup/app/styles.scss

@@ -98,7 +98,6 @@ main {
   height: 480px;
   padding: var(--spacing-5) var(--spacing-2);
   overflow-y: auto;
-  scrollbar-gutter: stable both-edges;
 }
 
 ul {

src/popup/features/dictionary/SelectDictionaryVariant/ui/SelectDictionaryList.tsx

@@ -26,18 +26,20 @@ export const SelectDictionaryList = () => {
         <>
           <Tabs defaultValue={currentPageLanguage}>
             <TabsList arrows={true}>
-              {languages.map((language) => (
-                <Tab
-                  key={language.value}
-                  value={language.value}
-                  {...a11yProps('language_navigation', language.value)}
-                >
-                  {language.label}
-                </Tab>
-              ))}
+              {languages.map((language) =>
+                language.value === 'other' ? null : (
+                  <Tab
+                    key={language.value}
+                    value={language.value}
+                    {...a11yProps('language_navigation', language.value)}
+                  >
+                    {language.label}
+                  </Tab>
+                ),
+              )}
             </TabsList>
             {languages.map((language) => {
-              return (
+              return language.value === 'other' ? null : (
                 <TabPanel
                   key={language.value}
                   {...a11yProps('language_navigation', language.value)}

src/popup/features/language/SelectLanguages/model/__tests__/store.test.ts

@@ -1,9 +1,11 @@
 import { waitFor } from '@tests/testUtils'
 import { allTasks, cleanStores, keepMount } from 'nanostores'
-import { afterEach, describe, expect, test } from 'vitest'
+import { beforeEach, describe, expect, test } from 'vitest'
 
 import { languageStore } from '@shared/entities/language'
 
+import { storage } from '@shared/shared/browser/storage'
+
 import {
   checkIsSelected,
   localStore,
@@ -13,10 +15,16 @@ import {
 } from '../store'
 
 describe('selectedLanguageCodes store', () => {
-  afterEach(async () => {
-    await chrome.storage.local.clear()
+  beforeEach(async () => {
+    await storage.clear()
+    cleanStores(languageStore.$languageCodes)
     cleanStores(localStore.languageCodes)
+    cleanStores(localStore.islanguageCodesDirty)
+    cleanStores(localStore.defaultValue)
+    languageStore.$languages.set([])
     localStore.languageCodes.set([])
+    localStore.islanguageCodesDirty.set(false)
+    localStore.defaultValue.set([])
   })
 
   describe('commmon', () => {

src/popup/features/language/SelectLanguages/model/store.ts

@@ -1,20 +1,28 @@
 import { atom } from 'nanostores'
 
-import { TLanguageCode, languageStore } from '@shared/entities/language'
+import {
+  LANGUAGES,
+  TLanguageCode,
+  languageStore,
+} from '@shared/entities/language'
 
 import { TResult } from '@shared/shared/libs/operationResult'
 
-let defaultValue: TLanguageCode[] = []
-
 export const localStore = {
-  languageCodes: atom<TLanguageCode[]>([]),
-  islanguageCodesDirty: atom(true),
+  defaultValue: atom<TLanguageCode[]>([]),
+  languageCodes: atom<TLanguageCode[]>(
+    LANGUAGES.map((language) => language.value),
+  ),
+  islanguageCodesDirty: atom(false),
 }
 
 languageStore.$languages.listen((newValue) => {
-  if (localStore.islanguageCodesDirty.get()) {
-    const languageCodes = newValue.map((language) => language.value)
-    defaultValue = languageCodes
+  const islanguageCodesDirty = localStore.islanguageCodesDirty.get()
+  const languageCodes = newValue.map((language) => language.value)
+  if (islanguageCodesDirty) {
+    localStore.defaultValue.set(languageCodes)
+  } else {
+    localStore.defaultValue.set(languageCodes)
     localStore.languageCodes.set(languageCodes)
   }
 })
@@ -29,15 +37,15 @@ export const toggle = async (languageCode: TLanguageCode) => {
     ? languageCodes.filter((lang) => lang !== languageCode)
     : [...languageCodes, languageCode]
 
-  localStore.languageCodes.set(newSelectedLanguages)
+  localStore.languageCodes.set([...newSelectedLanguages, 'other'])
 }
 
 export const checkIsSelected = (languageCode: TLanguageCode): boolean => {
   return localStore.languageCodes.get().includes(languageCode)
 }
 
 export const reset = () => {
-  localStore.languageCodes.set(defaultValue)
+  localStore.languageCodes.set(localStore.defaultValue.get())
 }
 
 export const syncLocalStoreWithLanguageStore = (): Promise<TResult> => {