github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): format

Browse Source 
Lots of changed bc the line length is now 120. May as well do it now.
This commit is contained in:
psychedelicious
2024-01-27 20:55:55 +11:00
parent b922ee566a
commit 189c430e46
568 changed files with 3602 additions and 11172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
invokeai/frontend/web/src/features/system/components/AboutModal/AboutModal.tsx
View File

@@ -16,20 +16,13 @@ import {
useDisclosure,
} from '@invoke-ai/ui-library';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import {
discordLink,
githubLink,
websiteLink,
} from 'features/system/store/constants';
import { discordLink, githubLink, websiteLink } from 'features/system/store/constants';
import { map } from 'lodash-es';
import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
import type { ReactElement } from 'react';
import { cloneElement, memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useGetAppDepsQuery,
useGetAppVersionQuery,
} from 'services/api/endpoints/appInfo';
import { useGetAppDepsQuery, useGetAppVersionQuery } from 'services/api/endpoints/appInfo';
type AboutModalProps = {
/* The button to open the Settings Modal */
@@ -58,60 +51,29 @@ const AboutModal = ({ children }: AboutModalProps) => {
<ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}>
<Grid templateColumns="repeat(2, 1fr)" h="full">
<GridItem
backgroundColor="base.750"
borderRadius="base"
p="4"
h="full"
>
<GridItem backgroundColor="base.750" borderRadius="base" p="4" h="full">
<ScrollableContent>
<Heading
position="sticky"
top="0"
backgroundColor="base.750"
size="md"
p="1"
>
<Heading position="sticky" top="0" backgroundColor="base.750" size="md" p="1">
{t('common.localSystem')}
</Heading>
{deps.map(({ name, version }, i) => (
<Grid
key={i}
py="2"
px="1"
w="full"
templateColumns="repeat(2, 1fr)"
>
<Grid key={i} py="2" px="1" w="full" templateColumns="repeat(2, 1fr)">
<Text>{name}</Text>
<Text>
{version ? version : t('common.notInstalled')}
</Text>
<Text>{version ? version : t('common.notInstalled')}</Text>
</Grid>
))}
</ScrollableContent>
</GridItem>
<GridItem>
<Flex
flexDir="column"
gap={3}
justifyContent="center"
alignItems="center"
h="full"
>
<Flex flexDir="column" gap={3} justifyContent="center" alignItems="center" h="full">
<Image src={InvokeLogoYellow} alt="invoke-logo" w="120px" />
{appVersion && <Text>{`v${appVersion?.version}`}</Text>}
<Grid templateColumns="repeat(2, 1fr)" gap="3">
<GridItem>
<ExternalLink
href={githubLink}
label={t('common.githubLabel')}
/>
<ExternalLink href={githubLink} label={t('common.githubLabel')} />
</GridItem>
<GridItem>
<ExternalLink
href={discordLink}
label={t('common.discordLabel')}
/>
<ExternalLink href={discordLink} label={t('common.discordLabel')} />
</GridItem>
</Grid>
<Heading fontSize="large">{t('common.aboutHeading')}</Heading>

5
invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeyListItem.tsx
View File

@@ -21,10 +21,7 @@ const HotkeyListItem = (props: HotkeysModalProps) => {
<Fragment key={`${hotkey}-${index}`}>
{hotkey.map((key, index) => (
<>
<Kbd
textTransform="lowercase"
key={`${hotkey}-${key}-${index}`}
>
<Kbd textTransform="lowercase" key={`${hotkey}-${key}-${index}`}>
{key}
</Kbd>
{index !== hotkey.length - 1 && (

37
invokeai/frontend/web/src/features/system/components/HotkeysModal/HotkeysModal.tsx
View File

@@ -20,14 +20,7 @@ import type { HotkeyGroup } from 'features/system/components/HotkeysModal/useHot
import { useHotkeyData } from 'features/system/components/HotkeysModal/useHotkeyData';
import { StickyScrollable } from 'features/system/components/StickyScrollable';
import type { ChangeEventHandler, ReactElement } from 'react';
import {
cloneElement,
Fragment,
memo,
useCallback,
useMemo,
useState,
} from 'react';
import { cloneElement, Fragment, memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi';
@@ -43,10 +36,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
const { t } = useTranslation();
const [hotkeyFilter, setHotkeyFilter] = useState('');
const clearHotkeyFilter = useCallback(() => setHotkeyFilter(''), []);
const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
(e) => setHotkeyFilter(e.target.value),
[]
);
const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((e) => setHotkeyFilter(e.target.value), []);
const hotkeyGroups = useHotkeyData();
const filteredHotkeyGroups = useMemo(() => {
if (!hotkeyFilter.trim().length) {
@@ -63,11 +53,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
if (
item.title.toLowerCase().includes(trimmedHotkeyFilter) ||
item.desc.toLowerCase().includes(trimmedHotkeyFilter) ||
item.hotkeys.some((hotkey) =>
hotkey.some((key) =>
key.toLowerCase().includes(trimmedHotkeyFilter)
)
)
item.hotkeys.some((hotkey) => hotkey.some((key) => key.toLowerCase().includes(trimmedHotkeyFilter)))
) {
filteredGroup.hotkeyListItems.push(item);
}
@@ -91,11 +77,7 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
<ModalCloseButton />
<ModalBody display="flex" flexDir="column" gap={4}>
<InputGroup>
<Input
placeholder={t('hotkeys.searchHotkeys')}
value={hotkeyFilter}
onChange={onChange}
/>
<Input placeholder={t('hotkeys.searchHotkeys')} value={hotkeyFilter} onChange={onChange} />
{hotkeyFilter.length && (
<InputRightElement h="full" pe={2}>
<IconButton
@@ -116,21 +98,14 @@ const HotkeysModal = ({ children }: HotkeysModalProps) => {
<StickyScrollable key={group.title} title={group.title}>
{group.hotkeyListItems.map((hotkey, i) => (
<Fragment key={i}>
<HotkeyListItem
title={hotkey.title}
description={hotkey.desc}
hotkeys={hotkey.hotkeys}
/>
<HotkeyListItem title={hotkey.title} description={hotkey.desc} hotkeys={hotkey.hotkeys} />
{i < group.hotkeyListItems.length - 1 && <Divider />}
</Fragment>
))}
</StickyScrollable>
))}
{!filteredHotkeyGroups.length && (
<IAINoContentFallback
label={t('hotkeys.noHotkeysFound')}
icon={null}
/>
<IAINoContentFallback label={t('hotkeys.noHotkeysFound')} icon={null} />
)}
</Flex>
</ScrollableContent>

16
invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts
View File

@@ -312,20 +312,8 @@ export const useHotkeyData = (): HotkeyGroup[] => {
);
const hotkeyGroups = useMemo<HotkeyGroup[]>(
() => [
appHotkeys,
generalHotkeys,
galleryHotkeys,
unifiedCanvasHotkeys,
nodesHotkeys,
],
[
appHotkeys,
generalHotkeys,
galleryHotkeys,
unifiedCanvasHotkeys,
nodesHotkeys,
]
() => [appHotkeys, generalHotkeys, galleryHotkeys, unifiedCanvasHotkeys, nodesHotkeys],
[appHotkeys, generalHotkeys, galleryHotkeys, unifiedCanvasHotkeys, nodesHotkeys]
);
return hotkeyGroups;

4
invokeai/frontend/web/src/features/system/components/ProgressBar.tsx
View File

@@ -22,9 +22,7 @@ const ProgressBar = () => {
<Progress
value={value}
aria-label={t('accessibility.invokeProgressBar')}
isIndeterminate={
isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps
}
isIndeterminate={isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps}
h={2}
w="full"
colorScheme="invokeBlue"

8
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLanguageSelect.tsx
View File

@@ -35,13 +35,9 @@ export const SettingsLanguageSelect = memo(() => {
],
[t]
);
const isLocalizationEnabled =
useFeatureStatus('localization').isFeatureEnabled;
const isLocalizationEnabled = useFeatureStatus('localization').isFeatureEnabled;
const value = useMemo(
() => options.find((o) => o.value === language),
[language, options]
);
const value = useMemo(() => options.find((o) => o.value === language), [language, options]);
const onChange = useCallback<ComboboxOnChange>(
(v) => {

10
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsLogLevelSelect.tsx
View File

@@ -11,15 +11,9 @@ export const SettingsLogLevelSelect = memo(() => {
const dispatch = useAppDispatch();
const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
const options = useMemo(
() => zLogLevel.options.map((o) => ({ label: o, value: o })),
[]
);
const options = useMemo(() => zLogLevel.options.map((o) => ({ label: o, value: o })), []);
const value = useMemo(
() => options.find((o) => o.value === consoleLogLevel),
[consoleLogLevel, options]
);
const value = useMemo(() => options.find((o) => o.value === consoleLogLevel), [consoleLogLevel, options]);
const onChange = useCallback<ComboboxOnChange>(
(v) => {

28
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx
View File

@@ -14,12 +14,7 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { discordLink, githubLink } from 'features/system/store/constants';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import {
PiBugBeetleBold,
PiInfoBold,
PiKeyboardBold,
PiToggleRightFill,
} from 'react-icons/pi';
import { PiBugBeetleBold, PiInfoBold, PiKeyboardBold, PiToggleRightFill } from 'react-icons/pi';
import { RiDiscordFill, RiGithubFill, RiSettings4Line } from 'react-icons/ri';
import SettingsModal from './SettingsModal';
@@ -45,32 +40,17 @@ const SettingsMenu = () => {
<MenuList>
<MenuGroup title={t('common.communityLabel')}>
{isGithubLinkEnabled && (
<MenuItem
as="a"
href={githubLink}
target="_blank"
icon={<RiGithubFill />}
>
<MenuItem as="a" href={githubLink} target="_blank" icon={<RiGithubFill />}>
{t('common.githubLabel')}
</MenuItem>
)}
{isBugLinkEnabled && (
<MenuItem
as="a"
href={`${githubLink}/issues`}
target="_blank"
icon={<PiBugBeetleBold />}
>
<MenuItem as="a" href={`${githubLink}/issues`} target="_blank" icon={<PiBugBeetleBold />}>
{t('common.reportBugLabel')}
</MenuItem>
)}
{isDiscordLinkEnabled && (
<MenuItem
as="a"
href={discordLink}
target="_blank"
icon={<RiDiscordFill />}
>
<MenuItem as="a" href={discordLink} target="_blank" icon={<RiDiscordFill />}>
{t('common.discordLabel')}
</MenuItem>
)}

163
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@@ -58,13 +58,10 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
const { t } = useTranslation();
const [countdown, setCountdown] = useState(3);
const shouldShowDeveloperSettings =
config?.shouldShowDeveloperSettings ?? true;
const shouldShowDeveloperSettings = config?.shouldShowDeveloperSettings ?? true;
const shouldShowResetWebUiText = config?.shouldShowResetWebUiText ?? true;
const shouldShowClearIntermediates =
config?.shouldShowClearIntermediates ?? true;
const shouldShowLocalizationToggle =
config?.shouldShowLocalizationToggle ?? true;
const shouldShowClearIntermediates = config?.shouldShowClearIntermediates ?? true;
const shouldShowLocalizationToggle = config?.shouldShowLocalizationToggle ?? true;
useEffect(() => {
if (!shouldShowDeveloperSettings) {
@@ -72,15 +69,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
}
}, [shouldShowDeveloperSettings, dispatch]);
const { isNSFWCheckerAvailable, isWatermarkerAvailable } =
useGetAppConfigQuery(undefined, {
selectFromResult: ({ data }) => ({
isNSFWCheckerAvailable:
data?.nsfw_methods.includes('nsfw_checker') ?? false,
isWatermarkerAvailable:
data?.watermarking_methods.includes('invisible_watermark') ?? false,
}),
});
const { isNSFWCheckerAvailable, isWatermarkerAvailable } = useGetAppConfigQuery(undefined, {
selectFromResult: ({ data }) => ({
isNSFWCheckerAvailable: data?.nsfw_methods.includes('nsfw_checker') ?? false,
isWatermarkerAvailable: data?.watermarking_methods.includes('invisible_watermark') ?? false,
}),
});
const {
clearIntermediates,
@@ -89,43 +83,19 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
isLoading: isLoadingClearIntermediates,
} = useClearIntermediates(shouldShowClearIntermediates);
const {
isOpen: isSettingsModalOpen,
onOpen: onSettingsModalOpen,
onClose: onSettingsModalClose,
} = useDisclosure();
const { isOpen: isSettingsModalOpen, onOpen: onSettingsModalOpen, onClose: onSettingsModalClose } = useDisclosure();
const {
isOpen: isRefreshModalOpen,
onOpen: onRefreshModalOpen,
onClose: onRefreshModalClose,
} = useDisclosure();
const { isOpen: isRefreshModalOpen, onOpen: onRefreshModalOpen, onClose: onRefreshModalClose } = useDisclosure();
const shouldUseCpuNoise = useAppSelector(
(s) => s.generation.shouldUseCpuNoise
);
const shouldConfirmOnDelete = useAppSelector(
(s) => s.system.shouldConfirmOnDelete
);
const enableImageDebugging = useAppSelector(
(s) => s.system.enableImageDebugging
);
const shouldShowProgressInViewer = useAppSelector(
(s) => s.ui.shouldShowProgressInViewer
);
const shouldUseCpuNoise = useAppSelector((s) => s.generation.shouldUseCpuNoise);
const shouldConfirmOnDelete = useAppSelector((s) => s.system.shouldConfirmOnDelete);
const enableImageDebugging = useAppSelector((s) => s.system.enableImageDebugging);
const shouldShowProgressInViewer = useAppSelector((s) => s.ui.shouldShowProgressInViewer);
const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
const shouldAntialiasProgressImage = useAppSelector(
(s) => s.system.shouldAntialiasProgressImage
);
const shouldUseNSFWChecker = useAppSelector(
(s) => s.system.shouldUseNSFWChecker
);
const shouldUseWatermarker = useAppSelector(
(s) => s.system.shouldUseWatermarker
);
const shouldEnableInformationalPopovers = useAppSelector(
(s) => s.system.shouldEnableInformationalPopovers
);
const shouldAntialiasProgressImage = useAppSelector((s) => s.system.shouldAntialiasProgressImage);
const shouldUseNSFWChecker = useAppSelector((s) => s.system.shouldUseNSFWChecker);
const shouldUseWatermarker = useAppSelector((s) => s.system.shouldUseWatermarker);
const shouldEnableInformationalPopovers = useAppSelector((s) => s.system.shouldEnableInformationalPopovers);
const clearStorage = useClearStorage();
@@ -204,12 +174,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
onClick: onSettingsModalOpen,
})}
<Modal
isOpen={isSettingsModalOpen}
onClose={onSettingsModalClose}
size="2xl"
isCentered
>
<Modal isOpen={isSettingsModalOpen} onClose={onSettingsModalClose} size="2xl" isCentered>
<ModalOverlay />
<ModalContent maxH="80vh" h="68rem">
<ModalHeader bg="none">{t('common.settingsLabel')}</ModalHeader>
@@ -221,68 +186,45 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
<StickyScrollable title={t('settings.general')}>
<FormControl>
<FormLabel>{t('settings.confirmOnDelete')}</FormLabel>
<Switch
isChecked={shouldConfirmOnDelete}
onChange={handleChangeShouldConfirmOnDelete}
/>
<Switch isChecked={shouldConfirmOnDelete} onChange={handleChangeShouldConfirmOnDelete} />
</FormControl>
</StickyScrollable>
<StickyScrollable title={t('settings.generation')}>
<FormControl isDisabled={!isNSFWCheckerAvailable}>
<FormLabel>{t('settings.enableNSFWChecker')}</FormLabel>
<Switch
isChecked={shouldUseNSFWChecker}
onChange={handleChangeShouldUseNSFWChecker}
/>
<Switch isChecked={shouldUseNSFWChecker} onChange={handleChangeShouldUseNSFWChecker} />
</FormControl>
<FormControl isDisabled={!isWatermarkerAvailable}>
<FormLabel>
{t('settings.enableInvisibleWatermark')}
</FormLabel>
<Switch
isChecked={shouldUseWatermarker}
onChange={handleChangeShouldUseWatermarker}
/>
<FormLabel>{t('settings.enableInvisibleWatermark')}</FormLabel>
<Switch isChecked={shouldUseWatermarker} onChange={handleChangeShouldUseWatermarker} />
</FormControl>
</StickyScrollable>
<StickyScrollable title={t('settings.ui')}>
<FormControl>
<FormLabel>
{t('settings.showProgressInViewer')}
</FormLabel>
<FormLabel>{t('settings.showProgressInViewer')}</FormLabel>
<Switch
isChecked={shouldShowProgressInViewer}
onChange={handleChangeShouldShowProgressInViewer}
/>
</FormControl>
<FormControl>
<FormLabel>
{t('settings.antialiasProgressImages')}
</FormLabel>
<FormLabel>{t('settings.antialiasProgressImages')}</FormLabel>
<Switch
isChecked={shouldAntialiasProgressImage}
onChange={handleChangeShouldAntialiasProgressImage}
/>
</FormControl>
<FormControl>
<InformationalPopover
feature="noiseUseCPU"
inPortal={false}
>
<InformationalPopover feature="noiseUseCPU" inPortal={false}>
<FormLabel>{t('parameters.useCpuNoise')}</FormLabel>
</InformationalPopover>
<Switch
isChecked={shouldUseCpuNoise}
onChange={handleChangeShouldUseCpuNoise}
/>
<Switch isChecked={shouldUseCpuNoise} onChange={handleChangeShouldUseCpuNoise} />
</FormControl>
{shouldShowLocalizationToggle && <SettingsLanguageSelect />}
<FormControl>
<FormLabel>
{t('settings.enableInformationalPopovers')}
</FormLabel>
<FormLabel>{t('settings.enableInformationalPopovers')}</FormLabel>
<Switch
isChecked={shouldEnableInformationalPopovers}
onChange={handleChangeShouldEnableInformationalPopovers}
@@ -293,23 +235,13 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
{shouldShowDeveloperSettings && (
<StickyScrollable title={t('settings.developer')}>
<FormControl>
<FormLabel>
{t('settings.shouldLogToConsole')}
</FormLabel>
<Switch
isChecked={shouldLogToConsole}
onChange={handleLogToConsoleChanged}
/>
<FormLabel>{t('settings.shouldLogToConsole')}</FormLabel>
<Switch isChecked={shouldLogToConsole} onChange={handleLogToConsoleChanged} />
</FormControl>
<SettingsLogLevelSelect />
<FormControl>
<FormLabel>
{t('settings.enableImageDebugging')}
</FormLabel>
<Switch
isChecked={enableImageDebugging}
onChange={handleChangeEnableImageDebugging}
/>
<FormLabel>{t('settings.enableImageDebugging')}</FormLabel>
<Switch isChecked={enableImageDebugging} onChange={handleChangeEnableImageDebugging} />
</FormControl>
</StickyScrollable>
)}
@@ -317,11 +249,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
{shouldShowClearIntermediates && (
<StickyScrollable title={t('settings.clearIntermediates')}>
<Button
tooltip={
hasPendingItems
? t('settings.clearIntermediatesDisabled')
: undefined
}
tooltip={hasPendingItems ? t('settings.clearIntermediatesDisabled') : undefined}
colorScheme="warning"
onClick={clearIntermediates}
isLoading={isLoadingClearIntermediates}
@@ -331,15 +259,9 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
count: intermediatesCount ?? 0,
})}
</Button>
<Text fontWeight="bold">
{t('settings.clearIntermediatesDesc1')}
</Text>
<Text variant="subtext">
{t('settings.clearIntermediatesDesc2')}
</Text>
<Text variant="subtext">
{t('settings.clearIntermediatesDesc3')}
</Text>
<Text fontWeight="bold">{t('settings.clearIntermediatesDesc1')}</Text>
<Text variant="subtext">{t('settings.clearIntermediatesDesc2')}</Text>
<Text variant="subtext">{t('settings.clearIntermediatesDesc3')}</Text>
</StickyScrollable>
)}
@@ -349,12 +271,8 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
</Button>
{shouldShowResetWebUiText && (
<>
<Text variant="subtext">
{t('settings.resetWebUIDesc1')}
</Text>
<Text variant="subtext">
{t('settings.resetWebUIDesc2')}
</Text>
<Text variant="subtext">{t('settings.resetWebUIDesc1')}</Text>
<Text variant="subtext">{t('settings.resetWebUIDesc2')}</Text>
</>
)}
</StickyScrollable>
@@ -381,8 +299,7 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
<Flex justifyContent="center">
<Text fontSize="lg">
<Text>
{t('settings.resetComplete')} {t('settings.reloadingIn')}{' '}
{countdown}...
{t('settings.resetComplete')} {t('settings.reloadingIn')} {countdown}...
</Text>
</Text>
</Flex>

8
invokeai/frontend/web/src/features/system/components/SettingsModal/StyledFlex.tsx
View File

@@ -4,13 +4,7 @@ import { memo } from 'react';
const StyledFlex = (props: PropsWithChildren) => {
return (
<Flex
flexDirection="column"
gap={2}
p={4}
borderRadius="base"
bg="base.900"
>
<Flex flexDirection="column" gap={2} p={4} borderRadius="base" bg="base.900">
{props.children}
</Flex>
);

26
invokeai/frontend/web/src/features/system/components/SettingsModal/useClearIntermediates.ts
View File

@@ -4,10 +4,7 @@ import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdap
import { addToast } from 'features/system/store/systemSlice';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import {
useClearIntermediatesMutation,
useGetIntermediatesCountQuery,
} from 'services/api/endpoints/images';
import { useClearIntermediatesMutation, useGetIntermediatesCountQuery } from 'services/api/endpoints/images';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
export type UseClearIntermediatesReturn = {
@@ -17,29 +14,20 @@ export type UseClearIntermediatesReturn = {
hasPendingItems: boolean;
};
export const useClearIntermediates = (
shouldShowClearIntermediates: boolean
): UseClearIntermediatesReturn => {
export const useClearIntermediates = (shouldShowClearIntermediates: boolean): UseClearIntermediatesReturn => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const { data: intermediatesCount } = useGetIntermediatesCountQuery(
undefined,
{
refetchOnMountOrArgChange: true,
skip: !shouldShowClearIntermediates,
}
);
const { data: intermediatesCount } = useGetIntermediatesCountQuery(undefined, {
refetchOnMountOrArgChange: true,
skip: !shouldShowClearIntermediates,
});
const [_clearIntermediates, { isLoading }] = useClearIntermediatesMutation();
const { data: queueStatus } = useGetQueueStatusQuery();
const hasPendingItems = useMemo(
() =>
Boolean(
queueStatus &&
(queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)
),
() => Boolean(queueStatus && (queueStatus.queue.in_progress > 0 || queueStatus.queue.pending > 0)),
[queueStatus]
);

7
invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx
View File

@@ -10,12 +10,7 @@ const StatusIndicator = () => {
if (!isConnected) {
return (
<Tooltip
label={t('common.statusDisconnected')}
placement="end"
shouldWrapChildren
gutter={10}
>
<Tooltip label={t('common.statusDisconnected')} placement="end" shouldWrapChildren gutter={10}>
<Icon as={PiWarningBold} color="error.300" />
</Tooltip>
);

32
invokeai/frontend/web/src/features/system/components/StickyScrollable.tsx
View File

@@ -6,29 +6,25 @@ export type StickyScrollableHeadingProps = {
title: string;
};
export const StickyScrollableHeading = memo(
(props: StickyScrollableHeadingProps) => {
return (
<Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
<Heading size="sm">{props.title}</Heading>
</Flex>
);
}
);
export const StickyScrollableHeading = memo((props: StickyScrollableHeadingProps) => {
return (
<Flex ps={2} pb={4} position="sticky" zIndex={1} top={0} bg="base.800">
<Heading size="sm">{props.title}</Heading>
</Flex>
);
});
StickyScrollableHeading.displayName = 'StickyScrollableHeading';
export type StickyScrollableContentProps = PropsWithChildren;
export const StickyScrollableContent = memo(
(props: StickyScrollableContentProps) => {
return (
<Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
{props.children}
</Flex>
);
}
);
export const StickyScrollableContent = memo((props: StickyScrollableContentProps) => {
return (
<Flex p={4} borderRadius="base" bg="base.750" flexDir="column" gap={4}>
{props.children}
</Flex>
);
});
StickyScrollableContent.displayName = 'StickyScrollableContent';