jude/reminder-bot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Block editing username and avatar on DMs

Browse Source
This commit is contained in:
jude
2024-03-10 19:43:57 +00:00
parent 3190738fc5
commit 63fc2cdcbc
7 changed files with 73 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
reminder-dashboard/src/components/Reminder/Avatar.tsx Normal file
View File

@ -0,0 +1,28 @@
import { ImagePicker } from "./ImagePicker";
import { useReminder } from "./ReminderContext";
import { useGuild } from "../App/useGuild";
export const Avatar = () => {
const guild = useGuild();
const [reminder, setReminder] = useReminder();
return guild ? (
<ImagePicker
class="is-rounded avatar"
url={reminder.avatar || "/static/img/icon.png"}
alt="Image for discord avatar"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
avatar: url,
}));
}}
></ImagePicker>
) : (
<img
class="is-rounded avatar"
alt="Image for discord avatar"
src={"/static/img/icon.png"}
></img>
);
};

51
reminder-dashboard/src/components/Reminder/Message.tsx
View File

@ -1,38 +1,23 @@
import { ImagePicker } from "./ImagePicker";
import { Username } from "./Username";
import { Content } from "./Content";
import { Embed } from "./Embed";
import { useReminder } from "./ReminderContext";
import { Avatar } from "./Avatar";
export const Message = () => {
const [reminder, setReminder] = useReminder();
return (
<div class="column discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32 customizable">
<ImagePicker
class="is-rounded avatar"
url={reminder.avatar || "/static/img/icon.png"}
alt="Image for discord avatar"
setImage={(url: string) => {
setReminder((reminder) => ({
...reminder,
avatar: url,
}));
}}
></ImagePicker>
</p>
</figure>
<div class="media-content">
<div class="content">
<Username />
<Content />
<Embed />
</div>
export const Message = () => (
<div class="column discord-frame">
<article class="media">
<figure class="media-left">
<p class="image is-32x32 customizable">
<Avatar />
</p>
</figure>
<div class="media-content">
<div class="content">
<Username />
<Content />
<Embed />
</div>
</article>
</div>
);
};
</div>
</article>
</div>
);

8
reminder-dashboard/src/components/Reminder/Username.tsx
View File

@ -1,9 +1,11 @@
import { useReminder } from "./ReminderContext";
import { useGuild } from "../App/useGuild";
export const Username = () => {
const guild = useGuild();
const [reminder, setReminder] = useReminder();
return (
return guild ? (
<div class="discord-message-header">
<label class="is-sr-only">Username Override</label>
<input
@ -20,5 +22,9 @@ export const Username = () => {
}}
></input>
</div>
) : (
<div class="discord-message-header">
<span class="discord-username">Reminder Bot</span>
</div>
);
};

20
reminder-dashboard/src/components/Sidebar/index.tsx
View File

@ -4,16 +4,19 @@ import { MobileSidebar } from "./MobileSidebar";
import { Brand } from "./Brand";
import { Wave } from "./Wave";
import { GuildEntry } from "./GuildEntry";
import { fetchUserGuilds, GuildInfo } from "../../api";
import { fetchUserGuilds, fetchUserInfo, GuildInfo } from "../../api";
import { TimezonePicker } from "../TimezonePicker";
import "./styles.scss";
import { Link, useLocation } from "wouter";
type ContentProps = {
guilds: GuildInfo[];
};
const SidebarContent = ({ guilds }: ContentProps) => {
const guildEntries = guilds.map((guild) => <GuildEntry guild={guild}></GuildEntry>);
const guildEntries = guilds.map((guild) => <GuildEntry guild={guild} />);
const [loc] = useLocation();
const { data: userInfo } = useQuery({ ...fetchUserInfo() });
return (
<>
@ -22,6 +25,19 @@ const SidebarContent = ({ guilds }: ContentProps) => {
</a>
<Wave />
<aside class="menu">
<ul class="menu-list">
<li>
<Link
class={loc.startsWith("/@me") ? "is-active switch-pane" : "switch-pane"}
data-pane="guild"
href={"/@me/reminders"}
>
<>
<span class="guild-name">@{userInfo?.name || "unknown"}</span>
</>
</Link>
</li>
</ul>
<p class="menu-label">Servers</p>
<ul class="menu-list guildList">{guildEntries}</ul>
<div