@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/settings/personal-team/team/team-invitations.tsx

@@ -14,7 +14,6 @@ import {
   X,
 } from "lucide-react"
 import { useMemo, useEffect, useState } from "react"
-import { useTranslation } from "react-i18next"
 import { cn } from "@/lib/utils"
 import { formatDate } from "@/lib/datetime"
 import { useTimezone } from "@/providers/timezone-provider"
@@ -60,6 +59,15 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
+import { m } from "@/paraglide/messages.js";
+
+const ROLE_LABELS: Record<string, () => string> = {
+  admin: m.settings_team_role_admin,
+  member: m.settings_team_role_member,
+  viewer: m.settings_team_role_viewer,
+  guest: m.settings_team_role_guest,
+  owner: m.settings_team_role_owner,
+}
 
 export interface TeamInvitation {
   id: string
@@ -119,59 +127,56 @@ export interface TeamInvitationsProps {
 
 function formatTimeUntil(
   date: Date,
-  t: (key: string, params?: Record<string, unknown>) => string,
 ): string {
   const now = Date.now()
   const diff = date.getTime() - now
 
-  if (diff <= 0) return t("team.expired")
+  if (diff <= 0) return m.settings_team_expired()
 
   const days = Math.floor(diff / (1000 * 60 * 60 * 24))
   const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
 
-  if (days > 0) return t("team.days", { count: days })
-  if (hours > 0) return t("team.hours", { count: hours })
-  return t("team.lessThanHour")
+  if (days > 0) return m.settings_team_days({ count: days })
+  if (hours > 0) return m.settings_team_hours({ count: hours })
+  return m.settings_team_lessThanHour()
 }
 
 function getInvitationBadge(
   invitation: TeamInvitation,
-  t: (key: string) => string,
 ) {
   if (invitation.joinRequestId) {
     switch (invitation.joinRequestStatus) {
       case "pending":
-        return <Badge variant="default">{t("team.status.pendingApproval")}</Badge>
+        return <Badge variant="default">{m.settings_team_status_pendingApproval()}</Badge>
       case "approved":
-        return <Badge variant="default">{t("team.joinRequests.requestApproved")}</Badge>
+        return <Badge variant="default">{m.settings_team_joinRequests_requestApproved()}</Badge>
       case "rejected":
-        return <Badge variant="destructive">{t("team.joinRequests.requestRejected")}</Badge>
+        return <Badge variant="destructive">{m.settings_team_joinRequests_requestRejected()}</Badge>
       case "invalidated":
-        return <Badge variant="outline">{t("team.joinRequests.requestInvalidated")}</Badge>
+        return <Badge variant="outline">{m.settings_team_joinRequests_requestInvalidated()}</Badge>
     }
   }
   switch (invitation.status) {
     case "pending":
-      return <Badge variant="secondary">{t("team.status.pending")}</Badge>
+      return <Badge variant="secondary">{m.settings_team_status_pending()}</Badge>
     case "pending_approval":
-      return <Badge variant="default">{t("team.status.pendingApproval")}</Badge>
+      return <Badge variant="default">{m.settings_team_status_pendingApproval()}</Badge>
     case "accepted":
-      return <Badge variant="default">{t("team.status.accepted")}</Badge>
+      return <Badge variant="default">{m.settings_team_status_accepted()}</Badge>
     case "expired":
-      return <Badge variant="outline">{t("team.status.expired")}</Badge>
+      return <Badge variant="outline">{m.settings_team_status_expired()}</Badge>
     case "revoked":
-      return <Badge variant="destructive">{t("team.status.revoked")}</Badge>
+      return <Badge variant="destructive">{m.settings_team_status_revoked()}</Badge>
   }
 }
 
 function getChannelBadge(
   channel: "email" | "link",
-  t: (key: string) => string,
 ) {
   if (channel === "link") {
-    return <Badge variant="outline" className="text-xs">{t("team.channel.link")}</Badge>
+    return <Badge variant="outline" className="text-xs">{m.settings_team_channel_link()}</Badge>
   }
-  return <Badge variant="outline" className="text-xs">{t("team.channel.email")}</Badge>
+  return <Badge variant="outline" className="text-xs">{m.settings_team_channel_email()}</Badge>
 }
 
 export default function TeamInvitations({
@@ -190,7 +195,6 @@ export default function TeamInvitations({
   className,
   allowDirectLinks = true,
 }: TeamInvitationsProps) {
-  const { t } = useTranslation("settings")
   const timezone = useTimezone()
   const [actionLoading, setActionLoading] = useState<string | null>(null)
   const [clearingExpired, setClearingExpired] = useState(false)
@@ -284,10 +288,7 @@ export default function TeamInvitations({
         const expiresDays = newInvitation.expiresAt
           ? Math.max(1, Math.ceil((newInvitation.expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24)))
           : linkExpires
-      const message = t("team.linkCopiedMessage", {
-          inviteLink: newInvitation.link,
-          days: expiresDays,
-        })
+      const message = m.settings_team_linkCopiedMessage({ inviteLink: newInvitation.link, days: expiresDays })
         navigator.clipboard.writeText(message).catch(() => {})
         setLinkCopied(true)
         setTimeout(() => setLinkCopied(false), 3000)
@@ -297,7 +298,7 @@ export default function TeamInvitations({
         _general:
           error instanceof Error
             ? error.message
-            : t("team.inviteCreateFailed"),
+            : m.settings_team_inviteCreateFailed(),
       })
     } finally {
       setLinkRefreshing(false)
@@ -310,10 +311,7 @@ export default function TeamInvitations({
       const days = activeLinkInvitation.expiresAt
         ? Math.max(1, Math.ceil((activeLinkInvitation.expiresAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24)))
         : linkExpires
-        const message = t("team.linkCopiedMessage", {
-        inviteLink: activeLinkInvitation.link,
-        days,
-      })
+        const message = m.settings_team_linkCopiedMessage({ inviteLink: activeLinkInvitation.link, days })
       await navigator.clipboard.writeText(message)
       setLinkCopied(true)
       setTimeout(() => setLinkCopied(false), 3000)
@@ -324,13 +322,13 @@ export default function TeamInvitations({
     setErrors({})
 
     if (!emailAddress.trim()) {
-      setErrors({ email: t("team.emailRequired") })
+      setErrors({ email: m.settings_team_emailRequired() })
       return
     }
 
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
     if (!emailRegex.test(emailAddress)) {
-      setErrors({ email: t("team.invalidEmail") })
+      setErrors({ email: m.settings_team_invalidEmail() })
       return
     }
 
@@ -349,7 +347,7 @@ export default function TeamInvitations({
         _general:
           error instanceof Error
             ? error.message
-            : t("team.inviteCreateFailed"),
+            : m.settings_team_inviteCreateFailed(),
       })
     } finally {
       setEmailCreating(false)
@@ -396,13 +394,9 @@ export default function TeamInvitations({
     <Card className={cn("w-full min-w-100 border shadow-xs", className)}>
       <CardHeader>
         <div className="flex flex-col gap-2">
-          <CardTitle>{t("team.invite.title")}</CardTitle>
+          <CardTitle>{m.settings_team_invite_title()}</CardTitle>
           <CardDescription>
-            {t("team.invite.description", {
-              pending: pendingInvitations.length,
-              approvalPending: approvalPendingInvitations.length,
-              accepted: acceptedInvitations.length,
-            })}
+            {m.settings_team_invite_description({ pending: pendingInvitations.length, approvalPending: approvalPendingInvitations.length, accepted: acceptedInvitations.length })}
           </CardDescription>
         </div>
       </CardHeader>
@@ -421,11 +415,11 @@ export default function TeamInvitations({
                     <div className="flex items-center gap-2">
                       <Link2 className="size-4" />
                       <h4 className="font-medium text-sm">
-                        {t("team.invite.linkTitle")}
+                        {m.settings_team_invite_linkTitle()}
                       </h4>
                     </div>
                     <span className="text-muted-foreground text-xs">
-                      {t("team.invite.linkDescription")}
+                      {m.settings_team_invite_linkDescription()}
                     </span>
                   </div>
                   <div className="flex items-center gap-2">
@@ -440,19 +434,19 @@ export default function TeamInvitations({
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="1">
-                          {t("team.days", { count: 1 })}
+                          {m.settings_team_days({ count: 1 })}
                         </SelectItem>
                         <SelectItem value="3">
-                          {t("team.days", { count: 3 })}
+                          {m.settings_team_days({ count: 3 })}
                         </SelectItem>
                         <SelectItem value="7">
-                          {t("team.days", { count: 7 })}
+                          {m.settings_team_days({ count: 7 })}
                         </SelectItem>
                         <SelectItem value="14">
-                          {t("team.days", { count: 14 })}
+                          {m.settings_team_days({ count: 14 })}
                         </SelectItem>
                         <SelectItem value="30">
-                          {t("team.days", { count: 30 })}
+                          {m.settings_team_days({ count: 30 })}
                         </SelectItem>
                       </SelectContent>
                     </Select>
@@ -468,12 +462,12 @@ export default function TeamInvitations({
                       {linkRefreshing ? (
                         <>
                           <Loader2 className="size-4 animate-spin" />
-                          {t("team.invite.linkRefreshing")}
+                          {m.settings_team_invite_linkRefreshing()}
                         </>
                       ) : (
                         <>
                           <RefreshCw className="size-4" />
-                          {t("team.invite.refreshLink")}
+                          {m.settings_team_invite_refreshLink()}
                         </>
                       )}
                     </Button>
@@ -486,17 +480,17 @@ export default function TeamInvitations({
                     {activeLinkInvitation.link}
                   </code>
                   {isLinkExpired && (
-                    <Badge variant="destructive">{t("team.status.expired")}</Badge>
+                    <Badge variant="destructive">{m.settings_team_status_expired()}</Badge>
                   )}
                   {activeLinkInvitation.expiresAt && (
                     <span className="text-muted-foreground text-xs whitespace-nowrap shrink-0">
                       {isLinkExpired
-                        ? t("team.invite.linkExpired")
-                        : `${t("team.invite.linkExpiry")} ${linkExpiryText}`}
+                        ? m.settings_team_invite_linkExpired()
+                        : `${m.settings_team_invite_linkExpiry()} ${linkExpiryText}`}
                     </span>
                   )}
                   <Button
-                    aria-label={t("team.copyLink")}
+                    aria-label={m.settings_team_copyLink()}
                     onClick={handleCopyActiveLink}
                     size="icon-sm"
                     type="button"
@@ -513,7 +507,7 @@ export default function TeamInvitations({
                 <div className="flex items-center justify-center gap-2 rounded-md border border-dashed bg-muted/20 p-3">
                   <Link2Off className="size-4 shrink-0 text-muted-foreground" />
                   <p className="text-muted-foreground text-xs">
-                    {t("team.invite.noActiveLink")}
+                    {m.settings_team_invite_noActiveLink()}
                   </p>
                 </div>
               )}
@@ -524,10 +518,10 @@ export default function TeamInvitations({
             <div className="flex items-center gap-2">
               <Mail className="size-4" />
               <h4 className="font-medium text-sm">
-                {t("team.invite.emailTitle")}
+                {m.settings_team_invite_emailTitle()}
               </h4>
               <span className="text-muted-foreground text-xs">
-                {t("team.invite.emailDescription")}
+                {m.settings_team_invite_emailDescription()}
               </span>
             </div>
 
@@ -541,7 +535,7 @@ export default function TeamInvitations({
                     <InputGroupInput
                       id="email-invite-email"
                       onChange={(e) => setEmailAddress(e.target.value)}
-                      placeholder={t("team.invite.emailPlaceholder")}
+                      placeholder={m.settings_team_invite_emailPlaceholder()}
                       type="email"
                       value={emailAddress}
                     />
@@ -564,13 +558,13 @@ export default function TeamInvitations({
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="member">
-                          {t("team.role.member")}
+                          {m.settings_team_role_member()}
                         </SelectItem>
                         <SelectItem value="admin">
-                          {t("team.role.admin")}
+                          {m.settings_team_role_admin()}
                         </SelectItem>
                         <SelectItem value="viewer">
-                          {t("team.role.viewer")}
+                          {m.settings_team_role_viewer()}
                         </SelectItem>
                       </SelectContent>
                     </Select>
@@ -590,19 +584,19 @@ export default function TeamInvitations({
                       </SelectTrigger>
                       <SelectContent>
                         <SelectItem value="1">
-                          {t("team.days", { count: 1 })}
+                          {m.settings_team_days({ count: 1 })}
                         </SelectItem>
                         <SelectItem value="3">
-                          {t("team.days", { count: 3 })}
+                          {m.settings_team_days({ count: 3 })}
                         </SelectItem>
                         <SelectItem value="7">
-                          {t("team.days", { count: 7 })}
+                          {m.settings_team_days({ count: 7 })}
                         </SelectItem>
                         <SelectItem value="14">
-                          {t("team.days", { count: 14 })}
+                          {m.settings_team_days({ count: 14 })}
                         </SelectItem>
                         <SelectItem value="30">
-                          {t("team.days", { count: 30 })}
+                          {m.settings_team_days({ count: 30 })}
                         </SelectItem>
                       </SelectContent>
                     </Select>
@@ -615,7 +609,7 @@ export default function TeamInvitations({
                   <Input
                     id="email-invite-message"
                     onChange={(e) => setEmailMessage(e.target.value)}
-                    placeholder={t("team.invite.messagePlaceholder")}
+                    placeholder={m.settings_team_invite_messagePlaceholder()}
                     value={emailMessage}
                   />
                 </FieldContent>
@@ -632,12 +626,12 @@ export default function TeamInvitations({
                 {emailCreating ? (
                   <>
                     <Loader2 className="size-4 animate-spin" />
-                    {t("team.invite.creating")}
+                    {m.settings_team_invite_creating()}
                   </>
                 ) : (
                   <>
                     <Send className="size-4" />
-                    {t("team.invite.sendInvite")}
+                    {m.settings_team_invite_sendInvite()}
                   </>
                 )}
               </Button>
@@ -650,7 +644,7 @@ export default function TeamInvitations({
               <div className="flex flex-col gap-1">
                 <div className="flex items-center justify-between gap-2">
                   <h4 className="font-medium text-sm">
-                    {t("team.invite.historyTitle")}
+                    {m.settings_team_invite_historyTitle()}
                   </h4>
                   {onClearExpired && (
                     <Button
@@ -672,7 +666,7 @@ export default function TeamInvitations({
                       ) : (
                         <X className="size-4" />
                       )}
-                      {t("team.invite.clearExpired")}
+                      {m.settings_team_invite_clearExpired()}
                     </Button>
                   )}
                 </div>
@@ -693,21 +687,21 @@ export default function TeamInvitations({
                                   : invitation.email}
                               </span>
                             )}
-                            {getChannelBadge(invitation.channel, t)}
-                            {getInvitationBadge(invitation, t)}
+                            {getChannelBadge(invitation.channel)}
+                            {getInvitationBadge(invitation)}
                             {invitation.status === "pending_approval" && invitation.channel === "link" && (
-                              <Badge variant="secondary" className="text-xs">{t("team.unregistered")}</Badge>
+                              <Badge variant="secondary" className="text-xs">{m.settings_team_unregistered()}</Badge>
                             )}
                             {invitation.role && (
                               <Badge variant="outline">
-                                {t(`team.role.${invitation.role}`)}
+                                {ROLE_LABELS[invitation.role]?.() ?? invitation.role}
                               </Badge>
                             )}
                           </div>
                           <div className="flex flex-wrap items-center gap-2 text-muted-foreground text-xs">
                             {invitation.joinRequestId ? (
                               <span>
-                                {t("team.joinRequests.appliedAt")}{" "}
+                                {m.settings_team_joinRequests_appliedAt()}{" "}
                                 {formatDate(
                                   invitation.createdAt,
                                   timezone,
@@ -716,7 +710,7 @@ export default function TeamInvitations({
                               </span>
                             ) : (
                               <span>
-                                {t("team.invite.invitedAt")}{" "}
+                                {m.settings_team_invite_invitedAt()}{" "}
                                 {invitation.invitedBy.name}{" "}
                                 {formatDate(
                                   invitation.createdAt,
@@ -730,9 +724,9 @@ export default function TeamInvitations({
                                 <span aria-hidden="true">•</span>
                                 <span>
                                   {(() => {
-                                    const timeStr = formatTimeUntil(invitation.expiresAt, t)
-                                    if (timeStr === t("team.expired")) return timeStr
-                                    return t("team.expiresIn", { time: timeStr })
+                                    const timeStr = formatTimeUntil(invitation.expiresAt)
+                                    if (timeStr === m.settings_team_expired()) return timeStr
+                                    return m.settings_team_expiresIn({ time: timeStr })
                                   })()}
                                 </span>
                               </>
@@ -741,7 +735,7 @@ export default function TeamInvitations({
                               <>
                                 <span aria-hidden="true">•</span>
                                 <span>
-                                  {t("team.invite.acceptedAt")}{" "}
+                                  {m.settings_team_invite_acceptedAt()}{" "}
                                   {formatDate(
                                     invitation.acceptedAt,
                                     timezone,
@@ -765,13 +759,13 @@ export default function TeamInvitations({
                               </SelectTrigger>
                               <SelectContent>
                                 <SelectItem value="member">
-                                  {t("team.role.member")}
+                                  {m.settings_team_role_member()}
                                 </SelectItem>
                                 <SelectItem value="admin">
-                                  {t("team.role.admin")}
+                                  {m.settings_team_role_admin()}
                                 </SelectItem>
                                 <SelectItem value="viewer">
-                                  {t("team.role.viewer")}
+                                  {m.settings_team_role_viewer()}
                                 </SelectItem>
                               </SelectContent>
                             </Select>
@@ -788,7 +782,7 @@ export default function TeamInvitations({
                               ) : (
                                 <Check className="size-4" />
                               )}
-                              {t("team.invite.approve")}
+                              {m.settings_team_invite_approve()}
                             </Button>
                             <DropdownMenu>
                               <DropdownMenuTrigger asChild>
@@ -824,8 +818,8 @@ export default function TeamInvitations({
                                     <Trash2 className="size-4" />
                                   )}
                                   {invitation.joinRequestId
-                                    ? t("team.joinRequests.reject")
-                                    : t("team.revoke")}
+                                    ? m.settings_team_joinRequests_reject()
+                                    : m.settings_team_revoke()}
                                 </DropdownMenuItem>
                               </DropdownMenuContent>
                             </DropdownMenu>
@@ -873,7 +867,7 @@ export default function TeamInvitations({
                                     }
                                   >
                                     <RefreshCw className="size-4" />
-                                    {t("team.resend")}
+                                    {m.settings_team_resend()}
                                   </DropdownMenuItem>
                                 )}
                                 {canRevoke && (
@@ -889,7 +883,7 @@ export default function TeamInvitations({
                                       variant="destructive"
                                     >
                                       <Trash2 className="size-4" />
-                                      {t("team.revoke")}
+                                      {m.settings_team_revoke()}
                                     </DropdownMenuItem>
                                   </>
                                 )}
@@ -909,7 +903,7 @@ export default function TeamInvitations({
                                       variant="destructive"
                                     >
                                       <Trash2 className="size-4" />
-                                      {t("team.invite.deleteRecord")}
+                                      {m.settings_team_invite_deleteRecord()}
                                     </DropdownMenuItem>
                                   </>
                                 )}
@@ -931,13 +925,13 @@ export default function TeamInvitations({
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="member">
-                               {t("team.role.member")}
+                               {m.settings_team_role_member()}
                              </SelectItem>
                              <SelectItem value="admin">
-                               {t("team.role.admin")}
+                               {m.settings_team_role_admin()}
                              </SelectItem>
                              <SelectItem value="viewer">
-                               {t("team.role.viewer")}
+                               {m.settings_team_role_viewer()}
                              </SelectItem>
                            </SelectContent>
                          </Select>
@@ -954,7 +948,7 @@ export default function TeamInvitations({
                             ) : (
                               <Check className="size-4" />
                             )}
-                            {t("team.invite.approve")}
+                            {m.settings_team_invite_approve()}
                           </Button>
                           <DropdownMenu>
                             <DropdownMenuTrigger asChild>
@@ -990,8 +984,8 @@ export default function TeamInvitations({
                                   <Trash2 className="size-4" />
                                 )}
                                 {invitation.joinRequestId
-                                  ? t("team.joinRequests.reject")
-                                  : t("team.revoke")}
+                                  ? m.settings_team_joinRequests_reject()
+                                  : m.settings_team_revoke()}
                               </DropdownMenuItem>
                             </DropdownMenuContent>
                           </DropdownMenu>
@@ -1009,9 +1003,9 @@ export default function TeamInvitations({
                 <EmptyMedia variant="icon">
                   <Mail className="size-6" />
                 </EmptyMedia>
-                <EmptyTitle>{t("team.invite.noInvitations")}</EmptyTitle>
+                <EmptyTitle>{m.settings_team_invite_noInvitations()}</EmptyTitle>
                 <EmptyDescription>
-                  {t("team.invite.createFirst")}
+                  {m.settings_team_invite_createFirst()}
                 </EmptyDescription>
               </EmptyHeader>
             </Empty>