mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-06 08:38:37 +00:00
Port friends menu over.
This commit is contained in:
Paul
@@ -1,12 +1,22 @@
|
||||
import { Docked, OverlappingPanels } from "react-overlapping-panels";
|
||||
import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
|
||||
import Popovers from "../context/intermediate/Popovers";
|
||||
import { Switch, Route } from "react-router-dom";
|
||||
import styled from "styled-components";
|
||||
|
||||
import LeftSidebar from "../components/navigation/LeftSidebar";
|
||||
import RightSidebar from "../components/navigation/RightSidebar";
|
||||
|
||||
import Home from './home/Home';
|
||||
import Popovers from "../context/intermediate/Popovers";
|
||||
import Friends from "./friends/Friends";
|
||||
|
||||
const Routes = styled.div`
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
background: var(--primary-background);
|
||||
`;
|
||||
|
||||
export default function App() {
|
||||
return (
|
||||
@@ -16,12 +26,76 @@ export default function App() {
|
||||
leftPanel={{ width: 292, component: <LeftSidebar /> }}
|
||||
rightPanel={{ width: 240, component: <RightSidebar /> }}
|
||||
docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
|
||||
<Switch>
|
||||
<Route path="/">
|
||||
<Home />
|
||||
</Route>
|
||||
</Switch>
|
||||
<Routes>
|
||||
<Switch>
|
||||
<Route path="/friends">
|
||||
<Friends />
|
||||
</Route>
|
||||
|
||||
<Route path="/">
|
||||
<Home />
|
||||
</Route>
|
||||
</Switch>
|
||||
</Routes>
|
||||
<Popovers />
|
||||
</OverlappingPanels>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
*
|
||||
* <Route path="/channel/:channel/message/:message">
|
||||
<ChannelWrapper />
|
||||
</Route>
|
||||
<Route path="/server/:server/channel/:channel/settings/:page">
|
||||
<ChannelSettings key="channel_settings" />
|
||||
</Route>
|
||||
<Route path="/server/:server/channel/:channel/settings">
|
||||
<ChannelSettings key="channel_settings" />
|
||||
</Route>
|
||||
<Route path="/server/:server/settings/:page">
|
||||
<ServerSettings key="channel_settings" />
|
||||
</Route>
|
||||
<Route path="/server/:server/settings">
|
||||
<ServerSettings key="channel_settings" />
|
||||
</Route>
|
||||
<Route path="/channel/:channel/settings/:page">
|
||||
<ChannelSettings key="channel_settings" />
|
||||
</Route>
|
||||
<Route path="/channel/:channel/settings">
|
||||
<ChannelSettings key="channel_settings" />
|
||||
</Route>
|
||||
|
||||
<Route path="/settings/:page">
|
||||
<Settings key="settings" />
|
||||
</Route>
|
||||
<Route path="/settings">
|
||||
<Settings key="settings" />
|
||||
</Route>
|
||||
|
||||
<Route path="/server/:server/channel/:channel">
|
||||
<ChannelWrapper />
|
||||
</Route>
|
||||
<Route path="/server/:server" />
|
||||
<Route path="/channel/:channel">
|
||||
<ChannelWrapper />
|
||||
</Route>
|
||||
|
||||
<Route path="/friends">
|
||||
<Friends />
|
||||
</Route>
|
||||
<Route path="/dev">
|
||||
<Developer />
|
||||
</Route>
|
||||
|
||||
<Route path="/open/:id">
|
||||
<Open />
|
||||
</Route>
|
||||
{/*<Route path="/invite/:code">
|
||||
<OpenInvite />
|
||||
</Route>
|
||||
|
||||
<Route path="/">
|
||||
<Home />
|
||||
</Route>
|
||||
*/
|
||||
|
||||
71
src/pages/friends/Friend.module.scss
Normal file
71
src/pages/friends/Friend.module.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
.list {
|
||||
padding: 16px;
|
||||
user-select: none;
|
||||
overflow-y: scroll;
|
||||
|
||||
&[data-empty="true"] {
|
||||
img {
|
||||
height: 120px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.friend {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--secondary-background);
|
||||
|
||||
:global(.button) {
|
||||
background-color: var(--primary-background);
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
flex-grow: 1;
|
||||
margin: 0 12px;
|
||||
font-size: 16px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
.subtext {
|
||||
font-size: 12px;
|
||||
color: var(--tertiary-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
> div {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//! FIXME: Move this to the Header component, do this:
|
||||
// 1. Check if header has topic, if yes, flex-grow: 0 on the title.
|
||||
// 2. If header has no topic (example: friends page), flex-grow 1 on the header title.
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
90
src/pages/friends/Friend.tsx
Normal file
90
src/pages/friends/Friend.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { Text } from "preact-i18n";
|
||||
import { Link } from "react-router-dom";
|
||||
import styles from "./Friend.module.scss";
|
||||
import { useContext } from "preact/hooks";
|
||||
import { Children } from "../../types/Preact";
|
||||
import { X, Plus, Mail } from "@styled-icons/feather";
|
||||
import UserIcon from "../../components/common/UserIcon";
|
||||
import IconButton from "../../components/ui/IconButton";
|
||||
import { attachContextMenu } from "preact-context-menu";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
import UserStatus from '../../components/common/UserStatus';
|
||||
import { stopPropagation } from "../../lib/stopPropagation";
|
||||
import { AppContext } from "../../context/revoltjs/RevoltClient";
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
|
||||
interface Props {
|
||||
user: User;
|
||||
}
|
||||
|
||||
export function Friend({ user }: Props) {
|
||||
const client = useContext(AppContext);
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
const actions: Children[] = [];
|
||||
let subtext: Children = null;
|
||||
|
||||
if (user.relationship === Users.Relationship.Friend) {
|
||||
subtext = <UserStatus user={user} />
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
onClick={stopPropagation}>
|
||||
<Link to={'/open/' + user._id}>
|
||||
<Mail size={20} />
|
||||
</Link>
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
if (user.relationship === Users.Relationship.Incoming) {
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
onClick={ev => stopPropagation(ev, client.users.addFriend(user.username))}>
|
||||
<Plus size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
|
||||
subtext = <Text id="app.special.friends.incoming" />;
|
||||
}
|
||||
|
||||
if (user.relationship === Users.Relationship.Outgoing) {
|
||||
subtext = <Text id="app.special.friends.outgoing" />;
|
||||
}
|
||||
|
||||
if (
|
||||
user.relationship === Users.Relationship.Friend ||
|
||||
user.relationship === Users.Relationship.Outgoing ||
|
||||
user.relationship === Users.Relationship.Incoming
|
||||
) {
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
onClick={ev => stopPropagation(ev, client.users.removeFriend(user._id))}>
|
||||
<X size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
if (user.relationship === Users.Relationship.Blocked) {
|
||||
actions.push(
|
||||
<IconButton type="circle"
|
||||
onClick={ev => stopPropagation(ev, client.users.unblockUser(user._id))}>
|
||||
<X size={24} />
|
||||
</IconButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.friend}
|
||||
onClick={() => openScreen({ id: 'profile', user_id: user._id })}
|
||||
onContextMenu={attachContextMenu('Menu', { user: user._id })}>
|
||||
<UserIcon target={user} size={32} status />
|
||||
<div className={styles.name}>
|
||||
<span>@{user.username}</span>
|
||||
{subtext && (
|
||||
<span className={styles.subtext}>{subtext}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.actions}>{actions}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
85
src/pages/friends/Friends.tsx
Normal file
85
src/pages/friends/Friends.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import styles from "./Friend.module.scss";
|
||||
import { UserPlus } from "@styled-icons/feather";
|
||||
|
||||
import { Friend } from "./Friend";
|
||||
import { Text } from "preact-i18n";
|
||||
import Header from "../../components/ui/Header";
|
||||
import Overline from "../../components/ui/Overline";
|
||||
import IconButton from "../../components/ui/IconButton";
|
||||
import { useUsers } from "../../context/revoltjs/hooks";
|
||||
import { User, Users } from "revolt.js/dist/api/objects";
|
||||
import { useIntermediate } from "../../context/intermediate/Intermediate";
|
||||
|
||||
export default function Friends() {
|
||||
const { openScreen } = useIntermediate();
|
||||
|
||||
const users = useUsers() as User[];
|
||||
users.sort((a, b) => a.username.localeCompare(b.username));
|
||||
|
||||
const pending = users.filter(
|
||||
x =>
|
||||
x.relationship === Users.Relationship.Incoming ||
|
||||
x.relationship === Users.Relationship.Outgoing
|
||||
);
|
||||
const friends = users.filter(
|
||||
x => x.relationship === Users.Relationship.Friend
|
||||
);
|
||||
const blocked = users.filter(
|
||||
x => x.relationship === Users.Relationship.Blocked
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header placement="primary">
|
||||
<div className={styles.title}>
|
||||
<Text id="app.navigation.tabs.friends" />
|
||||
</div>
|
||||
<div className="actions">
|
||||
<IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
|
||||
<UserPlus size={24} />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Header>
|
||||
<div
|
||||
className={styles.list}
|
||||
data-empty={
|
||||
pending.length + friends.length + blocked.length === 0
|
||||
}
|
||||
>
|
||||
{pending.length + friends.length + blocked.length === 0 && (
|
||||
<>
|
||||
<img src="https://img.insrt.uk/xexu7/XOPoBUTI47.png/raw" />
|
||||
<Text id="app.special.friends.nobody" />
|
||||
</>
|
||||
)}
|
||||
{pending.length > 0 && (
|
||||
<Overline type="subtle">
|
||||
<Text id="app.special.friends.pending" /> –{" "}
|
||||
{pending.length}
|
||||
</Overline>
|
||||
)}
|
||||
{pending.map(y => (
|
||||
<Friend key={y._id} user={y} />
|
||||
))}
|
||||
{friends.length > 0 && (
|
||||
<Overline type="subtle">
|
||||
<Text id="app.navigation.tabs.friends" /> –{" "}
|
||||
{friends.length}
|
||||
</Overline>
|
||||
)}
|
||||
{friends.map(y => (
|
||||
<Friend key={y._id} user={y} />
|
||||
))}
|
||||
{blocked.length > 0 && (
|
||||
<Overline type="subtle">
|
||||
<Text id="app.special.friends.blocked" /> –{" "}
|
||||
{blocked.length}
|
||||
</Overline>
|
||||
)}
|
||||
{blocked.map(y => (
|
||||
<Friend key={y._id} user={y} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user