@nocobase/app-template-default 1.0.0-beta.58 → 1.0.0-beta.60

package/client/pages/home/index.tsx

@@ -0,0 +1,190 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import {
+  ArrowRightIcon,
+  CheckIcon,
+  CopyIcon,
+  MessageSquareTextIcon,
+  SparklesIcon,
+} from 'lucide-react';
+import { type ReactElement, useState } from 'react';
+
+import { PageContainer } from '#components/page-container';
+import { Button } from '#components/ui/button';
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '#components/ui/card';
+
+import { CAPABILITIES, type Capability } from './capabilities.js';
+import { PromptDialog } from './prompt-dialog.js';
+import { useCopy } from './use-copy.js';
+
+const STEPS = ['describe', 'build', 'review'] as const;
+
+export default function HomePage(): ReactElement {
+  const { t } = useTranslation();
+  const [selected, setSelected] = useState<Capability>();
+  const [open, setOpen] = useState(false);
+  // Changes on every opening, so the dialog remounts and drops the edits of the previous one.
+  const [openCount, setOpenCount] = useState(0);
+
+  const openCapability = (capability: Capability): void => {
+    setSelected(capability);
+    setOpenCount((count) => count + 1);
+    setOpen(true);
+  };
+
+  return (
+    <PageContainer className='mx-auto max-w-6xl'>
+      <AgentIntro />
+      <section
+        aria-labelledby='home-capabilities'
+        className='flex flex-col gap-4'
+      >
+        <div className='flex flex-col gap-1'>
+          <h2 id='home-capabilities' className='text-base font-medium'>
+            {t('home.capabilitiesTitle')}
+          </h2>
+          <p className='text-sm text-muted-foreground'>
+            {t('home.capabilitiesDescription')}
+          </p>
+        </div>
+        <ul className='grid gap-4 sm:grid-cols-2 xl:grid-cols-3'>
+          {CAPABILITIES.map((capability) => (
+            <li key={capability.id} className='flex'>
+              <CapabilityCard
+                capability={capability}
+                onOpen={() => openCapability(capability)}
+              />
+            </li>
+          ))}
+        </ul>
+      </section>
+      {selected ? (
+        <PromptDialog
+          key={openCount}
+          capability={selected}
+          open={open}
+          onOpenChange={setOpen}
+        />
+      ) : null}
+    </PageContainer>
+  );
+}
+
+/** The first part of the page: development here happens by asking a coding agent, which the steps and sample show. */
+function AgentIntro(): ReactElement {
+  const { t } = useTranslation();
+  const { copied, copy } = useCopy();
+  const example = t('home.example.text');
+
+  return (
+    <section className='grid gap-8 rounded-2xl border border-border bg-linear-to-br from-primary/5 via-card to-card p-6 md:p-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-center'>
+      <div className='flex flex-col gap-6'>
+        <div className='flex flex-col gap-4'>
+          <p className='flex items-center gap-2 text-sm font-medium text-primary'>
+            <SparklesIcon className='size-4' aria-hidden />
+            {t('home.platform')}
+          </p>
+          <h1 className='font-heading text-3xl font-semibold tracking-[-0.035em] text-balance md:text-4xl'>
+            {t('home.title')}
+          </h1>
+          <p className='text-base leading-7 text-muted-foreground'>
+            {t('home.description')}
+          </p>
+        </div>
+        <ol className='flex flex-col gap-3'>
+          {STEPS.map((step, index) => (
+            <li key={step} className='flex gap-3'>
+              <span className='flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-medium text-primary'>
+                {index + 1}
+              </span>
+              <div className='flex flex-col gap-0.5'>
+                <span className='text-sm font-medium'>
+                  {t(`home.steps.${step}.title`)}
+                </span>
+                <span className='text-sm text-muted-foreground'>
+                  {t(`home.steps.${step}.description`)}
+                </span>
+              </div>
+            </li>
+          ))}
+        </ol>
+      </div>
+      <figure className='flex flex-col overflow-hidden rounded-xl border border-primary/10 bg-card shadow-sm'>
+        <figcaption className='flex items-center justify-between gap-2 border-b border-primary/10 px-4 py-2.5'>
+          <span className='flex items-center gap-2 text-sm font-medium'>
+            <MessageSquareTextIcon
+              className='size-4 text-primary'
+              aria-hidden
+            />
+            {t('home.example.title')}
+          </span>
+          <Button variant='ghost' size='sm' onClick={() => void copy(example)}>
+            {copied ? (
+              <CheckIcon data-icon='inline-start' />
+            ) : (
+              <CopyIcon data-icon='inline-start' />
+            )}
+            {copied ? t('home.prompt.copiedShort') : t('home.prompt.copy')}
+          </Button>
+        </figcaption>
+        <p className='bg-primary/5 px-4 py-4 text-sm leading-7 whitespace-pre-line'>
+          {example}
+        </p>
+        <p className='border-t border-primary/10 px-4 py-2.5 text-xs text-muted-foreground'>
+          {t('home.example.hint')}
+        </p>
+      </figure>
+    </section>
+  );
+}
+
+function CapabilityCard({
+  capability,
+  onOpen,
+}: {
+  readonly capability: Capability;
+  readonly onOpen: () => void;
+}): ReactElement {
+  const { t } = useTranslation();
+  const prefix = `home.capabilities.${capability.id}`;
+  const Icon = capability.icon;
+
+  return (
+    <button
+      type='button'
+      onClick={onOpen}
+      className='group flex w-full cursor-pointer rounded-xl text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50'
+    >
+      <Card className='w-full transition-[translate,box-shadow] duration-200 ease-out group-hover:-translate-y-0.5 group-hover:shadow-md group-hover:ring-foreground/20 motion-reduce:transition-none motion-reduce:group-hover:translate-y-0'>
+        <CardHeader className='gap-3'>
+          {/* The chip only deepens its tint on hover rather than inverting: swapping a light background and a dark icon
+              passes both through the same color halfway, where the icon vanishes for a moment and reads as a flicker. */}
+          <span className='flex size-9 items-center justify-center rounded-lg bg-primary/5 text-primary ring-1 ring-transparent transition-[background-color,box-shadow] duration-200 ease-out group-hover:bg-primary/10 group-hover:ring-primary/20 motion-reduce:transition-none'>
+            <Icon
+              className='size-4 transition-transform duration-200 ease-out group-hover:scale-110 motion-reduce:transition-none'
+              aria-hidden
+            />
+          </span>
+          <div className='flex flex-col gap-1'>
+            <CardTitle>{t(`${prefix}.title`)}</CardTitle>
+            <CardDescription className='leading-6'>
+              {t(`${prefix}.description`)}
+            </CardDescription>
+          </div>
+        </CardHeader>
+        <CardFooter className='mt-auto justify-between text-sm text-muted-foreground transition-colors duration-200 ease-out group-hover:text-foreground'>
+          {t('home.viewPrompts', { count: capability.prompts.length })}
+          <ArrowRightIcon
+            className='size-4 transition-transform duration-200 ease-out group-hover:translate-x-1 motion-reduce:transition-none'
+            aria-hidden
+          />
+        </CardFooter>
+      </Card>
+    </button>
+  );
+}

package/client/pages/home/prompt-dialog.tsx

@@ -0,0 +1,122 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { CheckIcon, CopyIcon, RotateCcwIcon } from 'lucide-react';
+import { type ReactElement, useState } from 'react';
+
+import { Button } from '#components/ui/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '#components/ui/dialog';
+import { Tabs, TabsList, TabsTrigger } from '#components/ui/tabs';
+import { Textarea } from '#components/ui/textarea';
+
+import type { Capability } from './capabilities.js';
+import { useCopy } from './use-copy.js';
+
+export interface PromptDialogProps {
+  readonly capability: Capability;
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * The prompts of one capability, ready to hand to a coding agent. Each prompt can be edited before copying. Edits are
+ * not saved: the page mounts a new dialog each time one is opened, so it starts from the default wording again.
+ */
+export function PromptDialog({
+  capability,
+  open,
+  onOpenChange,
+}: PromptDialogProps): ReactElement {
+  const { t } = useTranslation();
+  const { copied, copy } = useCopy();
+  const [current, setCurrent] = useState(capability.prompts[0]);
+  // Edited text per prompt id; a prompt without an entry shows its default wording.
+  const [edits, setEdits] = useState<Readonly<Record<string, string>>>({});
+
+  const prefix = `home.capabilities.${capability.id}`;
+  const defaultText = t(`${prefix}.prompts.${current}.text`);
+  const text = edits[current] ?? defaultText;
+  const Icon = capability.icon;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className='gap-5 sm:max-w-2xl'>
+        <DialogHeader className='flex-row items-center gap-3 pr-8'>
+          <span className='flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/5 text-primary'>
+            <Icon className='size-5' aria-hidden />
+          </span>
+          <div className='flex min-w-0 flex-col gap-1.5'>
+            <DialogTitle>{t(`${prefix}.title`)}</DialogTitle>
+            <DialogDescription>{t(`${prefix}.description`)}</DialogDescription>
+          </div>
+        </DialogHeader>
+        <div className='flex flex-col gap-3'>
+          {capability.prompts.length > 1 ? (
+            <Tabs
+              value={current}
+              onValueChange={(value) => {
+                if (typeof value === 'string') setCurrent(value);
+              }}
+            >
+              <TabsList className='w-full'>
+                {capability.prompts.map((id) => (
+                  <TabsTrigger key={id} value={id}>
+                    {t(`${prefix}.prompts.${id}.label`)}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          ) : null}
+          <Textarea
+            aria-label={t('home.prompt.label')}
+            className='field-sizing-fixed h-60 max-h-[50dvh] resize-none leading-6'
+            value={text}
+            onChange={(event) =>
+              setEdits((previous) => ({
+                ...previous,
+                [current]: event.target.value,
+              }))
+            }
+          />
+          <p className='text-xs text-muted-foreground'>
+            {t('home.prompt.hint')}
+          </p>
+        </div>
+        <DialogFooter className='sm:items-center'>
+          <Button
+            variant='ghost'
+            className='sm:mr-auto'
+            disabled={text === defaultText}
+            onClick={() =>
+              setEdits((previous) => {
+                const rest = { ...previous };
+                delete rest[current];
+                return rest;
+              })
+            }
+          >
+            <RotateCcwIcon data-icon='inline-start' />
+            {t('home.prompt.reset')}
+          </Button>
+          <DialogClose render={<Button variant='outline' />}>
+            {t('actions.close')}
+          </DialogClose>
+          <Button disabled={text.trim() === ''} onClick={() => void copy(text)}>
+            {copied ? (
+              <CheckIcon data-icon='inline-start' />
+            ) : (
+              <CopyIcon data-icon='inline-start' />
+            )}
+            {copied ? t('home.prompt.copiedShort') : t('home.prompt.copy')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/client/pages/home/use-copy.ts

@@ -0,0 +1,38 @@
+import { useToaster } from '@nocobase/app-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { useCallback, useEffect, useState } from 'react';
+
+export interface CopyState {
+  /** Whether the last copy succeeded within the past two seconds, for a button to show a check mark. */
+  readonly copied: boolean;
+  readonly copy: (text: string) => Promise<void>;
+}
+
+/** Copies text to the clipboard and reports the outcome in a toast. */
+export function useCopy(): CopyState {
+  const { t } = useTranslation();
+  const toaster = useToaster();
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 2000);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  const copy = useCallback(
+    async (text: string): Promise<void> => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        toaster.show({ type: 'success', title: t('home.prompt.copied') });
+      } catch {
+        // The Clipboard API is missing outside a secure context and rejects without permission.
+        toaster.show({ type: 'error', title: t('home.prompt.copyFailed') });
+      }
+    },
+    [t, toaster],
+  );
+
+  return { copied, copy };
+}

package/client/plugins.ts

@@ -25,8 +25,8 @@ const clientPlugins: AppClientPlugins = defineClientPlugins([
   sharingRules(),
   restrictionRules(),
   databaseExplorer(),
-  users({ mount: 'settings', path: '/users' }),
-  apiKeys({ path: '/api-keys' }),
+  users(),
+  apiKeys(),
   i18n(),
   notificationInApp(),
   notification(),

package/client/routes.ts

@@ -1,7 +1,6 @@
 import { Home } from 'lucide-react';
 import {
   defineAppRoutes,
-  defineSettingsRoutes,
   type AppClientRouteContribution,
 } from '@nocobase/app-client/plugins';
 
@@ -11,15 +10,15 @@ const appRoutes: AppClientRouteContribution = defineAppRoutes([
     // no permission change can leave a user signed in with nowhere to land.
     authz: 'skip',
     auth: 'required',
-    componentLoader: () => import('./pages/home.js'),
+    componentLoader: () => import('./pages/home/index.js'),
     name: 'home',
     navigation: { title: 'navigation.home', icon: Home },
     path: '/',
   },
   {
-    // The header's inbox button is where a user looks for messages, so this page is reached from there. Declaring no
-    // navigation keeps a second menu entry from pointing at the one destination the button already owns. The plugin's
-    // API answers each person's own messages only, so the page needs no authorization of its own.
+    // Declares no navigation, so the application decides where its entry goes (for example a sidebar item with an
+    // unread badge). The plugin's API answers each person's own messages only, so the page needs no authorization of
+    // its own.
     authz: 'skip',
     auth: 'required',
     componentLoader: () => import('./pages/inbox.js'),
@@ -65,11 +64,6 @@ const appRoutes: AppClientRouteContribution = defineAppRoutes([
   },
 ]);
 
-const settingsRoutes: AppClientRouteContribution = defineSettingsRoutes([]);
-
-const routes: readonly AppClientRouteContribution[] = [
-  appRoutes,
-  settingsRoutes,
-];
+const routes: readonly AppClientRouteContribution[] = [appRoutes];
 
 export default routes;

package/client/routing/app-router.tsx

@@ -1,52 +1,29 @@
-import { useTranslation } from '@nocobase/i18n/client';
 import {
   GuestAuthentication,
   RequiredAuthentication,
 } from '@nocobase/app-plugin-authentication/client';
 import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
-import { lazy, Suspense, useMemo, type ReactElement } from 'react';
+import { useMemo, type ReactElement } from 'react';
 import { Navigate, Outlet, Route, Routes } from 'react-router';
 
-import { Loading } from '#components/loading';
 import { EMPTY_ARRAY } from '#lib/constants';
 
 import { AppLayout } from '../layouts/app-layout.js';
 import { renderRouteTree } from './route-tree.js';
 import { StandalonePageLayout } from './standalone-page-layout.js';
 
-// The settings centre brings its own chrome and navigation, none of which the application needs until someone opens
-// it. Loading it lazily keeps it out of the entry chunk, the same way every page it hosts stays out.
-const SettingsLayout = lazy(async () => ({
-  default: (await import('../layouts/settings-layout.js')).SettingsLayout,
-}));
-
 export interface AppRouterProps {
-  readonly settingsRouteTree: readonly AppClientRegisteredRoute[];
-  readonly devRouteTree: readonly AppClientRegisteredRoute[];
   readonly clientRoutes: readonly AppClientRegisteredRoute[];
 }
 
-export function AppRouter(inputProps: AppRouterProps): ReactElement {
-  const { t } = useTranslation();
-  const { settingsRouteTree, devRouteTree, clientRoutes } = inputProps;
-
-  const settingsRoutes = useMemo(
-    () =>
-      filterRouteTree(
-        clientRoutes,
-        (route) =>
-          route.auth === 'required' && route.path.startsWith('/settings/'),
-      ),
-    [clientRoutes],
-  );
+export function AppRouter({ clientRoutes }: AppRouterProps): ReactElement {
   const routeGroups = useMemo(
     () => ({
       guest: clientRoutes.filter((route) => route.auth === 'guest'),
       optional: clientRoutes.filter((route) => route.auth === 'optional'),
       required: filterRouteTree(
         clientRoutes,
-        (route) =>
-          route.auth === 'required' && !route.path.startsWith('/settings/'),
+        (route) => route.auth === 'required',
       ),
     }),
     [clientRoutes],
@@ -61,36 +38,9 @@ export function AppRouter(inputProps: AppRouterProps): ReactElement {
           </RequiredAuthentication>
         }
       >
-        <Route
-          element={
-            <AppLayout routes={routeGroups.required} devRoutes={devRouteTree} />
-          }
-        >
+        <Route element={<AppLayout routes={routeGroups.required} />}>
           {renderRouteTree(routeGroups.required)}
-          {/* Pages plugins declare with `defineDevRoutes()` keep their `/dev/...` paths inside the application shell.
-            A production build resolves no dev routes, so nothing is rendered here. */}
-          {renderRouteTree(devRouteTree)}
         </Route>
-        <Route
-          path='/settings/*'
-          element={
-            <Suspense
-              fallback={
-                <Loading
-                  className='min-h-svh'
-                  label={t('status.loadingSettings', {
-                    defaultValue: 'Loading settings',
-                  })}
-                />
-              }
-            >
-              <SettingsLayout
-                routeTree={settingsRouteTree}
-                routes={settingsRoutes}
-              />
-            </Suspense>
-          }
-        />
       </Route>
 
       <Route
@@ -114,7 +64,7 @@ export function AppRouter(inputProps: AppRouterProps): ReactElement {
   );
 }
 
-/** Pure groups can span surfaces; a page and its descendants always share their shell. */
+/** Pure groups can span shells; a page and its descendants always share their shell. */
 function filterRouteTree(
   routes: readonly AppClientRegisteredRoute[],
   predicate: (route: AppClientRegisteredRoute) => boolean,

package/client/routing/route-navigation.ts

@@ -58,7 +58,7 @@ export function selectedNavigationId(
   return selected ? routeKey(selected) : undefined;
 }
 
-export function navigationPages(
+function navigationPages(
   items: readonly RouteNavigationItem[],
 ): AppClientRegisteredRoute[] {
   return items.flatMap(({ route, children }) => [