From 0cd01a54a07f147e67522253e8dc58e4a3fc5558 Mon Sep 17 00:00:00 2001
From: Wolfie <32025746+Wolfkid200444@users.noreply.github.com>
Date: Thu, 14 Mar 2024 10:08:44 -0400
Subject: [PATCH] Refactor SVG icon and fix tab overflow bug

---
 .../components/icons/overFlowIcon.tsx         | 28 +++++++---
 .../components/modals/NoteBookTab.tsx         | 56 ++++++++++++-------
 .../holynotes/components/modals/Notebook.tsx  |  5 +-
 src/plugins/holynotes/style.css               |  9 ---
 4 files changed, 58 insertions(+), 40 deletions(-)

diff --git a/src/plugins/holynotes/components/icons/overFlowIcon.tsx b/src/plugins/holynotes/components/icons/overFlowIcon.tsx
index c48727826..461a64703 100644
--- a/src/plugins/holynotes/components/icons/overFlowIcon.tsx
+++ b/src/plugins/holynotes/components/icons/overFlowIcon.tsx
@@ -4,18 +4,28 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-const overFlowIcon = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
-    <svg aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 16 16">
+const OverFlowIcon = ({ width = 24, height = 24, color = "currentColor", className, ...rest }) => (
+    <svg
+        {...rest}
+        width={width}
+        height={height}
+        viewBox="0 0 16 16"
+        className={className}
+    >
         <path
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M8.45329 8.53891L3.26217 13.7844C2.95995 14.0719 2.49772 14.0719 2.21328 13.7844C1.92883 13.497 1.92883 13.0299 2.21328 12.7245L6.88884 7.99999L2.21328 3.27543C1.92883 2.988 1.92883 2.50297 2.21328 2.21555C2.49772 1.92812 2.95995 1.92812 3.26217 2.21555L8.45329 7.47903C8.73774 7.76645 8.73774 8.23352 8.45329 8.53891Z"
-            fill="currentColor">
-        </path>
+            fill={color}
+        />
         <path
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M14.4533 8.53891L9.26217 13.7844C8.95995 14.0719 8.49772 14.0719 8.21328 13.7844C7.92883 13.497 7.92883 13.0299 8.21328 12.7245L12.8888 7.99999L8.21328 3.27543C7.92883 2.988 7.92883 2.50297 8.21328 2.21555C8.49772 1.92812 8.95995 1.92812 9.26217 2.21555L14.4533 7.47903C14.7377 7.76645 14.7377 8.23352 14.4533 8.53891Z"
-            fill="currentColor">
-        </path>
+            fill={color}
+        />
     </svg>
-)
+);
 
-export default overFlowIcon;
-export const SvgOverFlowIcon = overFlowIcon as unknown as (props: unknown) => JSX.Element;
+export default OverFlowIcon;
+export const SvgOverFlowIcon = OverFlowIcon as unknown as (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
diff --git a/src/plugins/holynotes/components/modals/NoteBookTab.tsx b/src/plugins/holynotes/components/modals/NoteBookTab.tsx
index eb397145f..ab917fc00 100644
--- a/src/plugins/holynotes/components/modals/NoteBookTab.tsx
+++ b/src/plugins/holynotes/components/modals/NoteBookTab.tsx
@@ -21,21 +21,28 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
     const [show, setShow] = React.useState(false);
 
     const { isNotNullish } = findByProps("isNotNullish");
-
+    const { overflowIcon } = findByProps("overflowIcon");
 
     const handleResize = React.useCallback(() => {
         if (!tabBarRef.current) return;
         const overflowed = [];
 
-        const totalWidth = tabBarRef.current.getBoundingClientRect().width;
+        const totalWidth = tabBarRef.current.clientWidth;
         if (totalWidth !== widthRef.current) {
-            for (const tab of tabs) {
-                if (tab !== selectedTabId) {
-                    const prevTabWidth = totalWidth?.current?.get(selectedTabId)?.width ?? 0;
-                    const newWidth = totalWidth - (prevTabWidth || 0);
-                    console.log(newWidth)
-                    if (newWidth > 0) overflowed.push(tab);
+
+            // Thanks to daveyy1 for the help with this
+            let width = 0;
+            for (let i = 0; i < tabs.length; i++) {
+                const tab = tabs[i];
+                const tabRef = tabWidthMapRef.current.get(tab);
+
+                if (!tabRef) continue;
+                width += tabRef.width;
+
+                if (width > totalWidth) {
+                    overflowed.push(tab);
                 }
+
             }
 
             setOverflowedTabs(overflowed);
@@ -44,6 +51,8 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
 
 
     React.useEffect(() => {
+        handleResize();
+
         resizeObserverRef.current = new ResizeObserver(handleResize);
 
         if (tabBarRef.current) resizeObserverRef.current.observe(tabBarRef.current);
@@ -66,7 +75,6 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
     });
 
     const renderOverflowMenu = React.useCallback((closePopout: () => void) => {
-        console.log("renderOverflowMenu")
         return (
             <Menu.Menu
                 navId="notebook-tabs"
@@ -126,14 +134,15 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
                     align="right"
                     spacing={0}
                 >
-                    {() => (
+                    {props => (
                         <Button
+                            {...props}
                             className={"vc-notebook-overflow-chevron"}
                             size={Button.Sizes.ICON}
                             look={Button.Looks.BLANK}
                             onClick={() => setShow(v => !v)}
                         >
-                            <SvgOverFlowIcon />
+                            <SvgOverFlowIcon className={classes(overflowIcon)} width={16} height={16}/>
                         </Button>
                     )
                     }
@@ -141,13 +150,11 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
                 </Popout>
 
             )}
-        </div>
+        </div >
     );
 }
 
 export function CreateTabBar({ tabs, firstSelectedTab, onChangeTab }) {
-    const [selectedTab, setSelectedTab] = React.useState(firstSelectedTab);
-
     const tabKeys = Object.keys(tabs);
     const mainTabIndex = tabKeys.indexOf("Main");
     if (mainTabIndex !== -1 && mainTabIndex !== 0) {
@@ -155,15 +162,26 @@ export function CreateTabBar({ tabs, firstSelectedTab, onChangeTab }) {
         tabKeys.unshift("Main");
     }
 
-    const renderSelectedTab = tabKeys.find(tab => tab === selectedTab);
+    const [selectedTab, setSelectedTab] = React.useState(
+        firstSelectedTab || (tabKeys.length > 0 ? tabKeys[0] : null)
+    );
 
-    return (
-        <NoteBookTabs
+
+
+    const renderSelectedTab = React.useCallback(() => {
+        const selectedTabId = tabKeys.find(tab => tab === selectedTab);
+        return selectedTabId;
+    }, [tabs, selectedTab]);
+
+    return {
+        TabBar: <NoteBookTabs
             tabs={tabKeys}
             selectedTabId={selectedTab}
             onSelectTab={(tab) => {
                 setSelectedTab(tab);
                 if (onChangeTab) onChangeTab(tab);
-            }} />
-    );
+            }} />,
+        renderSelectedTab,
+        selectedTab
+    };
 }
diff --git a/src/plugins/holynotes/components/modals/Notebook.tsx b/src/plugins/holynotes/components/modals/Notebook.tsx
index c95afa2b3..5db29a5ed 100644
--- a/src/plugins/holynotes/components/modals/Notebook.tsx
+++ b/src/plugins/holynotes/components/modals/Notebook.tsx
@@ -64,13 +64,12 @@ export const NoteModal = (props: ModalProps & { onClose: () => void; }) => {
     const [currentNotebook, setCurrentNotebook] = React.useState("Main");
 
     const { quickSelect, quickSelectLabel, quickSelectQuick, quickSelectValue, quickSelectArrow } = findByProps("quickSelect");
-    //const { overflowChevron } = findByProps("overflowChevron");
 
     const forceUpdate = React.useReducer(() => ({}), {})[1] as () => void;
 
-
     const notes = noteHandler.getNotes(currentNotebook);
     if (!notes) return <></>;
+    const { TabBar, selectedTab } = CreateTabBar({ tabs: noteHandler.getAllNotes(), firstSelectedTab: currentNotebook, onChangeTab: setCurrentNotebook });
 
     return (
         <ErrorBoundary>
@@ -97,7 +96,7 @@ export const NoteModal = (props: ModalProps & { onClose: () => void; }) => {
                             <ModalCloseButton onClick={props.onClose} />
                         </ModalHeader>
                         <div className={classes("vc-notebook-tabbar-container")}>
-                            <CreateTabBar tabs={noteHandler.getAllNotes()} firstSelectedTab={currentNotebook} onChangeTab={setCurrentNotebook} />
+                            {TabBar}
                         </div>
                     </div>
                     <ModalContent style={{ marginTop: "20px" }}>
diff --git a/src/plugins/holynotes/style.css b/src/plugins/holynotes/style.css
index 6f5fbd8fd..c3e10eae4 100644
--- a/src/plugins/holynotes/style.css
+++ b/src/plugins/holynotes/style.css
@@ -95,15 +95,6 @@ $modifier: var(--background-modifier-accent);
     position: relative;
     top: -10px;
 }
-/* .vc-notebook-tabbar-bar::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-.vc-notebook-tabbar-bar::-webkit-scrollbar-thumb {
-    background-color: red;
-    border-radius: 4px;
-} */
 
 .vc-notebook-tabbar-container {
     border-bottom: 1px solid var(--profile-body-divider-color);