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

chore: add settings widget with dictionary, language selecting and logs
Rue-pro · Apr 13, 2024 · 14f3da6 · 14f3da6
2 parents 5aff3f4 + ec9a892
commit 14f3da6
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 11 deletions.
diff --git a/src/popup/app/Popup.tsx b/src/popup/app/Popup.tsx
@@ -1,21 +1,13 @@
 import { NoteList } from '@popup/widgets/note/NoteList'
-
-import { SelectDictionaryList } from '@popup/features/dictionary/SelectDictionaryVariant'
-import { SelectLanguages } from '@popup/features/language/SelectLanguages'
-
-import { ErrorList } from '@popup/entities/error'
+import { Settings } from '@popup/widgets/settings'
 
 import { Toasts } from '@popup/shared/ui/Toast'
 
-import { LANGUAGES } from '@shared/entities/language'
-
 export const Popup = () => {
   return (
     <main>
-      <ErrorList />
+      <Settings />
       <NoteList />
-      <SelectDictionaryList />
-      <SelectLanguages languages={LANGUAGES} />
       <Toasts />
     </main>
   )

diff --git a/src/popup/entities/error/ui/ErrorCard/index.tsx b/src/popup/entities/error/ui/ErrorCard/index.tsx
@@ -7,7 +7,7 @@ interface Props {
 export const ErrorCard = ({ error }: Props) => {
   return (
     <div>
-      Error {error.type} {error.error}
+      {error.type} {error.error}
     </div>
   )
 }
diff --git a/src/popup/shared/ui/icons/SettingsIcon.tsx b/src/popup/shared/ui/icons/SettingsIcon.tsx
@@ -0,0 +1,8 @@
+export const SettingsIcon = () => (
+  <svg viewBox="0 0 24 24" aria-hidden>
+    <path
+      d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"
+      fill="currentColor"
+    ></path>
+  </svg>
+)
diff --git a/src/popup/widgets/settings/index.ts b/src/popup/widgets/settings/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/src/popup/widgets/settings/ui/Settings.tsx b/src/popup/widgets/settings/ui/Settings.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'preact/hooks'
+
+import { SelectDictionaryList } from '@popup/features/dictionary/SelectDictionaryVariant'
+import { SelectLanguages } from '@popup/features/language/SelectLanguages'
+
+import { ErrorList } from '@popup/entities/error'
+
+import { Button } from '@popup/shared/ui/Button'
+import { Modal } from '@popup/shared/ui/Modal'
+import { Tab, TabPanel, Tabs, TabsList, a11yProps } from '@popup/shared/ui/Tabs'
+import { SettingsIcon } from '@popup/shared/ui/icons/SettingsIcon'
+
+import { LANGUAGES } from '@shared/entities/language'
+
+export const Settings = () => {
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  return (
+    <>
+      <Button
+        variant="secondary"
+        startIcon={<SettingsIcon />}
+        aria-label="Settings"
+        onClick={() => setSettingsOpen(true)}
+      />
+
+      <Modal open={settingsOpen} onClose={() => setSettingsOpen(false)}>
+        <Tabs defaultValue="languages">
+          <TabsList>
+            <Tab
+              {...a11yProps('settings_navigation', 'languages')}
+              value="languages"
+            >
+              Languages
+            </Tab>
+
+            <Tab
+              {...a11yProps('settings_navigation', 'dictionaries')}
+              value="dictionaries"
+            >
+              Dictionaries
+            </Tab>
+
+            <Tab {...a11yProps('settings_navigation', 'logs')} value="logs">
+              Logs
+            </Tab>
+          </TabsList>
+
+          <TabPanel
+            {...a11yProps('settings_navigation', 'languages')}
+            value="languages"
+          >
+            <SelectLanguages languages={LANGUAGES} />
+          </TabPanel>
+
+          <TabPanel
+            {...a11yProps('settings_navigation', 'dictionaries')}
+            value="dictionaries"
+          >
+            <SelectDictionaryList />
+          </TabPanel>
+
+          <TabPanel {...a11yProps('settings_navigation', 'logs')} value="logs">
+            <ErrorList />
+          </TabPanel>
+        </Tabs>
+      </Modal>
+    </>
+  )
+}
diff --git a/src/popup/widgets/settings/ui/index.ts b/src/popup/widgets/settings/ui/index.ts
@@ -0,0 +1 @@
+export { Settings } from './Settings'