Merge pull request #25 from Rue-pro/refine-styles

Refine styles

public/_locales/en/messages.json

@@ -70,6 +70,9 @@
   "ERROR_CAN_NOT_FIND_NOTE_TO_EDIT": {
     "message": "Can't find note"
   },
+  "EDIT_NOTE_SUCCESS": {
+    "message": "Your changes was succesfully saved"
+  },
   "DELETE_NOTE": {
     "message": "Delete note $noteText$",
     "placeholders": {
@@ -79,6 +82,12 @@
       }
     }
   },
+  "DELETE_NOTE_SUCCESS": {
+    "message": "Note was successfully deleted"
+  },
+  "ADD_NOTE_SUCCESS": {
+    "message": "Note was successfully added"
+  },
   "ERROR_CAN_NOT_FIND_NOTE_TO_DELETE": {
     "message": "Can't find note"
   },
@@ -156,5 +165,20 @@
   },
   "TOAST_BUTTON_OPEN_DETAILS": {
     "message": "Open details"
+  },
+  "ERROR_LIST_NO_ITEMS": {
+    "message": "No logs"
+  },
+  "FACING_PROBLEMS": {
+    "message": "Facing problems? Send logs to us"
+  },
+  "FACING_PROBLEMS_HELP": {
+    "message": "Ask for help"
+  },
+  "SETTINGS_OPEN": {
+    "message": "Settings"
+  },
+  "CLEAR": {
+    "message": "Clear"
   }
 }

src/__tests__/setupTests.ts

@@ -1,12 +1,3 @@
-import { vi } from 'vitest'
-
-import * as toastModule from '@popup/shared/ui/Toast'
-import { getErrorToastMock } from '@popup/shared/ui/Toast/helpers/__mock__/getErrorToast'
-import { addToastMock } from '@popup/shared/ui/Toast/model/__mock__/store'
-
 import { chromeMock } from '@shared/shared/browser/__mocks__/chrome'
 
 global.chrome = chromeMock
-
-vi.spyOn(toastModule, 'getErrorToast').mockImplementation(getErrorToastMock)
-vi.spyOn(toastModule, 'addToast').mockImplementation(addToastMock)

src/popup/app/Popup.tsx

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

src/popup/app/styles.scss

@@ -96,17 +96,28 @@ h2 {
 main {
   width: 320px;
   height: 480px;
+  padding: var(--spacing-5) var(--spacing-2);
+  overflow-y: auto;
+  scrollbar-gutter: stable both-edges;
+}
+
+ul {
+  list-style: none;
+}
+
+.settings-opener {
+  margin-inline: auto 0;
+  margin-bottom: var(--spacing-2);
 }
 
 .form {
-  &__title {
-    margin-bottom: var(--spacing-2);
-  }
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
 
   &__footer {
     display: flex;
     gap: var(--spacing-2);
     justify-content: flex-end;
-    margin-top: var(--spacing-2);
   }
 }

src/popup/entities/error/ui/ErrorAlert/index.tsx

@@ -0,0 +1,20 @@
+import { useStore } from '@nanostores/preact'
+
+import { browser } from '@popup/shared/browser'
+
+import { $errors } from '@shared/entities/error'
+
+export const ErrorAlert = () => {
+  const errors = useStore($errors)
+
+  if (!errors.length) return null
+
+  return (
+    <span>
+      {browser.i18n.getMessage('FACING_PROBLEMS')} <br />
+      <a href="https://github.com/Rue-pro/Flashcardis/issues" target="_blank">
+        {browser.i18n.getMessage('FACING_PROBLEMS_HELP')}
+      </a>
+    </span>
+  )
+}

src/popup/entities/error/ui/ErrorList/index.tsx

@@ -1,19 +1,37 @@
 import { useStore } from '@nanostores/preact'
 
-import { $errors } from '@shared/entities/error'
+import { browser } from '@popup/shared/browser'
+import { Button } from '@popup/shared/ui/Button'
 
-import { ErrorCard } from '../ErrorCard'
+import { $errors, reset } from '@shared/entities/error'
+
+import styles from './styles.module.scss'
 
 export const ErrorList = () => {
   const errors = useStore($errors)
 
+  if (!errors.length)
+    return <span>{browser.i18n.getMessage('ERROR_LIST_NO_ITEMS')}</span>
+
   return (
-    <ul>
-      <li>
-        {errors.map((error) => (
-          <ErrorCard error={error} />
+    <>
+      <Button
+        className={styles['clear-button']}
+        onClick={reset}
+        variant="secondary"
+      >
+        {browser.i18n.getMessage('CLEAR')}
+      </Button>
+      <ul className={styles.errors}>
+        {errors.map((error, index) => (
+          <li key={index}>
+            {error.type}
+            {error.error?.name}
+            {error.error?.message}
+            {error.error?.stack}
+          </li>
         ))}
-      </li>
-    </ul>
+      </ul>
+    </>
   )
 }

src/popup/entities/error/ui/ErrorList/styles.module.scss

@@ -0,0 +1,11 @@
+.errors {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  overflow-wrap: break-word;
+}
+
+.clear-button {
+  margin-inline: auto 0;
+  margin-bottom: var(--spacing-2);
+}

src/popup/entities/error/ui/index.ts

@@ -1 +1,2 @@
 export { ErrorList } from './ErrorList'
+export { ErrorAlert } from './ErrorAlert'

src/popup/entities/note/ui/NoteCard/styles.module.scss

@@ -3,7 +3,7 @@
   grid-template-columns: 1fr auto;
   gap: var(--spacing-2);
   justify-content: space-between;
-  padding: var(--spacing-4);
+  padding: var(--spacing-1);
   border-bottom: 1px solid var(--color-neutral-200);
 
   &__content {

src/popup/entities/tab/index.ts

@@ -1,7 +1,6 @@
 import { atom, onMount, task } from 'nanostores'
 
 import { browser } from '@popup/shared/browser'
-import { addToast, getErrorToast } from '@popup/shared/ui/Toast'
 
 import { TTab } from '@shared/shared/browser/tabs'
 
@@ -11,10 +10,6 @@ onMount($activeTab, () => {
   task(async () => {
     const getResult = await browser.tabs.getActiveTab()
 
-    if (getResult.data) {
-      $activeTab.set(getResult.data)
-    } else {
-      addToast(getErrorToast(getResult.error))
-    }
+    getResult.data && $activeTab.set(getResult.data)
   })
 })

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

@@ -24,6 +24,7 @@ export const SelectDictionaryList = () => {
             <TabsList arrows={true}>
               {languages.map((language) => (
                 <Tab
+                  key={language.value}
                   value={language.value}
                   {...a11yProps('language_navigation', language.value)}
                 >
@@ -34,6 +35,7 @@ export const SelectDictionaryList = () => {
             {languages.map((language) => {
               return (
                 <TabPanel
+                  key={language.value}
                   {...a11yProps('language_navigation', language.value)}
                   value={language.value}
                 >

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

@@ -2,7 +2,6 @@ import { DictionaryCard } from '@popup/entities/dictionary'
 
 import { browser } from '@popup/shared/browser'
 import { Button } from '@popup/shared/ui/Button'
-import { addToast } from '@popup/shared/ui/Toast'
 
 import {
   IDictionaryWithVariants,
@@ -18,14 +17,8 @@ interface GroupProps {
 }
 
 export const SelectDictionaryVariant = ({ dictionary, lang }: GroupProps) => {
-  const onSelectVariant = async (variant: string) => {
-    const result = await dictionaryStore.selectVariant(
-      lang,
-      dictionary.id,
-      variant,
-    )
-
-    result.error && addToast({ title: result.error.type, type: 'error' })
+  const onSelectVariant = (variant: string) => {
+    dictionaryStore.selectVariant(lang, dictionary.id, variant)
   }
 
   return (

src/popup/features/language/SelectLanguages/ui/SelectLanguages.tsx

@@ -1,12 +1,15 @@
 import { useStore } from '@nanostores/preact'
 import { JSXInternal } from 'node_modules/preact/src/jsx'
+import { useState } from 'preact/hooks'
 
 import { browser } from '@popup/shared/browser'
 import { Button } from '@popup/shared/ui/Button'
-import { addToast, getErrorToast } from '@popup/shared/ui/Toast'
+import { Result } from '@popup/shared/ui/Result'
 
 import { ILanguage } from '@shared/entities/language'
 
+import { TResult } from '@shared/shared/libs/operationResult'
+
 import {
   checkIsSelected,
   localStore,
@@ -20,28 +23,25 @@ interface Props {
 }
 
 export const SelectLanguages = ({ languages }: Props) => {
+  const [result, setResult] = useState<TResult | null>(null)
   useStore(localStore.languageCodes)
 
   const onSubmit: JSXInternal.SubmitEventHandler<HTMLFormElement> = async (
     e,
   ) => {
     e.preventDefault()
     const result = await syncLocalStoreWithLanguageStore()
-    result.data &&
-      addToast({
-        type: 'success',
-        title: result.data,
-      })
-    result.error && addToast(getErrorToast(result.error))
+    setResult(result)
   }
 
   return (
     <form
+      className="form"
       name="select_languages"
       aria-labelledby="selectLanguageFormTitle"
       onSubmit={onSubmit}
     >
-      <h2 id="selectLanguageFormTitle" className="form__title">
+      <h2 id="selectLanguageFormTitle">
         {browser.i18n.getMessage('SELECT_LANGUAGES_FORM_TITLE')}
       </h2>
 
@@ -63,6 +63,8 @@ export const SelectLanguages = ({ languages }: Props) => {
         ))}
       </ul>
 
+      <Result result={result} />
+
       <footer className="form__footer">
         <Button variant="secondary" onClick={reset}>
           {browser.i18n.getMessage('CANCEL')}

src/popup/features/note/DeleteNote/ui/index.tsx

@@ -1,6 +1,5 @@
 import { browser } from '@popup/shared/browser'
 import { Button } from '@popup/shared/ui/Button'
-import { addToast, getErrorToast } from '@popup/shared/ui/Toast'
 import { DeleteIcon } from '@popup/shared/ui/icons/DeleteIcon'
 
 import { TLanguageCode } from '@shared/entities/language'
@@ -13,9 +12,8 @@ interface Props {
 }
 
 export const DeleteNote = ({ lang, noteId, noteText }: Props) => {
-  const onDelete = async (lang: TLanguageCode, noteId: string) => {
-    const result = await noteStore.deleteNote(lang, noteId)
-    result.error && addToast(getErrorToast(result.error))
+  const onDelete = (lang: TLanguageCode, noteId: string) => {
+    noteStore.deleteNote(lang, noteId)
   }
 
   return (