feat(client): quick-create regular and temporary notes from Home and Space screens

Add fast note-creation entry points alongside the existing space-sidebar
actions.

- Home: refactor new-note-button.tsx into a reusable inner CreateNoteButton
  (parametrized by `temporary`/label/icon, keeps the 0/1/many writable-space
  resolution and space-picker dropdown) and render two equal-width buttons via
  `Group grow` — a regular note and a temporary note (IconHourglass).
- Space overview: new SpaceCreateNoteButtons component with two buttons that
  create a regular/temporary note directly in the current space and open it,
  reusing useTreeMutation.handleCreate (optimistic sidebar-tree insert +
  navigation). Permission-gated to members who can manage pages; a local
  pending state shows a per-button spinner and disables both to prevent a
  double-create. Wired into space-home.tsx above the tabs.
- Reuse existing i18n keys (no new strings): "New note", "New temporary note",
  "Create in space".
- Docs: add a CHANGELOG [Unreleased] entry and a "Temporary notes" roadmap
  bullet to README.md and README.ru.md.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

apps/client/src/features/home/components/new-note-button.tsx

@@ -1,5 +1,6 @@
-import { Button, Menu, Text } from "@mantine/core";
-import { IconPlus } from "@tabler/icons-react";
+import { Button, Group, Menu, Text } from "@mantine/core";
+import { IconHourglass, IconPlus } from "@tabler/icons-react";
+import { ReactNode } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query.ts";
@@ -10,24 +11,34 @@ import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
 import { canCreatePage } from "./can-create-page.ts";
 
-// Prominent home-screen action to create a new note (page). Because the home
-// screen has no active space, the target space is resolved from the user's
-// writable spaces: created directly when there is one, picked from a dropdown
-// when there are several.
-export default function NewNoteButton() {
+// A single create-note action, parametrized by `temporary`. Self-contained: it
+// owns its own create mutation so the regular and temporary buttons show
+// independent loading state, while the list of writable spaces is resolved once
+// by the parent and passed in. With exactly one writable space it creates
+// directly; with several it shows a target-space picker.
+function CreateNoteButton({
+  writableSpaces,
+  temporary,
+  label,
+  icon,
+}: {
+  writableSpaces: ISpace[];
+  temporary: boolean;
+  label: string;
+  icon: ReactNode;
+}) {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const createPageMutation = useCreatePageMutation();
-  const { data } = useGetSpacesQuery({ limit: 100 });
-
-  const writableSpaces = (data?.items ?? []).filter(canCreatePage);
 
   const createNote = async (space: ISpace) => {
     try {
-      // `spaceId` is accepted by the create-page endpoint but is not part of
-      // the shared `IPageInput` type; cast to satisfy the mutation signature.
+      // `spaceId`/`temporary` are accepted by the create-page endpoint but are
+      // not part of the shared `IPageInput` type; cast to satisfy the mutation
+      // signature.
       const createdPage = await createPageMutation.mutateAsync({
         spaceId: space.id,
+        ...(temporary ? { temporary: true } : {}),
       } as any);
       navigate(buildPageUrl(space.slug, createdPage.slugId, createdPage.title));
     } catch {
@@ -35,24 +46,20 @@ export default function NewNoteButton() {
     }
   };
 
-  // No writable space → nothing to create in; render nothing.
-  if (writableSpaces.length === 0) return null;
-
   const isPending = createPageMutation.isPending;
 
   // Exactly one writable space → create directly, no picker needed.
   if (writableSpaces.length === 1) {
     return (
       <Button
-        fullWidth
         size="md"
         variant="light"
         color="gray"
-        leftSection={<IconPlus size={18} />}
+        leftSection={icon}
         loading={isPending}
         onClick={() => createNote(writableSpaces[0])}
       >
-        {t("New note")}
+        {label}
       </Button>
     );
   }
@@ -62,14 +69,13 @@ export default function NewNoteButton() {
     <Menu shadow="md" width="target" position="bottom-start">
       <Menu.Target>
         <Button
-          fullWidth
           size="md"
           variant="light"
           color="gray"
-          leftSection={<IconPlus size={18} />}
+          leftSection={icon}
           loading={isPending}
         >
-          {t("New note")}
+          {label}
         </Button>
       </Menu.Target>
       <Menu.Dropdown>
@@ -99,3 +105,35 @@ export default function NewNoteButton() {
     </Menu>
   );
 }
+
+// Prominent home-screen actions to create a new note (page). Because the home
+// screen has no active space, the target space is resolved from the user's
+// writable spaces: created directly when there is one, picked from a dropdown
+// when there are several. Renders two equal-width buttons: a regular note and a
+// temporary note (which auto-moves to Trash after the workspace lifetime).
+export default function NewNoteButton() {
+  const { t } = useTranslation();
+  const { data } = useGetSpacesQuery({ limit: 100 });
+
+  const writableSpaces = (data?.items ?? []).filter(canCreatePage);
+
+  // No writable space → nothing to create in; render nothing.
+  if (writableSpaces.length === 0) return null;
+
+  return (
+    <Group grow gap="sm">
+      <CreateNoteButton
+        writableSpaces={writableSpaces}
+        temporary={false}
+        label={t("New note")}
+        icon={<IconPlus size={18} />}
+      />
+      <CreateNoteButton
+        writableSpaces={writableSpaces}
+        temporary={true}
+        label={t("New temporary note")}
+        icon={<IconHourglass size={18} />}
+      />
+    </Group>
+  );
+}

apps/client/src/features/space/components/space-create-note-buttons.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { Button, Group } from "@mantine/core";
+import { IconHourglass, IconPlus } from "@tabler/icons-react";
+import { useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
+import { useTreeMutation } from "@/features/page/tree/hooks/use-tree-mutation.ts";
+import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
+import {
+  SpaceCaslAction,
+  SpaceCaslSubject,
+} from "@/features/space/permissions/permissions.type.ts";
+
+// Space-overview quick actions: create a regular note or a temporary note
+// (which auto-moves to Trash after the workspace lifetime) directly in the
+// current space and open it. Mirrors the sidebar's create buttons but lives on
+// the space overview screen, reusing `useTreeMutation.handleCreate` so the new
+// page is optimistically inserted into the sidebar tree and navigated to.
+export default function SpaceCreateNoteButtons() {
+  const { t } = useTranslation();
+  const { spaceSlug } = useParams();
+  const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
+  const spaceAbility = useSpaceAbility(space?.membership?.permissions);
+  // `handleCreate` is read unconditionally to keep hook order stable; it is
+  // only invoked after the permission guard below confirms a loaded space.
+  const { handleCreate } = useTreeMutation(space?.id ?? "");
+  // Which create action is in flight: drives the per-button spinner and the
+  // shared disabled state so a slow create round-trip cannot be double-fired.
+  const [pending, setPending] = useState<"regular" | "temporary" | null>(null);
+
+  // Render nothing until the space loads, or when the user cannot manage pages.
+  if (!space) return null;
+  if (spaceAbility.cannot(SpaceCaslAction.Manage, SpaceCaslSubject.Page)) {
+    return null;
+  }
+
+  const createNote = (temporary: boolean) => {
+    if (pending) return;
+    setPending(temporary ? "temporary" : "regular");
+    // handleCreate creates the page then navigates away (unmounting this
+    // component); the create mutation already shows a red notification on
+    // failure, so swallow the rejection and just clear the pending flag.
+    handleCreate(null, temporary ? { temporary: true } : undefined)
+      .catch(() => {})
+      .finally(() => setPending(null));
+  };
+
+  return (
+    <Group grow gap="sm">
+      <Button
+        size="md"
+        variant="light"
+        color="gray"
+        leftSection={<IconPlus size={18} />}
+        loading={pending === "regular"}
+        disabled={pending !== null}
+        onClick={() => createNote(false)}
+      >
+        {t("New note")}
+      </Button>
+      <Button
+        size="md"
+        variant="light"
+        color="gray"
+        leftSection={<IconHourglass size={18} />}
+        loading={pending === "temporary"}
+        disabled={pending !== null}
+        onClick={() => createNote(true)}
+      >
+        {t("New temporary note")}
+      </Button>
+    </Group>
+  );
+}

apps/client/src/pages/space/space-home.tsx

@@ -1,5 +1,6 @@
-import {Container} from "@mantine/core";
+import {Container, Space} from "@mantine/core";
 import SpaceHomeTabs from "@/features/space/components/space-home-tabs.tsx";
+import SpaceCreateNoteButtons from "@/features/space/components/space-create-note-buttons.tsx";
 import {useParams} from "react-router-dom";
 import {useGetSpaceBySlugQuery} from "@/features/space/queries/space-query.ts";
 import {getAppName} from "@/lib/config.ts";
@@ -15,7 +16,13 @@ export default function SpaceHome() {
                 <title>{space?.name || 'Overview'} - {getAppName()}</title>
             </Helmet>
             <Container size={"900"} pt="xl">
-                {space && <SpaceHomeTabs/>}
+                {space && (
+                    <>
+                        <SpaceCreateNoteButtons/>
+                        <Space h="md"/>
+                        <SpaceHomeTabs/>
+                    </>
+                )}
             </Container>
         </>
     );