feat(invites): add group/channel invite links and join by token

web/src/api/chats.ts

@@ -1,5 +1,5 @@
 import { http } from "./http";
-import type { Chat, ChatDetail, ChatMember, ChatMemberRole, ChatType, DiscoverChat, Message, MessageReaction, MessageType } from "../chat/types";
+import type { Chat, ChatDetail, ChatInviteLink, ChatMember, ChatMemberRole, ChatType, DiscoverChat, Message, MessageReaction, MessageType } from "../chat/types";
 import axios from "axios";
 
 export interface ChatNotificationSettings {
@@ -215,6 +215,16 @@ export async function unpinChat(chatId: number): Promise<Chat> {
   return data;
 }
 
+export async function createInviteLink(chatId: number): Promise<ChatInviteLink> {
+  const { data } = await http.post<ChatInviteLink>(`/chats/${chatId}/invite-link`);
+  return data;
+}
+
+export async function joinByInvite(token: string): Promise<Chat> {
+  const { data } = await http.post<Chat>("/chats/join-by-invite", { token });
+  return data;
+}
+
 export async function deleteMessage(messageId: number, forAll = false): Promise<void> {
   await http.delete(`/messages/${messageId}`, { params: { for_all: forAll } });
 }

web/src/chat/types.ts

@@ -91,3 +91,9 @@ export interface UserSearchItem {
   username: string;
   avatar_url: string | null;
 }
+
+export interface ChatInviteLink {
+  chat_id: number;
+  token: string;
+  invite_url: string;
+}

web/src/components/ChatInfoPanel.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import {
   addChatMember,
+  createInviteLink,
   getChatNotificationSettings,
   getChatDetail,
   leaveChat,
@@ -39,6 +40,7 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
   const [savingMute, setSavingMute] = useState(false);
   const [counterpartBlocked, setCounterpartBlocked] = useState(false);
   const [savingBlock, setSavingBlock] = useState(false);
+  const [inviteLink, setInviteLink] = useState<string | null>(null);
 
   const myRole = useMemo(() => members.find((m) => m.user_id === me?.id)?.role, [members, me?.id]);
   const isGroupLike = chat?.type === "group" || chat?.type === "channel";
@@ -183,6 +185,27 @@ export function ChatInfoPanel({ chatId, open, onClose }: Props) {
               ) : null}
               {chat.handle ? <p className="mt-2 text-xs text-slate-300">@{chat.handle}</p> : null}
               {chat.description ? <p className="mt-1 text-xs text-slate-400">{chat.description}</p> : null}
+              {isGroupLike && canManageMembers ? (
+                <div className="mt-2">
+                  <button
+                    className="w-full rounded bg-slate-700 px-3 py-2 text-xs"
+                    onClick={async () => {
+                      try {
+                        const link = await createInviteLink(chatId);
+                        setInviteLink(link.invite_url);
+                        if (navigator.clipboard?.writeText) {
+                          await navigator.clipboard.writeText(link.invite_url);
+                        }
+                      } catch {
+                        setError("Failed to create invite link");
+                      }
+                    }}
+                  >
+                    Create invite link
+                  </button>
+                  {inviteLink ? <p className="mt-1 break-all text-[11px] text-sky-300">{inviteLink}</p> : null}
+                </div>
+              ) : null}
             </div>
 
             {showMembersSection ? (

web/src/components/NewChatPanel.tsx

@@ -1,11 +1,11 @@
 import { FormEvent, useMemo, useState } from "react";
-import { createChat, createPrivateChat, createPublicChat, getChats, getSavedMessagesChat } from "../api/chats";
+import { createChat, createPrivateChat, createPublicChat, getChats, getSavedMessagesChat, joinByInvite } from "../api/chats";
 import { searchUsers } from "../api/users";
 import type { ChatType, UserSearchItem } from "../chat/types";
 import { useChatStore } from "../store/chatStore";
 
 type CreateMode = "group" | "channel";
-type DialogMode = "none" | "private" | "group" | "channel";
+type DialogMode = "none" | "private" | "group" | "channel" | "invite";
 
 export function NewChatPanel() {
   const [dialog, setDialog] = useState<DialogMode>("none");
@@ -13,6 +13,7 @@ export function NewChatPanel() {
   const [title, setTitle] = useState("");
   const [handle, setHandle] = useState("");
   const [description, setDescription] = useState("");
+  const [inviteToken, setInviteToken] = useState("");
   const [isPublic, setIsPublic] = useState(false);
   const [results, setResults] = useState<UserSearchItem[]>([]);
   const [loading, setLoading] = useState(false);
@@ -110,6 +111,7 @@ export function NewChatPanel() {
     setQuery("");
     setResults([]);
     setIsPublic(false);
+    setInviteToken("");
   }
 
   return (
@@ -129,6 +131,9 @@ export function NewChatPanel() {
             <button className="block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800" onClick={() => { setDialog("private"); setMenuOpen(false); }}>
               New Message
             </button>
+            <button className="block w-full rounded-lg px-3 py-2 text-left text-sm hover:bg-slate-800" onClick={() => { setDialog("invite"); setMenuOpen(false); }}>
+              Join by Link
+            </button>
           </div>
         ) : null}
         <button className="flex h-12 w-12 items-center justify-center rounded-full bg-sky-500 text-slate-950 shadow-lg hover:bg-sky-400" onClick={() => setMenuOpen((v) => !v)}>
@@ -141,7 +146,7 @@ export function NewChatPanel() {
           <div className="w-full max-w-sm rounded-2xl border border-slate-700/80 bg-slate-900 p-3 shadow-2xl">
             <div className="mb-2 flex items-center justify-between">
               <p className="text-sm font-semibold">
-                {dialog === "private" ? "New Message" : dialog === "group" ? "New Group" : "New Channel"}
+                {dialog === "private" ? "New Message" : dialog === "group" ? "New Group" : dialog === "channel" ? "New Channel" : "Join by Link"}
               </p>
               <button className="rounded-md bg-slate-700/80 px-2 py-1 text-xs" onClick={closeDialog}>Close</button>
             </div>
@@ -178,6 +183,43 @@ export function NewChatPanel() {
               </form>
             ) : null}
 
+            {dialog === "invite" ? (
+              <form
+                className="space-y-2"
+                onSubmit={async (e) => {
+                  e.preventDefault();
+                  if (!inviteToken.trim()) {
+                    setError("Invite token is required");
+                    return;
+                  }
+                  setLoading(true);
+                  setError(null);
+                  try {
+                    const raw = inviteToken.trim();
+                    const match = raw.match(/[?&]token=([^&]+)/i);
+                    const token = match ? decodeURIComponent(match[1]) : raw;
+                    const chat = await joinByInvite(token);
+                    await refreshChatsAndSelect(chat.id);
+                    closeDialog();
+                  } catch {
+                    setError("Failed to join by invite");
+                  } finally {
+                    setLoading(false);
+                  }
+                }}
+              >
+                <input
+                  className="w-full rounded-xl border border-slate-700/80 bg-slate-800/80 px-3 py-2 text-sm outline-none placeholder:text-slate-400 focus:border-sky-500"
+                  placeholder="Invite link or token"
+                  value={inviteToken}
+                  onChange={(e) => setInviteToken(e.target.value)}
+                />
+                <button className="w-full rounded-lg bg-sky-500 px-3 py-2 text-sm font-semibold text-slate-950 hover:bg-sky-400 disabled:opacity-60" disabled={loading} type="submit">
+                  Join
+                </button>
+              </form>
+            ) : null}
+
             {error ? <p className="mt-2 text-xs text-red-400">{error}</p> : null}
           </div>
         </div>