university/diplom-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

.

Browse Source
This commit is contained in:
Lionarius
2025-05-21 08:52:33 +03:00
parent e992d388fb
commit 4e5fca2402
68 changed files with 358 additions and 1398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.prettierrc
View File

@@ -1,3 +1,9 @@
{
"tabWidth": 4
"tabWidth": 4,
"useTabs": false,
"endOfLine": "lf",
"trailingComma": "all",
"bracketSameLine": false,
"printWidth": 120,
"bracketSpacing": true
}

34
app/app.css
View File

@@ -5,8 +5,8 @@
@theme {
--font-sans:
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
"Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
"Noto Color Emoji";
}
:root {
@@ -48,16 +48,11 @@
--radius: 0.375rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}
@@ -100,16 +95,11 @@
--radius: 0.375rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl:
0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

8
app/components/app-layout.tsx
View File

@@ -14,9 +14,7 @@ interface AppLayoutProps {
}
export default function AppLayout({ children }: AppLayoutProps) {
let servers = Object.values(
useServerListStore(useShallow((state) => state.servers)),
);
let servers = Object.values(useServerListStore(useShallow((state) => state.servers)));
const matches = useMatches();
@@ -58,9 +56,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
</aside>
</ScrollArea>
</div>
<div className="col-start-2 row-start-1 col-span-1 row-span-1 overflow-hidden">
{list}
</div>
<div className="col-start-2 row-start-1 col-span-1 row-span-1 overflow-hidden">{list}</div>
<div className="col-start-1 row-start-2 col-span-2 row-span-1 mb-2 mx-2 min-w-fit z-1">
<UserStatus />

56
app/components/channel-area.tsx
View File

@@ -1,7 +1,4 @@
import {
useInfiniteQuery,
type QueryFunctionContext,
} from "@tanstack/react-query";
import { useInfiniteQuery, type QueryFunctionContext } from "@tanstack/react-query";
import type { Channel, Message, MessageId } from "~/lib/api/types";
import ChatMessage from "./chat-message";
import MessageBox from "./message-box";
@@ -17,31 +14,16 @@ export default function ChannelArea({ channel }: ChannelAreaProps) {
const fetchMessages = async ({ pageParam }: QueryFunctionContext) => {
return await import("~/lib/api/client/channel").then((m) =>
m.default.paginatedMessages(
channelId,
50,
pageParam as MessageId | undefined,
),
m.default.paginatedMessages(channelId, 50, pageParam as MessageId | undefined),
);
};
const {
data,
error,
fetchNextPage,
hasNextPage,
isFetching,
isFetchingNextPage,
isPending,
status,
} = useInfiniteQuery({
const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isPending, status } =
useInfiniteQuery({
queryKey: ["messages", channelId],
initialPageParam: undefined,
queryFn: fetchMessages,
getNextPageParam: (lastPage) =>
lastPage.length < 50
? undefined
: lastPage[lastPage.length - 1]?.id,
getNextPageParam: (lastPage) => (lastPage.length < 50 ? undefined : lastPage[lastPage.length - 1]?.id),
staleTime: Infinity,
});
@@ -63,10 +45,7 @@ export default function ChannelArea({ channel }: ChannelAreaProps) {
<div className="flex-1" />
<div className="flex flex-col-reverse overflow-auto gap-2 pb-2 pr-2">
{status === "success" && renderMessages(data.pages)}
<VisibleTrigger
triggerOnce={false}
onVisible={fetchNextPageVisible}
/>
<VisibleTrigger triggerOnce={false} onVisible={fetchNextPageVisible} />
</div>
</>
);
@@ -75,12 +54,8 @@ export default function ChannelArea({ channel }: ChannelAreaProps) {
return (
<>
<div className="flex flex-col size-full">
<div className="w-full min-h-12 border-b-2 flex items-center justify-center">
{channel?.name}
</div>
<div className="flex-1 overflow-y-auto flex flex-col pl-2 pr-0.5">
{messageArea}
</div>
<div className="w-full min-h-12 border-b-2 flex items-center justify-center">{channel?.name}</div>
<div className="flex-1 overflow-y-auto flex flex-col pl-2 pr-0.5">{messageArea}</div>
<div className="w-full">
<MessageBox channelId={channelId} />
</div>
@@ -95,22 +70,13 @@ function renderMessages(pages: Message[][]) {
const formatMessageDate = (date: Date) => {
const now = new Date();
const today = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
);
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
const messageDate = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate(),
);
const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
const capitalize = (str: string) =>
str.charAt(0).toUpperCase() + str.slice(1);
const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
if (messageDate.getTime() === today.getTime()) {
const rtf = new Intl.RelativeTimeFormat(undefined, {

53
app/components/chat-message-attachment.tsx
View File

@@ -10,12 +10,7 @@ import {
DialogTitle,
DialogTrigger,
} from "~/components/ui/dialog"; // Shadcn UI Dialog
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "~/components/ui/tooltip"; // Shadcn UI Tooltip
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip"; // Shadcn UI Tooltip
import type { UploadedFile } from "~/lib/api/types"; // Adjust path as needed
import { formatFileSize } from "~/lib/utils"; // Adjust path
import { FileIcon } from "./file-icon";
@@ -24,9 +19,7 @@ interface ChatMessageAttachmentProps {
file: UploadedFile;
}
export default function ChatMessageAttachment({
file,
}: ChatMessageAttachmentProps) {
export default function ChatMessageAttachment({ file }: ChatMessageAttachmentProps) {
if (file.contentType.startsWith("image/")) {
return <ImageAttachment file={file} />;
}
@@ -38,29 +31,17 @@ function GenericFileAttachment({ file }: ChatMessageAttachmentProps) {
<TooltipProvider delayDuration={100}>
<div className="flex items-center gap-3 rounded-lg border bg-card p-3 shadow-sm ">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md">
<FileIcon
className="h-8 w-8 text-muted-foreground"
contentType={file.contentType}
/>
<FileIcon className="h-8 w-8 text-muted-foreground" contentType={file.contentType} />
</div>
<div className="flex-1 overflow-hidden">
<p className="truncate text-sm font-medium text-card-foreground">
{file.filename}
</p>
<p className="text-xs text-muted-foreground">
{formatFileSize(file.size)}
</p>
<p className="truncate text-sm font-medium text-card-foreground">{file.filename}</p>
<p className="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
</div>
<div className="flex items-center gap-1">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" asChild>
<a
href={file.url}
target="_blank"
rel="noreferrer"
download={file.filename}
>
<a href={file.url} target="_blank" rel="noreferrer" download={file.filename}>
<Download className="h-4 w-4" />
<span className="sr-only">Download</span>
</a>
@@ -71,15 +52,9 @@ function GenericFileAttachment({ file }: ChatMessageAttachmentProps) {
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" asChild>
<a
href={file.url}
target="_blank"
rel="noreferrer"
>
<a href={file.url} target="_blank" rel="noreferrer">
<ExternalLink className="h-4 w-4" />
<span className="sr-only">
Open in new tab
</span>
<span className="sr-only">Open in new tab</span>
</a>
</Button>
</TooltipTrigger>
@@ -97,10 +72,7 @@ function ImageAttachment({ file }: ChatMessageAttachmentProps) {
<TooltipProvider delayDuration={100}>
<div className="group relative w-48 cursor-pointer sm:w-64">
<DialogTrigger asChild>
<AspectRatio
ratio={16 / 9}
className="overflow-hidden rounded-lg border bg-muted"
>
<AspectRatio ratio={16 / 9} className="overflow-hidden rounded-lg border bg-muted">
<img
src={file.url}
alt={file.filename}
@@ -121,9 +93,7 @@ function ImageAttachment({ file }: ChatMessageAttachmentProps) {
<DialogContent className="max-w-3xl p-0">
<DialogHeader className="p-4 pb-0">
<DialogTitle className="truncate">
{file.filename}
</DialogTitle>
<DialogTitle className="truncate">{file.filename}</DialogTitle>
</DialogHeader>
<div className="p-4 pt-0 max-h-[70vh] overflow-y-auto">
<img
@@ -135,8 +105,7 @@ function ImageAttachment({ file }: ChatMessageAttachmentProps) {
<DialogFooter className="flex-col items-stretch gap-2 border-t p-4 sm:flex-row sm:justify-end sm:space-x-2">
<Button variant="outline" asChild>
<a href={file.url} target="_blank" rel="noreferrer">
<ExternalLink className="mr-2 h-4 w-4" /> Open
original
<ExternalLink className="mr-2 h-4 w-4" /> Open original
</a>
</Button>
<Button asChild>

19
app/components/chat-message.tsx
View File

@@ -25,19 +25,11 @@ export default function ChatMessage({ message }: ChatMessageProps) {
const formatMessageDate = (date: Date) => {
const now = new Date();
const today = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
);
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
const messageDate = new Date(
date.getFullYear(),
date.getMonth(),
date.getDate(),
);
const messageDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
// Get localized time string
const timeString = date.toLocaleTimeString(undefined, {
@@ -45,8 +37,7 @@ export default function ChatMessage({ message }: ChatMessageProps) {
minute: "2-digit",
hour12: false,
});
const capitalize = (str: string) =>
str.charAt(0).toUpperCase() + str.slice(1);
const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);
if (messageDate.getTime() === today.getTime()) {
// Use Intl.RelativeTimeFormat for localized "Today"
@@ -96,9 +87,7 @@ export default function ChatMessage({ message }: ChatMessageProps) {
</div>
</div>
<div className="row-start-2 col-start-2 row-span-1 col-span-1">
<div className="wrap-break-word contain-inline-size">
{message.content}
</div>
<div className="wrap-break-word contain-inline-size">{message.content}</div>
<div className="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-start">
{message.attachments.map((file, i) => (
<div key={file.id}>

60
app/components/custom-ui/channel-list-item.tsx
View File

@@ -10,12 +10,7 @@ import { useGatewayStore } from "~/stores/gateway-store";
import { useUsersStore } from "~/stores/users-store";
import { useVoiceStateStore } from "~/stores/voice-state-store";
import { Button } from "../ui/button";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
} from "../ui/context-menu";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "../ui/context-menu";
import UserAvatar from "../user-avatar";
interface ChannelListItemProps {
@@ -41,11 +36,8 @@ function ServerCategory({ channel }: ChannelListItemProps) {
function ServerVoice({ channel }: ChannelListItemProps) {
const updateVoiceState = useGatewayStore((state) => state.updateVoiceState);
const voiceStateChannel = useVoiceStateStore(
(state) => state.activeChannel,
);
const channelVoiceState =
useChannelsVoiceStateStore((state) => state.channels[channel.id]) || {};
const voiceStateChannel = useVoiceStateStore((state) => state.activeChannel);
const channelVoiceState = useChannelsVoiceStateStore((state) => state.channels[channel.id]) || {};
const userIds = Object.keys(channelVoiceState.users ?? {});
const { users, fetchUsersIfNotPresent } = useUsersStore(
@@ -55,21 +47,14 @@ function ServerVoice({ channel }: ChannelListItemProps) {
})),
);
const channelUsers = React.useMemo(
() => userIds.map((userId) => users[userId]).filter(Boolean),
[userIds, users],
);
const channelUsers = React.useMemo(() => userIds.map((userId) => users[userId]).filter(Boolean), [userIds, users]);
React.useEffect(() => {
fetchUsersIfNotPresent(userIds);
}, [userIds]);
const onClick = () => {
if (
voiceStateChannel?.serverId === channel.serverId &&
voiceStateChannel.channelId === channel.id
)
return;
if (voiceStateChannel?.serverId === channel.serverId && voiceStateChannel.channelId === channel.id) return;
updateVoiceState(channel.serverId, channel.id);
};
@@ -78,12 +63,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
<>
<ContextMenu>
<ContextMenuTrigger asChild>
<Button
variant="secondary"
size="sm"
className="justify-start"
onClick={onClick}
>
<Button variant="secondary" size="sm" className="justify-start" onClick={onClick}>
<div className="flex items-center gap-2 max-w-72">
<div>
<Volume2 />
@@ -93,10 +73,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
</Button>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
variant="destructive"
onClick={() => onDeleteChannel(channel)}
>
<ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
Delete
</ContextMenuItem>
</ContextMenuContent>
@@ -104,10 +81,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
{channelUsers.length > 0 && (
<div className="ml-2 border-l-2 flex flex-col gap-1">
{channelUsers.map((user) => (
<div
key={user.id}
className="flex items-center gap-2 max-w-72 pl-4"
>
<div key={user.id} className="flex items-center gap-2 max-w-72 pl-4">
<UserAvatar user={user} className="size-6" />
{user.displayName || user.username}
</div>
@@ -120,10 +94,7 @@ function ServerVoice({ channel }: ChannelListItemProps) {
function ServerText({ channel }: ChannelListItemProps) {
return (
<NavLink
to={`/app/server/${channel.serverId}/${channel.id}`}
discover="none"
>
<NavLink to={`/app/server/${channel.serverId}/${channel.id}`} discover="none">
{({ isActive }) => (
<ContextMenu>
<ContextMenuTrigger asChild>
@@ -132,9 +103,7 @@ function ServerText({ channel }: ChannelListItemProps) {
size="sm"
className={cn(
"justify-start w-full",
isActive
? "bg-accent hover:bg-accent"
: "bg-secondary",
isActive ? "bg-accent hover:bg-accent" : "bg-secondary",
)}
>
<div className="flex items-center gap-2 max-w-72">
@@ -146,10 +115,7 @@ function ServerText({ channel }: ChannelListItemProps) {
</Button>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem
variant="destructive"
onClick={() => onDeleteChannel(channel)}
>
<ContextMenuItem variant="destructive" onClick={() => onDeleteChannel(channel)}>
Delete
</ContextMenuItem>
</ContextMenuContent>
@@ -159,9 +125,7 @@ function ServerText({ channel }: ChannelListItemProps) {
);
}
export default function ServerChannelListItem({
channel,
}: ChannelListItemProps) {
export default function ServerChannelListItem({ channel }: ChannelListItemProps) {
switch (channel.type) {
case ChannelType.SERVER_CATEGORY:
return <ServerCategory channel={channel} />;

6
app/components/custom-ui/create-server-button.tsx
View File

@@ -7,11 +7,7 @@ export function CreateServerButton() {
const onOpen = useModalStore((state) => state.onOpen);
return (
<Button
variant="outline"
size="none"
onClick={() => onOpen(ModalType.CREATE_SERVER)}
>
<Button variant="outline" size="none" onClick={() => onOpen(ModalType.CREATE_SERVER)}>
<CirclePlus className="size-8 m-2" />
</Button>
);

7
app/components/custom-ui/home-button.tsx
View File

@@ -6,12 +6,7 @@ export function HomeButton() {
return (
<NavLink to={`/app/@me`}>
{({ isActive }) => (
<Button
variant="outline"
size="none"
asChild
className={isActive ? "bg-accent size-12" : "size-12"}
>
<Button variant="outline" size="none" asChild className={isActive ? "bg-accent size-12" : "size-12"}>
<div>
<Discord className="size-full p-2" />
</div>

16
app/components/custom-ui/online-status.tsx
View File

@@ -10,18 +10,10 @@ export function OnlineStatus({
<div className="relative">
<div {...props}></div>
<div className="absolute bottom-0 right-0 bg-background rounded-full p-0.5 size-1/2">
{status === "online" && (
<Circle className="size-full stroke-emerald-400 fill-emerald-400" />
)}
{status === "dnd" && (
<CircleMinus className="size-full stroke-red-400 stroke-3" />
)}
{status === "idle" && (
<Moon className="size-full stroke-amber-400 fill-amber-400" />
)}
{status === "offline" && (
<Circle className="size-full stroke-gray-400 stroke-3" />
)}
{status === "online" && <Circle className="size-full stroke-emerald-400 fill-emerald-400" />}
{status === "dnd" && <CircleMinus className="size-full stroke-red-400 stroke-3" />}
{status === "idle" && <Moon className="size-full stroke-amber-400 fill-amber-400" />}
{status === "offline" && <Circle className="size-full stroke-gray-400 stroke-3" />}
</div>
</div>
);

7
app/components/custom-ui/password-input.tsx
View File

@@ -5,8 +5,7 @@ import { Input } from "../ui/input";
export function PasswordInput(props: React.ComponentProps<"input">) {
const [showPassword, setShowPassword] = React.useState(false);
const disabled =
props.value === "" || props.value === undefined || props.disabled;
const disabled = props.value === "" || props.value === undefined || props.disabled;
return (
<div className="relative">
@@ -24,9 +23,7 @@ export function PasswordInput(props: React.ComponentProps<"input">) {
) : (
<EyeOffIcon className="h-4 w-4" aria-hidden="true" />
)}
<span className="sr-only">
{showPassword ? "Hide password" : "Show password"}
</span>
<span className="sr-only">{showPassword ? "Hide password" : "Show password"}</span>
</Button>
<style>
{`

25
app/components/custom-ui/private-channel-list-item.tsx
View File

@@ -12,16 +12,10 @@ interface PrivateChannelListItemProps {
channel: RecipientChannel;
}
export default function PrivateChannelListItem({
channel,
}: PrivateChannelListItemProps) {
export default function PrivateChannelListItem({ channel }: PrivateChannelListItemProps) {
const currentUserId = useUsersStore((state) => state.currentUserId);
const recipients = channel.recipients.filter(
(recipient) => recipient.id !== currentUserId,
);
const renderSystemBadge =
recipients.some((recipient) => recipient.system) &&
recipients.length === 1;
const recipients = channel.recipients.filter((recipient) => recipient.id !== currentUserId);
const renderSystemBadge = recipients.some((recipient) => recipient.system) && recipients.length === 1;
return (
<>
@@ -40,21 +34,12 @@ export default function PrivateChannelListItem({
<div>
<OnlineStatus status="online">
<UserAvatar
user={channel.recipients.find(
(recipient) =>
recipient.id !== currentUserId,
)}
user={channel.recipients.find((recipient) => recipient.id !== currentUserId)}
/>
</OnlineStatus>
</div>
<div className="truncate">
{recipients
.map(
(recipient) =>
recipient.displayName ||
recipient.username,
)
.join(", ")}
{recipients.map((recipient) => recipient.displayName || recipient.username).join(", ")}
</div>
{renderSystemBadge && (
<Badge variant="default">

12
app/components/custom-ui/server-button.tsx
View File

@@ -12,18 +12,10 @@ export function ServerButton({ server }: ServerButtonProps) {
return (
<NavLink to={`/app/server/${server.id}`}>
{({ isActive }) => (
<Button
variant="outline"
size="none"
asChild
className={isActive ? "bg-accent" : ""}
>
<Button variant="outline" size="none" asChild className={isActive ? "bg-accent" : ""}>
<div>
<Avatar className="size-12 rounded-none flex items-center justify-center">
<AvatarImage
src={server.iconUrl}
className="rounded-none"
/>
<AvatarImage src={server.iconUrl} className="rounded-none" />
<AvatarFallback>
<div>{getFirstLetters(server.name, 4)}</div>
</AvatarFallback>

4
app/components/custom-ui/settings-button.tsx
View File

@@ -37,9 +37,7 @@ export function SettingsButton() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={onOpenSettings}>
Settings
</DropdownMenuItem>
<DropdownMenuItem onClick={onOpenSettings}>Settings</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive" onClick={onLogout}>
Logout

20
app/components/custom-ui/text-box.tsx
View File

@@ -1,13 +1,7 @@
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useRef,
} from "react";
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
import { cn } from "~/lib/utils";
export interface TextBoxProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
export interface TextBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "value"> {
value: string;
onChange: (value: string) => void;
placeholder?: string;
@@ -47,10 +41,7 @@ export const TextBox = forwardRef<HTMLDivElement, TextBoxProps>(
localRef.current.textContent = newValue;
// Clear any <br> elements if the content is empty
if (
!newValue &&
localRef.current.innerHTML.includes("<br>")
) {
if (!newValue && localRef.current.innerHTML.includes("<br>")) {
localRef.current.innerHTML = "";
}
}
@@ -94,10 +85,7 @@ export const TextBox = forwardRef<HTMLDivElement, TextBoxProps>(
return (
<div
className={cn(
"overflow-y-auto overflow-x-hidden w-full min-h-6",
wrapperClassName,
)}
className={cn("overflow-y-auto overflow-x-hidden w-full min-h-6", wrapperClassName)}
onClick={() => localRef.current?.focus()}
>
<div

24
app/components/custom-ui/user-status.tsx
View File

@@ -10,23 +10,15 @@ import UserAvatar from "../user-avatar";
import { OnlineStatus } from "./online-status";
import { SettingsButton } from "./settings-button";
function VoiceStatus({
voiceState,
}: {
voiceState: { serverId: string; channelId: string };
}) {
function VoiceStatus({ voiceState }: { voiceState: { serverId: string; channelId: string } }) {
// const webrtcState = useWebRTCStore(state => state.status)
const leaveVoiceChannel = () => {
useVoiceStateStore.getState().leaveVoiceChannel();
};
const channel = useServerChannelsStore(
(state) => state.channels[voiceState.serverId]?.[voiceState.channelId],
);
const server = useServerListStore(
(state) => state.servers[voiceState.serverId],
);
const channel = useServerChannelsStore((state) => state.channels[voiceState.serverId]?.[voiceState.channelId]);
const server = useServerListStore((state) => state.servers[voiceState.serverId]);
return (
<div className="gap-1 flex justify-between items-center ">
@@ -63,14 +55,8 @@ export default function UserStatus() {
</OnlineStatus>
<div className="flex flex-col text-sm justify-center">
<div className="truncate max-w-30">
{user?.displayName ||
user?.username ||
"Unknown user"}
</div>
<span className="text-muted-foreground text-xs">
@{user?.username}
</span>
<div className="truncate max-w-30">{user?.displayName || user?.username || "Unknown user"}</div>
<span className="text-muted-foreground text-xs">@{user?.username}</span>
</div>
</div>
<div>

12
app/components/file-icon.tsx
View File

@@ -31,25 +31,19 @@ export function FileIcon({ contentType, className, ...props }: FileIconProps) {
}
if (
contentType.startsWith("application/vnd.ms-excel") ||
contentType.startsWith(
"application/vnd.openxmlformats-officedocument.spreadsheetml",
)
contentType.startsWith("application/vnd.openxmlformats-officedocument.spreadsheetml")
) {
return <FileSpreadsheet {...commonProps} />; // Could use a specific Excel icon if available/desired
}
if (
contentType.startsWith("application/msword") ||
contentType.startsWith(
"application/vnd.openxmlformats-officedocument.wordprocessingml",
)
contentType.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml")
) {
return <FileText {...commonProps} />;
}
if (
contentType.startsWith("application/vnd.ms-powerpoint") ||
contentType.startsWith(
"application/vnd.openxmlformats-officedocument.presentationml",
)
contentType.startsWith("application/vnd.openxmlformats-officedocument.presentationml")
) {
return <FileText {...commonProps} />;
}

38
app/components/message-box.tsx
View File

@@ -7,12 +7,7 @@ import type { Uuid } from "~/lib/api/types"; // Adjust path
import { cn, formatFileSize } from "~/lib/utils"; // Adjust path
import TextBox from "./custom-ui/text-box"; // Adjust path, assuming TextBox is in ./custom-ui/
import { Button } from "./ui/button"; // Adjust path
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip"; // Adjust path
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"; // Adjust path
export interface MessageBoxProps {
channelId: string;
@@ -87,8 +82,7 @@ export default function MessageBox({ channelId }: MessageBoxProps) {
setTimeout(() => textBoxRef.current?.focus(), 0);
}, [channelId]);
const canSend =
(text.trim().length > 0 || attachments.length > 0) && !isLoading;
const canSend = (text.trim().length > 0 || attachments.length > 0) && !isLoading;
const attachmentsRemaining = 10 - attachments.length;
return (
@@ -100,17 +94,10 @@ export default function MessageBox({ channelId }: MessageBoxProps) {
key={`${file.name}-${file.lastModified}-${i}`}
className="flex items-center gap-2.5 rounded-md border bg-card p-2 text-sm shadow-sm"
>
<FileIcon
contentType={file.type}
className="h-7 w-7 flex-shrink-0 text-muted-foreground"
/>
<FileIcon contentType={file.type} className="h-7 w-7 flex-shrink-0 text-muted-foreground" />
<div className="min-w-0 flex-1">
<p className="truncate font-medium text-card-foreground">
{file.name}
</p>
<p className="text-xs text-muted-foreground">
{formatFileSize(file.size)}
</p>
<p className="truncate font-medium text-card-foreground">{file.name}</p>
<p className="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
</div>
<TooltipProvider delayDuration={100}>
<Tooltip>
@@ -164,9 +151,7 @@ export default function MessageBox({ channelId }: MessageBoxProps) {
size="icon"
variant="ghost"
onClick={addAttachment}
disabled={
attachments.length >= 10 || isLoading
}
disabled={attachments.length >= 10 || isLoading}
aria-label="Add attachment"
>
<Paperclip className="h-5 w-5" />
@@ -177,10 +162,7 @@ export default function MessageBox({ channelId }: MessageBoxProps) {
{attachments.length >= 10 ? (
<p>Maximum 10 attachments</p>
) : (
<p>
Add attachment ({attachmentsRemaining}{" "}
remaining)
</p>
<p>Add attachment ({attachmentsRemaining} remaining)</p>
)}
</TooltipContent>
</Tooltip>
@@ -207,11 +189,7 @@ export default function MessageBox({ channelId }: MessageBoxProps) {
disabled={!canSend}
aria-label="Send message"
>
{isLoading ? (
<Loader2 className="h-5 w-5 animate-spin" />
) : (
<Send className="h-5 w-5" />
)}
{isLoading ? <Loader2 className="h-5 w-5 animate-spin" /> : <Send className="h-5 w-5" />}
</Button>
</div>
</div>

78
app/components/modals/create-server-channel-modal.tsx
View File

@@ -2,11 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { ChannelType } from "~/lib/api/types";
import {
ModalType,
useModalStore,
type CreateServerChannelModalData,
} from "~/stores/modal-store";
import { ModalType, useModalStore, type CreateServerChannelModalData } from "~/stores/modal-store";
import { Button } from "../ui/button";
import {
Dialog,
@@ -17,22 +13,9 @@ import {
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "../ui/form";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { Input } from "../ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
const schema = z.object({
name: z.string().min(1).max(32),
@@ -58,10 +41,7 @@ export default function CreateServerChannelModal() {
const onSubmit = async (values: z.infer<typeof schema>) => {
const response = await import("~/lib/api/client/server").then((m) =>
m.default.createChannel(
(data as CreateServerChannelModalData["data"]).serverId,
values,
),
m.default.createChannel((data as CreateServerChannelModalData["data"]).serverId, values),
);
form.reset();
@@ -73,28 +53,17 @@ export default function CreateServerChannelModal() {
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Create channel</DialogTitle>
<DialogDescription>
Give your channel a name and choose a channel type.
</DialogDescription>
<DialogDescription>Give your channel a name and choose a channel type.</DialogDescription>
</DialogHeader>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel
required={
!schema.shape.name.isOptional()
}
>
Name
</FormLabel>
<FormLabel required={!schema.shape.name.isOptional()}>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
@@ -107,17 +76,8 @@ export default function CreateServerChannelModal() {
name="type"
render={({ field }) => (
<FormItem>
<FormLabel
required={
!schema.shape.type.isOptional()
}
>
Type
</FormLabel>
<Select
defaultValue={field.value}
onValueChange={field.onChange}
>
<FormLabel required={!schema.shape.type.isOptional()}>Type</FormLabel>
<Select defaultValue={field.value} onValueChange={field.onChange}>
<FormControl>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select a channel type" />
@@ -125,15 +85,10 @@ export default function CreateServerChannelModal() {
</FormControl>
<SelectContent>
{Object.entries({
[ChannelType.SERVER_TEXT]:
"Text",
[ChannelType.SERVER_VOICE]:
"Voice",
[ChannelType.SERVER_TEXT]: "Text",
[ChannelType.SERVER_VOICE]: "Voice",
}).map(([type, label]) => (
<SelectItem
key={type}
value={type}
>
<SelectItem key={type} value={type}>
{label}
</SelectItem>
))}
@@ -149,13 +104,8 @@ export default function CreateServerChannelModal() {
Close
</Button>
</DialogClose>
<Button
type="submit"
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting
? "Creating..."
: "Create"}
<Button type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? "Creating..." : "Create"}
</Button>
</DialogFooter>
</form>

35
app/components/modals/create-server-invite-modal.tsx
View File

@@ -3,21 +3,13 @@ import React from "react";
import { useOrigin } from "~/hooks/use-origin";
import { ModalType, useModalStore } from "~/stores/modal-store";
import { Button } from "../ui/button";
import {
Dialog,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
export default function CreateServerInviteModal() {
const { type, data, isOpen, onClose } = useModalStore();
const [inviteCode, setInviteCode] = React.useState<string | undefined>(
undefined,
);
const [inviteCode, setInviteCode] = React.useState<string | undefined>(undefined);
const origin = useOrigin();
const [isCopied, setCopied] = React.useState(false);
@@ -30,9 +22,7 @@ export default function CreateServerInviteModal() {
const regenerateInviteCode = () => {
import("~/lib/api/client/server")
.then((m) =>
m.default.createInvite((data as { serverId: string }).serverId),
)
.then((m) => m.default.createInvite((data as { serverId: string }).serverId))
.then((invite) => {
setInviteCode(invite.code);
});
@@ -48,11 +38,7 @@ export default function CreateServerInviteModal() {
React.useEffect(() => {
if (isModalOpen) {
import("~/lib/api/client/server")
.then((m) =>
m.default.createInvite(
(data as { serverId: string }).serverId,
),
)
.then((m) => m.default.createInvite((data as { serverId: string }).serverId))
.then((invite) => {
setInviteCode(invite.code);
});
@@ -72,20 +58,11 @@ export default function CreateServerInviteModal() {
<div className="flex items-center gap-x-2">
<Input value={inviteLink} readOnly />
<Button variant="ghost" size="icon" onClick={onCopy}>
{isCopied ? (
<Check className="size-4" />
) : (
<Copy className="size-4" />
)}
{isCopied ? <Check className="size-4" /> : <Copy className="size-4" />}
</Button>
</div>
<DialogFooter>
<Button
variant="link"
size="none"
className="h-9 py-2"
onClick={regenerateInviteCode}
>
<Button variant="link" size="none" className="h-9 py-2" onClick={regenerateInviteCode}>
Generate a new invite
<RefreshCw />
</Button>

48
app/components/modals/create-server-modal.tsx
View File

@@ -14,14 +14,7 @@ import {
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "../ui/form";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { IconUploadField } from "../ui/icon-upload-field";
import { Input } from "../ui/input";
@@ -64,34 +57,20 @@ export default function CreateServerModal() {
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Create server</DialogTitle>
<DialogDescription>
Give your server a name and choose a server icon.
</DialogDescription>
<DialogDescription>Give your server a name and choose a server icon.</DialogDescription>
</DialogHeader>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="icon"
render={({ field, fieldState }) => (
<FormItem>
<FormLabel
required={
!schema.shape.icon.isOptional()
}
>
Icon
</FormLabel>
<FormLabel required={!schema.shape.icon.isOptional()}>Icon</FormLabel>
<FormControl>
<div className="flex flex-col items-center justify-center">
<IconUploadField
field={field}
error={fieldState.error}
/>
<IconUploadField field={field} error={fieldState.error} />
</div>
</FormControl>
<FormMessage />
@@ -103,13 +82,7 @@ export default function CreateServerModal() {
name="name"
render={({ field }) => (
<FormItem>
<FormLabel
required={
!schema.shape.name.isOptional()
}
>
Name
</FormLabel>
<FormLabel required={!schema.shape.name.isOptional()}>Name</FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
@@ -123,13 +96,8 @@ export default function CreateServerModal() {
Close
</Button>
</DialogClose>
<Button
type="submit"
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting
? "Creating..."
: "Create"}
<Button type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? "Creating..." : "Create"}
</Button>
</DialogFooter>
</form>

17
app/components/modals/delete-server-confirm-modal.tsx
View File

@@ -1,13 +1,6 @@
import { ModalType, useModalStore } from "~/stores/modal-store";
import { Button } from "../ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
export default function DeleteServerConfirmModal() {
const { type, data, isOpen, onClose } = useModalStore();
@@ -19,9 +12,7 @@ export default function DeleteServerConfirmModal() {
};
const onConfirm = async () => {
await import("~/lib/api/client/server").then((m) =>
m.default.delet((data as { serverId: string }).serverId),
);
await import("~/lib/api/client/server").then((m) => m.default.delet((data as { serverId: string }).serverId));
onClose();
};
@@ -30,9 +21,7 @@ export default function DeleteServerConfirmModal() {
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Are you sure?</DialogTitle>
<DialogDescription>
This action cannot be undone.
</DialogDescription>
<DialogDescription>This action cannot be undone.</DialogDescription>
</DialogHeader>
<DialogFooter className="justify-between">

49
app/components/modals/update-profile-modal.tsx
View File

@@ -16,14 +16,7 @@ import {
DialogHeader,
DialogTitle,
} from "../ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "../ui/form";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../ui/form";
import { IconUploadField } from "../ui/icon-upload-field";
import { Input } from "../ui/input";
@@ -52,8 +45,7 @@ export default function UpdateProfileModal() {
if (!values) return;
let avatarId: string | null | undefined =
values.avatar === null ? null : undefined;
let avatarId: string | null | undefined = values.avatar === null ? null : undefined;
if (values.avatar) {
avatarId = (await file.uploadFile(values.avatar))[0];
}
@@ -76,29 +68,18 @@ export default function UpdateProfileModal() {
</DialogHeader>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="avatar"
render={({ field, fieldState }) => (
<FormItem>
<FormLabel
required={
!schema.shape.avatar.isOptional()
}
>
Avatar
</FormLabel>
<FormLabel required={!schema.shape.avatar.isOptional()}>Avatar</FormLabel>
<FormControl>
<div className="flex flex-col items-center justify-center">
<IconUploadField
defaultPreview={user?.avatarUrl}
formDefaultValue={
user?.avatarUrl
}
formDefaultValue={user?.avatarUrl}
field={field}
error={fieldState.error}
/>
@@ -113,18 +94,11 @@ export default function UpdateProfileModal() {
name="displayName"
render={({ field }) => (
<FormItem>
<FormLabel
required={
!schema.shape.displayName.isOptional()
}
>
<FormLabel required={!schema.shape.displayName.isOptional()}>
Display Name
</FormLabel>
<FormControl>
<Input
{...field}
placeholder={user?.displayName}
/>
<Input {...field} placeholder={user?.displayName} />
</FormControl>
<FormMessage />
</FormItem>
@@ -136,13 +110,8 @@ export default function UpdateProfileModal() {
Close
</Button>
</DialogClose>
<Button
type="submit"
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting
? "Updating..."
: "Update"}
<Button type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? "Updating..." : "Update"}
</Button>
</DialogFooter>
</form>

13
app/components/theme/theme-provider.tsx
View File

@@ -26,9 +26,7 @@ export function ThemeProvider({
storageKey = "ui-theme",
...props
}: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
);
const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
useEffect(() => {
const root = window.document.documentElement;
@@ -36,11 +34,7 @@ export function ThemeProvider({
root.classList.remove("light", "dark");
if (theme === "system") {
const systemTheme = window.matchMedia(
"(prefers-color-scheme: dark)",
).matches
? "dark"
: "light";
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
root.classList.add(systemTheme);
return;
@@ -67,8 +61,7 @@ export function ThemeProvider({
export const useTheme = () => {
const context = useContext(ThemeProviderContext);
if (context === undefined)
throw new Error("useTheme must be used within a ThemeProvider");
if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
return context;
};

17
app/components/theme/theme-toggle.tsx
View File

@@ -23,19 +23,10 @@ export function ThemeToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuRadioGroup
value={theme}
onValueChange={(value) => setTheme(value as Theme)}
>
<DropdownMenuRadioItem value="light">
Light
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="dark">
Dark
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="system">
System
</DropdownMenuRadioItem>
<DropdownMenuRadioGroup value={theme} onValueChange={(value) => setTheme(value as Theme)}>
<DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>

4
app/components/ui/aspect-ratio.tsx
View File

@@ -1,8 +1,6 @@
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
function AspectRatio({
...props
}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
}

25
app/components/ui/avatar.tsx
View File

@@ -3,26 +3,17 @@ import * as React from "react";
import { cn } from "~/lib/utils";
function Avatar({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
return (
<AvatarPrimitive.Root
data-slot="avatar"
className={cn(
"relative flex size-8 shrink-0 overflow-hidden rounded-full",
className,
)}
className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
{...props}
/>
);
}
function AvatarImage({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
return (
<AvatarPrimitive.Image
data-slot="avatar-image"
@@ -32,17 +23,11 @@ function AvatarImage({
);
}
function AvatarFallback({
className,
...props
}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
return (
<AvatarPrimitive.Fallback
data-slot="avatar-fallback"
className={cn(
"bg-muted flex size-full items-center justify-center rounded-full",
className,
)}
className={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
{...props}
/>
);

20
app/components/ui/badge.tsx
View File

@@ -9,14 +9,11 @@ const badgeVariants = cva(
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary:
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
destructive:
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
},
},
defaultVariants: {
@@ -30,17 +27,10 @@ function Badge({
variant,
asChild = false,
...props
}: React.ComponentProps<"span"> &
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
const Comp = asChild ? Slot : "span";
return (
<Comp
data-slot="badge"
className={cn(badgeVariants({ variant }), className)}
{...props}
/>
);
return <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />;
}
export { Badge, badgeVariants };

14
app/components/ui/button.tsx
View File

@@ -9,14 +9,12 @@ const buttonVariants = cva(
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
destructive:
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
secondary:
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
},
@@ -47,13 +45,7 @@ function Button({
}) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }))}
{...props}
/>
);
return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
}
export { Button, buttonVariants };

45
app/components/ui/card.tsx
View File

@@ -29,64 +29,31 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
}
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-title"
className={cn("leading-none font-semibold", className)}
{...props}
/>
);
return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
}
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-description"
className={cn("text-muted-foreground text-sm", className)}
{...props}
/>
);
return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
}
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-action"
className={cn(
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
className,
)}
className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
{...props}
/>
);
}
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-content"
className={cn("px-6", className)}
{...props}
/>
);
return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
}
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
{...props}
/>
<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
);
}
export {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
};
export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

79
app/components/ui/context-menu.tsx
View File

@@ -4,57 +4,28 @@ import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
import { cn } from "~/lib/utils";
function ContextMenu({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
function ContextMenu({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
}
function ContextMenuTrigger({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
return (
<ContextMenuPrimitive.Trigger
data-slot="context-menu-trigger"
{...props}
/>
);
function ContextMenuTrigger({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
return <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />;
}
function ContextMenuGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
return (
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
);
function ContextMenuGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
}
function ContextMenuPortal({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
return (
<ContextMenuPrimitive.Portal
data-slot="context-menu-portal"
{...props}
/>
);
function ContextMenuPortal({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
}
function ContextMenuSub({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
function ContextMenuSub({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
}
function ContextMenuRadioGroup({
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
return (
<ContextMenuPrimitive.RadioGroup
data-slot="context-menu-radio-group"
{...props}
/>
);
function ContextMenuRadioGroup({ ...props }: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
}
function ContextMenuSubTrigger({
@@ -81,10 +52,7 @@ function ContextMenuSubTrigger({
);
}
function ContextMenuSubContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
function ContextMenuSubContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
return (
<ContextMenuPrimitive.SubContent
data-slot="context-menu-sub-content"
@@ -97,10 +65,7 @@ function ContextMenuSubContent({
);
}
function ContextMenuContent({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
return (
<ContextMenuPrimitive.Portal>
<ContextMenuPrimitive.Content
@@ -199,19 +164,13 @@ function ContextMenuLabel({
<ContextMenuPrimitive.Label
data-slot="context-menu-label"
data-inset={inset}
className={cn(
"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className,
)}
className={cn("text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
{...props}
/>
);
}
function ContextMenuSeparator({
className,
...props
}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
return (
<ContextMenuPrimitive.Separator
data-slot="context-menu-separator"
@@ -221,17 +180,11 @@ function ContextMenuSeparator({
);
}
function ContextMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="context-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className,
)}
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props}
/>
);

42
app/components/ui/dialog.tsx
View File

@@ -4,34 +4,23 @@ import * as React from "react";
import { cn } from "~/lib/utils";
function Dialog({
...props
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
return <DialogPrimitive.Root data-slot="dialog" {...props} />;
}
function DialogTrigger({
...props
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
}
function DialogPortal({
...props
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
}
function DialogClose({
...props
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
}
function DialogOverlay({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
return (
<DialogPrimitive.Overlay
data-slot="dialog-overlay"
@@ -44,11 +33,7 @@ function DialogOverlay({
);
}
function DialogContent({
className,
children,
...props
}: React.ComponentProps<typeof DialogPrimitive.Content>) {
function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>) {
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay />
@@ -74,10 +59,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="dialog-header"
className={cn(
"flex flex-col gap-2 text-center sm:text-left",
className,
)}
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
{...props}
/>
);
@@ -93,10 +75,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
);
}
function DialogTitle({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Title>) {
function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
return (
<DialogPrimitive.Title
data-slot="dialog-title"
@@ -106,10 +85,7 @@ function DialogTitle({
);
}
function DialogDescription({
className,
...props
}: React.ComponentProps<typeof DialogPrimitive.Description>) {
function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
return (
<DialogPrimitive.Description
data-slot="dialog-description"

76
app/components/ui/dropdown-menu.tsx
View File

@@ -4,32 +4,16 @@ import * as React from "react";
import { cn } from "~/lib/utils";
function DropdownMenu({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
}
function DropdownMenuPortal({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return (
<DropdownMenuPrimitive.Portal
data-slot="dropdown-menu-portal"
{...props}
/>
);
function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />;
}
function DropdownMenuTrigger({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return (
<DropdownMenuPrimitive.Trigger
data-slot="dropdown-menu-trigger"
{...props}
/>
);
function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
}
function DropdownMenuContent({
@@ -52,15 +36,8 @@ function DropdownMenuContent({
);
}
function DropdownMenuGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return (
<DropdownMenuPrimitive.Group
data-slot="dropdown-menu-group"
{...props}
/>
);
function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
}
function DropdownMenuItem({
@@ -112,15 +89,8 @@ function DropdownMenuCheckboxItem({
);
}
function DropdownMenuRadioGroup({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return (
<DropdownMenuPrimitive.RadioGroup
data-slot="dropdown-menu-radio-group"
{...props}
/>
);
function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
}
function DropdownMenuRadioItem({
@@ -158,19 +128,13 @@ function DropdownMenuLabel({
<DropdownMenuPrimitive.Label
data-slot="dropdown-menu-label"
data-inset={inset}
className={cn(
"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
className,
)}
className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
{...props}
/>
);
}
function DropdownMenuSeparator({
className,
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
return (
<DropdownMenuPrimitive.Separator
data-slot="dropdown-menu-separator"
@@ -180,28 +144,18 @@ function DropdownMenuSeparator({
);
}
function DropdownMenuShortcut({
className,
...props
}: React.ComponentProps<"span">) {
function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">) {
return (
<span
data-slot="dropdown-menu-shortcut"
className={cn(
"text-muted-foreground ml-auto text-xs tracking-widest",
className,
)}
className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
{...props}
/>
);
}
function DropdownMenuSub({
...props
}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return (
<DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
);
function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
}
function DropdownMenuSubTrigger({

41
app/components/ui/form.tsx
View File

@@ -23,9 +23,7 @@ type FormFieldContextValue<
name: TName;
};
const FormFieldContext = React.createContext<FormFieldContextValue>(
{} as FormFieldContextValue,
);
const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
const FormField = <
TFieldValues extends FieldValues = FieldValues,
@@ -67,20 +65,14 @@ type FormItemContextValue = {
id: string;
};
const FormItemContext = React.createContext<FormItemContextValue>(
{} as FormItemContextValue,
);
const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
function FormItem({ className, ...props }: React.ComponentProps<"div">) {
const id = React.useId();
return (
<FormItemContext.Provider value={{ id }}>
<div
data-slot="form-item"
className={cn("grid gap-2", className)}
{...props}
/>
<div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
</FormItemContext.Provider>
);
}
@@ -107,18 +99,13 @@ function FormLabel({
}
function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
const { error, formItemId, formDescriptionId, formMessageId } =
useFormField();
const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return (
<Slot
data-slot="form-control"
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
aria-invalid={!!error}
{...props}
/>
@@ -147,24 +134,10 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
}
return (
<p
data-slot="form-message"
id={formMessageId}
className={cn("text-destructive text-sm", className)}
{...props}
>
<p data-slot="form-message" id={formMessageId} className={cn("text-destructive text-sm", className)} {...props}>
{body}
</p>
);
}
export {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
useFormField,
};
export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

27
app/components/ui/icon-upload-field.tsx
View File

@@ -87,8 +87,7 @@ export function IconUploadField({
// Visibility for the "Remove" button: show if there's a File or a URL string in field.value
const showRemoveButton =
(!!field.value &&
(field.value instanceof File || typeof field.value === "string")) ||
(!!field.value && (field.value instanceof File || typeof field.value === "string")) ||
(formDefaultValue && field.value === undefined);
// Visibility for the "Reset to Default" button
@@ -96,8 +95,7 @@ export function IconUploadField({
// Is current value different from the formDefaultValue?
// (A File object is always different from a URL string/null/undefined default)
const isDifferentFromDefault =
(field.value instanceof File ||
(field.value !== formDefaultValue && field.value !== undefined)) &&
(field.value instanceof File || (field.value !== formDefaultValue && field.value !== undefined)) &&
formDefaultValue;
const showResetButton = canReset && isDifferentFromDefault;
@@ -106,9 +104,7 @@ export function IconUploadField({
<div
ref={field.ref}
className={`relative ${previewContainerClassName} border-2 ${
error
? "border-destructive"
: "border-dashed border-muted-foreground"
error ? "border-destructive" : "border-dashed border-muted-foreground"
} flex items-center justify-center cursor-pointer hover:border-primary transition-colors overflow-hidden`}
onClick={triggerFileInput}
onKeyDown={(e) => {
@@ -124,15 +120,9 @@ export function IconUploadField({
aria-describedby={error ? `${field.name}-error` : undefined}
>
{previewUrl ? (
<img
src={previewUrl}
alt="Icon preview"
className="w-full h-full object-cover"
/>
<img src={previewUrl} alt="Icon preview" className="w-full h-full object-cover" />
) : (
<ImagePlus
className={`w-10 h-10 ${error ? "text-destructive" : "text-muted-foreground"}`}
/>
<ImagePlus className={`w-10 h-10 ${error ? "text-destructive" : "text-muted-foreground"}`} />
)}
<input
type="file"
@@ -152,12 +142,7 @@ export function IconUploadField({
</Button> */}
{showRemoveButton && (
<Button
type="button"
variant="destructive"
size="sm"
onClick={handleRemoveImage}
>
<Button type="button" variant="destructive" size="sm" onClick={handleRemoveImage}>
<XCircle className="mr-2 h-4 w-4" />
Remove
</Button>

5
app/components/ui/label.tsx
View File

@@ -5,10 +5,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
import { cn } from "~/lib/utils";
function Label({
className,
...props
}: React.ComponentProps<typeof LabelPrimitive.Root>) {
function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
return (
<LabelPrimitive.Root
data-slot="label"

6
app/components/ui/scroll-area.tsx
View File

@@ -14,11 +14,7 @@ function ScrollArea({
viewportRef?: React.Ref<HTMLDivElement>;
}) {
return (
<ScrollAreaPrimitive.Root
data-slot="scroll-area"
className={cn("relative", className)}
{...props}
>
<ScrollAreaPrimitive.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
<ScrollAreaPrimitive.Viewport
ref={viewportRef}
data-slot="scroll-area-viewport"

53
app/components/ui/select.tsx
View File

@@ -4,21 +4,15 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import { cn } from "~/lib/utils";
function Select({
...props
}: React.ComponentProps<typeof SelectPrimitive.Root>) {
function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
return <SelectPrimitive.Root data-slot="select" {...props} />;
}
function SelectGroup({
...props
}: React.ComponentProps<typeof SelectPrimitive.Group>) {
function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}
function SelectValue({
...props
}: React.ComponentProps<typeof SelectPrimitive.Value>) {
function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}
@@ -83,27 +77,17 @@ function SelectContent({
);
}
function SelectLabel({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Label>) {
function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
return (
<SelectPrimitive.Label
data-slot="select-label"
className={cn(
"text-muted-foreground px-2 py-1.5 text-xs",
className,
)}
className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
{...props}
/>
);
}
function SelectItem({
className,
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Item>) {
function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
return (
<SelectPrimitive.Item
data-slot="select-item"
@@ -123,33 +107,21 @@ function SelectItem({
);
}
function SelectSeparator({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn(
"bg-border pointer-events-none -mx-1 my-1 h-px",
className,
)}
className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
{...props}
/>
);
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
return (
<SelectPrimitive.ScrollUpButton
data-slot="select-scroll-up-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
className={cn("flex cursor-default items-center justify-center py-1", className)}
{...props}
>
<ChevronUpIcon className="size-4" />
@@ -164,10 +136,7 @@ function SelectScrollDownButton({
return (
<SelectPrimitive.ScrollDownButton
data-slot="select-scroll-down-button"
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
className={cn("flex cursor-default items-center justify-center py-1", className)}
{...props}
>
<ChevronDownIcon className="size-4" />

34
app/components/ui/tabs.tsx
View File

@@ -3,23 +3,11 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "~/lib/utils";
function Tabs({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Root>) {
return (
<TabsPrimitive.Root
data-slot="tabs"
className={cn("flex flex-col gap-2", className)}
{...props}
/>
);
function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
return <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col gap-2", className)} {...props} />;
}
function TabsList({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.List>) {
function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
return (
<TabsPrimitive.List
data-slot="tabs-list"
@@ -32,10 +20,7 @@ function TabsList({
);
}
function TabsTrigger({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
return (
<TabsPrimitive.Trigger
data-slot="tabs-trigger"
@@ -48,16 +33,9 @@ function TabsTrigger({
);
}
function TabsContent({
className,
...props
}: React.ComponentProps<typeof TabsPrimitive.Content>) {
function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
return (
<TabsPrimitive.Content
data-slot="tabs-content"
className={cn("flex-1 outline-none", className)}
{...props}
/>
<TabsPrimitive.Content data-slot="tabs-content" className={cn("flex-1 outline-none", className)} {...props} />
);
}

21
app/components/ui/tooltip.tsx
View File

@@ -3,22 +3,11 @@ import * as React from "react";
import { cn } from "~/lib/utils";
function TooltipProvider({
delayDuration = 0,
...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return (
<TooltipPrimitive.Provider
data-slot="tooltip-provider"
delayDuration={delayDuration}
{...props}
/>
);
function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />;
}
function Tooltip({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
return (
<TooltipProvider>
<TooltipPrimitive.Root data-slot="tooltip" {...props} />
@@ -26,9 +15,7 @@ function Tooltip({
);
}
function TooltipTrigger({
...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
}

9
app/components/user-avatar.tsx
View File

@@ -5,16 +5,11 @@ interface UserAvatarProps {
user: PartialUser | undefined;
}
export default function UserAvatar({
user,
...props
}: UserAvatarProps & React.ComponentProps<typeof Avatar>) {
export default function UserAvatar({ user, ...props }: UserAvatarProps & React.ComponentProps<typeof Avatar>) {
return (
<Avatar {...props}>
<AvatarImage src={user?.avatarUrl} />
<AvatarFallback className="text-muted-foreground">
{user?.username?.[0]}
</AvatarFallback>
<AvatarFallback className="text-muted-foreground">{user?.username?.[0]}</AvatarFallback>
</Avatar>
);
}

5
app/components/user-context-menu.tsx
View File

@@ -16,10 +16,7 @@ interface UserContextMenuProps {
children: React.ReactNode;
}
export default function UserContextMenu({
userId,
children,
}: UserContextMenuProps) {
export default function UserContextMenu({ userId, children }: UserContextMenuProps) {
const currentUser = useUsersStore((state) => state.getCurrentUser());
const navigate = useNavigate();

6
app/components/visible-trigger.tsx
View File

@@ -91,11 +91,7 @@ export default function VisibleTrigger({
// Ensure it has some minimal dimension if no children are provided,
// so the observer can detect its presence.
return (
<div
ref={elementRef}
style={{ minHeight: children ? "auto" : "1px", ...style }}
{...props}
>
<div ref={elementRef} style={{ minHeight: children ? "auto" : "1px", ...style }} {...props}>
{children} {/* Render any children passed to the component */}
</div>
);

5
app/hooks/use-origin.ts
View File

@@ -7,10 +7,7 @@ export const useOrigin = () => {
setIsMounted(true);
}, []);
const origin =
typeof window !== "undefined" && window.location.origin
? window.location.origin
: "";
const origin = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
if (!isMounted) {
return "";

16
app/lib/api/client/channel.ts
View File

@@ -1,11 +1,7 @@
import axios from "../http-client";
import { messageSchema, type ChannelId, type Uuid } from "../types";
export async function paginatedMessages(
channelId: ChannelId,
limit: number,
before: ChannelId | undefined,
) {
export async function paginatedMessages(channelId: ChannelId, limit: number, before: ChannelId | undefined) {
const response = await axios.get(`/channels/${channelId}/messages`, {
params: {
limit,
@@ -13,16 +9,10 @@ export async function paginatedMessages(
},
});
return (response.data as any[]).map((value, _) =>
messageSchema.parse(value),
);
return (response.data as any[]).map((value, _) => messageSchema.parse(value));
}
export async function sendMessage(
channelId: ChannelId,
content: string,
attachments?: Uuid[],
) {
export async function sendMessage(channelId: ChannelId, content: string, attachments?: Uuid[]) {
const response = await axios.post(`/channels/${channelId}/messages`, {
content,
attachments,

22
app/lib/api/client/server.ts
View File

@@ -1,12 +1,5 @@
import axios from "../http-client";
import type {
ChannelId,
ChannelType,
Server,
ServerChannel,
ServerId,
ServerInvite,
} from "../types";
import type { ChannelId, ChannelType, Server, ServerChannel, ServerId, ServerInvite } from "../types";
interface CreateServerRequest {
name: string;
@@ -48,27 +41,20 @@ export async function listChannels(serverId: ServerId) {
return response.data as ServerChannel[];
}
export async function createChannel(
serverId: ServerId,
request: CreateServerChannelRequest,
) {
export async function createChannel(serverId: ServerId, request: CreateServerChannelRequest) {
const response = await axios.post(`/servers/${serverId}/channels`, request);
return response.data as ServerChannel;
}
export async function getChannel(serverId: ServerId, channelId: ChannelId) {
const response = await axios.get(
`/servers/${serverId}/channels/${channelId}`,
);
const response = await axios.get(`/servers/${serverId}/channels/${channelId}`);
return response.data as ServerChannel;
}
export async function deleteChannel(serverId: ServerId, channelId: ChannelId) {
const response = await axios.delete(
`/servers/${serverId}/channels/${channelId}`,
);
const response = await axios.delete(`/servers/${serverId}/channels/${channelId}`);
return response.data as ServerChannel;
}

8
app/lib/api/client/user.ts
View File

@@ -1,11 +1,5 @@
import axios from "../http-client";
import type {
FullUser,
PartialUser,
RecipientChannel,
UserId,
Uuid,
} from "../types";
import type { FullUser, PartialUser, RecipientChannel, UserId, Uuid } from "../types";
export async function me() {
const response = await axios.get("/users/@me");

4
app/lib/api/types.ts
View File

@@ -5,9 +5,7 @@ export type TypeToZod<T> = {
? undefined extends T[K]
? E extends object
? z.ZodOptional<z.ZodArray<z.ZodObject<TypeToZod<E>>>>
: z.ZodOptional<
z.ZodArray<z.ZodType<Exclude<E, null | undefined>>>
>
: z.ZodOptional<z.ZodArray<z.ZodType<Exclude<E, null | undefined>>>>
: E extends object
? z.ZodArray<z.ZodObject<TypeToZod<E>>>
: z.ZodArray<z.ZodType<Exclude<E, null | undefined>>>

6
app/lib/utils.ts
View File

@@ -32,11 +32,7 @@ export function createPrefixedLogger(prefix: string, styles?: string[]) {
result[methodName] = (...args: any[]) => {
if (typeof args[0] === "string") {
originalMethod(
`${prefix} ${args[0]}`,
...(styles || []),
...args.slice(1),
);
originalMethod(`${prefix} ${args[0]}`, ...(styles || []), ...args.slice(1));
} else {
originalMethod(prefix, styles, ...args);
}

45
app/lib/websocket/gateway/client.ts
View File

@@ -102,10 +102,7 @@ export class GatewayClient {
});
}
public onEvent<K extends keyof GatewayEvents>(
event: K | string,
handler: GatewayEvents[K],
): void {
public onEvent<K extends keyof GatewayEvents>(event: K | string, handler: GatewayEvents[K]): void {
this.serverEventHandlers[event as K] = handler;
}
@@ -113,10 +110,7 @@ export class GatewayClient {
delete this.serverEventHandlers[event];
}
public onControl<K extends keyof ControlEvents>(
event: K,
handler: ControlEvents[K],
): void {
public onControl<K extends keyof ControlEvents>(event: K, handler: ControlEvents[K]): void {
this.eventHandlers[event] = handler;
}
@@ -226,11 +220,7 @@ export class GatewayClient {
this.userId = message.data.userId;
this.sessionKey = message.data.sessionKey;
this.setState(ConnectionState.CONNECTED);
this.emitControl(
"authenticated",
message.data.userId,
message.data.sessionKey,
);
this.emitControl("authenticated", message.data.userId, message.data.sessionKey);
break;
case ServerMessageType.AUTHENTICATE_DENIED:
@@ -239,10 +229,7 @@ export class GatewayClient {
break;
case ServerMessageType.ERROR:
this.emitError(
new Error(`Server error: ${message.data.code}`),
message.data.code,
);
this.emitError(new Error(`Server error: ${message.data.code}`), message.data.code);
break;
case ServerMessageType.EVENT:
@@ -264,9 +251,7 @@ export class GatewayClient {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify(message));
} else {
this.emitError(
new Error("Cannot send message: socket not connected"),
);
this.emitError(new Error("Cannot send message: socket not connected"));
}
}
@@ -286,20 +271,14 @@ export class GatewayClient {
this.emitControl("error", error, code);
}
private emitControl<K extends keyof ControlEvents>(
event: K,
...args: Parameters<ControlEvents[K]>
): void {
private emitControl<K extends keyof ControlEvents>(event: K, ...args: Parameters<ControlEvents[K]>): void {
const handler = this.eventHandlers[event];
if (handler) {
(handler as Function)(...args);
}
}
private emitEvent<K extends keyof GatewayEvents>(
event: K,
...args: Parameters<GatewayEvents[K]>
): void {
private emitEvent<K extends keyof GatewayEvents>(event: K, ...args: Parameters<GatewayEvents[K]>): void {
const handler = this.serverEventHandlers[event];
if (handler) {
(handler as Function)(...args);
@@ -322,10 +301,7 @@ export class GatewayClient {
this.socket.onclose = null;
// Close the connection if it's still open
if (
this.socket.readyState === WebSocket.OPEN ||
this.socket.readyState === WebSocket.CONNECTING
) {
if (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING) {
this.socket.close();
}
@@ -337,7 +313,4 @@ export class GatewayClient {
}
}
const logger = createPrefixedLogger("%cGateway WS%c:", [
"color: red; font-weight: bold;",
"",
]);
const logger = createPrefixedLogger("%cGateway WS%c:", ["color: red; font-weight: bold;", ""]);

21
app/lib/websocket/gateway/types.ts
View File

@@ -1,12 +1,4 @@
import type {
ChannelId,
Message,
MessageId,
PartialUser,
Server,
ServerId,
UserId,
} from "~/lib/api/types";
import type { ChannelId, Message, MessageId, PartialUser, Server, ServerId, UserId } from "~/lib/api/types";
type Channel = any; // TODO: Define Channel type
@@ -78,10 +70,7 @@ export interface RequestVoiceStatesMessage {
};
}
export type ClientMessage =
| AuthenticateMessage
| VoiceStateUpdateMessage
| RequestVoiceStatesMessage;
export type ClientMessage = AuthenticateMessage | VoiceStateUpdateMessage | RequestVoiceStatesMessage;
// Server message types
export interface AuthenticateAcceptedMessage {
@@ -245,11 +234,7 @@ export interface EventMessage {
};
}
export type ServerMessage =
| AuthenticateAcceptedMessage
| AuthenticateDeniedMessage
| EventMessage
| ErrorMessage;
export type ServerMessage = AuthenticateAcceptedMessage | AuthenticateDeniedMessage | EventMessage | ErrorMessage;
// Connection states
export enum ConnectionState {

52
app/lib/websocket/voice/client.ts
View File

@@ -1,11 +1,5 @@
import { createPrefixedLogger } from "~/lib/utils";
import {
ClientMessageType,
ConnectionState,
ServerMessageType,
type ClientMessage,
type ServerMessage,
} from "./types";
import { ClientMessageType, ConnectionState, ServerMessageType, type ClientMessage, type ServerMessage } from "./types";
export class WebRTCClient {
private socket: WebSocket | null = null;
@@ -42,10 +36,7 @@ export class WebRTCClient {
this.connectionLock = true;
if (
this.state !== ConnectionState.DISCONNECTED &&
this.state !== ConnectionState.ERROR
) {
if (this.state !== ConnectionState.DISCONNECTED && this.state !== ConnectionState.ERROR) {
this.disconnect();
}
@@ -97,9 +88,7 @@ export class WebRTCClient {
}
};
} catch (error) {
this.handleError(
error instanceof Error ? error : new Error("Unknown error"),
);
this.handleError(error instanceof Error ? error : new Error("Unknown error"));
}
};
@@ -190,17 +179,11 @@ export class WebRTCClient {
});
}
} catch (error) {
this.handleError(
error instanceof Error
? error
: new Error("Error creating WebRTC offer"),
);
this.handleError(error instanceof Error ? error : new Error("Error creating WebRTC offer"));
}
};
private handleServerMessage = async (
event: MessageEvent,
): Promise<void> => {
private handleServerMessage = async (event: MessageEvent): Promise<void> => {
try {
const message: ServerMessage = JSON.parse(event.data);
@@ -223,17 +206,11 @@ export class WebRTCClient {
warn("Unhandled message type:", message);
}
} catch (error) {
this.handleError(
error instanceof Error
? error
: new Error("Failed to process message"),
);
this.handleError(error instanceof Error ? error : new Error("Failed to process message"));
}
};
private handleSdpAnswer = async (
sdp: RTCSessionDescription,
): Promise<void> => {
private handleSdpAnswer = async (sdp: RTCSessionDescription): Promise<void> => {
log("Received SDP answer: %o", sdp);
if (!this.peerConnection) {
@@ -244,11 +221,7 @@ export class WebRTCClient {
try {
await this.peerConnection.setRemoteDescription(sdp);
} catch (error) {
this.handleError(
error instanceof Error
? error
: new Error("Error setting remote description"),
);
this.handleError(error instanceof Error ? error : new Error("Error setting remote description"));
}
};
@@ -258,9 +231,7 @@ export class WebRTCClient {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.socket.send(JSON.stringify(message));
} else {
this.handleError(
new Error("Cannot send message: socket not connected"),
);
this.handleError(new Error("Cannot send message: socket not connected"));
}
};
@@ -293,7 +264,4 @@ export class WebRTCClient {
};
}
const { log, warn, ...other } = createPrefixedLogger("%cWebRTC WS%c:", [
"color: blue; font-weight: bold;",
"",
]);
const { log, warn, ...other } = createPrefixedLogger("%cWebRTC WS%c:", ["color: blue; font-weight: bold;", ""]);

19
app/root.tsx
View File

@@ -1,11 +1,4 @@
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
import { ThemeProvider } from "~/components/theme/theme-provider";
import type { Route } from "./+types/root";
@@ -38,10 +31,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
@@ -61,10 +51,7 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "Error";
details =
error.status === 404
? "The requested page could not be found."
: error.statusText || details;
details = error.status === 404 ? "The requested page could not be found." : error.statusText || details;
} else if (import.meta.env.DEV && error && error instanceof Error) {
details = error.message;
stack = error.stack;

13
app/routes.ts
View File

@@ -1,10 +1,4 @@
import {
type RouteConfig,
index,
layout,
prefix,
route,
} from "@react-router/dev/routes";
import { type RouteConfig, index, layout, prefix, route } from "@react-router/dev/routes";
export default [
index("routes/index.tsx"),
@@ -21,10 +15,7 @@ export default [
...prefix("/@me", [
layout("routes/app/me/layout.tsx", [
index("routes/app/me/index.tsx"),
route(
"/channels/:channelId",
"routes/app/me/channel.tsx",
),
route("/channels/:channelId", "routes/app/me/channel.tsx"),
]),
]),
...prefix("/server/:serverId", [

4
app/routes/app/invite.tsx
View File

@@ -5,9 +5,7 @@ export async function clientLoader({ params }: Route.ClientLoaderArgs) {
const inviteCode = params.inviteCode;
try {
const response = await import("~/lib/api/client/server").then((m) =>
m.default.getInvite(inviteCode),
);
const response = await import("~/lib/api/client/server").then((m) => m.default.getInvite(inviteCode));
return redirect(`/app/server/${response.id}`);
} catch (error) {

8
app/routes/app/layout.tsx
View File

@@ -7,9 +7,7 @@ import { useUsersStore } from "~/stores/users-store";
async function fetchServers() {
const { addServers } = useServerListStore.getState();
const newServers = await import("~/lib/api/client/server").then((m) =>
m.default.list(),
);
const newServers = await import("~/lib/api/client/server").then((m) => m.default.list());
addServers(newServers);
return null;
@@ -18,9 +16,7 @@ async function fetchServers() {
async function fetchCurrentUser() {
const { setCurrentUserId, addUser } = useUsersStore.getState();
const user = await import("~/lib/api/client/user").then((m) =>
m.default.me(),
);
const user = await import("~/lib/api/client/user").then((m) => m.default.me());
setCurrentUserId(user.id);
addUser(user);

21
app/routes/app/me/channel.tsx
View File

@@ -10,33 +10,20 @@ export default function Channel({ params }: Route.ComponentProps) {
const channelId = params.channelId;
const currentUserId = useUsersStore((state) => state.currentUserId);
const nativeChannel = usePrivateChannelsStore(
useShallow((state) => state.channels[channelId]),
);
const nativeChannel = usePrivateChannelsStore(useShallow((state) => state.channels[channelId]));
if (!nativeChannel) return null;
const recipients = nativeChannel.recipients.filter(
(recipient) => recipient.id !== currentUserId,
);
const recipients = nativeChannel.recipients.filter((recipient) => recipient.id !== currentUserId);
const renderSystemBadge =
recipients.some((recipient) => recipient.system) &&
recipients.length === 1;
const renderSystemBadge = recipients.some((recipient) => recipient.system) && recipients.length === 1;
const channel = {
...nativeChannel,
name: (
<>
<div className="flex items-center gap-2">
<div>
{recipients
.map(
(recipient) =>
recipient.displayName || recipient.username,
)
.join(", ")}
</div>
<div>{recipients.map((recipient) => recipient.displayName || recipient.username).join(", ")}</div>
{renderSystemBadge && (
<Badge variant="default">
{" "}

17
app/routes/app/me/layout.tsx
View File

@@ -9,23 +9,16 @@ import { usePrivateChannelsStore } from "~/stores/private-channels-store";
async function fetchPrivateChannels() {
const { addChannels } = usePrivateChannelsStore.getState();
const channels = await import("~/lib/api/client/user").then((m) =>
m.default.channels(),
);
const channels = await import("~/lib/api/client/user").then((m) => m.default.channels());
addChannels(channels);
return null;
}
function ListComponent() {
const channels = Object.values(
usePrivateChannelsStore(useShallow((state) => state.channels)),
);
const channels = Object.values(usePrivateChannelsStore(useShallow((state) => state.channels)));
const sortedChannels = React.useMemo(
() =>
channels.sort((a, b) =>
(a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1,
),
() => channels.sort((a, b) => ((a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1)),
[channels],
);
@@ -37,9 +30,7 @@ function ListComponent() {
return (
<div className="h-full flex flex-col">
<div className="w-full min-h-12">
<div className="border-b-2 h-full flex items-center justify-center">
Private Messages
</div>
<div className="border-b-2 h-full flex items-center justify-center">Private Messages</div>
</div>
<ScrollArea className="overflow-auto" scrollbarSize="narrow">

8
app/routes/app/server/channel.tsx
View File

@@ -4,13 +4,9 @@ import ChannelArea from "~/components/channel-area";
import { useServerChannelsStore } from "~/stores/server-channels-store";
import type { Route } from "./+types/channel";
export default function Channel({
params: { serverId, channelId },
}: Route.ComponentProps) {
export default function Channel({ params: { serverId, channelId } }: Route.ComponentProps) {
const navigate = useNavigate();
const channel = useServerChannelsStore(
useShallow((state) => state.channels[serverId][channelId]),
);
const channel = useServerChannelsStore(useShallow((state) => state.channels[serverId][channelId]));
if (!channel) {
setTimeout(() => navigate(`/app/server/${serverId}`), 0);

25
app/routes/app/server/layout.tsx
View File

@@ -42,16 +42,10 @@ function ListComponent() {
const currentUserId = useUsersStore((state) => state.currentUserId);
const onOpen = useModalStore((state) => state.onOpen);
const server = useServerListStore(
useShallow((state) => state.servers[serverId] || null),
);
const server = useServerListStore(useShallow((state) => state.servers[serverId] || null));
const channels = Array.from(
Object.values(
useServerChannelsStore(
useShallow((state) => state.channels[serverId] || {}),
),
),
Object.values(useServerChannelsStore(useShallow((state) => state.channels[serverId] || {}))),
);
if (!server) {
@@ -100,9 +94,7 @@ function ListComponent() {
</DropdownMenuItem>
)}
{currentUserId !== server.ownerId && (
<DropdownMenuItem variant="destructive">
Leave
</DropdownMenuItem>
<DropdownMenuItem variant="destructive">Leave</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
@@ -111,12 +103,7 @@ function ListComponent() {
<ScrollArea className="overflow-auto" scrollbarSize="narrow">
<div className="p-2 flex flex-col gap-1 h-full">
{channels
.sort((a, b) =>
(a.lastMessageId ?? a.id) <
(b.lastMessageId ?? b.id)
? 1
: -1,
)
.sort((a, b) => ((a.lastMessageId ?? a.id) < (b.lastMessageId ?? b.id) ? 1 : -1))
.map((channel, _) => (
<React.Fragment key={channel.id}>
<ServerChannelListItem channel={channel} />
@@ -133,9 +120,7 @@ export const handle = {
};
export default function Layout({ params: { serverId } }: Route.ComponentProps) {
const server = useServerListStore(
useShallow((state) => state.servers[serverId!] || null),
);
const server = useServerListStore(useShallow((state) => state.servers[serverId!] || null));
const navigate = useNavigate();
if (!server) {

54
app/routes/app/settings.tsx
View File

@@ -3,14 +3,7 @@ import { LogOutIcon, UserIcon } from "lucide-react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Button } from "~/components/ui/button";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "~/components/ui/form";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { IconUploadField } from "~/components/ui/icon-upload-field";
import { Input } from "~/components/ui/input";
import file from "~/lib/api/client/file";
@@ -39,8 +32,7 @@ export default function Settings() {
const onSubmit = async (values: z.infer<typeof schema>) => {
if (!values) return;
let avatarId: string | null | undefined =
values.avatar === null ? null : undefined;
let avatarId: string | null | undefined = values.avatar === null ? null : undefined;
if (values.avatar) {
avatarId = (await file.uploadFile(values.avatar))[0];
}
@@ -80,11 +72,7 @@ export default function Settings() {
</Button>
<div className="mt-auto">
<Button
variant="destructive"
className="w-full"
onClick={onLogout}
>
<Button variant="destructive" className="w-full" onClick={onLogout}>
<LogOutIcon className="mr-2 h-4 w-4" />
Logout
</Button>
@@ -95,31 +83,18 @@ export default function Settings() {
<div className="flex-1 p-8">
<div className="max-w-2xl mx-auto">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-4"
>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="avatar"
render={({ field, fieldState }) => (
<FormItem>
<FormLabel
required={
!schema.shape.avatar.isOptional()
}
>
Avatar
</FormLabel>
<FormLabel required={!schema.shape.avatar.isOptional()}>Avatar</FormLabel>
<FormControl>
<div className="flex flex-col items-center justify-center">
<IconUploadField
defaultPreview={
user?.avatarUrl
}
formDefaultValue={
user?.avatarUrl
}
defaultPreview={user?.avatarUrl}
formDefaultValue={user?.avatarUrl}
field={field}
error={fieldState.error}
/>
@@ -134,11 +109,7 @@ export default function Settings() {
name="displayName"
render={({ field }) => (
<FormItem>
<FormLabel
required={
!schema.shape.displayName.isOptional()
}
>
<FormLabel required={!schema.shape.displayName.isOptional()}>
Display Name
</FormLabel>
<FormControl>
@@ -148,13 +119,8 @@ export default function Settings() {
</FormItem>
)}
/>
<Button
type="submit"
disabled={form.formState.isSubmitting}
>
{form.formState.isSubmitting
? "Saving..."
: "Save"}
<Button type="submit" disabled={form.formState.isSubmitting}>
{form.formState.isSubmitting ? "Saving..." : "Save"}
</Button>
</form>
</Form>

40
app/routes/auth/login.tsx
View File

@@ -7,22 +7,8 @@ import { useShallow } from "zustand/react/shallow";
import { PasswordInput } from "~/components/custom-ui/password-input";
import { ThemeToggle } from "~/components/theme/theme-toggle";
import { Button, buttonVariants } from "~/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "~/components/ui/card";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "~/components/ui/form";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import auth from "~/lib/api/client/auth";
import { useTokenStore } from "~/stores/token-store";
@@ -79,10 +65,7 @@ export default function Login() {
return (
<Card style={{ viewTransitionName: "auth-card-view" }}>
<CardHeader
style={{ viewTransitionName: "auth-card-header-view" }}
className="relative"
>
<CardHeader style={{ viewTransitionName: "auth-card-header-view" }} className="relative">
<CardTitle>Welcome back!</CardTitle>
<CardDescription>Please sign in to continue.</CardDescription>
<div
@@ -94,9 +77,7 @@ export default function Login() {
<ThemeToggle />
</div>
</CardHeader>
<CardContent
style={{ viewTransitionName: "auth-card-content-view" }}
>
<CardContent style={{ viewTransitionName: "auth-card-content-view" }}>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
@@ -126,8 +107,7 @@ export default function Login() {
render={({ field }) => (
<FormItem
style={{
viewTransitionName:
"password-field-view",
viewTransitionName: "password-field-view",
}}
>
<FormLabel required>Password</FormLabel>
@@ -138,11 +118,7 @@ export default function Login() {
</FormItem>
)}
/>
<Button
className="w-full"
type="submit"
style={{ viewTransitionName: "submit-button-view" }}
>
<Button className="w-full" type="submit" style={{ viewTransitionName: "submit-button-view" }}>
Log In
</Button>
</form>
@@ -150,9 +126,7 @@ export default function Login() {
</CardContent>
<CardFooter style={{ viewTransitionName: "auth-card-footer-view" }}>
<div className="flex items-center">
<span className="text-muted-foreground text-sm">
Don't have an account?
</span>
<span className="text-muted-foreground text-sm">Don't have an account?</span>
<Link
className={buttonVariants({
variant: "link",

50
app/routes/auth/register.tsx
View File

@@ -5,22 +5,8 @@ import { z } from "zod";
import { PasswordInput } from "~/components/custom-ui/password-input";
import { ThemeToggle } from "~/components/theme/theme-toggle";
import { Button, buttonVariants } from "~/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "~/components/ui/card";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "~/components/ui/form";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "~/components/ui/card";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form";
import { Input } from "~/components/ui/input";
import auth from "~/lib/api/client/auth";
@@ -49,14 +35,9 @@ export default function Register() {
return (
<Card style={{ viewTransitionName: "auth-card-view" }}>
<CardHeader
style={{ viewTransitionName: "auth-card-header-view" }}
className="relative"
>
<CardHeader style={{ viewTransitionName: "auth-card-header-view" }} className="relative">
<CardTitle>Create an account</CardTitle>
<CardDescription>
Please fill out the form below to create an account.
</CardDescription>
<CardDescription>Please fill out the form below to create an account.</CardDescription>
<div
className="absolute top-0 right-0 px-6"
style={{
@@ -66,9 +47,7 @@ export default function Register() {
<ThemeToggle />
</div>
</CardHeader>
<CardContent
style={{ viewTransitionName: "auth-card-content-view" }}
>
<CardContent style={{ viewTransitionName: "auth-card-content-view" }}>
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
@@ -86,11 +65,7 @@ export default function Register() {
>
<FormLabel required>Email</FormLabel>
<FormControl>
<Input
type="email"
placeholder="email@example.com"
{...field}
/>
<Input type="email" placeholder="email@example.com" {...field} />
</FormControl>
<FormMessage />
</FormItem>
@@ -128,8 +103,7 @@ export default function Register() {
render={({ field }) => (
<FormItem
style={{
viewTransitionName:
"password-field-view",
viewTransitionName: "password-field-view",
}}
>
<FormLabel required>Password</FormLabel>
@@ -140,11 +114,7 @@ export default function Register() {
</FormItem>
)}
/>
<Button
className="w-full"
type="submit"
style={{ viewTransitionName: "submit-button-view" }}
>
<Button className="w-full" type="submit" style={{ viewTransitionName: "submit-button-view" }}>
Register
</Button>
</form>
@@ -152,9 +122,7 @@ export default function Register() {
</CardContent>
<CardFooter style={{ viewTransitionName: "auth-card-footer-view" }}>
<div className="flex items-center">
<span className="text-muted-foreground text-sm">
Already have an account?
</span>
<span className="text-muted-foreground text-sm">Already have an account?</span>
<Link
className={buttonVariants({
variant: "link",

6
app/stores/channels-voice-state.tsx
View File

@@ -13,11 +13,7 @@ interface ChannelVoiceState {
interface ChannelsVoiceState {
channels: Record<ChannelId, ChannelVoiceState>;
addUser: (
channelId: ChannelId,
userId: UserId,
userVoiceState: UserVoiceState,
) => void;
addUser: (channelId: ChannelId, userId: UserId, userVoiceState: UserVoiceState) => void;
removeUser: (channelId: ChannelId, userId: UserId) => void;
removeChannel: (channelId: ChannelId) => void;
}

93
app/stores/gateway-store.ts
View File

@@ -1,19 +1,8 @@
import type { QueryClient } from "@tanstack/react-query";
import { create } from "zustand";
import {
messageSchema,
type ChannelId,
type Message,
type MessageId,
type ServerId,
} from "~/lib/api/types";
import { messageSchema, type ChannelId, type Message, type MessageId, type ServerId } from "~/lib/api/types";
import { GatewayClient } from "~/lib/websocket/gateway/client";
import {
ConnectionState,
EventType,
type EventData,
type VoiceServerUpdateEvent,
} from "~/lib/websocket/gateway/types";
import { ConnectionState, EventType, type EventData, type VoiceServerUpdateEvent } from "~/lib/websocket/gateway/types";
import { useChannelsVoiceStateStore } from "./channels-voice-state";
import { usePrivateChannelsStore } from "./private-channels-store";
import { useServerChannelsStore } from "./server-channels-store";
@@ -23,10 +12,7 @@ import { useUsersStore } from "./users-store";
const GATEWAY_URL = "ws://localhost:12345/gateway/ws";
const HANDLERS = {
[EventType.ADD_SERVER]: (
self: GatewayState,
data: Extract<EventData, { type: EventType.ADD_SERVER }>["data"],
) => {
[EventType.ADD_SERVER]: (self: GatewayState, data: Extract<EventData, { type: EventType.ADD_SERVER }>["data"]) => {
useServerListStore.getState().addServer(data.server);
},
@@ -59,31 +45,20 @@ const HANDLERS = {
[EventType.ADD_SERVER_CHANNEL]: (
self: GatewayState,
data: Extract<
EventData,
{ type: EventType.ADD_SERVER_CHANNEL }
>["data"],
data: Extract<EventData, { type: EventType.ADD_SERVER_CHANNEL }>["data"],
) => {
useServerChannelsStore.getState().addChannel(data.channel);
},
[EventType.REMOVE_SERVER_CHANNEL]: (
self: GatewayState,
data: Extract<
EventData,
{ type: EventType.REMOVE_SERVER_CHANNEL }
>["data"],
data: Extract<EventData, { type: EventType.REMOVE_SERVER_CHANNEL }>["data"],
) => {
useServerChannelsStore
.getState()
.removeChannel(data.serverId, data.channelId);
useServerChannelsStore.getState().removeChannel(data.serverId, data.channelId);
useChannelsVoiceStateStore.getState().removeChannel(data.serverId);
},
[EventType.ADD_USER]: (
self: GatewayState,
data: Extract<EventData, { type: EventType.ADD_USER }>["data"],
) => {
[EventType.ADD_USER]: (self: GatewayState, data: Extract<EventData, { type: EventType.ADD_USER }>["data"]) => {
useUsersStore.getState().addUser(data.user);
},
@@ -103,10 +78,7 @@ const HANDLERS = {
[EventType.REMOVE_SERVER_MEMBER]: (
self: GatewayState,
data: Extract<
EventData,
{ type: EventType.REMOVE_SERVER_MEMBER }
>["data"],
data: Extract<EventData, { type: EventType.REMOVE_SERVER_MEMBER }>["data"],
) => {
useUsersStore.getState().removeUser(data.userId);
},
@@ -123,15 +95,9 @@ const HANDLERS = {
(oldData: { pages: Message[][]; pageParams: MessageId[] }) => {
return {
pages: oldData?.pages
? [
[message, ...oldData.pages[0]],
...oldData.pages.slice(1),
]
? [[message, ...oldData.pages[0]], ...oldData.pages.slice(1)]
: [[message]],
pageParams: oldData?.pageParams ?? [
undefined,
message.id,
],
pageParams: oldData?.pageParams ?? [undefined, message.id],
};
},
);
@@ -143,28 +109,18 @@ const HANDLERS = {
data: Extract<EventData, { type: EventType.REMOVE_MESSAGE }>["data"],
) => {
if (self.queryClient) {
self.queryClient.setQueryData(
["messages", data.channelId],
(oldData: any) => {
self.queryClient.setQueryData(["messages", data.channelId], (oldData: any) => {
if (!oldData) return [];
return oldData.filter(
(message: any) => message.id !== data.messageId,
);
},
);
return oldData.filter((message: any) => message.id !== data.messageId);
});
}
},
[EventType.VOICE_CHANNEL_CONNECTED]: (
self: GatewayState,
data: Extract<
EventData,
{ type: EventType.VOICE_CHANNEL_CONNECTED }
>["data"],
data: Extract<EventData, { type: EventType.VOICE_CHANNEL_CONNECTED }>["data"],
) => {
useChannelsVoiceStateStore
.getState()
.addUser(data.channelId, data.userId, {
useChannelsVoiceStateStore.getState().addUser(data.channelId, data.userId, {
deaf: false,
muted: false,
});
@@ -172,14 +128,9 @@ const HANDLERS = {
[EventType.VOICE_CHANNEL_DISCONNECTED]: (
self: GatewayState,
data: Extract<
EventData,
{ type: EventType.VOICE_CHANNEL_DISCONNECTED }
>["data"],
data: Extract<EventData, { type: EventType.VOICE_CHANNEL_DISCONNECTED }>["data"],
) => {
useChannelsVoiceStateStore
.getState()
.removeUser(data.channelId, data.userId);
useChannelsVoiceStateStore.getState().removeUser(data.channelId, data.userId);
},
};
@@ -195,19 +146,13 @@ interface GatewayState {
updateVoiceState: (serverId: ServerId, channelId: ChannelId) => void;
requestVoiceStates: (serverId: ServerId) => void;
onVoiceServerUpdate: (
handler: (
event: VoiceServerUpdateEvent["data"],
) => void | Promise<void>,
) => () => void;
onVoiceServerUpdate: (handler: (event: VoiceServerUpdateEvent["data"]) => void | Promise<void>) => () => void;
}
export const useGatewayStore = create<GatewayState>()((set, get) => {
const client = new GatewayClient(GATEWAY_URL);
const voiceHandlers = new Set<
(event: VoiceServerUpdateEvent["data"]) => void
>();
const voiceHandlers = new Set<(event: VoiceServerUpdateEvent["data"]) => void>();
client.onEvent(EventType.VOICE_SERVER_UPDATE, (event) => {
voiceHandlers.forEach((handler) => handler(event));

5
app/stores/modal-store.ts
View File

@@ -30,10 +30,7 @@ export type CreateServerChannelModalData = {
};
};
export type ModalData =
| CreateServerChannelModalData
| CreateServerInviteModalData
| DeleteServerConfirmModalData;
export type ModalData = CreateServerChannelModalData | CreateServerInviteModalData | DeleteServerConfirmModalData;
interface ModalState {
type: ModalType | null;

11
app/stores/users-store.tsx
View File

@@ -51,12 +51,10 @@ export const useUsersStore = create<UsersStore>()(
},
addUser: (user) =>
set((state) => {
if (user.id !== get().currentUserId)
state.users[user.id] = user;
if (user.id !== get().currentUserId) state.users[user.id] = user;
else {
const currentUser = get().users[user.id];
if (currentUser)
state.users[user.id] = { ...currentUser, ...user };
if (currentUser) state.users[user.id] = { ...currentUser, ...user };
else state.users[user.id] = user;
}
}),
@@ -70,9 +68,6 @@ export const useUsersStore = create<UsersStore>()(
state.currentUserId = userId;
}),
getCurrentUser: () =>
!!get().currentUserId
? (get().users[get().currentUserId!] as FullUser)
: undefined,
getCurrentUser: () => (!!get().currentUserId ? (get().users[get().currentUserId!] as FullUser) : undefined),
})),
);

7
tsconfig.json
View File

@@ -1,10 +1,5 @@
{
"include": [
"**/*",
"**/.server/**/*",
"**/.client/**/*",
".react-router/types/**/*"
],
"include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
"compilerOptions": {
"lib": ["DOM", "DOM.Iterable", "ES2022"],
"types": ["node", "vite/client"],