mirror of
https://github.com/stoatchat/for-legacy-web.git
synced 2026-03-07 09:25:27 +00:00
Port friends menu over.
This commit is contained in:
Paul
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