Refactor SVG icon and fix tab overflow bug

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 => (
+const OverFlowIcon = ({ width = 24, height = 24, color = "currentColor", className, ...rest }) => (
-    <svg aria-hidden="true" role="img" width="16" height="16" viewBox="0 0 16 16">
+    <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">
+            fill={color}
-        </path>
+        />
         <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">
+            fill={color}
-        </path>
+        />
     </svg>
-)
+);
 
-export default overFlowIcon;
+export default OverFlowIcon;
-export const SvgOverFlowIcon = overFlowIcon as unknown as (props: unknown) => JSX.Element;
+export const SvgOverFlowIcon = OverFlowIcon as unknown as (props: React.SVGProps<SVGSVGElement>) => JSX.Element;

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) {
+            // Thanks to daveyy1 for the help with this
-                    const prevTabWidth = totalWidth?.current?.get(selectedTabId)?.width ?? 0;
+            let width = 0;
-                    const newWidth = totalWidth - (prevTabWidth || 0);
+            for (let i = 0; i < tabs.length; i++) {
-                    console.log(newWidth)
+                const tab = tabs[i];
-                    if (newWidth > 0) overflowed.push(tab);
+                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
+    };
 }

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" }}>

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);