From cb0203c5e284137be08eca7e2043a5b8860b1150 Mon Sep 17 00:00:00 2001
From: James Morton <james.morton@quackback.io>
Date: Fri, 30 Oct 2026 20:45:47 +0000
Subject: [PATCH 1/4] feat(design): the feed's default sort comes from the
 design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On the design engine the feedback page sorts by the design's default
(trending, top or new) until the visitor picks one: the loader, the feed,
its loading state and the container all read it, and clearing a search
returns to it. A legacy portal sorts by trending as before. Appearance sets
it under Sections › Feed, and the preview loads with the draft's sort.

Review and publish names the page's changes as the controls do: the
headline, the subtitle, the welcome message and its text.
---
 .../appearance/__tests__/change-list.test.ts  | 22 ++++++++++++
 .../settings/appearance/appearance-view.tsx   |  1 +
 .../admin/settings/appearance/change-list.tsx |  5 +++
 .../settings/appearance/sections-panel.tsx    | 24 +++++++++++++
 .../settings/branding/portal-preview.tsx      | 12 +++++--
 .../public/feedback/feedback-container.tsx    |  5 ++-
 .../public/feedback/portal-feed-skeleton.tsx  | 13 +++++--
 .../lib/shared/design/__tests__/view.test.ts  | 35 ++++++++++++++++---
 apps/web/src/lib/shared/design/design-view.ts |  1 +
 apps/web/src/lib/shared/design/view.ts        | 10 ++++++
 .../__tests__/root.document-renders.test.tsx  |  2 +-
 apps/web/src/routes/_portal/index.tsx         | 23 ++++++++----
 12 files changed, 133 insertions(+), 20 deletions(-)
 create mode 100644 apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts

diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts b/apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts
new file mode 100644
index 0000000000..1f9b923fdd
--- /dev/null
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/change-list.test.ts
@@ -0,0 +1,22 @@
+/**
+ * Review and publish names each change the way the Appearance controls do.
+ */
+import { describe, expect, it } from 'vitest'
+import { changeLabel } from '../change-list'
+
+describe('changeLabel', () => {
+  it.each([
+    ['brand.light.accent', 'Accent'],
+    ['brand.dark.ink', 'Dark text'],
+    ['brand.fonts.heading.id', 'Heading font'],
+    ['layout.nav', 'Menu style'],
+    ['pages.feedback.defaultSort', 'Default sort'],
+    ['pages.feedback.headline.title.en', 'Headline'],
+    ['pages.feedback.headline', 'Headline'],
+    ['pages.feedback.headline.subtitle.de', 'Subtitle'],
+    ['pages.feedback.welcome.show', 'Welcome message'],
+    ['pages.feedback.welcome.body.content', 'Welcome message text'],
+  ])('%s is %s', (path, label) => {
+    expect(changeLabel(path)).toBe(label)
+  })
+})
diff --git a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
index ec36cbda32..4a7a6ffe10 100644
--- a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
+++ b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
@@ -115,6 +115,7 @@ export function AppearanceView({
             draftDirty
             design={draft.preview}
             scaleToDesktop
+            sort={draft.design.pages.feedback.defaultSort}
             viewport={viewport}
             workspaceName={workspaceName}
             faviconUrl={faviconUrl}
diff --git a/apps/web/src/components/admin/settings/appearance/change-list.tsx b/apps/web/src/components/admin/settings/appearance/change-list.tsx
index 553f61a4e7..0b70a418bb 100644
--- a/apps/web/src/components/admin/settings/appearance/change-list.tsx
+++ b/apps/web/src/components/admin/settings/appearance/change-list.tsx
@@ -24,6 +24,7 @@ const LABELS: Record<string, string> = {
   'layout.density': 'Density',
   'layout.width': 'Page width',
   'layout.filters': 'Filters side',
+  'pages.feedback.defaultSort': 'Default sort',
 }
 
 /** A change's name as the Appearance controls call it. */
@@ -33,6 +34,10 @@ export function changeLabel(path: string): string {
     const name = COLOURS[colour[2]] ?? colour[2]
     return colour[1] === 'dark' ? `Dark ${name.toLowerCase()}` : name
   }
+  if (path.startsWith('pages.feedback.welcome.body')) return 'Welcome message text'
+  if (path === 'pages.feedback.welcome.show') return 'Welcome message'
+  const headline = path.match(/^pages\.feedback\.headline(?:\.(title|subtitle))?/)
+  if (headline) return headline[1] === 'subtitle' ? 'Subtitle' : 'Headline'
   const font = path.match(/^(brand\.fonts\.(?:heading|body))\./)
   return LABELS[font ? font[1] : path] ?? path
 }
diff --git a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
index b8993f43bb..e7751f81a3 100644
--- a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
@@ -3,6 +3,7 @@ import { Switch } from '@/components/ui/switch'
 import { SettingRow } from '@/components/admin/settings/setting-row'
 import { WelcomeBodyEditor } from '@/components/admin/settings/branding/welcome-body-editor'
 import type { TiptapContent } from '@/lib/shared/db-types'
+import { ArrowTrendingUpIcon, ClockIcon, FireIcon } from '@heroicons/react/24/solid'
 import { DESIGN_OPTIONS } from '@/lib/shared/design/options'
 import type { PortalDesign } from '@/lib/shared/design/schema'
 import { DesignTiles } from './design-tiles'
@@ -131,6 +132,29 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
             drawing: <CardsDrawing cards={cards} />,
           }))}
         />
+        <DesignTiles
+          name="design-sort"
+          label="Default sort"
+          value={design.pages.feedback.defaultSort}
+          onChange={(sort) => update((draft) => void (draft.pages.feedback.defaultSort = sort))}
+          options={[
+            {
+              value: 'trending',
+              label: 'Trending',
+              drawing: <FireIcon className="size-5 text-foreground/50" />,
+            },
+            {
+              value: 'top',
+              label: 'Top',
+              drawing: <ArrowTrendingUpIcon className="size-5 text-foreground/50" />,
+            },
+            {
+              value: 'new',
+              label: 'New',
+              drawing: <ClockIcon className="size-5 text-foreground/50" />,
+            },
+          ]}
+        />
         <DesignTiles
           name="design-density"
           label="Density"
diff --git a/apps/web/src/components/admin/settings/branding/portal-preview.tsx b/apps/web/src/components/admin/settings/branding/portal-preview.tsx
index ec77a83dc2..35e94a86a1 100644
--- a/apps/web/src/components/admin/settings/branding/portal-preview.tsx
+++ b/apps/web/src/components/admin/settings/branding/portal-preview.tsx
@@ -32,6 +32,8 @@ interface PortalPreviewProps {
    * desktop layouts (an inline header, the filter panel) show as visitors see them.
    */
   scaleToDesktop?: boolean
+  /** The feed's sort in the frame; a design's default sort, which changes by reloading it. */
+  sort?: 'trending' | 'top' | 'new'
   /** A draft portal design, resolved: applied in the frame in place of the saved one. */
   design?: {
     css: string
@@ -49,8 +51,11 @@ const DESKTOP_WIDTH = 1280
  * preview flag as a boolean, the default sort included) so the frame loads
  * without a redirect first.
  */
-export function portalPreviewSrc(theme: 'light' | 'dark') {
-  return `/?theme=${theme}&preview=true&sort=trending`
+export function portalPreviewSrc(
+  theme: 'light' | 'dark',
+  sort: 'trending' | 'top' | 'new' = 'trending'
+) {
+  return `/?theme=${theme}&preview=true&sort=${sort}`
 }
 
 /**
@@ -72,6 +77,7 @@ export function PortalPreview({
   faviconUrl,
   design = null,
   scaleToDesktop = false,
+  sort = 'trending',
 }: PortalPreviewProps) {
   const frameBox = useRef<HTMLDivElement>(null)
   const [boxWidth, setBoxWidth] = useState(0)
@@ -171,7 +177,7 @@ export function PortalPreview({
         <iframe
           key={refreshKey}
           ref={iframeRef}
-          src={portalPreviewSrc(theme)}
+          src={portalPreviewSrc(theme, sort)}
           title="Portal preview"
           className="w-full border-0 bg-background"
           style={
diff --git a/apps/web/src/components/public/feedback/feedback-container.tsx b/apps/web/src/components/public/feedback/feedback-container.tsx
index 6686463a7c..9f8ee1ce15 100644
--- a/apps/web/src/components/public/feedback/feedback-container.tsx
+++ b/apps/web/src/components/public/feedback/feedback-container.tsx
@@ -87,6 +87,8 @@ interface FeedbackContainerProps {
   currentBoard?: string
   currentSearch?: string
   currentSort?: PublicPostSort
+  /** The sort when the visitor has not picked one, which clearing a search returns to. */
+  defaultSort?: 'trending' | 'top' | 'new'
   defaultBoardId?: string
   /** User info if authenticated */
   user?: { name: string | null; email: string } | null
@@ -157,6 +159,7 @@ export function FeedbackContainer({
   currentBoard,
   currentSearch,
   currentSort = 'trending',
+  defaultSort = 'trending',
   defaultBoardId,
   user,
   boardPermissions,
@@ -356,7 +359,7 @@ export function FeedbackContainer({
   function handleSearchChange(search: string): void {
     setFilters({
       search: search || undefined,
-      sort: sortForSearch(activeSort, activeSearch, search, 'trending'),
+      sort: sortForSearch(activeSort, activeSearch, search, defaultSort),
     })
   }
 
diff --git a/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx b/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx
index 5a4c8abc57..3d32c1c7e0 100644
--- a/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx
+++ b/apps/web/src/components/public/feedback/portal-feed-skeleton.tsx
@@ -193,9 +193,16 @@ function LoadingComposer() {
  * the boards, statuses and tags stand in as bars, laid out like the loaded
  * page so it swaps in without moving.
  */
-export function PortalFeedSkeleton({ poweredBy }: { poweredBy?: React.ReactNode }) {
+export function PortalFeedSkeleton({
+  poweredBy,
+  defaultSort = 'trending',
+}: {
+  poweredBy?: React.ReactNode
+  /** The feed's sort when the visitor has not picked one. */
+  defaultSort?: 'trending' | 'top' | 'new'
+}) {
   const { filters, setFilters, activeFilterCount } = usePublicFilters()
-  const sort = filters.sort ?? 'trending'
+  const sort = filters.sort ?? defaultSort
 
   return (
     <div>
@@ -210,7 +217,7 @@ export function PortalFeedSkeleton({ poweredBy }: { poweredBy?: React.ReactNode
             onSearchChange={(search) =>
               setFilters({
                 search: search || undefined,
-                sort: sortForSearch(sort, filters.search, search, 'trending'),
+                sort: sortForSearch(sort, filters.search, search, defaultSort),
               })
             }
             filterButton={
diff --git a/apps/web/src/lib/shared/design/__tests__/view.test.ts b/apps/web/src/lib/shared/design/__tests__/view.test.ts
index 8df4bea25f..9fb43d38e9 100644
--- a/apps/web/src/lib/shared/design/__tests__/view.test.ts
+++ b/apps/web/src/lib/shared/design/__tests__/view.test.ts
@@ -4,7 +4,13 @@
  */
 import { describe, expect, it } from 'vitest'
 import { generateWorkspaceThemeCSS } from '@/lib/shared/theme'
-import { portalFontIds, portalTheme, portalThemeMode, savedWelcomeCard } from '../view'
+import {
+  portalDefaultSort,
+  portalFontIds,
+  portalTheme,
+  portalThemeMode,
+  savedWelcomeCard,
+} from '../view'
 
 const brandingConfig = {
   themeMode: 'dark' as const,
@@ -37,7 +43,7 @@ describe('portalTheme', () => {
       fontSans: '"Fraunces", serif',
       fontIds: ['fraunces'],
       attributes: {},
-      feedback: { welcome: null, headline: null },
+      feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
     }
     expect(portalTheme({ brandingConfig, customCss: '.x {}', portalDesign })).toEqual({
       themeMode: 'user',
@@ -60,7 +66,7 @@ describe('portalFontIds', () => {
       fontSans: '',
       fontIds: ['inter', 'fraunces'],
       attributes: {},
-      feedback: { welcome: null, headline: null },
+      feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
     }
     expect(portalFontIds({ portalDesign })).toEqual(['inter', 'fraunces'])
   })
@@ -78,7 +84,7 @@ describe('portalThemeMode', () => {
         fontSans: '',
         fontIds: [],
         attributes: {},
-        feedback: { welcome: null, headline: null },
+        feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
       },
     })
     expect(portalThemeMode(v2('auto'))).toBe('user')
@@ -100,7 +106,7 @@ describe('savedWelcomeCard', () => {
       fontSans: '',
       fontIds: [],
       attributes: {},
-      feedback: { welcome, headline: null },
+      feedback: { welcome, headline: null, defaultSort: 'trending' },
     }) as never
 
   it('keeps the portal settings’ card on legacy', () => {
@@ -114,3 +120,22 @@ describe('savedWelcomeCard', () => {
     expect(savedWelcomeCard(v2(null), legacy)).toBeUndefined()
   })
 })
+
+describe('portalDefaultSort', () => {
+  it('is trending on legacy and the design’s choice on v2', () => {
+    expect(portalDefaultSort(undefined)).toBe('trending')
+    expect(portalDefaultSort({ portalDesign: { engine: 'legacy' } })).toBe('trending')
+    const portalDesign = {
+      engine: 'v2' as const,
+      mode: 'auto' as const,
+      revision: 1,
+      themeStyles: '',
+      customCss: '',
+      fontSans: '',
+      fontIds: [],
+      attributes: {},
+      feedback: { welcome: null, headline: null, defaultSort: 'new' as const },
+    }
+    expect(portalDefaultSort({ portalDesign })).toBe('new')
+  })
+})
diff --git a/apps/web/src/lib/shared/design/design-view.ts b/apps/web/src/lib/shared/design/design-view.ts
index 90623c4842..9792ad2589 100644
--- a/apps/web/src/lib/shared/design/design-view.ts
+++ b/apps/web/src/lib/shared/design/design-view.ts
@@ -31,6 +31,7 @@ export function designView(
     feedback: {
       welcome: feedbackWelcome(doc),
       headline: doc.pages.feedback.headline,
+      defaultSort: doc.pages.feedback.defaultSort,
     },
   }
 }
diff --git a/apps/web/src/lib/shared/design/view.ts b/apps/web/src/lib/shared/design/view.ts
index bbc13ada40..643d49ee64 100644
--- a/apps/web/src/lib/shared/design/view.ts
+++ b/apps/web/src/lib/shared/design/view.ts
@@ -31,6 +31,8 @@ export type PortalDesignView =
         /** The welcome message, or null when it is off or empty. */
         welcome: TiptapContent | null
         headline: { title: LocalizedText; subtitle: LocalizedText } | null
+        /** The feed's sort when the visitor has not picked one. */
+        defaultSort: 'trending' | 'top' | 'new'
       }
     }
 
@@ -67,6 +69,14 @@ export function savedWelcomeCard<T extends { body: unknown }>(
   return design.feedback.welcome ? { body: design.feedback.welcome } : undefined
 }
 
+/** The feed's sort when the visitor has not picked one: the design's, else trending. */
+export function portalDefaultSort(
+  settings: { portalDesign?: PortalDesignView } | null | undefined
+): 'trending' | 'top' | 'new' {
+  const view = settings?.portalDesign
+  return view?.engine === 'v2' ? view.feedback.defaultSort : 'trending'
+}
+
 /** The bundled families a v2 design loads; legacy finds its one family from its CSS. */
 export function portalFontIds(settings: ThemeSettings | null | undefined): readonly string[] {
   const view = settings?.portalDesign
diff --git a/apps/web/src/routes/__tests__/root.document-renders.test.tsx b/apps/web/src/routes/__tests__/root.document-renders.test.tsx
index 110d6b38d8..125fe0bb9d 100644
--- a/apps/web/src/routes/__tests__/root.document-renders.test.tsx
+++ b/apps/web/src/routes/__tests__/root.document-renders.test.tsx
@@ -174,7 +174,7 @@ describe('the portal’s own theme', () => {
       fontSans: '',
       fontIds: [],
       attributes: { 'data-qb-nav': 'pills' },
-      feedback: { welcome: null, headline: null },
+      feedback: { welcome: null, headline: null, defaultSort: 'trending' as const },
     },
   })
 
diff --git a/apps/web/src/routes/_portal/index.tsx b/apps/web/src/routes/_portal/index.tsx
index 477e1f3f17..634a08993b 100644
--- a/apps/web/src/routes/_portal/index.tsx
+++ b/apps/web/src/routes/_portal/index.tsx
@@ -18,7 +18,7 @@ import {
   isProductEnabled,
   type PortalWelcomeCard as PortalWelcomeCardData,
 } from '@/lib/shared/types/settings'
-import { savedWelcomeCard } from '@/lib/shared/design/view'
+import { portalDefaultSort, savedWelcomeCard } from '@/lib/shared/design/view'
 import { isStatusPagePublished } from '@/lib/shared/status-settings'
 import { isPortalSupportSurfaceEnabled } from '@/lib/shared/support-surfaces'
 import { getShowPoweredByFn } from '@/lib/server/functions/powered-by'
@@ -48,11 +48,15 @@ const searchSchema = z.object({
 })
 
 /** Build the portalData query params from the current search + session. */
-function portalDataParams(searchParams: z.infer<typeof searchSchema>, userId: string | undefined) {
+function portalDataParams(
+  searchParams: z.infer<typeof searchSchema>,
+  userId: string | undefined,
+  defaultSort: 'trending' | 'top' | 'new'
+) {
   return {
     boardSlug: searchParams.board,
     search: searchParams.search,
-    sort: searchParams.sort ?? ('trending' as const),
+    sort: searchParams.sort ?? defaultSort,
     statusSlugs: searchParams.status?.length ? searchParams.status : undefined,
     tagIds: searchParams.tagIds?.length ? searchParams.tagIds : undefined,
     userId,
@@ -108,7 +112,9 @@ export const Route = createFileRoute('/_portal/')({
     // prefetchQuery never rejects (it swallows the queryFn error into the
     // cache), so no rejection handler is needed here.
     void queryClient.prefetchQuery(
-      portalQueries.portalData(portalDataParams(searchParams, session?.user?.id))
+      portalQueries.portalData(
+        portalDataParams(searchParams, session?.user?.id, portalDefaultSort(org))
+      )
     )
 
     const showPoweredBy = await getShowPoweredByFn()
@@ -161,6 +167,7 @@ function PublicPortalPage() {
           <Suspense
             fallback={
               <PortalFeedSkeleton
+                defaultSort={portalDefaultSort(settings)}
                 poweredBy={
                   showPoweredBy ? <PortalPoweredBy workspaceSlug={settings?.slug ?? ''} /> : null
                 }
@@ -220,7 +227,8 @@ function PortalFeed() {
 
   const currentBoard = liveSearch.board
   const currentSearch = liveSearch.search
-  const currentSort = liveSearch.sort ?? 'trending'
+  const defaultSort = portalDefaultSort(settings)
+  const currentSort = liveSearch.sort ?? defaultSort
 
   // A visitor's first post or vote mints an anonymous session mid-action,
   // which changes the viewer and so the feed's key. Deferring the viewer
@@ -234,12 +242,12 @@ function PortalFeed() {
   const deferredViewerId = useDeferredValue(liveViewerId)
   const previousFeedCached =
     queryClient.getQueryData(
-      portalQueries.portalData(portalDataParams(search, deferredViewerId)).queryKey
+      portalQueries.portalData(portalDataParams(search, deferredViewerId, defaultSort)).queryKey
     ) !== undefined
   const viewerId =
     deferredViewerId !== liveViewerId && !previousFeedCached ? liveViewerId : deferredViewerId
   const { data: portalData } = useSuspenseQuery(
-    portalQueries.portalData(portalDataParams(search, viewerId))
+    portalQueries.portalData(portalDataParams(search, viewerId, defaultSort))
   )
 
   // Seeds the shared statuses cache from this response so a post-detail
@@ -272,6 +280,7 @@ function PortalFeed() {
       currentBoard={currentBoard}
       currentSearch={currentSearch}
       currentSort={currentSort}
+      defaultSort={defaultSort}
       defaultBoardId={portalData.boards[0]?.id}
       boardPermissions={portalData.boardPermissions}
       facets={portalData.facets}

From b3a09006e92bfaebcaeff968588065a939c841fb Mon Sep 17 00:00:00 2001
From: James Morton <james.morton@quackback.io>
Date: Fri, 30 Oct 2026 20:48:15 +0000
Subject: [PATCH 2/4] feat(design): click a section in the preview to edit it

The header, the band, the welcome message, the feed and the filter panel are
marked with data-qb-section. While a design is previewed, the frame outlines
the innermost section under the pointer and, on a click that is not on one
of its links, buttons or fields, tells Appearance which section it is.
Appearance then opens Sections at that section's controls. The legacy
settings preview and the live portal are untouched.
---
 .../__tests__/appearance-view.test.tsx        | 16 ++++++-
 .../settings/appearance/appearance-view.tsx   | 21 ++++++++-
 .../settings/appearance/sections-panel.tsx    | 12 +++---
 .../public/__tests__/portal-header.test.tsx   |  4 +-
 .../portal-preview-listener.test.tsx          | 43 +++++++++++++++++++
 .../public/feedback/feedback-container.tsx    |  2 +-
 .../public/feedback/feedback-sidebar.tsx      |  2 +-
 .../public/feedback/portal-welcome-card.tsx   |  5 ++-
 .../src/components/public/portal-header.tsx   |  2 +-
 .../public/portal-preview-design.ts           | 22 ++++++++++
 .../public/portal-preview-listener.tsx        | 18 ++++++--
 11 files changed, 129 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
index a3fef2d6b7..e3a41f49d5 100644
--- a/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
@@ -4,7 +4,7 @@
  * draft bar at once, and Review and publish lists it before it goes live.
  */
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
+import { act, cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import type { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { defaultDesign } from '@/lib/shared/design/schema'
@@ -70,6 +70,20 @@ describe('AppearanceView', () => {
     expect(screen.getByRole('status').textContent).toContain('Draft · 1 change, not live')
   })
 
+  it('opens Sections when a section is picked in the preview', async () => {
+    mount()
+    expect(screen.queryByText('Menu style')).toBeNull()
+    act(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: { type: 'quackback:preview-section', section: 'band' },
+          origin: window.location.origin,
+        })
+      )
+    })
+    expect(await screen.findByText('Menu style')).toBeTruthy()
+  })
+
   it('applies a preset’s whole look to the draft', async () => {
     mount()
     fireEvent.click(screen.getByRole('button', { name: 'Start from a preset' }))
diff --git a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
index 4a7a6ffe10..6957473061 100644
--- a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
+++ b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { isEmptyTiptapDoc } from '@/lib/shared/utils/is-empty-tiptap-doc'
 import type { TiptapContent } from '@/lib/shared/db-types'
 import { ClientOnly } from '@tanstack/react-router'
@@ -33,6 +33,23 @@ export function AppearanceView({
   const [viewport, setViewport] = useState<'desktop' | 'mobile'>('desktop')
   const [reviewing, setReviewing] = useState(false)
   const [history, setHistory] = useState(false)
+  const [tab, setTab] = useState('brand')
+  // A section clicked in the preview opens its controls.
+  useEffect(() => {
+    function onMessage(event: MessageEvent) {
+      if (event.origin !== window.location.origin) return
+      const message = event.data as { type?: string; section?: unknown } | null
+      if (message?.type !== 'quackback:preview-section' || typeof message.section !== 'string')
+        return
+      setTab('sections')
+      const id = `design-section-${message.section}`
+      requestAnimationFrame(() =>
+        document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+      )
+    }
+    window.addEventListener('message', onMessage)
+    return () => window.removeEventListener('message', onMessage)
+  }, [])
   // The welcome message reaches the preview on the structural channel, which
   // the feedback page already reads; an empty body hides it.
   const { show, body } = draft.design.pages.feedback.welcome
@@ -50,7 +67,7 @@ export function AppearanceView({
   return (
     <div className="grid grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(360px,440px)_minmax(0,1fr)]">
       <div className="min-w-0 space-y-4">
-        <Tabs defaultValue="brand">
+        <Tabs value={tab} onValueChange={(next) => setTab(String(next))}>
           <div className="flex items-center gap-2">
             <TabsList>
               <TabsTrigger value="brand">Brand</TabsTrigger>
diff --git a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
index e7751f81a3..3ab0bbda76 100644
--- a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
@@ -32,7 +32,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
   const { layout } = design
   return (
     <div className="space-y-8">
-      <section className="space-y-4">
+      <section id="design-section-header" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Header</h3>
         <DesignTiles
           name="design-header"
@@ -58,7 +58,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         />
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-band" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Top band</h3>
         <DesignTiles
           name="design-band"
@@ -97,7 +97,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         ))}
       </section>
 
-      <section className="space-y-3">
+      <section id="design-section-welcome" className="scroll-mt-4 space-y-3">
         <SettingRow
           label="Welcome message"
           htmlFor="design-welcome"
@@ -119,7 +119,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         )}
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-feed" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Feed</h3>
         <DesignTiles
           name="design-cards"
@@ -168,7 +168,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         />
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-filters" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Filters</h3>
         <DesignTiles
           name="design-filters"
@@ -183,7 +183,7 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
         />
       </section>
 
-      <section className="space-y-4">
+      <section id="design-section-site" className="scroll-mt-4 space-y-4">
         <h3 className="text-sm font-semibold">Whole site</h3>
         <DesignTiles
           name="design-width"
diff --git a/apps/web/src/components/public/__tests__/portal-header.test.tsx b/apps/web/src/components/public/__tests__/portal-header.test.tsx
index 0d2086d410..4821832edd 100644
--- a/apps/web/src/components/public/__tests__/portal-header.test.tsx
+++ b/apps/web/src/components/public/__tests__/portal-header.test.tsx
@@ -380,7 +380,9 @@ describe('PortalHeader — design layouts', () => {
   it('keeps two rows on the legacy theme and for a stacked design', () => {
     for (const portalDesign of [undefined, design('stacked')]) {
       const { container, unmount } = mountWith(portalDesign)
-      expect(container.querySelector('header')?.hasAttribute('data-qb-section')).toBe(false)
+      const header = container.querySelector('header')!
+      expect(header.querySelector('.md\\:block nav')).toBeNull()
+      expect(header.querySelector('.justify-center nav')).toBeNull()
       unmount()
     }
   })
diff --git a/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx b/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx
index 89d29f115c..7f368bb558 100644
--- a/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx
+++ b/apps/web/src/components/public/__tests__/portal-preview-listener.test.tsx
@@ -159,3 +159,46 @@ describe('a design draft in the preview', () => {
     expect(document.documentElement.hasAttribute('data-qb-band')).toBe(false)
   })
 })
+
+describe('picking a section in a design preview', () => {
+  const sent: unknown[] = []
+  const designMessage = {
+    type: 'quackback:preview-design',
+    design: { css: '', attributes: {}, fontIds: [], headline: null },
+  }
+
+  beforeEach(() => {
+    sent.length = 0
+    vi.spyOn(window.parent, 'postMessage').mockImplementation((message: unknown) => {
+      sent.push(message)
+    })
+  })
+
+  function section(name: string, inner = '<p>text</p>') {
+    const element = document.createElement('div')
+    element.setAttribute('data-qb-section', name)
+    element.innerHTML = inner
+    document.body.appendChild(element)
+    return element
+  }
+
+  it('reports the section clicked, but not a click on a link in it', async () => {
+    await postDesign(designMessage)
+    const band = section('band', '<p>Headline</p><a href="/x">Link</a>')
+    band.querySelector('p')!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    band.querySelector('a')!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(
+      sent.filter((m) => (m as { type: string }).type === 'quackback:preview-section')
+    ).toEqual([{ type: 'quackback:preview-section', section: 'band' }])
+    band.remove()
+  })
+
+  it('stays out of the way until a design is previewed', () => {
+    const band = section('band')
+    band.querySelector('p')!.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    expect(
+      sent.filter((m) => (m as { type: string }).type === 'quackback:preview-section')
+    ).toEqual([])
+    band.remove()
+  })
+})
diff --git a/apps/web/src/components/public/feedback/feedback-container.tsx b/apps/web/src/components/public/feedback/feedback-container.tsx
index 9f8ee1ce15..5561929489 100644
--- a/apps/web/src/components/public/feedback/feedback-container.tsx
+++ b/apps/web/src/components/public/feedback/feedback-container.tsx
@@ -463,7 +463,7 @@ export function FeedbackContainer({
   }
 
   return (
-    <div>
+    <div data-qb-section="feed">
       <div className="flex gap-6 lg:gap-8 [[data-qb-filters=start]_&]:flex-row-reverse">
         <div className="flex-1 min-w-0">
           <FeedbackHeader
diff --git a/apps/web/src/components/public/feedback/feedback-sidebar.tsx b/apps/web/src/components/public/feedback/feedback-sidebar.tsx
index 79dd79e8cf..252c17b730 100644
--- a/apps/web/src/components/public/feedback/feedback-sidebar.tsx
+++ b/apps/web/src/components/public/feedback/feedback-sidebar.tsx
@@ -85,7 +85,7 @@ export function FeedbackSidebar({ children, footer }: FeedbackSidebarProps) {
   }, [])
 
   return (
-    <aside className="hidden w-72 shrink-0 lg:block xl:w-80">
+    <aside data-qb-section="filters" className="hidden w-72 shrink-0 lg:block xl:w-80">
       <div
         ref={columnRef}
         className="sticky top-[calc(var(--portal-header-height,0px)+1.5rem)] flex max-h-[calc(100vh-3rem)] flex-col gap-3"
diff --git a/apps/web/src/components/public/feedback/portal-welcome-card.tsx b/apps/web/src/components/public/feedback/portal-welcome-card.tsx
index ac948bce82..5235dc443a 100644
--- a/apps/web/src/components/public/feedback/portal-welcome-card.tsx
+++ b/apps/web/src/components/public/feedback/portal-welcome-card.tsx
@@ -11,7 +11,10 @@ function PortalWelcomeCardImpl({ welcomeCard }: PortalWelcomeCardProps) {
   if (!welcomeCard || isEmptyTiptapDoc(welcomeCard.body)) return null
 
   return (
-    <section className="mb-6 rounded-xl border border-border/60 bg-card/60 p-5 sm:p-6">
+    <section
+      data-qb-section="welcome"
+      className="mb-6 rounded-xl border border-border/60 bg-card/60 p-5 sm:p-6"
+    >
       <RichTextContent content={welcomeCard.body} />
     </section>
   )
diff --git a/apps/web/src/components/public/portal-header.tsx b/apps/web/src/components/public/portal-header.tsx
index c937cb9eaa..5e1c57686d 100644
--- a/apps/web/src/components/public/portal-header.tsx
+++ b/apps/web/src/components/public/portal-header.tsx
@@ -365,7 +365,7 @@ export function PortalHeader({
   // Two-row layout: Logo + Auth on top, Navigation below
   return (
     // A banner landmark, so the logo and account controls sit in one.
-    <header ref={headerRef} className={headerClassName}>
+    <header ref={headerRef} className={headerClassName} data-qb-section="header">
       {/* Row 1: Logo + Name + Auth */}
       <div>
         <div className="max-w-[var(--qb-page-max,72rem)] mx-auto w-full px-4 sm:px-6">
diff --git a/apps/web/src/components/public/portal-preview-design.ts b/apps/web/src/components/public/portal-preview-design.ts
index a7b71283ad..42b7a30ca5 100644
--- a/apps/web/src/components/public/portal-preview-design.ts
+++ b/apps/web/src/components/public/portal-preview-design.ts
@@ -55,3 +55,25 @@ export function applyDesignAttributes(attributes: Record<string, string>): () =>
     }
   }
 }
+
+/** Outlines the innermost section under the pointer, so it reads as clickable. */
+export const SECTION_OUTLINE_CSS =
+  '[data-qb-section]{cursor:pointer}' +
+  '[data-qb-section]:hover:not(:has([data-qb-section]:hover)){outline:2px dashed oklch(0.55 0 0 / 0.7);outline-offset:4px}'
+
+/**
+ * A click on a section (not on one of its links, buttons or fields) tells
+ * Appearance which section to open. Returns what stops listening.
+ */
+export function startSectionPicking(): () => void {
+  function onClick(event: MouseEvent) {
+    const target = event.target as Element | null
+    if (!target || target.closest('a, button, input, textarea, select, [role="button"]')) return
+    const section = target.closest('[data-qb-section]')?.getAttribute('data-qb-section')
+    if (!section) return
+    event.preventDefault()
+    window.parent.postMessage({ type: 'quackback:preview-section', section }, window.location.origin)
+  }
+  document.addEventListener('click', onClick, true)
+  return () => document.removeEventListener('click', onClick, true)
+}
diff --git a/apps/web/src/components/public/portal-preview-listener.tsx b/apps/web/src/components/public/portal-preview-listener.tsx
index 5ba433e305..db32d0f4e8 100644
--- a/apps/web/src/components/public/portal-preview-listener.tsx
+++ b/apps/web/src/components/public/portal-preview-listener.tsx
@@ -109,11 +109,18 @@ export function PortalPreviewProvider({
   }, [active])
 
   const stylesheet = useMemo(() => (css ? previewStylesheet(css) : ''), [css])
-  // Sets the draft's attributes on <html> and puts the saved ones back when it changes.
+  // While a draft is previewed: its attributes on <html> (the saved ones come
+  // back when it changes), and a click on a section tells Appearance which.
   useEffect(() => {
-    if (!design || !designChannel.current) return
-    return designChannel.current.applyDesignAttributes(design.attributes)
-  }, [design])
+    const channel = designChannel.current
+    if (!design || !channel) return
+    const restore = channel.applyDesignAttributes(design.attributes)
+    const stopPicking = active ? channel.startSectionPicking() : () => {}
+    return () => {
+      restore()
+      stopPicking()
+    }
+  }, [design, active])
   const fontIds = design?.fontIds.join(' ') ?? ''
   useEffect(() => {
     for (const id of fontIds.split(' ').filter(Boolean)) loadBrandingFont(id).catch(() => {})
@@ -130,6 +137,9 @@ export function PortalPreviewProvider({
       </PreviewHeadlineContext.Provider>
       {stylesheet ? <style data-preview-override="">{stylesheet}</style> : null}
       {design?.css ? <style data-preview-design="">{design.css}</style> : null}
+      {design && designChannel.current ? (
+        <style data-preview-sections="">{designChannel.current.SECTION_OUTLINE_CSS}</style>
+      ) : null}
     </PreviewDraftProvider>
   )
 }

From 1bd3d1c3c81521295a83ae4a4ccc3413a76e6aa7 Mon Sep 17 00:00:00 2001
From: James Morton <james.morton@quackback.io>
Date: Fri, 30 Oct 2026 20:51:48 +0000
Subject: [PATCH 3/4] feat(design): show the workspace logo in Brand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The logo belongs to the workspace: Settings › General sets it for the
portal, the admin and email, and the portal header reads it there. Brand
shows the current logo with a link to change it, so there is one place to
edit it rather than a second copy in the design.
---
 .../__tests__/appearance-view.test.tsx        |  1 +
 .../settings/appearance/appearance-view.tsx   |  4 ++-
 .../admin/settings/appearance/brand-panel.tsx | 29 +++++++++++++++++--
 apps/web/src/routes/admin/settings.portal.tsx |  5 +++-
 4 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx b/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
index e3a41f49d5..5a32f366fd 100644
--- a/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
+++ b/apps/web/src/components/admin/settings/appearance/__tests__/appearance-view.test.tsx
@@ -14,6 +14,7 @@ const server = vi.hoisted(() => ({ published: [] as unknown[] }))
 vi.mock('@tanstack/react-router', () => ({
   useRouter: () => ({ invalidate: async () => {} }),
   ClientOnly: ({ children }: { children: ReactNode }) => <>{children}</>,
+  Link: ({ children }: { children: ReactNode }) => <a>{children}</a>,
 }))
 vi.mock('@/components/admin/settings/branding/portal-preview', () => ({
   PortalPreview: ({ design }: { design: { css: string } }) => (
diff --git a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
index 6957473061..b0e020ff5a 100644
--- a/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
+++ b/apps/web/src/components/admin/settings/appearance/appearance-view.tsx
@@ -22,9 +22,11 @@ import { useDesignDraft } from './use-design-draft'
 export function AppearanceView({
   workspaceName,
   faviconUrl,
+  logoUrl = null,
 }: {
   workspaceName: string
   faviconUrl: string | null
+  logoUrl?: string | null
 }) {
   const draft = useDesignDraft()
   const [theme, setTheme] = useState<'light' | 'dark'>(
@@ -78,7 +80,7 @@ export function AppearanceView({
             </Button>
           </div>
           <TabsContent value="brand" className="pt-4">
-            <BrandPanel design={draft.design} update={draft.update} />
+            <BrandPanel design={draft.design} update={draft.update} logoUrl={logoUrl} />
           </TabsContent>
           <TabsContent value="sections" className="pt-4">
             <SectionsPanel design={draft.design} update={draft.update} />
diff --git a/apps/web/src/components/admin/settings/appearance/brand-panel.tsx b/apps/web/src/components/admin/settings/appearance/brand-panel.tsx
index 415a97a93e..d44746ccb8 100644
--- a/apps/web/src/components/admin/settings/appearance/brand-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/brand-panel.tsx
@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Link } from '@tanstack/react-router'
 import { Button } from '@/components/ui/button'
 import { normaliseColor } from '@/lib/shared/design/color'
 import { BUNDLED_FONTS, type BundledFontId } from '@/lib/shared/design/fonts'
@@ -145,8 +146,17 @@ function FontSelect({
   )
 }
 
-/** The Brand tab: mode, colours, fonts and corners. */
-export function BrandPanel({ design, update }: { design: PortalDesign; update: Update }) {
+/** The Brand tab: the logo, mode, colours, fonts and corners. */
+export function BrandPanel({
+  design,
+  update,
+  logoUrl = null,
+}: {
+  design: PortalDesign
+  update: Update
+  /** The workspace logo, which Settings › General owns for the portal, the admin and email. */
+  logoUrl?: string | null
+}) {
   const [moreColours, setMoreColours] = useState(false)
   const { light, dark, fonts } = design.brand
   const headingFont = fonts.heading.kind === 'bundled' ? fonts.heading.id : fonts.heading.fallback
@@ -159,6 +169,21 @@ export function BrandPanel({ design, update }: { design: PortalDesign; update: U
       <PresetGallery
         onApply={(preset) => update((draft) => Object.assign(draft, applyPreset(draft, preset)))}
       />
+      <div className="flex items-center gap-3">
+        <span className="w-32 shrink-0 text-[13px] font-medium">Logo</span>
+        {logoUrl ? (
+          <img
+            src={logoUrl}
+            alt=""
+            className="size-8 rounded-md border border-border object-contain"
+          />
+        ) : (
+          <span className="text-[13px] text-muted-foreground">None</span>
+        )}
+        <Button variant="ghost" size="sm" className="ms-auto" asChild>
+          <Link to="/admin/settings/general">Change in General</Link>
+        </Button>
+      </div>
       <DesignTiles
         name="design-mode"
         label="Mode"
diff --git a/apps/web/src/routes/admin/settings.portal.tsx b/apps/web/src/routes/admin/settings.portal.tsx
index 3c34577598..4c29260430 100644
--- a/apps/web/src/routes/admin/settings.portal.tsx
+++ b/apps/web/src/routes/admin/settings.portal.tsx
@@ -123,6 +123,7 @@ function PortalSettingsPage() {
     <DesignedPortalPage
       workspaceName={settings.name}
       faviconUrl={settings.faviconData?.url ?? settings.brandingData?.logoUrl ?? null}
+      logoUrl={settings.brandingData?.logoUrl ?? null}
     />
   )
 }
@@ -130,9 +131,11 @@ function PortalSettingsPage() {
 function DesignedPortalPage({
   workspaceName,
   faviconUrl,
+  logoUrl,
 }: {
   workspaceName: string
   faviconUrl: string | null
+  logoUrl: string | null
 }) {
   const { tab } = Route.useSearch()
   const tabs = <PortalTabs current={tab ?? 'appearance'} />
@@ -140,7 +143,7 @@ function DesignedPortalPage({
   return (
     <SettingsPage page="/admin/settings/portal" width="wide">
       {tabs}
-      <AppearanceView workspaceName={workspaceName} faviconUrl={faviconUrl} />
+      <AppearanceView workspaceName={workspaceName} faviconUrl={faviconUrl} logoUrl={logoUrl} />
     </SettingsPage>
   )
 }

From 6178ba523f75544c9adf3f5830b796536b5edbde Mon Sep 17 00:00:00 2001
From: James Morton <james.morton@quackback.io>
Date: Fri, 30 Oct 2026 21:16:40 +0000
Subject: [PATCH 4/4] perf(design): draw the sort tiles instead of loading
 icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The sort tiles used three icons, and since Appearance is part of the
Settings › Portal route, every visit to that page loaded their chunks. They
are drawn like the other tiles: bars rising for trending, falling for top,
and a dot on the newest.
---
 .../admin/settings/appearance/drawings.tsx    | 25 +++++++++++++++++++
 .../settings/appearance/sections-panel.tsx    |  8 +++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/admin/settings/appearance/drawings.tsx b/apps/web/src/components/admin/settings/appearance/drawings.tsx
index cc8900c5b6..42aadb278d 100644
--- a/apps/web/src/components/admin/settings/appearance/drawings.tsx
+++ b/apps/web/src/components/admin/settings/appearance/drawings.tsx
@@ -128,6 +128,31 @@ export function BandDrawing({ band }: { band: Layout['band'] }) {
   )
 }
 
+/** Bars for a feed's order: rising for trending, falling for top, a dot on the newest. */
+export function SortDrawing({ sort }: { sort: 'trending' | 'top' | 'new' }) {
+  const heights = sort === 'top' ? ['h-5', 'h-3.5', 'h-2'] : ['h-2', 'h-3.5', 'h-5']
+  if (sort === 'new')
+    return (
+      <span className="flex w-12 flex-col gap-1">
+        {[0, 1, 2].map((row) => (
+          <span key={row} className="flex items-center gap-1">
+            <span
+              className={cn('size-1.5 rounded-full', row === 0 ? 'bg-primary' : 'bg-transparent')}
+            />
+            <span className="h-1.5 flex-1 rounded-sm bg-foreground/30" />
+          </span>
+        ))}
+      </span>
+    )
+  return (
+    <span className="flex items-end gap-1">
+      {heights.map((height, index) => (
+        <span key={index} className={cn('w-2 rounded-sm bg-foreground/35', height)} />
+      ))}
+    </span>
+  )
+}
+
 export function FiltersDrawing({ filters }: { filters: Layout['filters'] }) {
   return (
     <span className={cn('flex w-14 gap-1', filters === 'start' && 'flex-row-reverse')}>
diff --git a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
index 3ab0bbda76..4406369f8a 100644
--- a/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
+++ b/apps/web/src/components/admin/settings/appearance/sections-panel.tsx
@@ -3,7 +3,6 @@ import { Switch } from '@/components/ui/switch'
 import { SettingRow } from '@/components/admin/settings/setting-row'
 import { WelcomeBodyEditor } from '@/components/admin/settings/branding/welcome-body-editor'
 import type { TiptapContent } from '@/lib/shared/db-types'
-import { ArrowTrendingUpIcon, ClockIcon, FireIcon } from '@heroicons/react/24/solid'
 import { DESIGN_OPTIONS } from '@/lib/shared/design/options'
 import type { PortalDesign } from '@/lib/shared/design/schema'
 import { DesignTiles } from './design-tiles'
@@ -14,6 +13,7 @@ import {
   DensityDrawing,
   FiltersDrawing,
   NavDrawing,
+  SortDrawing,
   WidthDrawing,
 } from './drawings'
 
@@ -141,17 +141,17 @@ export function SectionsPanel({ design, update }: { design: PortalDesign; update
             {
               value: 'trending',
               label: 'Trending',
-              drawing: <FireIcon className="size-5 text-foreground/50" />,
+              drawing: <SortDrawing sort="trending" />,
             },
             {
               value: 'top',
               label: 'Top',
-              drawing: <ArrowTrendingUpIcon className="size-5 text-foreground/50" />,
+              drawing: <SortDrawing sort="top" />,
             },
             {
               value: 'new',
               label: 'New',
-              drawing: <ClockIcon className="size-5 text-foreground/50" />,
+              drawing: <SortDrawing sort="new" />,
             },
           ]}
         />