From 17118a04bd9acdfc826164b3e64546162d7d90ce Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Mon, 11 Aug 2025 12:39:57 +1000 Subject: [PATCH] feat(ui): dynamic dockview tab title translations Requires a ui slice migration and reset of users's layout settings to get the right titles into dockview params state, which is persisted. --- .../ui/layouts/AutoLayoutPanelContainer.tsx | 6 ++--- .../src/features/ui/layouts/DockviewTab.tsx | 8 +++--- .../ui/layouts/DockviewTabCanvasViewer.tsx | 8 +++--- .../ui/layouts/DockviewTabCanvasWorkspace.tsx | 8 +++--- .../ui/layouts/DockviewTabLaunchpad.tsx | 8 ++++-- .../ui/layouts/DockviewTabProgress.tsx | 8 +++--- .../ui/layouts/auto-layout-context.tsx | 25 +++++++++++++++---- .../ui/layouts/canvas-tab-auto-layout.tsx | 20 +++++++++------ .../ui/layouts/generate-tab-auto-layout.tsx | 21 +++++++++------- .../ui/layouts/upscaling-tab-auto-layout.tsx | 15 ++++++----- .../ui/layouts/workflows-tab-auto-layout.tsx | 18 +++++++------ .../web/src/features/ui/store/uiSlice.ts | 4 +++ .../web/src/features/ui/store/uiTypes.ts | 4 +-- 13 files changed, 99 insertions(+), 54 deletions(-) diff --git a/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx b/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx index 3a3da6b80c..88e66f425b 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx @@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks'; import { useFocusRegion, useIsRegionFocused } from 'common/hooks/focus'; import type { IDockviewPanelProps, IGridviewPanelProps } from 'dockview'; import { selectSystemShouldEnableHighlightFocusedRegions } from 'features/system/store/systemSlice'; -import type { PanelParameters } from 'features/ui/layouts/auto-layout-context'; +import type { DockviewPanelParameters, GridviewPanelParameters } from 'features/ui/layouts/auto-layout-context'; import type { PropsWithChildren } from 'react'; import { memo, useRef } from 'react'; @@ -30,8 +30,8 @@ const sx: SystemStyleObject = { export const AutoLayoutPanelContainer = memo( ( props: - | PropsWithChildren> - | PropsWithChildren> + | PropsWithChildren> + | PropsWithChildren> ) => { const ref = useRef(null); const shouldHighlightFocusedRegions = useAppSelector(selectSystemShouldEnableHighlightFocusedRegions); diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx index 44427fed8c..06b7f2b7de 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx @@ -3,10 +3,12 @@ import { setFocusedRegion } from 'common/hooks/focus'; import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter'; import type { IDockviewPanelHeaderProps } from 'dockview'; import { memo, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; -import type { PanelParameters } from './auto-layout-context'; +import type { DockviewPanelParameters } from './auto-layout-context'; -export const DockviewTab = memo((props: IDockviewPanelHeaderProps) => { +export const DockviewTab = memo((props: IDockviewPanelHeaderProps) => { + const { t } = useTranslation(); const ref = useRef(null); const setActive = useCallback(() => { if (!props.api.isActive) { @@ -23,7 +25,7 @@ export const DockviewTab = memo((props: IDockviewPanelHeaderProps - {props.api.title ?? props.api.id} + {t(props.params.i18nKey)} ); diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx index 1fa3506bc6..80f851ab7a 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx @@ -5,11 +5,13 @@ import type { IDockviewPanelHeaderProps } from 'dockview'; import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination'; import ProgressBar from 'features/system/components/ProgressBar'; import { memo, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useIsGenerationInProgress } from 'services/api/endpoints/queue'; -import type { PanelParameters } from './auto-layout-context'; +import type { DockviewPanelParameters } from './auto-layout-context'; -export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps) => { +export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps) => { + const { t } = useTranslation(); const isGenerationInProgress = useIsGenerationInProgress(); const currentQueueItemDestination = useCurrentQueueItemDestination(); @@ -29,7 +31,7 @@ export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps - {props.api.title ?? props.api.id} + {t(props.params.i18nKey)} {currentQueueItemDestination === 'canvas' && isGenerationInProgress && ( diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx index ad6155a252..440847d745 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx @@ -7,11 +7,13 @@ import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagin import { useCurrentQueueItemDestination } from 'features/queue/hooks/useCurrentQueueItemDestination'; import ProgressBar from 'features/system/components/ProgressBar'; import { memo, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useIsGenerationInProgress } from 'services/api/endpoints/queue'; -import type { PanelParameters } from './auto-layout-context'; +import type { DockviewPanelParameters } from './auto-layout-context'; -export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps) => { +export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps) => { + const { t } = useTranslation(); const isGenerationInProgress = useIsGenerationInProgress(); const canvasSessionId = useAppSelector(selectCanvasSessionId); const currentQueueItemDestination = useCurrentQueueItemDestination(); @@ -32,7 +34,7 @@ export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps return ( - {props.api.title ?? props.api.id} + {t(props.params.i18nKey)} {currentQueueItemDestination === canvasSessionId && isGenerationInProgress && ( diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx index 43236ef734..fe7588aaed 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx @@ -6,6 +6,7 @@ import type { IDockviewPanelHeaderProps } from 'dockview'; import { selectActiveTab } from 'features/ui/store/uiSelectors'; import type { TabName } from 'features/ui/store/uiTypes'; import { memo, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import type { IconType } from 'react-icons'; import { PiBoundingBoxBold, @@ -16,6 +17,8 @@ import { PiTextAaBold, } from 'react-icons/pi'; +import type { DockviewPanelParameters } from './auto-layout-context'; + const TAB_ICONS: Record = { generate: PiTextAaBold, canvas: PiBoundingBoxBold, @@ -25,7 +28,8 @@ const TAB_ICONS: Record = { queue: PiQueueBold, }; -export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => { +export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => { + const { t } = useTranslation(); const ref = useRef(null); const activeTab = useAppSelector(selectActiveTab); @@ -44,7 +48,7 @@ export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => { return ( - {props.api.title ?? props.api.id} + {t(props.params.i18nKey)} ); }); diff --git a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx index 7b685ed37a..1d997caaf7 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx @@ -4,11 +4,13 @@ import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter'; import type { IDockviewPanelHeaderProps } from 'dockview'; import ProgressBar from 'features/system/components/ProgressBar'; import { memo, useCallback, useRef } from 'react'; +import { useTranslation } from 'react-i18next'; import { useIsGenerationInProgress } from 'services/api/endpoints/queue'; -import type { PanelParameters } from './auto-layout-context'; +import type { DockviewPanelParameters } from './auto-layout-context'; -export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps) => { +export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps) => { + const { t } = useTranslation(); const isGenerationInProgress = useIsGenerationInProgress(); const ref = useRef(null); @@ -27,7 +29,7 @@ export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps - {props.api.title ?? props.api.id} + {t(props.params.i18nKey)} {isGenerationInProgress && ( diff --git a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx index 1c99b38857..cbb489bdb9 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx @@ -27,15 +27,30 @@ export const useAutoLayoutContext = () => { return value; }; -export type PanelParameters = { +export type DockviewPanelParameters = { + tab: TabName; + focusRegion: FocusRegionName; + i18nKey: string; +}; + +export type GridviewPanelParameters = { tab: TabName; focusRegion: FocusRegionName; }; -export type AutoLayoutGridviewComponents = Record>>; -export type AutoLayoutDockviewComponents = Record>>; -export type RootLayoutGridviewComponents = Record>>; -type PanelProps = IDockviewPanelProps | IGridviewPanelProps; +export type AutoLayoutGridviewComponents = Record< + string, + FunctionComponent> +>; +export type AutoLayoutDockviewComponents = Record< + string, + FunctionComponent> +>; +export type RootLayoutGridviewComponents = Record< + string, + FunctionComponent> +>; +type PanelProps = IDockviewPanelProps | IGridviewPanelProps; export const withPanelContainer = (Component: FunctionComponent) => /* eslint-disable-next-line react/display-name */ diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx index cb9023256d..b622b77e4d 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx @@ -9,7 +9,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP import type { AutoLayoutDockviewComponents, AutoLayoutGridviewComponents, - PanelParameters, + DockviewPanelParameters, + GridviewPanelParameters, RootLayoutGridviewComponents, } from 'features/ui/layouts/auto-layout-context'; import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context'; @@ -63,7 +64,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = { const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => { navigationApi.registerContainer(tab, 'main', api, () => { - const launchpad = api.addPanel({ + const launchpad = api.addPanel({ id: LAUNCHPAD_PANEL_ID, component: LAUNCHPAD_PANEL_ID, title: t('ui.panels.launchpad'), @@ -71,10 +72,11 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'launchpad', + i18nKey: 'ui.panels.launchpad', }, }); - api.addPanel({ + api.addPanel({ id: WORKSPACE_PANEL_ID, component: WORKSPACE_PANEL_ID, title: t('ui.panels.canvas'), @@ -82,6 +84,7 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'canvas', + i18nKey: 'ui.panels.canvas', }, position: { direction: 'within', @@ -89,7 +92,7 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => { }, }); - api.addPanel({ + api.addPanel({ id: VIEWER_PANEL_ID, component: VIEWER_PANEL_ID, title: t('ui.panels.imageViewer'), @@ -97,6 +100,7 @@ const initializeCenterPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'viewer', + i18nKey: 'ui.panels.imageViewer', }, position: { direction: 'within', @@ -145,7 +149,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = { const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'right', api, () => { - const gallery = api.addPanel({ + const gallery = api.addPanel({ id: GALLERY_PANEL_ID, component: GALLERY_PANEL_ID, minimumWidth: RIGHT_PANEL_MIN_SIZE_PX, @@ -156,7 +160,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { }, }); - const boards = api.addPanel({ + const boards = api.addPanel({ id: BOARDS_PANEL_ID, component: BOARDS_PANEL_ID, minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX, @@ -170,7 +174,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { }, }); - api.addPanel({ + api.addPanel({ id: LAYERS_PANEL_ID, component: LAYERS_PANEL_ID, minimumHeight: LAYERS_PANEL_MIN_HEIGHT_PX, @@ -215,7 +219,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = { const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'left', api, () => { - api.addPanel({ + api.addPanel({ id: SETTINGS_PANEL_ID, component: SETTINGS_PANEL_ID, params: { diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx index aaea3372d5..81cf288547 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx @@ -8,7 +8,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP import type { AutoLayoutDockviewComponents, AutoLayoutGridviewComponents, - PanelParameters, + DockviewPanelParameters, + GridviewPanelParameters, RootLayoutGridviewComponents, } from 'features/ui/layouts/auto-layout-context'; import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context'; @@ -57,7 +58,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = { const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { navigationApi.registerContainer(tab, 'main', api, () => { - const launchpad = api.addPanel({ + const launchpad = api.addPanel({ id: LAUNCHPAD_PANEL_ID, component: LAUNCHPAD_PANEL_ID, title: t('ui.panels.launchpad'), @@ -65,10 +66,11 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'launchpad', + i18nKey: 'ui.panels.launchpad', }, }); - api.addPanel({ + api.addPanel({ id: VIEWER_PANEL_ID, component: VIEWER_PANEL_ID, title: t('ui.panels.imageViewer'), @@ -76,6 +78,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'viewer', + i18nKey: 'ui.panels.imageViewer', }, position: { direction: 'within', @@ -123,7 +126,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = { const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'right', api, () => { - const gallery = api.addPanel({ + const gallery = api.addPanel({ id: GALLERY_PANEL_ID, component: GALLERY_PANEL_ID, minimumWidth: RIGHT_PANEL_MIN_SIZE_PX, @@ -134,7 +137,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { }, }); - const boards = api.addPanel({ + const boards = api.addPanel({ id: BOARDS_PANEL_ID, component: BOARDS_PANEL_ID, minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX, @@ -179,7 +182,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = { const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'left', api, () => { - api.addPanel({ + api.addPanel({ id: SETTINGS_PANEL_ID, component: SETTINGS_PANEL_ID, params: { @@ -218,13 +221,13 @@ const rootPanelComponents: RootLayoutGridviewComponents = { const initializeRootPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'root', api, () => { - const main = api.addPanel({ + const main = api.addPanel({ id: MAIN_PANEL_ID, component: MAIN_PANEL_ID, priority: LayoutPriority.High, }); - const left = api.addPanel({ + const left = api.addPanel({ id: LEFT_PANEL_ID, component: LEFT_PANEL_ID, minimumWidth: LEFT_PANEL_MIN_SIZE_PX, @@ -234,7 +237,7 @@ const initializeRootPanelLayout = (tab: TabName, api: GridviewApi) => { }, }); - const right = api.addPanel({ + const right = api.addPanel({ id: RIGHT_PANEL_ID, component: RIGHT_PANEL_ID, minimumWidth: RIGHT_PANEL_MIN_SIZE_PX, diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx index 7d58534333..7820187119 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx @@ -8,7 +8,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP import type { AutoLayoutDockviewComponents, AutoLayoutGridviewComponents, - PanelParameters, + DockviewPanelParameters, + GridviewPanelParameters, RootLayoutGridviewComponents, } from 'features/ui/layouts/auto-layout-context'; import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context'; @@ -57,7 +58,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = { const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { navigationApi.registerContainer(tab, 'main', api, () => { - const launchpad = api.addPanel({ + const launchpad = api.addPanel({ id: LAUNCHPAD_PANEL_ID, component: LAUNCHPAD_PANEL_ID, title: t('ui.panels.launchpad'), @@ -65,10 +66,11 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'launchpad', + i18nKey: 'ui.panels.launchpad', }, }); - api.addPanel({ + api.addPanel({ id: VIEWER_PANEL_ID, component: VIEWER_PANEL_ID, title: t('ui.panels.imageViewer'), @@ -76,6 +78,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'viewer', + i18nKey: 'ui.panels.imageViewer', }, position: { direction: 'within', @@ -121,7 +124,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = { const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'right', api, () => { - const gallery = api.addPanel({ + const gallery = api.addPanel({ id: GALLERY_PANEL_ID, component: GALLERY_PANEL_ID, minimumWidth: RIGHT_PANEL_MIN_SIZE_PX, @@ -132,7 +135,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { }, }); - const boards = api.addPanel({ + const boards = api.addPanel({ id: BOARDS_PANEL_ID, component: BOARDS_PANEL_ID, minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX, @@ -177,7 +180,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = { const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'left', api, () => { - api.addPanel({ + api.addPanel({ id: SETTINGS_PANEL_ID, component: SETTINGS_PANEL_ID, params: { diff --git a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx index 5019aca478..06ae423e44 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx @@ -10,7 +10,8 @@ import { FloatingRightPanelButtons } from 'features/ui/components/FloatingRightP import type { AutoLayoutDockviewComponents, AutoLayoutGridviewComponents, - PanelParameters, + DockviewPanelParameters, + GridviewPanelParameters, RootLayoutGridviewComponents, } from 'features/ui/layouts/auto-layout-context'; import { AutoLayoutProvider, useAutoLayoutContext, withPanelContainer } from 'features/ui/layouts/auto-layout-context'; @@ -60,7 +61,7 @@ const mainPanelComponents: AutoLayoutDockviewComponents = { const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { navigationApi.registerContainer(tab, 'main', api, () => { - const launchpad = api.addPanel({ + const launchpad = api.addPanel({ id: LAUNCHPAD_PANEL_ID, component: LAUNCHPAD_PANEL_ID, title: t('ui.panels.launchpad'), @@ -68,10 +69,11 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'launchpad', + i18nKey: 'ui.panels.launchpad', }, }); - api.addPanel({ + api.addPanel({ id: WORKSPACE_PANEL_ID, component: WORKSPACE_PANEL_ID, title: t('ui.panels.workflowEditor'), @@ -79,6 +81,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'workflows', + i18nKey: 'ui.panels.workflowEditor', }, position: { direction: 'within', @@ -86,7 +89,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { }, }); - api.addPanel({ + api.addPanel({ id: VIEWER_PANEL_ID, component: VIEWER_PANEL_ID, title: t('ui.panels.imageViewer'), @@ -94,6 +97,7 @@ const initializeMainPanelLayout = (tab: TabName, api: DockviewApi) => { params: { tab, focusRegion: 'viewer', + i18nKey: 'ui.panels.imageViewer', }, position: { direction: 'within', @@ -141,7 +145,7 @@ const rightPanelComponents: AutoLayoutGridviewComponents = { const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'right', api, () => { - const gallery = api.addPanel({ + const gallery = api.addPanel({ id: GALLERY_PANEL_ID, component: GALLERY_PANEL_ID, minimumWidth: RIGHT_PANEL_MIN_SIZE_PX, @@ -152,7 +156,7 @@ const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => { }, }); - const boards = api.addPanel({ + const boards = api.addPanel({ id: BOARDS_PANEL_ID, component: BOARDS_PANEL_ID, minimumHeight: BOARD_PANEL_MIN_HEIGHT_PX, @@ -197,7 +201,7 @@ const leftPanelComponents: AutoLayoutGridviewComponents = { const initializeLeftPanelLayout = (tab: TabName, api: GridviewApi) => { navigationApi.registerContainer(tab, 'left', api, () => { - api.addPanel({ + api.addPanel({ id: SETTINGS_PANEL_ID, component: SETTINGS_PANEL_ID, params: { diff --git a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts index f0e88cc8fe..4f9828a487 100644 --- a/invokeai/frontend/web/src/features/ui/store/uiSlice.ts +++ b/invokeai/frontend/web/src/features/ui/store/uiSlice.ts @@ -105,6 +105,10 @@ export const uiSliceConfig: SliceConfig = { state.activeTab = 'canvas'; state._version = 3; } + if (state._version === 3) { + state.panels = {}; + state._version = 4; + } return zUIState.parse(state); }, persistDenylist: ['shouldShowImageDetails'], diff --git a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts index e36c0b1cdb..c6f5399b58 100644 --- a/invokeai/frontend/web/src/features/ui/store/uiTypes.ts +++ b/invokeai/frontend/web/src/features/ui/store/uiTypes.ts @@ -13,7 +13,7 @@ const zSerializable = z.any().refine(isPlainObject); export type Serializable = z.infer; export const zUIState = z.object({ - _version: z.literal(3), + _version: z.literal(4), activeTab: zTabName, shouldShowImageDetails: z.boolean(), shouldShowProgressInViewer: z.boolean(), @@ -26,7 +26,7 @@ export const zUIState = z.object({ }); export type UIState = z.infer; export const getInitialUIState = (): UIState => ({ - _version: 3 as const, + _version: 4 as const, activeTab: 'generate' as const, shouldShowImageDetails: false, shouldShowProgressInViewer: true,