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

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 ? (