diff --git a/src/core/i18n/en/translation.en.json b/src/core/i18n/en/translation.en.json index 0c3512661a..75eeb62646 100644 --- a/src/core/i18n/en/translation.en.json +++ b/src/core/i18n/en/translation.en.json @@ -1787,7 +1787,8 @@ "description": "Here you can explore the hosted **{{entities}}**. Filter by key words to show just the topics you care about.", "list": "List view", "empty": "No {{entities}} found.", - "empty-list": "There are no {{entities}} yet." + "empty-list": "There are no {{entities}} yet.", + "searchPlaceholder": "Find Subspaces..." }, "recommendations": { "title": "Recommended by the Host" diff --git a/src/core/ui/list/LinksList.tsx b/src/core/ui/list/LinksList.tsx index 5d33679b83..d06c5d8114 100644 --- a/src/core/ui/list/LinksList.tsx +++ b/src/core/ui/list/LinksList.tsx @@ -1,18 +1,12 @@ import { ReactNode, useState } from 'react'; import { styled } from '@mui/styles'; -import { - Box, - Collapse, - List as MuiList, - ListItem as MuiListItem, - ListItemIcon as MuiListItemIcon, - Skeleton, -} from '@mui/material'; +import { Box, Collapse, List as MuiList, ListItem as MuiListItem, Skeleton } from '@mui/material'; import { BlockSectionTitle, CaptionSmall } from '../typography'; import RouterLink from '../link/RouterLink'; import { gutters } from '../grid/utils'; import { times } from 'lodash'; import CardExpandButton from '../card/CardExpandButton'; +import Avatar from '@/core/ui/avatar/Avatar'; const List = styled(MuiList)(() => ({ padding: 0 })); @@ -23,16 +17,12 @@ const ListItem = styled(MuiListItem)(({ theme }) => ({ alignItems: 'center', })) as typeof MuiListItem; -const ListItemIcon = styled(MuiListItemIcon)({ - minWidth: 'auto', - color: 'inherit', -}); - interface Item { id: string; title: ReactNode; icon: ReactNode; uri: string; + cardBanner?: string; } export interface LinksListProps { @@ -57,8 +47,9 @@ const LinksList = ({ items = [], emptyListCaption, loading = false }: LinksListP {!loading && items.length > 0 && items.slice(0, COLLAPSED_LIST_ITEM_LIMIT).map(item => ( - - {item.icon} + + + {item.title} @@ -68,7 +59,8 @@ const LinksList = ({ items = [], emptyListCaption, loading = false }: LinksListP {items.slice(COLLAPSED_LIST_ITEM_LIMIT).map(item => ( - {item.icon} + + {item.title} diff --git a/src/domain/journey/common/JourneyFilter/JourneyFilter.tsx b/src/domain/journey/common/JourneyFilter/JourneyFilter.tsx index 1761652946..da97d68a30 100644 --- a/src/domain/journey/common/JourneyFilter/JourneyFilter.tsx +++ b/src/domain/journey/common/JourneyFilter/JourneyFilter.tsx @@ -1,7 +1,6 @@ import React, { useMemo, useState } from 'react'; import { SearchTagsInputProps } from '@/domain/shared/components/SearchTagsInput/SearchTagsInput'; import { Identifiable } from '@/core/utils/Identifiable'; -import MultipleSelect from '@/core/ui/search/MultipleSelect'; import filterFn, { MatchInformation, ValueType, getAllValues } from '@/core/utils/filtering/filterFn'; import { Box } from '@mui/material'; import { BlockTitle } from '@/core/ui/typography'; @@ -45,10 +44,6 @@ const JourneyFilter = ({ [data, terms, valueGetter] ); - const handleChange = (value: string[]) => { - setTerms(value); - }; - if (!data.length) { return <>{children([])}; } @@ -61,13 +56,6 @@ const JourneyFilter = ({ <> {title} - {allValues && ( ({ children, onClickCreate, }: ChildJourneyViewProps) => { + const [filter, setFilter] = useState(''); + const { t } = useTranslation(); const { permissions } = useSpace(); + const filteredItems = useMemo( + () => + childEntities + .map(entity => ({ + id: entity.id, + title: entity.profile.displayName, + icon: childEntitiesIcon, + uri: entity.profile.url, + cardBanner: entity.profile?.cardBanner?.uri || defaultSubspaceAvatar, + })) + .filter(ss => ss.title.toLowerCase().includes(filter.toLowerCase())), + [childEntities, filter, childEntitiesIcon] + ); + return ( @@ -81,25 +101,19 @@ const ChildJourneyView = ({ canCreateSubentity={childEntityCreateAccess} onCreateSubentity={childEntityOnCreate} /> + {createSubentityDialog} + - - ({ - id: entity.id, - title: entity.profile.displayName, - icon: childEntitiesIcon, - uri: entity.profile.url, - }))} - emptyListCaption={t('pages.generic.sections.subentities.empty-list', { - entities: getJourneyChildrenTranslation(t, journeyTypeName), - parentEntity: t(`common.${journeyTypeName}` as const), - })} - /> + {childEntities.length > 3 && ( + setFilter(event.target.value)} + /> + )} + +