feat: give boards and pages their own places in the sidebar

app/frontend/src/App.tsx

@@ -13,6 +13,7 @@ import { InboxPage } from './pages/InboxPage';
 import { InvitationsPage } from './pages/InvitationsPage';
 import { InvitePage } from './pages/InvitePage';
 import { JournalDayPage, JournalPage } from './pages/JournalPage';
+import { PagesIndex } from './pages/PagesIndex';
 import { PrivacyPage, TermsPage } from './pages/LegalPages';
 import { RecurringPage } from './pages/RecurringPage';
 import { LoginPage } from './pages/LoginPage';
@@ -125,6 +126,22 @@ export function App() {
               </Protected>
             }
           />
+          <Route
+            path="pages"
+            element={
+              <Protected>
+                <PagesIndex kind="note" key="note" />
+              </Protected>
+            }
+          />
+          <Route
+            path="boards"
+            element={
+              <Protected>
+                <PagesIndex kind="board" key="board" />
+              </Protected>
+            }
+          />
           <Route
             path="journal"
             element={

app/frontend/src/navigation.tsx

@@ -1,7 +1,7 @@
 import type { SidebarSection } from '@project-graphite/ui';
 import type { Space } from './spaces';
 
-export const moreAreas = ['/menu', '/journal', '/recurring', '/tidy', '/inbox', '/invitations', '/trash', '/settings', '/admin'];
+export const moreAreas = ['/menu', '/pages', '/boards', '/journal', '/recurring', '/tidy', '/inbox', '/invitations', '/trash', '/settings', '/admin'];
 
 export function areaSections(pathname: string, spaces: Space[] | undefined, unread: number): SidebarSection[] {
   return [
@@ -10,6 +10,8 @@ export function areaSections(pathname: string, spaces: Space[] | undefined, unre
         { active: pathname === '/', href: '/', icon: 'home', label: 'Home' },
         { active: pathname === '/today', href: '/today', icon: 'check', label: 'Today' },
         { active: pathname === '/agenda' || pathname.startsWith('/agenda/') || pathname.startsWith('/events/'), href: '/agenda', icon: 'calendar', label: 'Agenda' },
+        { active: pathname === '/pages', href: '/pages', icon: 'library', label: 'Pages' },
+        { active: pathname === '/boards', href: '/boards', icon: 'panel', label: 'Boards' },
         { active: pathname === '/journal', href: '/journal', icon: 'pencil', label: 'Journal' },
         { active: pathname === '/recurring', href: '/recurring', icon: 'repeat', label: 'Recurring' },
         { active: pathname === '/tidy', href: '/tidy', icon: 'sparkles', label: 'Tidy' },

app/frontend/src/pages/PagesIndex.tsx

@@ -0,0 +1,82 @@
+import { Link, useNavigate } from 'react-router';
+import { EmptyState, Icon, ListSkeleton, Menu, PageHeader, timeAgo } from '@project-graphite/ui';
+import { useAuth } from '../auth';
+import { LoadError } from '../components/LoadError';
+import { noteTitle, type Note } from '../notes';
+import { useSpaces } from '../spaces';
+import { useAction } from '../useAction';
+import { useResource } from '../useResource';
+
+const wording = {
+  board: { title: 'Boards', create: 'New board', empty: 'No boards yet', hint: 'A board is a white canvas to draw, sketch and plan on together.' },
+  note: { title: 'Pages', create: 'New page', empty: 'No pages yet', hint: 'Pages hold notes, checklists, tables and anything you write.' },
+};
+
+export function PagesIndex({ kind }: { kind: 'note' | 'board' }) {
+  const auth = useAuth();
+  const navigate = useNavigate();
+  const spaces = useSpaces();
+  const listed = useResource<Note[]>(`/me/notes?kind=${kind}`, true);
+  const creating = useAction();
+  const words = wording[kind];
+  const writable = (spaces.data ?? []).filter((space) => space.role !== 'viewer');
+
+  function create(spaceId: string) {
+    void creating.run(async () => {
+      const created = await auth.request<Note>(`/spaces/${spaceId}/notes`, { method: 'POST', body: JSON.stringify(kind === 'board' ? { board: true } : {}) });
+      navigate(`/notes/${created.id}`);
+      return '';
+    }, `Could not create the ${kind === 'board' ? 'board' : 'page'}`);
+  }
+
+  return (
+    <section className="page-enter grid max-w-3xl gap-8">
+      <PageHeader
+        actions={
+          writable.length === 1 ? (
+            <button className="primary-button px-3 py-2 text-sm" disabled={creating.busy} onClick={() => create(writable[0]!.id)} type="button">
+              <Icon name="plus" size={16} />
+              {words.create}
+            </button>
+          ) : (
+            writable.length > 1 && (
+              <Menu
+                items={writable.map((space) => ({ label: `In ${space.name}`, onSelect: () => create(space.id) }))}
+                label="Spaces"
+                trigger={words.create}
+                triggerClassName="primary-button px-3 py-2 text-sm"
+                triggerLabel={`${words.create}: choose a space`}
+              />
+            )
+          )
+        }
+        title={words.title}
+      />
+      {listed.error ? (
+        <LoadError error={listed.error} onRetry={listed.reload} />
+      ) : !listed.data ? (
+        <ListSkeleton label={`Loading your ${words.title.toLowerCase()}`} rows={4} />
+      ) : listed.data.length === 0 ? (
+        <EmptyState title={words.empty}>
+          <p className="mx-auto mt-3 mb-0 max-w-md text-sm text-muted">{words.hint}</p>
+        </EmptyState>
+      ) : (
+        <ul className="panel-rows m-0 grid list-none p-0">
+          {listed.data.map((note) => (
+            <li key={note.id}>
+              <Link className="flex items-center gap-3 px-4 py-3 text-ink no-underline hover:bg-line-soft" to={`/notes/${note.id}`}>
+                <span aria-hidden="true" className="w-5 shrink-0 text-center">
+                  {note.icon ?? (kind === 'board' ? '▦' : '·')}
+                </span>
+                <span className="min-w-0 flex-1 truncate">{noteTitle(note)}</span>
+                <span className="mono-sm shrink-0 text-faint">
+                  {spaces.data?.find((space) => space.id === note.spaceId)?.name} · {timeAgo(note.updatedAt)}
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </section>
+  );
+}

app/frontend/test/notes.spec.tsx

@@ -139,6 +139,27 @@ describe('Notes', () => {
     expect(container.textContent).not.toContain('Pages inside');
   });
 
+  it('lists boards from every space under Boards and starts a new one', async () => {
+    const board = { ...note('seating', 'Seating'), kind: 'board' as const };
+    const fetchMock = serve((path, init) => {
+      if (path === '/me/notes?kind=board') return json([board]);
+      if (path === '/spaces/home/notes' && init?.method === 'POST') {
+        expect(JSON.parse(String(init.body))).toEqual({ board: true });
+        return json({ ...board, id: 'fresh', title: '' }, 201);
+      }
+      if (path === '/notes/fresh') return json({ ...board, id: 'fresh', title: '', editable: true, path: [] });
+      return undefined;
+    });
+    await render('/boards');
+
+    expect(container.querySelector('h1')?.textContent).toBe('Boards');
+    expect(container.querySelector('a[href="/boards"]')).not.toBeNull();
+    expect([...container.querySelectorAll('main a[href^="/notes/"]')].map((link) => link.textContent)).toEqual([expect.stringContaining('Seating')]);
+    await act(async () => [...container.querySelectorAll('button')].find((button) => button.textContent === 'New board')!.click());
+    expect(fetchMock).toHaveBeenCalledWith('/api/v1/spaces/home/notes', expect.objectContaining({ method: 'POST' }));
+    expect(container.querySelector('[data-testid="board"]')?.getAttribute('data-note')).toBe('fresh');
+  });
+
   it('shows the path, renames on blur and adds a page inside', async () => {
     const fetchMock = serve((path, init) => {
       if (path === '/notes/food' && init?.method === 'PATCH') {

app/server/src/notes/dto/notes.dto.ts

@@ -143,3 +143,8 @@ export class UpdateCommentDto {
   @Length(1, 2_000, { message: 'Comments are between 1 and 2,000 characters long.' })
   body!: string;
 }
+
+export class PageKindQueryDto {
+  @IsIn(['note', 'board'], { message: 'Choose note or board.' })
+  kind!: 'note' | 'board';
+}

app/server/src/notes/notes.controller.ts

@@ -1,10 +1,10 @@
-import { Body, Controller, Delete, Get, HttpCode, Param, Patch, Post, Put, UseGuards } from '@nestjs/common';
+import { Body, Controller, Delete, Get, HttpCode, Param, Patch, Post, Put, Query, UseGuards } from '@nestjs/common';
 import { Scope } from '../access-tokens/scopes';
 import { AuthenticatedUser } from '../auth/auth.types';
 import { CurrentUser } from '../auth/current-user.decorator';
 import { JwtAuthGuard } from '../auth/jwt-auth.guard';
 import { UuidPipe } from '../validation/uuid.pipe';
-import { CreateNoteDto, SaveDatabaseDto, SetPropertiesDto, UpdateNoteDto } from './dto/notes.dto';
+import { CreateNoteDto, PageKindQueryDto, SaveDatabaseDto, SetPropertiesDto, UpdateNoteDto } from './dto/notes.dto';
 import { NoteDatabasesService } from './note-databases.service';
 import { NoteVersionsService } from './note-versions.service';
 import { NotesService } from './notes.service';
@@ -24,6 +24,12 @@ export class NotesController {
     return this.notes.mine(user.id);
   }
 
+  @Get('me/notes')
+  @Scope('items:read')
+  everywhere(@CurrentUser() user: AuthenticatedUser, @Query() query: PageKindQueryDto) {
+    return this.notes.everywhere(user.id, query.kind);
+  }
+
   @Get('spaces/:spaceId/notes')
   @Scope('items:read')
   list(@CurrentUser() user: AuthenticatedUser, @Param('spaceId', UuidPipe) spaceId: string) {

app/server/src/notes/notes.service.ts

@@ -59,6 +59,22 @@ export class NotesService {
     return rows.map(present);
   }
 
+  async everywhere(userId: string, kind: 'note' | 'board') {
+    const rows = await this.prisma.item.findMany({
+      where: {
+        kind: kind === 'board' ? ItemKind.BOARD : ItemKind.NOTE,
+        trashedAt: null,
+        archivedAt: null,
+        space: this.access.spacesOf(userId),
+        note: { template: false },
+      },
+      orderBy: [{ updatedAt: 'desc' }, { id: 'asc' }],
+      take: 200,
+      select: noteFields,
+    });
+    return rows.map(present);
+  }
+
   async mine(userId: string) {
     const where = { kind: { in: pageKinds }, trashedAt: null, archivedAt: null, space: this.access.spacesOf(userId) };
     const [pinned, recent] = await Promise.all([

app/server/test/integration/notes.spec.ts

@@ -190,6 +190,10 @@ describe('Notes and real-time editing against Postgres', () => {
     const board = (await owner.call('POST', `/spaces/${space.id}/notes`, { title: 'Seating', board: true })).body;
     expect(board).toMatchObject({ kind: 'board', title: 'Seating' });
     expect((await owner.call('GET', `/spaces/${space.id}/notes`)).body).toEqual([expect.objectContaining({ id: board.id, kind: 'board' })]);
+    const page = (await owner.call('POST', `/spaces/${space.id}/notes`, { title: 'Menu' })).body;
+    expect((await friend.call('GET', '/me/notes?kind=board')).body.map((found: { id: string }) => found.id)).toEqual([board.id]);
+    expect((await friend.call('GET', '/me/notes?kind=note')).body.map((found: { id: string }) => found.id)).toEqual([page.id]);
+    expect((await owner.call('GET', '/me/notes?kind=task')).status).toBe(400);
     expect((await owner.call('POST', `/spaces/${space.id}/notes`, { board: true, template: 'meeting' })).status).toBe(400);
     expect((await owner.call('PATCH', `/notes/${board.id}`, { template: true })).status).toBe(400);
     expect((await owner.call('POST', `/spaces/${space.id}/notes`, { parentId: board.id })).status).toBe(400);