From 6e88e3fd972bb65677de83ccb08bade0a3241db3 Mon Sep 17 00:00:00 2001
From: Yusef Almamari <yu9811sef.ya@gmail.com>
Date: Sat, 3 Aug 2024 23:34:08 +0400
Subject: [PATCH] bug fixes

---
 src/assets/icons.json                        | 45 ++++++++++++++++++++
 src/components/ui/MaterialComponents.jsx     |  2 +-
 src/data/store/slices/bibsSlice.js           |  1 +
 src/pages/bibliography/Bibliography.jsx      | 17 +++++++-
 src/pages/bibliography/BibliographyTools.jsx | 31 ++++++++++++--
 src/pages/home/Home.jsx                      |  3 +-
 6 files changed, 93 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/icons.json

diff --git a/src/assets/icons.json b/src/assets/icons.json
new file mode 100644
index 0000000..f779574
--- /dev/null
+++ b/src/assets/icons.json
@@ -0,0 +1,45 @@
+[
+    "book_2",
+    "terminal",
+    "person",
+    "group",
+    "public",
+    "rocket_launch",
+    "workspace_premium",
+    "psychology",
+    "emoji_objects",
+    "pets",
+    "health_and_safety",
+    "recycling",
+    "vaccines",
+    "potted_plant",
+    "skull",
+    "dentistry",
+    "radiology",
+    "neurology",
+    "labs",
+    "nutrition",
+    "stethoscope",
+    "clinical_notes",
+    "prescriptions",
+    "cardiology",
+    "microbiology",
+    "pulmonology",
+    "pediatrics",
+    "oncology",
+    "syringe",
+    "gynecology",
+    "hematology",
+    "endocrinology",
+    "gastroenterology",
+    "immunology",
+    "verified",
+    "biotech",
+    "rheumatology",
+    "nephrology",
+    "ophthalmology",
+    "urology",
+    "science",
+    "genetics",
+    "calculate"
+]
diff --git a/src/components/ui/MaterialComponents.jsx b/src/components/ui/MaterialComponents.jsx
index 0f79ad1..e6f75ec 100644
--- a/src/components/ui/MaterialComponents.jsx
+++ b/src/components/ui/MaterialComponents.jsx
@@ -24,7 +24,7 @@ export function Checkbox({ className, onChange, checked = false, indeterminate =
 
 export function Icon({ name, className, ...rest }) {
     return (
-        <md-icon slot="icon" {...rest} class={`align-middle text-xl ${className}`}>
+        <md-icon slot="icon" {...rest} class={`align-middle ${className}`}>
             {name}
         </md-icon>
     );
diff --git a/src/data/store/slices/bibsSlice.js b/src/data/store/slices/bibsSlice.js
index 025c9de..f7fbc2a 100644
--- a/src/data/store/slices/bibsSlice.js
+++ b/src/data/store/slices/bibsSlice.js
@@ -120,6 +120,7 @@ const bibsSlice = createSlice({
                 dateCreated: new Date().toString(),
                 dateModified: new Date().toString(),
                 id: uid(10),
+                icon: "book_2",
                 citations: [],
                 tags: [],
             };
diff --git a/src/pages/bibliography/Bibliography.jsx b/src/pages/bibliography/Bibliography.jsx
index 1f38728..0a3fc4f 100644
--- a/src/pages/bibliography/Bibliography.jsx
+++ b/src/pages/bibliography/Bibliography.jsx
@@ -16,6 +16,7 @@ import {
     CitationStylesMenu,
     TagsDialog,
     IdAndPasswordDialogVisible,
+    IconsMenu,
 } from "./BibliographyTools";
 import {
     addNewBibAndMoveSelectedCitations,
@@ -59,6 +60,7 @@ export default function Bibliography() {
     const [citationStyleMenuVisible, setCitationStyleMenuVisible] = useState(false);
     const [tagsDialogVisible, setTagsDialogVisible] = useState(false);
     const [searchByIdentifiersInput, setSearchByIdentifiersInput] = useState("");
+    const [iconsMenuVisible, setIconsMenuVisible] = useState(false);
 
     const keyMap = {
         // "ctrl+a": selectAll,
@@ -364,17 +366,19 @@ export default function Bibliography() {
         ["Tags", () => setTagsDialogVisible(true)],
         ["Change style", () => setCitationStyleMenuVisible(true)],
         ["Rename bibliography", () => setRenameWindowVisible(true)],
+        ["Change icon", () => setIconsMenuVisible(true)],
     ].concat(getConditionalOptionsWhenNothingSelected());
 
     return (
         <div className="mx-auto max-w-[50rem]">
             <HotKeys keyMap={keyMap}>
                 <TopBar
+                    icon={bibliography?.icon}
                     headline={bibliography?.title}
                     description={
                         <>
                             <>
-                                {bibliography?.collab?.open ? <Icon name="group" /> : ""}
+                                {bibliography?.collab?.open ? <Icon name="group" className="text-xl" /> : ""}
                                 {`${bibliography?.collab?.open ? ` ${bibliography?.collab?.id} • ` : ""}${bibliography?.style.name.long}`}
                             </>
 
@@ -473,6 +477,17 @@ export default function Bibliography() {
                     />
                 )}
 
+                {iconsMenuVisible && (
+                    <IconsMenu
+                        setIsVisible={setIconsMenuVisible}
+                        onSubmit={(chosenIcon) =>
+                            dispatch(
+                                updateBibField({ bibliographyId: bibliography.id, key: "icon", value: chosenIcon })
+                            )
+                        }
+                    />
+                )}
+
                 <Fab
                     label="Add citation"
                     icon="add"
diff --git a/src/pages/bibliography/BibliographyTools.jsx b/src/pages/bibliography/BibliographyTools.jsx
index 4f37d46..f34083e 100644
--- a/src/pages/bibliography/BibliographyTools.jsx
+++ b/src/pages/bibliography/BibliographyTools.jsx
@@ -23,7 +23,8 @@ import Tag from "../../components/ui/Tag";
 import citationStyles from "../../assets/styles.json";
 import mostPopularStyles from "../../assets/mostPopularStyles.json";
 import { uid } from "../../utils/utils.ts";
-import { Checkbox, List, OutlinedButton } from "../../components/ui/MaterialComponents";
+import { Checkbox, Icon, List, OutlinedButton, TextButton } from "../../components/ui/MaterialComponents";
+import icons from "../../assets/icons.json";
 
 // Source types
 import ArticleJournal from "../../components/sourceTypes/ArticleJournal";
@@ -167,7 +168,7 @@ export function ReferenceEntries(props) {
                                 className="font-cambo"
                                 onClick={() => openCitationForm(citation?.content.type, false, citation?.id)}
                                 style={
-                                    /^(apa|modern-language-association|chicago)$/i.test(bibliography?.style.code)
+                                    /^(apa|modern-language-association|chicago)/.test(bibliography?.style.code)
                                         ? hangingIndentationStyle
                                         : {}
                                 }
@@ -177,7 +178,6 @@ export function ReferenceEntries(props) {
                         ),
                         style: {
                             backgroundColor: citation?.isChecked ? "var(--md-sys-color-tertiary-container)" : "",
-                            color: citation?.isChecked ? "var(--md-sys-color-on-tertiary-container)" : "",
                         },
                         draggable: true, // FIXME: Only works when dragged from the edge of the list item
                         onDragStart: handleDrag,
@@ -689,6 +689,31 @@ export function SmartGeneratorDialog(props) {
     );
 }
 
+export function IconsMenu({ onSubmit, setIsVisible }) {
+    return (
+        <div>
+            <button type="button" onClick={() => setIsVisible(false)}>
+                X
+            </button>
+            <h3>Icons Menu</h3>
+            <div>
+                {icons.map((icon) => {
+                    return (
+                        <TextButton
+                            onClick={() => {
+                                onSubmit(icon);
+                                setIsVisible(false);
+                            }}
+                        >
+                            <Icon name={icon} />
+                        </TextButton>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
 export function TagsDialog(props) {
     const { setTagsDialogVisible: setIsVisible, onTagAdded, onTagRemoved } = props;
     const bibliography = useFindBib();
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
index 5533288..d7c30db 100644
--- a/src/pages/home/Home.jsx
+++ b/src/pages/home/Home.jsx
@@ -74,9 +74,10 @@ export default function Home() {
                         }
 
                         return {
+                            start: <Icon name={bib?.icon} />,
                             title: bib?.collab?.open ? (
                                 <>
-                                    <Icon name="group" /> {bib.title}
+                                    <Icon name="group" className="text-xl" /> {bib.title}
                                 </>
                             ) : (
                                 bib.title