Update Ant design and all the quirks.

.env

@@ -1 +1 @@
-VITE_SERVER_URL=https://api2.mydraft.cc
+VITE_SERVER_URL=https://api.mydraft.cc

.github/workflows/build.yml

@@ -8,6 +8,8 @@ jobs:
 
     steps:
       - uses: actions/[email protected]
+        with:
+          fetch-depth: 0
 
       - name: Setup Node.js environment
         uses: actions/[email protected]

.github/workflows/deploy.yml

@@ -11,6 +11,8 @@ jobs:
 
     steps:
       - uses: actions/[email protected]
+        with:
+          fetch-depth: 0
 
       - name: Setup Node.js environment
         uses: actions/[email protected]

package.json

@@ -10,7 +10,6 @@
     "@vitest/utils": "^0.34.6",
     "antd": "5.11.2",
     "classnames": "^2.3.2",
-    "connected-react-router": "^6.9.2",
     "date-fns": "^2.30.0",
     "deep-object-diff": "^1.1.9",
     "file-saver": "^2.0.5",

src/App.tsx

@@ -6,21 +6,49 @@
 */
 
 import { LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { Button, Layout, Tabs } from 'antd';
+import { Button, Layout, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import * as React from 'react';
-import { useDispatch } from 'react-redux';
 import { useRouteMatch } from 'react-router';
 import { ClipboardContainer, useEventCallback, usePrinter } from '@app/core';
 import { ArrangeMenu, ClipboardMenu, EditorView, HistoryMenu, Icons, LoadingMenu, LockMenu, Outline, Pages, PrintView, Properties, Recent, SettingsMenu, Shapes, UIMenu } from '@app/wireframes/components';
 import { loadDiagramFromServer, newDiagram, selectTab, showToast, toggleLeftSidebar, toggleRightSidebar, useStore } from '@app/wireframes/model';
+import { useAppDispatch } from './store';
 import { texts } from './texts';
 import { CustomDragLayer } from './wireframes/components/CustomDragLayer';
 import { PresentationView } from './wireframes/components/PresentationView';
 import { OverlayContainer } from './wireframes/contexts/OverlayContext';
 
+const SidebarTabs: TabsProps['items'] = [
+    {
+        key: 'shapes',
+        label: texts.common.shapes,
+        children: <Shapes />,
+    },
+    {
+        key: 'icons',
+        label: texts.common.icons,
+        children: <Icons />,
+    },
+    {
+        key: 'outline',
+        label: texts.common.outline,
+        children: <Outline />,
+    },
+    {
+        key: 'pages',
+        label: texts.common.pages,
+        children: <Pages />,
+    },
+    {
+        key: 'recent',
+        label: texts.common.recent,
+        children: <Recent />,
+    },
+];
+
 export const App = () => {
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const route = useRouteMatch<{ token?: string }>();
     const routeToken = route.params.token || null;
     const routeTokenSnapshot = React.useRef(routeToken);
@@ -77,51 +105,39 @@ export const App = () => {
             <ClipboardContainer>
                 <Layout className='screen-mode'>
                     <Layout.Header>
-                        <img className='logo' src='logo.svg' alt='mydraft.cc' />
+                        <div className='top-menu'>
+                            <img className='logo' src='logo.svg' alt='mydraft.cc' />
 
-                        <HistoryMenu />
-                        <span className='menu-separator' />
+                            <div>
+                                <HistoryMenu />
+                                <span className='menu-separator' />
 
-                        <LockMenu />
-                        <span className='menu-separator' />
+                                <LockMenu />
+                                <span className='menu-separator' />
 
-                        <ArrangeMenu />
-                        <span className='menu-separator' />
+                                <ArrangeMenu />
+                                <span className='menu-separator' />
 
-                        <ClipboardMenu />
-                        <span className='menu-separator' />
+                                <ClipboardMenu />
+                                <span className='menu-separator' />
 
-                        <UIMenu onPlay={doPresent} />
-                        <span className='menu-separator' />
+                                <UIMenu onPlay={doPresent} />
+                                <span className='menu-separator' />
 
-                        <SettingsMenu onPrint={print} />
+                                <SettingsMenu onPrint={print} />
+                            </div>
 
-                        <span style={{ float: 'right' }}>
-                            <LoadingMenu />
-                        </span>
+                            <div>
+                                <LoadingMenu />
+                            </div>
+                        </div>
                     </Layout.Header>
                     <Layout className='content'>
                         <Layout.Sider width={320} className='sidebar-left'
                             collapsed={!showLeftSidebar}
                             collapsedWidth={0}>
 
-                            <Tabs type='card' onTabClick={doSelectTab} activeKey={selectedTab}>
-                                <Tabs.TabPane key='shapes' tab={texts.common.shapes}>
-                                    <Shapes />
-                                </Tabs.TabPane>
-                                <Tabs.TabPane key='icons' tab={texts.common.icons}>
-                                    <Icons />
-                                </Tabs.TabPane>
-                                <Tabs.TabPane key='outline' tab={texts.common.outline}>
-                                    <Outline />
-                                </Tabs.TabPane>
-                                <Tabs.TabPane key='pages' tab={texts.common.pages}>
-                                    <Pages />
-                                </Tabs.TabPane>
-                                <Tabs.TabPane key='recent' tab={texts.common.recent}>
-                                    <Recent />
-                                </Tabs.TabPane>
-                            </Tabs>
+                            <Tabs type='card' activeKey={selectedTab} items={SidebarTabs} onChange={doSelectTab} destroyInactiveTabPane={true} />
                         </Layout.Sider>
                         <Layout.Content className='editor-content'>
                             <EditorView spacing={40} />

src/core/react/ColorPicker.scss

@@ -1,16 +1,9 @@
 @import '@app/style/mixins';
 @import '@app/style/vars';
 
-$size: 24px;
+$size: 22px;
 
 .color-picker {
-    &-button {
-        &,
-        & button {
-            padding: 2px !important;
-        }
-    }
-
     &-colors {
         @include clearfix;
         max-width: 210px;
@@ -22,11 +15,11 @@ $size: 24px;
             @include circle($size);
             align-items: center;
             background: $color-white;
-            border: 2px solid $color-border;
+            border: 1px solid $color-input;
             border-radius: $size;
+            box-sizing: border-box;
             display: inline-flex;
             justify-content: center;
-            margin: 1px;
         }
 
         &.rect {

src/core/react/ColorPicker.stories.tsx

@@ -6,6 +6,7 @@
 */
 
 import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from 'antd';
 import { ColorPalette } from '@app/core/utils';
 import { ColorPicker } from './ColorPicker';
 
@@ -15,7 +16,11 @@ const meta: Meta<typeof ColorPicker> = {
         const palette = ColorPalette.colors();
 
         return (
-            <ColorPicker palette={palette} {...args} />
+            <>
+                <ColorPicker palette={palette} {...args} />
+                &nbsp;
+                <Button>Button</Button>
+            </>
         );
     },
     argTypes: {

src/core/react/ColorPicker.tsx

@@ -5,6 +5,7 @@
  * Copyright (c) Sebastian Stehle. All rights reserved.
 */
 
+import Icon from '@ant-design/icons';
 import { Button, Popover, Tabs } from 'antd';
 import { TooltipPlacement } from 'antd/lib/tooltip';
 import * as React from 'react';
@@ -121,11 +122,15 @@
     const placement = popoverPlacement || 'left';
 
     return (
-        <Popover content={content} visible={visible && !disabled} placement={placement} trigger='click' onVisibleChange={setVisible}>
-            <Button disabled={disabled} className='color-picker-button' onClick={doToggle}>
-                <div className='color-picker-color'>
-                    <div className='color-picker-color-inner' style={{ background: colorHex }}></div>
-                </div>
+        <Popover content={content} open={visible && !disabled} placement={placement} trigger='click' onOpenChange={setVisible}>
+            <Button disabled={disabled} className='color-picker-button' onClick={doToggle}
+                icon={
+                    <Icon component={() => 
+                        <div className='color-picker-color'>
+                            <div className='color-picker-color-inner' style={{ background: colorHex }}></div>
+                        </div>
+                    } />
+                }>
             </Button>
         </Popover>
     );

src/core/utils/helpers.ts

@@ -17,7 +17,6 @@ export function isModKey(key: KeyboardEvent | MouseEvent) {
     }
 }
 
-
 const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
 const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
 const escapeReplacements: Record<string, string> = {

src/core/utils/immutable-list.spec.ts

@@ -31,6 +31,14 @@ describe('ImmutableList', () => {
         expect(list_1.at(2)).toBe(3);
     });
 
+    it('should add indexes', () => {
+        const list_1 = ImmutableList.of([1, 2, 3]);
+
+        expect(list_1.indexOf(1)).toEqual(0);
+        expect(list_1.indexOf(2)).toEqual(1);
+        expect(list_1.indexOf(3)).toEqual(2);        
+    });
+
     it('should add values', () => {
         const list_1 = ImmutableList.empty<number>();
         const list_2 = list_1.add(1);

src/core/utils/immutable-list.ts

@@ -15,13 +15,17 @@ export class ImmutableList<T> {
         return this.items.length;
     }
 
-    public get values() {
-        return this.items;
+    public get values(): ReadonlyArray<T> {
+        return Array.from(this.items);
     }
 
     public at(index: number): T | undefined {
         return this.items[index];
     }
+
+    public indexOf(item: T) {
+        return this.items.indexOf(item);
+    }
 
     constructor(
         private readonly items: ReadonlyArray<T>,
@@ -105,6 +109,10 @@ export class ImmutableList<T> {
     }
 
     public moveTo(items: ReadonlyArray<T>, target: number, relative = false) {
+        if (!items) {
+            return this;
+        }
+
         return this.replace(moveItems(this.items, items, target, relative));
     }