mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 23:10:28 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Split featured servers and user-added servers into different categories

Browse source
This commit is contained in:
Ginger 2025-03-18 10:26:19 -04:00
parent 7354e57881
commit 80d322b09a
2 changed files with 33 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/hooks/router/useExploreSelected.ts
View file

@ -11,7 +11,7 @@ export const useExploreSelected = (): boolean => {
return !!match; return !!match;
}; };
export const useExploreFeaturedSelected = (): boolean => { export const useExploringFeaturedRooms = (): boolean => {
const match = useMatch({ const match = useMatch({
path: getExploreFeaturedPath(), path: getExploreFeaturedPath(),
caseSensitive: true, caseSensitive: true,

55
src/app/pages/client/explore/Explore.tsx
View file

@ -32,7 +32,7 @@ import {
import { getExploreFeaturedPath, getExploreServerPath } from '../../pathUtils'; import { getExploreFeaturedPath, getExploreServerPath } from '../../pathUtils';
import { useClientConfig } from '../../../hooks/useClientConfig'; import { useClientConfig } from '../../../hooks/useClientConfig';
import { import {
useExploreFeaturedSelected, useExploringFeaturedRooms,
useExploreServer, useExploreServer,
} from '../../../hooks/router/useExploreSelected'; } from '../../../hooks/router/useExploreSelected';
import { useMatrixClient } from '../../../hooks/useMatrixClient'; import { useMatrixClient } from '../../../hooks/useMatrixClient';
@ -232,8 +232,8 @@ export function Explore() {
); );
const [exploreServers, addServer, removeServer] = useExploreServers(); const [exploreServers, addServer, removeServer] = useExploreServers();
const featuredSelected = useExploreFeaturedSelected();
const selectedServer = useExploreServer(); const selectedServer = useExploreServer();
const exploringFeaturedRooms = useExploringFeaturedRooms();
const exploringUnlistedServer = useMemo( const exploringUnlistedServer = useMemo(
() => () =>
selectedServer !== undefined && selectedServer !== undefined &&
@ -245,10 +245,12 @@ export function Explore() {
const addServerCallback = useCallback( const addServerCallback = useCallback(
async (server: string) => { async (server: string) => {
await addServer(server); if (server !== userServer && featuredServers.indexOf(server) === -1) {
await addServer(server);
}
navigate(getExploreServerPath(server)); navigate(getExploreServerPath(server));
}, },
[addServer, navigate] [addServer, navigate, userServer, featuredServers]
); );
const removeServerCallback = useCallback( const removeServerCallback = useCallback(
@ -281,22 +283,6 @@ export function Explore() {
<PageNavContent> <PageNavContent>
<Box direction="Column" gap="300"> <Box direction="Column" gap="300">
<NavCategory> <NavCategory>
<NavItem variant="Background" radii="400" aria-selected={featuredSelected}>
<NavLink to={getExploreFeaturedPath()}>
<NavItemContent>
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400">
<Icon src={Icons.Bulb} size="100" filled={featuredSelected} />
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
Featured
</Text>
</Box>
</Box>
</NavItemContent>
</NavLink>
</NavItem>
{userServer && ( {userServer && (
<ExploreServerNavItem server={userServer} selected={userServer === selectedServer} /> <ExploreServerNavItem server={userServer} selected={userServer === selectedServer} />
)} )}
@ -311,7 +297,7 @@ export function Explore() {
</Avatar> </Avatar>
<Box as="span" grow="Yes"> <Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate> <Text as="span" size="Inherit" truncate>
View with Address Explore with Address
</Text> </Text>
</Box> </Box>
</Box> </Box>
@ -320,9 +306,25 @@ export function Explore() {
<NavCategory> <NavCategory>
<NavCategoryHeader> <NavCategoryHeader>
<Text size="O400" style={{ paddingLeft: config.space.S200 }}> <Text size="O400" style={{ paddingLeft: config.space.S200 }}>
Servers Featured
</Text> </Text>
</NavCategoryHeader> </NavCategoryHeader>
<NavItem variant="Background" radii="400" aria-selected={exploringFeaturedRooms}>
<NavLink to={getExploreFeaturedPath()}>
<NavItemContent>
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400">
<Icon src={Icons.Bulb} size="100" filled={exploringFeaturedRooms} />
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
Featured Rooms
</Text>
</Box>
</Box>
</NavItemContent>
</NavLink>
</NavItem>
{featuredServers.map((server) => ( {featuredServers.map((server) => (
<ExploreServerNavItem <ExploreServerNavItem
key={server} key={server}
@ -330,6 +332,13 @@ export function Explore() {
selected={server === selectedServer} selected={server === selectedServer}
/> />
))} ))}
</NavCategory>
<NavCategory>
<NavCategoryHeader>
<Text size="O400" style={{ paddingLeft: config.space.S200 }}>
Servers
</Text>
</NavCategoryHeader>
{exploreServers.map((server) => ( {exploreServers.map((server) => (
<ExploreServerNavItem <ExploreServerNavItem
key={server} key={server}
@ -340,7 +349,7 @@ export function Explore() {
))} ))}
<AddExploreServerPrompt <AddExploreServerPrompt
onSubmit={addServerCallback} onSubmit={addServerCallback}
header={<Text size="H4">View Server</Text>} header={<Text size="H4">Add Server</Text>}
> >
<Box as="span" grow="Yes" alignItems="Center" gap="200"> <Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400"> <Avatar size="200" radii="400">