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

Add a button for viewing a server without saving it

Browse source
This commit is contained in:
Ginger 2025-03-18 10:17:51 -04:00
parent 9219f62732
commit 7354e57881
1 changed files with 52 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { ReactNode, useCallback, useRef, useState } from 'react'; import React, { ReactNode, useCallback, useMemo, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import FocusTrap from 'focus-trap-react'; import FocusTrap from 'focus-trap-react';
import { import {
@ -45,9 +45,16 @@ import { useExploreServers } from '../../../hooks/useExploreServers';
type AddExploreServerPromptProps = { type AddExploreServerPromptProps = {
onSubmit: (server: string) => Promise<void>; onSubmit: (server: string) => Promise<void>;
header: ReactNode;
children: ReactNode; children: ReactNode;
selected?: boolean;
}; };
export function AddExploreServerPrompt({ onSubmit, children }: AddExploreServerPromptProps) { export function AddExploreServerPrompt({
onSubmit,
header,
children,
selected = false,
}: AddExploreServerPromptProps) {
const [dialog, setDialog] = useState(false); const [dialog, setDialog] = useState(false);
const serverInputRef = useRef<HTMLInputElement>(null); const serverInputRef = useRef<HTMLInputElement>(null);
@ -89,9 +96,7 @@ export function AddExploreServerPrompt({ onSubmit, children }: AddExploreServerP
variant="Surface" variant="Surface"
size="500" size="500"
> >
<Box grow="Yes"> <Box grow="Yes">{header}</Box>
<Text size="H4">Add Server</Text>
</Box>
<IconButton size="300" onClick={() => setDialog(false)} radii="300"> <IconButton size="300" onClick={() => setDialog(false)} radii="300">
<Icon src={Icons.Cross} /> <Icon src={Icons.Cross} />
</IconButton> </IconButton>
@ -137,7 +142,7 @@ export function AddExploreServerPrompt({ onSubmit, children }: AddExploreServerP
</FocusTrap> </FocusTrap>
</OverlayCenter> </OverlayCenter>
</Overlay> </Overlay>
<NavItem variant="Secondary"> <NavItem variant="Background" aria-selected={selected}>
<NavButton onClick={() => setDialog(true)}> <NavButton onClick={() => setDialog(true)}>
<NavItemContent>{children}</NavItemContent> <NavItemContent>{children}</NavItemContent>
</NavButton> </NavButton>
@ -220,12 +225,23 @@ export function Explore() {
const userId = mx.getUserId(); const userId = mx.getUserId();
const clientConfig = useClientConfig(); const clientConfig = useClientConfig();
const userServer = userId ? getMxIdServer(userId) : undefined; const userServer = userId ? getMxIdServer(userId) : undefined;
const featuredServers = const featuredServers = useMemo(
clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? []; () =>
clientConfig.featuredCommunities?.servers?.filter((server) => server !== userServer) ?? [],
[clientConfig, userServer]
);
const [exploreServers, addServer, removeServer] = useExploreServers(); const [exploreServers, addServer, removeServer] = useExploreServers();
const featuredSelected = useExploreFeaturedSelected(); const featuredSelected = useExploreFeaturedSelected();
const selectedServer = useExploreServer(); const selectedServer = useExploreServer();
const exploringUnlistedServer = useMemo(
() =>
selectedServer !== undefined &&
selectedServer !== userServer &&
featuredServers.indexOf(selectedServer) === -1 &&
exploreServers.indexOf(selectedServer) === -1,
[exploreServers, featuredServers, selectedServer, userServer]
);
const addServerCallback = useCallback( const addServerCallback = useCallback(
async (server: string) => { async (server: string) => {
@ -243,6 +259,13 @@ export function Explore() {
[removeServer, navigate] [removeServer, navigate]
); );
const exploreUnlistedServerCallback = useCallback(
async (server: string) => {
navigate(getExploreServerPath(server));
},
[navigate]
);
return ( return (
<PageNav> <PageNav>
<PageNavHeader> <PageNavHeader>
@ -277,6 +300,22 @@ export function Explore() {
{userServer && ( {userServer && (
<ExploreServerNavItem server={userServer} selected={userServer === selectedServer} /> <ExploreServerNavItem server={userServer} selected={userServer === selectedServer} />
)} )}
<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>
View with Address
</Text>
</Box>
</Box>
</AddExploreServerPrompt>
</NavCategory> </NavCategory>
<NavCategory> <NavCategory>
<NavCategoryHeader> <NavCategoryHeader>
@ -299,9 +338,10 @@ export function Explore() {
onRemove={() => removeServerCallback(server)} onRemove={() => removeServerCallback(server)}
/> />
))} ))}
</NavCategory> <AddExploreServerPrompt
<Box direction="Column"> onSubmit={addServerCallback}
<AddExploreServerPrompt onSubmit={addServerCallback}> header={<Text size="H4">View 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">
<Icon src={Icons.Plus} size="100" /> <Icon src={Icons.Plus} size="100" />
@ -313,7 +353,7 @@ export function Explore() {
</Box> </Box>
</Box> </Box>
</AddExploreServerPrompt> </AddExploreServerPrompt>
</Box> </NavCategory>
</Box> </Box>
</PageNavContent> </PageNavContent>
</PageNav> </PageNav>