Merge pull request #4 from VPKSoftOrg/addAboutAndMinorFixes

Layout fixes and about popup

Author: VPKSoft

README.md

@@ -3,7 +3,7 @@ A [PWA](https://en.wikipedia.org/wiki/Progressive_web_app) dictionary software u
 
 Keeps a dictionary with user-specified entries for searching, editing and saving. Data can also be exported to or imported from JSON file. The data can be searched with text. The search uses [Fuse.js](https://www.fusejs.io).
 
-The sreenshots of the app using the [sample data](https://github.com/VPKSoftOrg/json-dictionary-browser/blob/develop/sample_data/chat_abbreviations.json) containing chat abbreviations dictionary:
+The screenshots of the app using the [sample data](https://github.com/VPKSoftOrg/json-dictionary-browser/blob/develop/sample_data/chat_abbreviations.json) containing chat abbreviations dictionary:
 ![image](https://github.com/user-attachments/assets/d284e847-58e3-4315-8561-c5bfacb1ef1f) ![image](https://github.com/user-attachments/assets/3013cbd4-40b2-4ecd-ae68-6133c26b4861)
 
 ## The data format

package-lock.json

@@ -1,7 +1,8 @@
 {
   "name": "json-dictionary-browser",
+  "description": "JSON Dictionary Browser",
   "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -27,6 +28,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
+    "@types/node": "^22.14.1",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.1",
     "@types/wicg-file-system-access": "^2023.10.6",

package.json

@@ -1,7 +1,7 @@
 import * as React from "react";
 import "./App.css";
 import { faEdit, faFile, faMoon, faSun } from "@fortawesome/free-regular-svg-icons";
-import { faDownload, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faInfo, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Button, Input, Switch, Table, Tooltip } from "antd";
 import type { Key } from "antd/es/table/interface";
@@ -12,6 +12,7 @@ import { DragDropOpenFileAreaButton } from "./Components/DragDropOpenFileArea.ts
 import { useAntdTheme, useAntdToken } from "./Context/AntdThemeContext.tsx";
 import { useNotify } from "./Hooks/Notify.ts";
 import { useDynamicDownload } from "./Hooks/UseDynamicDownload.ts";
+import { AboutPopup } from "./Popups/AboutPopup.tsx";
 import { AddEditRowDataPopup } from "./Popups/AddEditRowDataPopup.tsx";
 import { FieldSelectPopup } from "./Popups/FieldSelectPopup.tsx";
 import { PwaBadge } from "./PwaBadge.tsx";
@@ -38,6 +39,7 @@ let App = ({ className }: Props) => {
     const [editAddEntry, setEditAddEntry] = React.useState<DictionaryEntry | undefined>(undefined);
     const [editEntryNewMode, setEditEntryNewMode] = React.useState(true);
     const [selectedRowKeys, setSelectedRowKeys] = React.useState<Array<Key>>([]);
+    const [aboutPopupVisible, setAboutPopupVisible] = React.useState(false);
 
     // Persistent state
     const [keys, setKeys] = React.useState<Array<string>>(getItem<Array<string>>("keys", []));
@@ -239,6 +241,10 @@ let App = ({ className }: Props) => {
         };
     }, [onSelectionChange]);
 
+    const showAboutClick = React.useCallback(() => {
+        setAboutPopupVisible(true);
+    }, []);
+
     return (
         <div id="App" className={classNames(className, App.name)}>
             {contextHolder}
@@ -252,11 +258,13 @@ let App = ({ className }: Props) => {
                     onSearch={onSearch}
                     className="App-toolbar-search"
                 />
-                <Button //
-                    icon={<FontAwesomeIcon icon={faDownload} />}
-                    onClick={downloadClick}
-                    className="Toolbar-button"
-                />
+                <Tooltip title="Save the dictionary">
+                    <Button //
+                        icon={<FontAwesomeIcon icon={faDownload} />}
+                        onClick={downloadClick}
+                        className="Toolbar-button"
+                    />
+                </Tooltip>
                 <Switch
                     className="App-toolbar-switch"
                     checkedChildren={<FontAwesomeIcon icon={faMoon} />}
@@ -265,6 +273,13 @@ let App = ({ className }: Props) => {
                     checked={darkMode}
                     onChange={onLightDarkSwitchChangeEventHandler}
                 />
+                <Tooltip title="About">
+                    <Button //
+                        icon={<FontAwesomeIcon icon={faInfo} />}
+                        onClick={showAboutClick}
+                        className="Toolbar-button"
+                    />
+                </Tooltip>
             </div>
             <div className="App-toolbar">
                 <Tooltip title="New dictionary">
@@ -326,6 +341,12 @@ let App = ({ className }: Props) => {
                 editAddEntry={editEntryNewMode ? undefined : editAddEntry}
             />
 
+            <AboutPopup //
+                visible={aboutPopupVisible}
+                onClose={() => setAboutPopupVisible(false)}
+                darkMode={darkMode}
+            />
+
             <PwaBadge />
         </div>
     );