@agent-native/core 0.79.16 → 0.79.18

package/corpus/templates/calendar/app/pages/Settings.tsx

@@ -3,10 +3,12 @@ import {
   callAction,
   ChangelogSettingsCard,
   LanguagePicker,
+  SettingsTabsPage,
   openAgentSettings,
   type AppearancePresetId,
   useT,
 } from "@agent-native/core/client";
+import { TeamPage } from "@agent-native/core/client/org";
 import {
   IconBrandZoom,
   IconExternalLink,
@@ -153,292 +155,323 @@ export default function Settings() {
   }
 
   return (
-    <div className="mx-auto max-w-2xl space-y-6 px-4 py-8 pb-12">
-      <div>
-        <h1 className="text-2xl font-semibold">{t("settings.title")}</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          {t("settings.description")}
-        </p>
-      </div>
+    <SettingsTabsPage
+      generalLabel={t("settings.general")}
+      teamLabel={t("navigation.team")}
+      general={
+        <div className="mx-auto max-w-2xl space-y-6 pb-12">
+          <p className="text-sm text-muted-foreground">
+            {t("settings.description")}
+          </p>
 
-      <ChangelogSettingsCard markdown={changelog} />
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">
+                {t("settings.languageTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.languageDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="max-w-xs space-y-1.5">
+              <Label>{t("settings.languageLabel")}</Label>
+              <LanguagePicker label={t("settings.languageLabel")} />
+            </CardContent>
+          </Card>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">
-            {t("settings.languageTitle")}
-          </CardTitle>
-          <CardDescription>{t("settings.languageDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent className="max-w-xs space-y-1.5">
-          <Label>{t("settings.languageLabel")}</Label>
-          <LanguagePicker label={t("settings.languageLabel")} />
-        </CardContent>
-      </Card>
-
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">{t("settings.agentTitle")}</CardTitle>
-          <CardDescription>{t("settings.agentDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <Button variant="outline" onClick={() => openAgentSettings()}>
-            {t("settings.openAgentSettings")}
-          </Button>
-        </CardContent>
-      </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">
+                {t("settings.agentTitle")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.agentDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="outline" onClick={() => openAgentSettings()}>
+                {t("settings.openAgentSettings")}
+              </Button>
+            </CardContent>
+          </Card>
 
-      {/* Google Calendar Connection */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">
-            {t("settings.googleCalendar")}
-          </CardTitle>
-          <CardDescription>{t("settings.googleDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              {googleStatus.data?.connected ? (
-                <>
-                  <IconCircleCheck className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
-                  <div>
-                    <p className="text-sm font-medium">
-                      {t("common.connected")}
-                    </p>
-                    {googleStatus.data.accounts?.length > 0 && (
-                      <p className="text-xs text-muted-foreground">
-                        {googleStatus.data.accounts
-                          .map((a) => a.email)
-                          .join(", ")}
+          {/* Google Calendar Connection */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">
+                {t("settings.googleCalendar")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.googleDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  {googleStatus.data?.connected ? (
+                    <>
+                      <IconCircleCheck className="h-5 w-5 text-emerald-600 dark:text-emerald-400" />
+                      <div>
+                        <p className="text-sm font-medium">
+                          {t("common.connected")}
+                        </p>
+                        {googleStatus.data.accounts?.length > 0 && (
+                          <p className="text-xs text-muted-foreground">
+                            {googleStatus.data.accounts
+                              .map((a) => a.email)
+                              .join(", ")}
+                          </p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <IconCircleX className="h-5 w-5 text-muted-foreground" />
+                      <p className="text-sm text-muted-foreground">
+                        {t("common.notConnected")}
                       </p>
-                    )}
-                  </div>
-                </>
-              ) : (
-                <>
-                  <IconCircleX className="h-5 w-5 text-muted-foreground" />
-                  <p className="text-sm text-muted-foreground">
-                    {t("common.notConnected")}
-                  </p>
-                </>
-              )}
-            </div>
+                    </>
+                  )}
+                </div>
 
-            {googleStatus.data?.connected ? (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleDisconnect}
-                disabled={disconnectGoogle.isPending}
-              >
-                <IconUnlink className="me-1.5 h-3.5 w-3.5" />
-                {t("common.disconnect")}
-              </Button>
-            ) : (
-              <Button
-                size="sm"
-                onClick={handleConnect}
-                disabled={
-                  authUrl.isLoading ||
-                  authUrl.isFetching ||
-                  isGoogleDesktopAuthPending
-                }
-              >
-                <IconExternalLink className="me-1.5 h-3.5 w-3.5" />
-                {t("common.connect")}
-              </Button>
-            )}
-          </div>
-        </CardContent>
-      </Card>
+                {googleStatus.data?.connected ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleDisconnect}
+                    disabled={disconnectGoogle.isPending}
+                  >
+                    <IconUnlink className="me-1.5 h-3.5 w-3.5" />
+                    {t("common.disconnect")}
+                  </Button>
+                ) : (
+                  <Button
+                    size="sm"
+                    onClick={handleConnect}
+                    disabled={
+                      authUrl.isLoading ||
+                      authUrl.isFetching ||
+                      isGoogleDesktopAuthPending
+                    }
+                  >
+                    <IconExternalLink className="me-1.5 h-3.5 w-3.5" />
+                    {t("common.connect")}
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
 
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">Zoom</CardTitle>
-          <CardDescription>{t("settings.zoomDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="flex items-center justify-between gap-4">
-            <div className="flex min-w-0 items-center gap-3">
-              {zoomStatus.data?.connected ? (
-                <>
-                  <IconCircleCheck className="h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
-                  <div className="min-w-0">
-                    <p className="text-sm font-medium">
-                      {t("common.connected")}
-                    </p>
-                    {zoomStatus.data.accounts?.length > 0 && (
-                      <p className="truncate text-xs text-muted-foreground">
-                        {zoomStatus.data.accounts
-                          .map((a) => a.email || a.displayName || a.id)
-                          .join(", ")}
-                      </p>
-                    )}
-                  </div>
-                </>
-              ) : (
-                <>
-                  <IconCircleX className="h-5 w-5 shrink-0 text-muted-foreground" />
-                  <div className="min-w-0">
-                    <p className="text-sm text-muted-foreground">
-                      {zoomStatus.data?.configured === false
-                        ? t("settings.zoomNotConfigured")
-                        : t("common.notConnected")}
-                    </p>
-                    {zoomStatus.data?.configured === false && (
-                      <p className="text-xs text-muted-foreground">
-                        {t("settings.zoomCredentialsPrompt")}
-                      </p>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">Zoom</CardTitle>
+              <CardDescription>{t("settings.zoomDescription")}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center justify-between gap-4">
+                <div className="flex min-w-0 items-center gap-3">
+                  {zoomStatus.data?.connected ? (
+                    <>
+                      <IconCircleCheck className="h-5 w-5 shrink-0 text-emerald-600 dark:text-emerald-400" />
+                      <div className="min-w-0">
+                        <p className="text-sm font-medium">
+                          {t("common.connected")}
+                        </p>
+                        {zoomStatus.data.accounts?.length > 0 && (
+                          <p className="truncate text-xs text-muted-foreground">
+                            {zoomStatus.data.accounts
+                              .map((a) => a.email || a.displayName || a.id)
+                              .join(", ")}
+                          </p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <>
+                      <IconCircleX className="h-5 w-5 shrink-0 text-muted-foreground" />
+                      <div className="min-w-0">
+                        <p className="text-sm text-muted-foreground">
+                          {zoomStatus.data?.configured === false
+                            ? t("settings.zoomNotConfigured")
+                            : t("common.notConnected")}
+                        </p>
+                        {zoomStatus.data?.configured === false && (
+                          <p className="text-xs text-muted-foreground">
+                            {t("settings.zoomCredentialsPrompt")}
+                          </p>
+                        )}
+                      </div>
+                    </>
+                  )}
+                </div>
 
-            {zoomStatus.data?.connected ? (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleDisconnectZoom}
-                disabled={disconnectZoom.isPending}
-              >
-                <IconUnlink className="me-1.5 h-3.5 w-3.5" />
-                {t("common.disconnect")}
-              </Button>
-            ) : (
-              <Button
-                size="sm"
-                onClick={handleConnectZoom}
-                disabled={
-                  connectZoom.isPending || zoomStatus.data?.configured === false
-                }
-              >
-                <IconBrandZoom className="me-1.5 h-3.5 w-3.5" />
-                {t("common.connect")}
-              </Button>
-            )}
-          </div>
-        </CardContent>
-      </Card>
+                {zoomStatus.data?.connected ? (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleDisconnectZoom}
+                    disabled={disconnectZoom.isPending}
+                  >
+                    <IconUnlink className="me-1.5 h-3.5 w-3.5" />
+                    {t("common.disconnect")}
+                  </Button>
+                ) : (
+                  <Button
+                    size="sm"
+                    onClick={handleConnectZoom}
+                    disabled={
+                      connectZoom.isPending ||
+                      zoomStatus.data?.configured === false
+                    }
+                  >
+                    <IconBrandZoom className="me-1.5 h-3.5 w-3.5" />
+                    {t("common.connect")}
+                  </Button>
+                )}
+              </div>
+            </CardContent>
+          </Card>
 
-      {/* Google Setup Wizard */}
-      {!googleStatus.data?.connected && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">
-              {t("settings.connectGoogleCalendar")}
-            </CardTitle>
-            <CardDescription>
-              {t("settings.connectGoogleDescription")}
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <GoogleSetupWizard />
-          </CardContent>
-        </Card>
-      )}
+          {/* Google Setup Wizard */}
+          {!googleStatus.data?.connected && (
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-lg">
+                  {t("settings.connectGoogleCalendar")}
+                </CardTitle>
+                <CardDescription>
+                  {t("settings.connectGoogleDescription")}
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <GoogleSetupWizard />
+              </CardContent>
+            </Card>
+          )}
 
-      <Separator />
+          <Separator />
 
-      {/* General Settings */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">{t("settings.general")}</CardTitle>
-          <CardDescription>{t("settings.generalDescription")}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="timezone">{t("settings.timezone")}</Label>
-            <TimezoneCombobox value={timezone} onChange={setTimezone} />
-          </div>
+          {/* General Settings */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">{t("settings.general")}</CardTitle>
+              <CardDescription>
+                {t("settings.generalDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="timezone">{t("settings.timezone")}</Label>
+                <TimezoneCombobox value={timezone} onChange={setTimezone} />
+              </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="booking-title">
-              {t("settings.bookingTitleLabel")}
-            </Label>
-            <Input
-              id="booking-title"
-              value={bookingTitle}
-              onChange={(e) => setBookingTitle(e.target.value)}
-              placeholder={t("settings.bookingTitlePlaceholder")}
-            />
-            <p className="text-xs text-muted-foreground">
-              {t("settings.bookingTitleHelp")}
-            </p>
-          </div>
+              <div className="space-y-2">
+                <Label htmlFor="booking-title">
+                  {t("settings.bookingTitleLabel")}
+                </Label>
+                <Input
+                  id="booking-title"
+                  value={bookingTitle}
+                  onChange={(e) => setBookingTitle(e.target.value)}
+                  placeholder={t("settings.bookingTitlePlaceholder")}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("settings.bookingTitleHelp")}
+                </p>
+              </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="booking-desc">
-              {t("settings.bookingDescriptionLabel")}
-            </Label>
-            <Textarea
-              id="booking-desc"
-              value={bookingDescription}
-              onChange={(e) => setBookingDescription(e.target.value)}
-              placeholder={t("settings.bookingDescriptionPlaceholder")}
-              rows={2}
-            />
-            <p className="text-xs text-muted-foreground">
-              {t("settings.bookingDescriptionHelp")}
-            </p>
-          </div>
+              <div className="space-y-2">
+                <Label htmlFor="booking-desc">
+                  {t("settings.bookingDescriptionLabel")}
+                </Label>
+                <Textarea
+                  id="booking-desc"
+                  value={bookingDescription}
+                  onChange={(e) => setBookingDescription(e.target.value)}
+                  placeholder={t("settings.bookingDescriptionPlaceholder")}
+                  rows={2}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("settings.bookingDescriptionHelp")}
+                </p>
+              </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="default-duration">
-              {t("settings.defaultDurationLabel")}
-            </Label>
-            <Input
-              id="default-duration"
-              type="number"
-              value={defaultDuration}
-              onChange={(e) => setDefaultDuration(Number(e.target.value))}
-              min={5}
-              max={480}
-            />
-            <p className="text-xs text-muted-foreground">
-              {t("settings.defaultDurationHelp")}
-            </p>
-          </div>
+              <div className="space-y-2">
+                <Label htmlFor="default-duration">
+                  {t("settings.defaultDurationLabel")}
+                </Label>
+                <Input
+                  id="default-duration"
+                  type="number"
+                  value={defaultDuration}
+                  onChange={(e) => setDefaultDuration(Number(e.target.value))}
+                  min={5}
+                  max={480}
+                />
+                <p className="text-xs text-muted-foreground">
+                  {t("settings.defaultDurationHelp")}
+                </p>
+              </div>
 
-          <div className="flex flex-wrap gap-2">
-            <Button onClick={handleSave} disabled={updateSettings.isPending}>
-              {updateSettings.isPending
-                ? t("common.saving")
-                : t("settings.saveSettings")}
-            </Button>
-            <Button asChild variant="outline">
-              <Link to="/booking-links">
-                <IconLink className="me-1.5 h-3.5 w-3.5" />
-                {t("navigation.bookingLinks")}
-              </Link>
-            </Button>
-          </div>
-        </CardContent>
-      </Card>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  onClick={handleSave}
+                  disabled={updateSettings.isPending}
+                >
+                  {updateSettings.isPending
+                    ? t("common.saving")
+                    : t("settings.saveSettings")}
+                </Button>
+                <Button asChild variant="outline">
+                  <Link to="/booking-links">
+                    <IconLink className="me-1.5 h-3.5 w-3.5" />
+                    {t("navigation.bookingLinks")}
+                  </Link>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
 
-      {/* Appearance */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">{t("settings.appearance")}</CardTitle>
-          <CardDescription>
-            {t("settings.appearanceDescription")}
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <AppearancePicker
-            onChange={(preset: AppearancePresetId) => {
-              // Persist server-side so the choice survives reload and syncs
-              // across devices; the local UI has already updated optimistically.
-              callAction("change-appearance" as any, { preset } as any).catch(
-                () => {
-                  // Server write failed; the local DOM change still stands.
-                },
-              );
-            }}
+          {/* Appearance */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg">
+                {t("settings.appearance")}
+              </CardTitle>
+              <CardDescription>
+                {t("settings.appearanceDescription")}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <AppearancePicker
+                onChange={(preset: AppearancePresetId) => {
+                  // Persist server-side so the choice survives reload and syncs
+                  // across devices; the local UI has already updated optimistically.
+                  callAction(
+                    "change-appearance" as any,
+                    { preset } as any,
+                  ).catch(() => {
+                    // Server write failed; the local DOM change still stands.
+                  });
+                }}
+              />
+            </CardContent>
+          </Card>
+        </div>
+      }
+      team={
+        <div className="mx-auto w-full max-w-2xl">
+          <TeamPage
+            showTitle={false}
+            createOrgDescription="Set up a team to share calendars and booking links with your colleagues."
           />
-        </CardContent>
-      </Card>
-    </div>
+        </div>
+      }
+      whatsNew={
+        <div className="mx-auto w-full max-w-2xl">
+          <ChangelogSettingsCard markdown={changelog} />
+        </div>
+      }
+    />
   );
 }

package/corpus/templates/calendar/app/routes/_app.team.tsx

@@ -1,26 +1,11 @@
-import { useT } from "@agent-native/core/client";
-import { useMemo } from "react";
+import { Navigate } from "react-router";
 
-import { useAppHeaderControls } from "@/components/layout/AppLayout";
 import { messagesByLocale } from "@/i18n-data";
-import Team from "@/pages/Team";
 
 export function meta() {
   return [{ title: messagesByLocale["en-US"].routeTitles.team }];
 }
 
 export default function TeamRoute() {
-  const t = useT();
-  const controls = useMemo(
-    () => ({
-      left: (
-        <h1 className="text-lg font-semibold tracking-tight truncate">
-          {t("navigation.team")}
-        </h1>
-      ),
-    }),
-    [t],
-  );
-  useAppHeaderControls(controls);
-  return <Team />;
+  return <Navigate to="/settings#team" replace />;
 }