feat: direct message sending feature

src/app/(ui)/Header.tsx

@@ -18,7 +18,7 @@ export const Header = async (props: {
     : props.view.community.banner;
 
   return (
-    <header className={"relative mx-1 min-h-[110px] lg:mx-4"}>
+    <header className={"relative min-h-[110px]"}>
       {bannerSrc && (
         <Banner
           alt={isPerson(props.view) ? "User's banner" : "Community banner"}

src/app/PageWithSidebar.tsx

@@ -46,7 +46,7 @@ type Props = SidebarProps & (InstanceSidebarProps | CommunitySidebarProps);
 export const PageWithSidebar = (props: Props) => {
   return (
     <div className={"w-full lg:flex"}>
-      <div className={"flex-grow p-1 lg:p-4"}>{props.children}</div>
+      <div className={"flex-grow"}>{props.children}</div>
       <SidebarToggleButton />
       <SidebarToggleContents {...props} />
     </div>

src/app/c/[name]/page.tsx

@@ -77,14 +77,14 @@ const CommunityPage = async (props: CommunityPageProps) => {
       site={site}
       stats={communityView.counts}
     >
-      <>
+      <div className={"p-2 lg:p-4"}>
         <Header view={communityView} />
 
         <PostList
           community={communityView.community}
           searchParams={props.searchParams}
         />
-      </>
+      </div>
     </PageWithSidebar>
   );
 };

src/app/create_post/page.tsx

@@ -27,7 +27,7 @@ const CreatePostPage = async (props: {
       mods={mods.map((mod) => mod.moderator)}
       stats={communityView.counts}
     >
-      <div className={"m-2 lg:m-4"}>
+      <div className={"p-2 lg:p-4"}>
         <h1 className={"mb-4 text-xl font-bold"}>
           {"Submitting new post to "}
           {formatCommunityName(communityView.community)}

src/app/create_private_message/[userid]/PrivateMessageEditor.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { PersonView } from "lemmy-js-client";
+import { SubmitButton } from "@/app/(ui)/button/SubmitButton";
+import { ButtonLink } from "@/app/(ui)/button/ButtonLink";
+import classNames from "classnames";
+import { TextArea } from "@/app/(ui)/form/TextArea";
+import { createPrivateMessageAction } from "@/app/create_private_message/privateMessageActions";
+import { UserLink } from "@/app/u/UserLink";
+
+export const PrivateMessageEditor = (props: {
+  readonly recipientPersonView: PersonView;
+}) => {
+  return (
+    <form
+      action={createPrivateMessageAction.bind(
+        null,
+        props.recipientPersonView.person.id,
+      )}
+      className={"flex max-w-[880px] flex-col gap-4"}
+    >
+      <div>
+        <label className={"block font-semibold"} htmlFor={"title"}>
+          {"Recipient"}
+        </label>
+        <UserLink person={props.recipientPersonView.person} />
+      </div>
+
+      <div>
+        <label className={"block font-semibold"} htmlFor={"content"}>
+          {"Message"}
+        </label>
+
+        <TextArea
+          className={classNames("mt-2 min-h-32")}
+          id={"content"}
+          name={"content"}
+        />
+      </div>
+      <input
+        autoComplete={"false"}
+        className={"hidden"}
+        id={"honey"}
+        name={"honey"}
+        type={"text"}
+      />
+
+      <div className={"mt-2 flex items-center justify-end gap-2"}>
+        <ButtonLink href={`/inbox`}>{"Cancel"}</ButtonLink>
+        <SubmitButton color={"primary"}>{"Send"}</SubmitButton>
+      </div>
+    </form>
+  );
+};

src/app/create_private_message/[userid]/page.tsx

@@ -0,0 +1,30 @@
+import { apiClient } from "@/app/apiClient";
+import { loginPageWithRedirectAction } from "@/app/login/authActions";
+import { PrivateMessageEditor } from "@/app/create_private_message/[userid]/PrivateMessageEditor";
+
+const CreateDirectMessagePage = async (props: {
+  readonly params: { userid: number };
+}) => {
+  const { my_user: loggedInUser } = await apiClient.getSite();
+  if (!loggedInUser) {
+    await loginPageWithRedirectAction(
+      `/create_private_message/${props.params.userid}`,
+      true,
+    );
+  }
+
+  const { person_view: personView } = await apiClient.getPersonDetails({
+    person_id: props.params.userid,
+  });
+
+  return (
+    <div className={"m-2 lg:m-4"}>
+      <h1 className={"mb-4 text-xl font-bold"}>
+        {"Composing direct message..."}
+      </h1>
+      <PrivateMessageEditor recipientPersonView={personView} />
+    </div>
+  );
+};
+
+export default CreateDirectMessagePage;

src/app/create_private_message/privateMessageActions.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { apiClient } from "@/app/apiClient";
+
+export const createPrivateMessageAction = async (
+  recipientPersonId: number,
+  form: FormData,
+) => {
+  await apiClient.createPrivateMessage({
+    content: form.get("content")?.toString()!,
+    recipient_id: recipientPersonId,
+  });
+};

src/app/page.tsx

@@ -10,15 +10,15 @@ const FrontPage = async ({
   const { site_view: siteView, admins } = await apiClient.getSite();
 
   return (
-    <div className={"w-full"}>
-      <PageWithSidebar
-        admins={admins.map((admin) => admin.person)}
-        site={siteView.site}
-        stats={siteView.counts}
-      >
+    <PageWithSidebar
+      admins={admins.map((admin) => admin.person)}
+      site={siteView.site}
+      stats={siteView.counts}
+    >
+      <div className={"w-full p-2 lg:p-4"}>
         <PostList searchParams={searchParams} />
-      </PageWithSidebar>
-    </div>
+      </div>
+    </PageWithSidebar>
   );
 };
 

src/app/post/PostList.tsx

@@ -49,7 +49,7 @@ export const PostList = async (props: {
   }
 
   return (
-    <div className={"m-1 flex flex-col lg:ml-4"}>
+    <div className={"flex flex-col"}>
       <SearchParamLinks
         currentActiveValue={sortType}
         label={"Sort"}

src/app/post/[id]/PostPageWithSidebar.tsx

@@ -36,7 +36,7 @@ export const PostPageWithSidebar = async (props: {
       mods={moderators.map((mod) => mod.moderator)}
       stats={communityView.counts}
     >
-      <article className={"w-full"}>
+      <article className={"w-full p-2 lg:p-4"}>
         <PostListItem postView={postView} />
         {postView.post.body && <PostBody id={postView.post.id} />}
         <Comments

src/app/post/[id]/edit/page.tsx

@@ -27,7 +27,7 @@ const EditPostPage = async (props: { readonly params: { id: number } }) => {
       mods={mods.map((mod) => mod.moderator)}
       stats={communityView.counts}
     >
-      <div className={"m-2 lg:m-4"}>
+      <div className={"p-2 lg:p-4"}>
         <h1 className={"mb-4 text-xl font-bold"}>
           {"Editing post in "}
           {communityName}

src/app/search/page.tsx

@@ -74,7 +74,7 @@ const SearchPage = async (props: {
     (data?.users.length ?? 0) === limit;
 
   return (
-    <div className={"m-3"}>
+    <div className={"m-2 lg:m-4"}>
       <div className={""}>
         <SearchParamLinks
           currentActiveValue={currentSearchType}

src/app/u/[username]/page.tsx

@@ -12,6 +12,8 @@ import { Header } from "@/app/(ui)/Header";
 import { getVoteConfig } from "@/app/(ui)/vote/getVoteConfig";
 import { MarkdownWithFetchedContent } from "@/app/(ui)/markdown/MarkdownWithFetchedContent";
 import { getMarkdownWithRemoteImagesAction } from "@/app/(ui)/markdown/markdownActions";
+import { ButtonLink } from "@/app/(ui)/button/ButtonLink";
+import { EnvelopeIcon } from "@heroicons/react/16/solid";
 
 type UserPageProps = {
   readonly params: { username: string };
@@ -98,12 +100,21 @@ const UserPage = async (props: UserPageProps) => {
   ]);
 
   return (
-    <div className={"m-2 mt-4"}>
+    <div className={"m-2 flex flex-col gap-2 lg:m-4"}>
       <Header view={personView} />
-      <div className={"ml-4 mt-2"}>
+      <div className={""}>
         <MarkdownWithFetchedContent id={personView.person.id} type={"person"} />
       </div>
-      <div className={"m-2 ml-3"}>
+      <div>
+        <ButtonLink
+          className={"flex max-w-40 items-center gap-1"}
+          href={`/create_private_message/${personView.person.id}`}
+        >
+          <EnvelopeIcon className={"h-4"} />
+          {"Direct message"}
+        </ButtonLink>
+      </div>
+      <div className={""}>
         <SearchParamLinks
           currentActiveValue={currentView}
           label={"Filter"}