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

Hide bookmark entries for featured servers

Browse source
This commit is contained in:
Ginger 2025-09-13 15:12:10 -04:00
parent be51dc5f12
commit 2f42ca99fc
No known key found for this signature in database
2 changed files with 85 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/hooks/useExploreServers.ts
View file

@ -7,16 +7,17 @@ export type InCinnyExploreServersContent = {
servers?: string[]; servers?: string[];
}; };
export const useExploreServers = (): [ export const useExploreServers = (
string[], exclude?: string[]
(server: string) => Promise<void>, ): [string[], (server: string) => Promise<void>, (server: string) => Promise<void>] => {
(server: string) => Promise<void>
] => {
const mx = useMatrixClient(); const mx = useMatrixClient();
const accountData = useAccountData(AccountDataEvent.CinnyExplore); const accountData = useAccountData(AccountDataEvent.CinnyExplore);
const userAddedServers = useMemo( const userAddedServers = useMemo(
() => accountData?.getContent<InCinnyExploreServersContent>()?.servers ?? [], () =>
[accountData] accountData
?.getContent<InCinnyExploreServersContent>()
?.servers?.filter((server) => !exclude?.includes(server)) ?? [],
[exclude, accountData]
); );
const addServer = useCallback( const addServer = useCallback(

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

@ -31,7 +31,6 @@ import {
NavLink, NavLink,
} from '../../../components/nav'; } from '../../../components/nav';
import { getExploreFeaturedPath, getExploreServerPath } from '../../pathUtils'; import { getExploreFeaturedPath, getExploreServerPath } from '../../pathUtils';
import { useClientConfig } from '../../../hooks/useClientConfig';
import { import {
useExploreFeaturedRooms, useExploreFeaturedRooms,
useExploreServer, useExploreServer,
@ -44,9 +43,10 @@ import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page
import { stopPropagation } from '../../../utils/keyboard'; import { stopPropagation } from '../../../utils/keyboard';
import { useExploreServers } from '../../../hooks/useExploreServers'; import { useExploreServers } from '../../../hooks/useExploreServers';
import { useAlive } from '../../../hooks/useAlive'; import { useAlive } from '../../../hooks/useAlive';
import { useClientConfig } from '../../../hooks/useClientConfig';
type AddExploreServerPromptProps = { type AddExploreServerPromptProps = {
onSubmit: (server: string) => Promise<void>; onSubmit: (server: string, save: boolean) => Promise<void>;
header: ReactNode; header: ReactNode;
children: ReactNode; children: ReactNode;
selected?: boolean; selected?: boolean;
@ -69,19 +69,25 @@ export function AddExploreServerPrompt({
return server || undefined; return server || undefined;
}; };
const [submitState, handleSubmit] = useAsyncCallback( const submit = useCallback(
useCallback(async () => { async (save: boolean) => {
const server = getInputServer(); const server = getInputServer();
if (!server) return; if (!server) return;
await mx.publicRooms({ server, limit: 1 }); await mx.publicRooms({ server, limit: 1 });
await onSubmit(server); await onSubmit(server, save);
if (alive()) { if (alive()) {
setDialog(false); setDialog(false);
} }
}, [alive, onSubmit, mx]) },
[alive, onSubmit, mx]
); );
const [viewState, handleView] = useAsyncCallback(() => submit(false));
const [saveViewState, handleSaveView] = useAsyncCallback(() => submit(true));
const busy =
viewState.status === AsyncStatus.Loading || saveViewState.status === AsyncStatus.Loading;
return ( return (
<> <>
<Overlay open={dialog} backdrop={<OverlayBackdrop />}> <Overlay open={dialog} backdrop={<OverlayBackdrop />}>
@ -108,21 +114,12 @@ export function AddExploreServerPrompt({
<Icon src={Icons.Cross} /> <Icon src={Icons.Cross} />
</IconButton> </IconButton>
</Header> </Header>
<Box <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
as="form"
onSubmit={(evt) => {
evt.preventDefault();
handleSubmit();
}}
style={{ padding: config.space.S400 }}
direction="Column"
gap="400"
>
<Text priority="400">Add server name to explore public communities.</Text> <Text priority="400">Add server name to explore public communities.</Text>
<Box direction="Column" gap="100"> <Box direction="Column" gap="100">
<Text size="L400">Server Name</Text> <Text size="L400">Server Name</Text>
<Input ref={serverInputRef} name="serverInput" variant="Background" required /> <Input ref={serverInputRef} name="serverInput" variant="Background" required />
{submitState.status === AsyncStatus.Error && ( {viewState.status === AsyncStatus.Error && (
<Text style={{ color: color.Critical.Main }} size="T300"> <Text style={{ color: color.Critical.Main }} size="T300">
Failed to load public rooms. Please try again. Failed to load public rooms. Please try again.
</Text> </Text>
@ -131,18 +128,32 @@ export function AddExploreServerPrompt({
<Box direction="Column" gap="200"> <Box direction="Column" gap="200">
<Button <Button
type="submit" type="submit"
onClick={handleSubmit} onClick={handleView}
variant="Secondary" variant="Secondary"
fill="Soft" fill="Soft"
before={ before={
submitState.status === AsyncStatus.Loading && ( viewState.status === AsyncStatus.Loading && (
<Spinner fill="Solid" variant="Secondary" size="200" /> <Spinner fill="Solid" variant="Secondary" size="200" />
) )
} }
disabled={submitState.status === AsyncStatus.Loading} disabled={busy}
> >
<Text size="B400">View</Text> <Text size="B400">View</Text>
</Button> </Button>
<Button
type="submit"
onClick={handleSaveView}
variant="Primary"
fill="Soft"
before={
saveViewState.status === AsyncStatus.Loading && (
<Spinner fill="Solid" variant="Secondary" size="200" />
)
}
disabled={busy}
>
<Text size="B400">Save & View</Text>
</Button>
</Box> </Box>
</Box> </Box>
</Dialog> </Dialog>
@ -158,30 +169,33 @@ export function AddExploreServerPrompt({
); );
} }
type ExploreServerNavItemAction = {
onClick: () => Promise<void>;
icon: IconSrc;
alwaysVisible: boolean;
};
type ExploreServerNavItemProps = { type ExploreServerNavItemProps = {
server: string; server: string;
selected: boolean; selected: boolean;
icon: IconSrc; icon: IconSrc;
onRemove?: (() => Promise<void>) | null; action?: ExploreServerNavItemAction;
}; };
export function ExploreServerNavItem({ export function ExploreServerNavItem({
server, server,
selected, selected,
icon, icon,
onRemove = null, action,
}: ExploreServerNavItemProps) { }: ExploreServerNavItemProps) {
const [hover, setHover] = useState(false); const [hover, setHover] = useState(false);
const { hoverProps } = useHover({ onHoverChange: setHover }); const { hoverProps } = useHover({ onHoverChange: setHover });
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover }); const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
const [removeState, removeCallback] = useAsyncCallback( const [actionState, actionCallback] = useAsyncCallback(
useCallback(async () => { useCallback(async () => {
if (onRemove !== null) { await action?.onClick();
await onRemove(); }, [action])
}
}, [onRemove])
); );
const removeInProgress = const actionInProgress =
removeState.status === AsyncStatus.Loading || removeState.status === AsyncStatus.Success; actionState.status === AsyncStatus.Loading || actionState.status === AsyncStatus.Success;
return ( return (
<NavItem <NavItem
@ -205,20 +219,20 @@ export function ExploreServerNavItem({
</Box> </Box>
</NavItemContent> </NavItemContent>
</NavLink> </NavLink>
{onRemove !== null && (hover || removeInProgress) && ( {action !== undefined && (hover || actionInProgress || action.alwaysVisible) && (
<NavItemOptions> <NavItemOptions>
<IconButton <IconButton
onClick={removeCallback} onClick={actionCallback}
variant="Background" variant="Background"
fill="None" fill="None"
size="300" size="300"
radii="300" radii="300"
disabled={removeInProgress} disabled={actionInProgress}
> >
{removeInProgress ? ( {actionInProgress ? (
<Spinner variant="Secondary" fill="Solid" size="200" /> <Spinner variant="Secondary" fill="Solid" size="200" />
) : ( ) : (
<Icon size="50" src={Icons.Minus} /> <Icon size="50" src={action.icon} />
)} )}
</IconButton> </IconButton>
</NavItemOptions> </NavItemOptions>
@ -239,7 +253,7 @@ export function Explore() {
clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? [], clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? [],
[clientConfig, userServer] [clientConfig, userServer]
); );
const [exploreServers, addServer, removeServer] = useExploreServers(); const [exploreServers, addServer, removeServer] = useExploreServers(featuredServers);
const selectedServer = useExploreServer(); const selectedServer = useExploreServer();
const exploringFeaturedRooms = useExploreFeaturedRooms(); const exploringFeaturedRooms = useExploreFeaturedRooms();
@ -251,12 +265,12 @@ export function Explore() {
featuredServers.includes(selectedServer) || featuredServers.includes(selectedServer) ||
exploreServers.includes(selectedServer) exploreServers.includes(selectedServer)
), ),
[exploreServers, featuredServers, selectedServer, userServer] [exploreServers, selectedServer, userServer, featuredServers]
); );
const addServerCallback = useCallback( const addServerCallback = useCallback(
async (server: string) => { async (server: string, save: boolean) => {
if (server !== userServer && selectedServer && !featuredServers.includes(selectedServer)) { if (save && server !== userServer && !featuredServers.includes(server) && selectedServer) {
await addServer(server); await addServer(server);
} }
navigate(getExploreServerPath(server)); navigate(getExploreServerPath(server));
@ -271,13 +285,6 @@ export function Explore() {
[removeServer] [removeServer]
); );
const exploreUnlistedServerCallback = useCallback(
async (server: string) => {
navigate(getExploreServerPath(server));
},
[navigate]
);
return ( return (
<PageNav> <PageNav>
<PageNavHeader> <PageNavHeader>
@ -293,29 +300,6 @@ export function Explore() {
<PageNavContent> <PageNavContent>
<Box direction="Column" gap="300"> <Box direction="Column" gap="300">
<NavCategory> <NavCategory>
<AddExploreServerPrompt
onSubmit={exploreUnlistedServerCallback}
header={<Text size="H4">View Server</Text>}
selected={exploringUnlistedServer}
>
<Box as="span" grow="Yes" alignItems="Center" gap="200">
<Avatar size="200" radii="400">
<Icon src={Icons.Link} size="100" />
</Avatar>
<Box as="span" grow="Yes">
<Text as="span" size="Inherit" truncate>
Explore with Address
</Text>
</Box>
</Box>
</AddExploreServerPrompt>
</NavCategory>
<NavCategory>
<NavCategoryHeader>
<Text size="O400" style={{ paddingLeft: config.space.S200 }}>
Featured
</Text>
</NavCategoryHeader>
<NavItem variant="Background" radii="400" aria-selected={exploringFeaturedRooms}> <NavItem variant="Background" radii="400" aria-selected={exploringFeaturedRooms}>
<NavLink to={getExploreFeaturedPath()}> <NavLink to={getExploreFeaturedPath()}>
<NavItemContent> <NavItemContent>
@ -325,7 +309,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>
Featured Rooms Featured
</Text> </Text>
</Box> </Box>
</Box> </Box>
@ -339,6 +323,25 @@ export function Explore() {
icon={Icons.Home} icon={Icons.Home}
/> />
)} )}
{exploringUnlistedServer && selectedServer !== undefined && (
<ExploreServerNavItem
server={selectedServer}
selected
icon={Icons.Server}
action={{
alwaysVisible: true,
icon: Icons.Plus,
onClick: () => addServerCallback(selectedServer, true),
}}
/>
)}
</NavCategory>
<NavCategory>
<NavCategoryHeader>
<Text size="O400" style={{ paddingLeft: config.space.S200 }}>
Servers
</Text>
</NavCategoryHeader>
{featuredServers.map((server) => ( {featuredServers.map((server) => (
<ExploreServerNavItem <ExploreServerNavItem
key={server} key={server}
@ -347,20 +350,17 @@ export function Explore() {
icon={Icons.Server} icon={Icons.Server}
/> />
))} ))}
</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}
server={server} server={server}
selected={server === selectedServer} selected={server === selectedServer}
onRemove={() => removeServerCallback(server)}
icon={Icons.Server} icon={Icons.Server}
action={{
alwaysVisible: false,
icon: Icons.Minus,
onClick: () => removeServerCallback(server),
}}
/> />
))} ))}
<AddExploreServerPrompt <AddExploreServerPrompt