The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
improve dashboard heading design
+22
-22
+9
-10
app/dashboard/[guildId]/layout.tsx
+9
-10
app/dashboard/[guildId]/layout.tsx
···
14
14
import { redirect, useParams } from "next/navigation";
15
15
import { useCookies } from "next-client-cookies";
16
16
import { Suspense, useEffect, useMemo, useState } from "react";
17
-
import { HiArrowNarrowLeft, HiBell, HiChartBar, HiCode, HiEye, HiHome, HiPaperAirplane, HiStar, HiUserAdd, HiUsers, HiViewGridAdd } from "react-icons/hi";
17
+
import { HiBell, HiChartBar, HiChevronLeft, HiCode, HiEye, HiHome, HiPaperAirplane, HiStar, HiUserAdd, HiUsers, HiViewGridAdd } from "react-icons/hi";
18
18
import { useQuery } from "react-query";
19
19
20
20
function useGuildData<T extends unknown[]>(
···
105
105
</Head>
106
106
)}
107
107
108
-
<div className="flex flex-col gap-5 mb-3">
108
+
<div className="flex flex-col gap-3 mb-3">
109
109
<Button
110
110
asChild
111
-
className="w-fit"
111
+
variant="ghost"
112
+
className="w-fit pl-0 group"
112
113
>
113
114
<Link href="/profile">
114
-
<HiArrowNarrowLeft />
115
+
<HiChevronLeft className="mt-0.5 group-hover:translate-x-1 duration-200" />
115
116
Serverlist
116
117
</Link>
117
118
</Button>
···
119
120
<div className="text-lg flex gap-5">
120
121
<Skeleton
121
122
isLoading={!guild?.id}
122
-
className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0 relative top-1"
123
+
className="rounded-xl size-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0 relative top-1 left-1"
123
124
>
124
125
<ImageReduceMotion
125
126
alt="this server's icon"
126
-
className="rounded-full"
127
+
className="rounded-xl"
127
128
url={`https://cdn.discordapp.com/icons/${guild?.id}/${guild?.icon}`}
128
129
size={128}
129
130
/>
···
135
136
<Skeleton className="rounded-xl w-10 h-3.5" />
136
137
</div>
137
138
:
138
-
<div className="flex flex-col gap-1">
139
+
<div className="flex flex-col mt-[6px]">
139
140
<div className="text-2xl dark:text-neutral-200 text-neutral-800 font-medium">{guild?.name || "Unknown Server"}</div>
140
-
<div className="text-sm font-semibold flex items-center gap-1"> <HiUsers /> {intl.format(guild?.memberCount || 0)}</div>
141
+
<div className="text-xs font-semibold flex items-center gap-1"> <HiUsers /> {intl.format(guild?.memberCount || 0)}</div>
141
142
</div>
142
143
}
143
-
144
144
</div>
145
-
146
145
</div>
147
146
148
147
<Suspense>
+5
-5
app/dashboard/[guildId]/tts.component.tsx
+5
-5
app/dashboard/[guildId]/tts.component.tsx
···
16
16
<K extends keyof Guild["tts"]>(key: K, value: Guild["tts"][K]) => {
17
17
guildStore.setState((g) => {
18
18
if (!g) return g;
19
-
g.tts[key] = value;
19
+
g.tts = { ...g.tts, [key]: value };
20
20
return g;
21
21
});
22
22
},
···
33
33
items={createSelectableItems(guild?.channels, ["ViewChannel", "SendMessages", "EmbedLinks"], [ChannelType.GuildText, ChannelType.GuildVoice])}
34
34
description="Select a channel what channel should be used for tts."
35
35
defaultState={guild?.tts.channelId}
36
-
onSave={(o) => edit("channelId", o.value as string)}
36
+
onSave={(o) => edit("channelId", o.value)}
37
37
showClear
38
38
/>
39
39
<SelectMenu
···
43
43
items={createSelectableItems(guild?.channels)}
44
44
description="Select a channel where usage logs should be posted into."
45
45
defaultState={guild?.tts.logChannelId}
46
-
onSave={(o) => edit("logChannelId", o.value as string)}
46
+
onSave={(o) => edit("logChannelId", o.value)}
47
47
showClear
48
48
/>
49
49
<SelectMenu
···
53
53
items={createSelectableItems(guild?.roles)}
54
54
description="People with this role bypass the queue and speak immediately."
55
55
defaultState={guild?.tts.priorityRoleId}
56
-
onSave={(o) => edit("priorityRoleId", o.value as string)}
56
+
onSave={(o) => edit("priorityRoleId", o.value)}
57
57
showClear
58
58
/>
59
59
<SelectMenu
···
63
63
items={createSelectableItems(guild?.roles)}
64
64
description="People with this role are not allowed to use tts."
65
65
defaultState={guild?.tts.blacklistRoleId}
66
-
onSave={(o) => edit("blacklistRoleId", o.value as string)}
66
+
onSave={(o) => edit("blacklistRoleId", o.value)}
67
67
showClear
68
68
/>
69
69
<Switch
+2
-2
app/profile/layout.tsx
+2
-2
app/profile/layout.tsx
···
62
62
<div className="flex flex-col gap-5 mb-3">
63
63
64
64
<div className="text-lg flex flex-col md:flex-row md:items-center">
65
-
<div className="flex gap-5">
65
+
<div className="text-lg flex gap-6">
66
66
<Skeleton
67
67
isLoading={!user?.id}
68
-
className="rounded-full h-14 w-14 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0 relative top-1"
68
+
className="rounded-full size-16 ring-offset-[var(--background-rgb)] ring-2 ring-offset-2 ring-violet-400/40 shrink-0 relative top-1 left-1"
69
69
>
70
70
<ImageReduceMotion
71
71
alt="you"
+5
-4
app/profile/page.tsx
+5
-4
app/profile/page.tsx
···
14
14
import { useMemo, useState } from "react";
15
15
import { HiChartBar, HiRefresh, HiUserAdd, HiViewGridAdd } from "react-icons/hi";
16
16
17
-
const MAX_GUILDS = 50 as const;
17
+
const MAX_GUILDS = 20 as const;
18
18
19
19
const springAnimation = {
20
20
hidden: { y: 20, opacity: 0 },
···
41
41
[data, search]
42
42
);
43
43
44
-
const isHuge = guilds.length > MAX_GUILDS;
44
+
const isHuge = Array.isArray(data) && data.length > MAX_GUILDS;
45
45
46
46
if (error) {
47
47
return (
···
118
118
{...guild}
119
119
isHugeGuildList={isHuge}
120
120
/>
121
-
))}
121
+
))
122
+
}
122
123
</motion.ul>
123
124
)}
124
125
125
126
{isHuge && (
126
127
<ScreenMessage
127
128
title="There are too many servers.."
128
-
description={`To save some performance, use the search to find a guild. Showing ${MAX_GUILDS} out of ~${guilds.length < 1_000 ? length : Math.round(length / 1_000) * 1_000}.`}
129
+
description={`To save some performance, use the search to find a guild. Showing ${MAX_GUILDS} out of ~${data.length < 1_000 ? data.length : Math.round(data.length / 1_000) * 1_000}.`}
129
130
/>
130
131
)}
131
132
</div>);