github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-16 13:15:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): dynamic dockview tab title translations

Browse Source 
Requires a ui slice migration and reset of users's layout settings to
get the right titles into dockview params state, which is persisted.
This commit is contained in:
psychedelicious
2025-08-11 12:39:57 +10:00
parent 24788e3c83
commit 17118a04bd
13 changed files with 99 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/ui/layouts/AutoLayoutPanelContainer.tsx
View File

@@ -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<IDockviewPanelProps<PanelParameters>>
| PropsWithChildren<IGridviewPanelProps<PanelParameters>>
| PropsWithChildren<IDockviewPanelProps<DockviewPanelParameters>>
| PropsWithChildren<IGridviewPanelProps<GridviewPanelParameters>>
) => {
const ref = useRef<HTMLDivElement>(null);
const shouldHighlightFocusedRegions = useAppSelector(selectSystemShouldEnableHighlightFocusedRegions);

8
invokeai/frontend/web/src/features/ui/layouts/DockviewTab.tsx
View File

@@ -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<PanelParameters>) => {
export const DockviewTab = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
const { t } = useTranslation();
const ref = useRef<HTMLDivElement>(null);
const setActive = useCallback(() => {
if (!props.api.isActive) {
@@ -23,7 +25,7 @@ export const DockviewTab = memo((props: IDockviewPanelHeaderProps<PanelParameter
return (
<Flex ref={ref} alignItems="center" h="full" onPointerDown={onPointerDown}>
<Text userSelect="none" px={4}>
{props.api.title ?? props.api.id}
{t(props.params.i18nKey)}
</Text>
</Flex>
);

8
invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasViewer.tsx
View File

@@ -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<PanelParameters>) => {
export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
const { t } = useTranslation();
const isGenerationInProgress = useIsGenerationInProgress();
const currentQueueItemDestination = useCurrentQueueItemDestination();
@@ -29,7 +31,7 @@ export const DockviewTabCanvasViewer = memo((props: IDockviewPanelHeaderProps<Pa
return (
<Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
<Text userSelect="none" px={4}>
{props.api.title ?? props.api.id}
{t(props.params.i18nKey)}
</Text>
{currentQueueItemDestination === 'canvas' && isGenerationInProgress && (
<ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />

8
invokeai/frontend/web/src/features/ui/layouts/DockviewTabCanvasWorkspace.tsx
View File

@@ -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<PanelParameters>) => {
export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
const { t } = useTranslation();
const isGenerationInProgress = useIsGenerationInProgress();
const canvasSessionId = useAppSelector(selectCanvasSessionId);
const currentQueueItemDestination = useCurrentQueueItemDestination();
@@ -32,7 +34,7 @@ export const DockviewTabCanvasWorkspace = memo((props: IDockviewPanelHeaderProps
return (
<Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
<Text userSelect="none" px={4}>
{props.api.title ?? props.api.id}
{t(props.params.i18nKey)}
</Text>
{currentQueueItemDestination === canvasSessionId && isGenerationInProgress && (
<ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />

8
invokeai/frontend/web/src/features/ui/layouts/DockviewTabLaunchpad.tsx
View File

@@ -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<TabName, IconType> = {
generate: PiTextAaBold,
canvas: PiBoundingBoxBold,
@@ -25,7 +28,8 @@ const TAB_ICONS: Record<TabName, IconType> = {
queue: PiQueueBold,
};
export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
const { t } = useTranslation();
const ref = useRef<HTMLDivElement>(null);
const activeTab = useAppSelector(selectActiveTab);
@@ -44,7 +48,7 @@ export const DockviewTabLaunchpad = memo((props: IDockviewPanelHeaderProps) => {
return (
<Flex ref={ref} alignItems="center" h="full" px={4} gap={3} onPointerDown={onPointerDown}>
<Icon as={TAB_ICONS[activeTab]} color="invokeYellow.300" boxSize={5} />
<Text userSelect="none">{props.api.title ?? props.api.id}</Text>
<Text userSelect="none">{t(props.params.i18nKey)}</Text>
</Flex>
);
});

8
invokeai/frontend/web/src/features/ui/layouts/DockviewTabProgress.tsx
View File

@@ -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<PanelParameters>) => {
export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<DockviewPanelParameters>) => {
const { t } = useTranslation();
const isGenerationInProgress = useIsGenerationInProgress();
const ref = useRef<HTMLDivElement>(null);
@@ -27,7 +29,7 @@ export const DockviewTabProgress = memo((props: IDockviewPanelHeaderProps<PanelP
return (
<Flex ref={ref} position="relative" alignItems="center" h="full" onPointerDown={onPointerDown}>
<Text userSelect="none" px={4}>
{props.api.title ?? props.api.id}
{t(props.params.i18nKey)}
</Text>
{isGenerationInProgress && (
<ProgressBar position="absolute" bottom={0} left={0} right={0} h={1} borderRadius="none" />

25
invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx
View File

@@ -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<string, FunctionComponent<IGridviewPanelProps<PanelParameters>>>;
export type AutoLayoutDockviewComponents = Record<string, FunctionComponent<IDockviewPanelProps<PanelParameters>>>;
export type RootLayoutGridviewComponents = Record<string, FunctionComponent<IGridviewPanelProps<PanelParameters>>>;
type PanelProps = IDockviewPanelProps<PanelParameters> | IGridviewPanelProps<PanelParameters>;
export type AutoLayoutGridviewComponents = Record<
string,
FunctionComponent<IGridviewPanelProps<GridviewPanelParameters>>
>;
export type AutoLayoutDockviewComponents = Record<
string,
FunctionComponent<IDockviewPanelProps<DockviewPanelParameters>>
>;
export type RootLayoutGridviewComponents = Record<
string,
FunctionComponent<IGridviewPanelProps<GridviewPanelParameters>>
>;
type PanelProps = IDockviewPanelProps<DockviewPanelParameters> | IGridviewPanelProps<GridviewPanelParameters>;
export const withPanelContainer = (Component: FunctionComponent) =>
/* eslint-disable-next-line react/display-name */

20
invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
View File

@@ -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<PanelParameters>({
const launchpad = api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
const gallery = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
const boards = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
api.addPanel<GridviewPanelParameters>({
id: SETTINGS_PANEL_ID,
component: SETTINGS_PANEL_ID,
params: {

21
invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
View File

@@ -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<PanelParameters>({
const launchpad = api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
const gallery = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
const boards = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
const main = api.addPanel<GridviewPanelParameters>({
id: MAIN_PANEL_ID,
component: MAIN_PANEL_ID,
priority: LayoutPriority.High,
});
const left = api.addPanel<PanelParameters>({
const left = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
const right = api.addPanel<GridviewPanelParameters>({
id: RIGHT_PANEL_ID,
component: RIGHT_PANEL_ID,
minimumWidth: RIGHT_PANEL_MIN_SIZE_PX,

15
invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
View File

@@ -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<PanelParameters>({
const launchpad = api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
const gallery = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
const boards = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
api.addPanel<GridviewPanelParameters>({
id: SETTINGS_PANEL_ID,
component: SETTINGS_PANEL_ID,
params: {

18
invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
View File

@@ -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<PanelParameters>({
const launchpad = api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
api.addPanel<DockviewPanelParameters>({
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<PanelParameters>({
const gallery = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
const boards = api.addPanel<GridviewPanelParameters>({
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<PanelParameters>({
api.addPanel<GridviewPanelParameters>({
id: SETTINGS_PANEL_ID,
component: SETTINGS_PANEL_ID,
params: {

4
invokeai/frontend/web/src/features/ui/store/uiSlice.ts
View File

@@ -105,6 +105,10 @@ export const uiSliceConfig: SliceConfig<typeof slice> = {
state.activeTab = 'canvas';
state._version = 3;
}
if (state._version === 3) {
state.panels = {};
state._version = 4;
}
return zUIState.parse(state);
},
persistDenylist: ['shouldShowImageDetails'],

4
invokeai/frontend/web/src/features/ui/store/uiTypes.ts
View File

@@ -13,7 +13,7 @@ const zSerializable = z.any().refine(isPlainObject);
export type Serializable = z.infer<typeof zSerializable>;
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<typeof zUIState>;
export const getInitialUIState = (): UIState => ({
_version: 3 as const,
_version: 4 as const,
activeTab: 'generate' as const,
shouldShowImageDetails: false,
shouldShowProgressInViewer: true,