From 13213d762169d2e0e4c365708b700a7aada0f359 Mon Sep 17 00:00:00 2001
From: "pouriade.com" <did:plc:3sapfnszmvjc6wa4ml3ybkwb>
Date: Wed, 21 Oct 2026 18:21:48 -0700
Subject: [PATCH] The account menu has a Report an issue link, under Theme, to
 the project's issues on Tangled, so anyone can leave feedback. It opens in a
 new tab, marked by the out arrow at the row's end. The URL is hard-coded once
 at the top of AccountMenu.tsx, where a fork points it at its own tracker.

---
 CHANGELOG.md                                  |  1 +
 .../features/auth/components/AccountMenu.tsx  | 28 ++++++++++++++++---
 .../chat-list/components/ChatList.test.tsx    |  8 +++++-
 specs/web-ui.md                               |  2 +-
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 070364f..7f09e0c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ What changed in each release of SCN Chat, for the people who use it, run it, or
 
 - `pnpm setup-env` creates `.env` from `.env.example` and fills in fresh `OAUTH_PRIVATE_KEYS` and `SECRET_KEY`, so local setup no longer means copying secrets by hand. Secrets already set are left alone.
 - The account menu in the sidebar has a Theme row for switching between System, Light, and Dark without opening Settings. It is the same choice as in Preferences, kept on your device.
+- The account menu has a Report an issue link to the project's issues on Tangled, for anyone to leave feedback. Forks should point it at their own tracker, in `AccountMenu.tsx`.
 
 ### Changed
 
diff --git a/apps/web/src/features/auth/components/AccountMenu.tsx b/apps/web/src/features/auth/components/AccountMenu.tsx
index 1624c12..3b593ce 100644
--- a/apps/web/src/features/auth/components/AccountMenu.tsx
+++ b/apps/web/src/features/auth/components/AccountMenu.tsx
@@ -1,7 +1,14 @@
 import { Link } from '@tanstack/react-router'
 import { type ReactNode, use, useRef, useState } from 'react'
 import { cn } from '../../../shared/cn.ts'
-import { MoreVerticalIcon, SettingsIcon, ShieldIcon, SignOutIcon } from '../../../shared/icons.tsx'
+import {
+  AlertIcon,
+  ArrowOutIcon,
+  MoreVerticalIcon,
+  SettingsIcon,
+  ShieldIcon,
+  SignOutIcon,
+} from '../../../shared/icons.tsx'
 import { floating } from '../../../shared/ui/menu.ts'
 import { Separator } from '../../../shared/ui/Separator.tsx'
 import { sidebarRow } from '../../../shared/ui/sidebar.ts'
@@ -10,6 +17,9 @@ import { MeContext } from '../session.ts'
 import { AccountCard } from './AccountCard.tsx'
 import { ThemeSwitch } from './ThemeSwitch.tsx'
 
+/** Where Report an issue goes, the project's issues for every user. A fork points it at its own. */
+const issuesUrl = 'https://tangled.org/sharedcomputer.network/scn-chat/issues'
+
 interface Props {
   /** A small mark on the avatar's corner, such as a status dot. */
   badge: ReactNode
@@ -21,9 +31,9 @@ interface Props {
 
 /**
  * Who is signed in, as a button that opens a menu of the caller's status, Settings, Admin for
- * admins, the theme between two separators, and Sign out. The menu is a piece of the sidebar lifted
- * over it, rising from the account, and reaches past the button by its padding and edge, so its
- * rows line up with the sidebar's.
+ * admins, the theme and Report an issue between two separators, and Sign out. The menu is a piece
+ * of the sidebar lifted over it, rising from the account, and reaches past the button by its
+ * padding and edge, so its rows line up with the sidebar's.
  */
 export function AccountMenu(props: Props) {
   const me = use(MeContext)
@@ -62,6 +72,16 @@ export function AccountMenu(props: Props) {
           )}
           <Separator />
           <ThemeSwitch />
+          <a
+            href={issuesUrl}
+            target="_blank"
+            rel="noreferrer"
+            onClick={() => setOpen(false)}
+            className={sidebarRow}
+          >
+            <AlertIcon /> Report an issue
+            <ArrowOutIcon className="ms-auto size-3.5" />
+          </a>
           <Separator />
           <button
             type="button"
diff --git a/apps/web/tests/features/chat-list/components/ChatList.test.tsx b/apps/web/tests/features/chat-list/components/ChatList.test.tsx
index 435114d..a5c826a 100644
--- a/apps/web/tests/features/chat-list/components/ChatList.test.tsx
+++ b/apps/web/tests/features/chat-list/components/ChatList.test.tsx
@@ -439,13 +439,19 @@ describe('ChatList sidebar', () => {
     await vi.waitFor(() => expect(store.api.fetchIndex).toHaveBeenCalled())
   })
 
-  it('opens Settings, Admin, and Sign out from the account, and closes on Escape', async () => {
+  it('opens Settings, Admin, Report an issue, and Sign out from the account, and closes on Escape', async () => {
     stubFetch()
     await renderSidebar()
     expect(screen.queryByRole('link', { name: 'Settings' })).toBeNull()
     await userEvent.click(screen.getByRole('button', { name: 'Account' }))
     expect(screen.getByRole('link', { name: 'Settings' })).toHaveAttribute('href', '/settings')
     expect(screen.getByRole('link', { name: 'Admin' })).toHaveAttribute('href', '/admin')
+    const issues = screen.getByRole('link', { name: 'Report an issue' })
+    expect(issues).toHaveAttribute(
+      'href',
+      'https://tangled.org/sharedcomputer.network/scn-chat/issues',
+    )
+    expect(issues).toHaveAttribute('target', '_blank')
     expect(screen.getByRole('button', { name: 'Sign out' })).toBeInTheDocument()
     await userEvent.keyboard('{Escape}')
     expect(screen.queryByRole('link', { name: 'Settings' })).toBeNull()
diff --git a/specs/web-ui.md b/specs/web-ui.md
index 0763fe5..ffe5623 100644
--- a/specs/web-ui.md
+++ b/specs/web-ui.md
@@ -70,7 +70,7 @@ The root route's `beforeLoad` asks `/api/me` who is signed in, through the query
   - New chat, which goes to `/`, so a chat is only created once its first message is sent, with a search button beside it that shows the search box below, focused, and hides it again. The box shows from the start when the URL holds a search. Hiding it, by the button or by Escape in the box, clears the search, and Escape returns focus to the button.
   - Tags, when any chat has some: a section that folds away under its heading, with a row for every tag across the chats and how many chats carry it, which filters the list to that tag, or shows every chat again when picked while active. A button at the heading's end clears the filter. Tags come from each chat's index entry.
   - The chats, newest first, under date headings by `updatedAt` in local time: Today, Yesterday, Previous 7 days, Previous 30 days, then by month, with the year for other years. Each chat is one line. Untitled chats show "New chat". A chat with a pending reply shows a breathing green dot labeled "Replying", and one whose newest complete reply this device hasn't seen shows a still dot labeled "New reply" and a bolder title. A menu on each chat, shown on hover or focus and always on a touch screen, renames it, edits its tags as a comma-separated list cut to the lexicon's 32 tags of 64 characters, or deletes it after asking, through the chat routes, then syncs the index. Renaming, tagging, or confirming a delete takes the chat's place in the list as a card. Deleting the open chat goes to `/`. The chats load 50 at a time, the next page as the end of the list nears, with a few skeleton rows while it loads. A tag's count and the filter cover every chat, and the filter pages through only its chats. Only the chats, or the search's results, scroll, fading out at both ends.
-  - An account card shows who is signed in: their avatar, display name, and `@handle` from `/api/me/profile` and `/api/me`. Without a display name it shows the handle alone, and without an avatar, or when it fails to load, the name's first letter in a rounded square. A dot on the avatar's corner shows how current this device's copy is: green when synced, breathing while syncing or downloading, grey when open in another tab, and red when it failed, with the status in words on hover: "Synced 2 min ago", "Downloading 3 chats…", "Syncing…", or that the copy is open in another tab or failed to open. The card is a button that opens a menu above it. The menu starts with where the chats live, "Stored on your PDS", or "Stored on this server" with "Your PDS doesn't support spaces yet" beneath, then the same dot, the status in words, and a Sync button that syncs the index now, then Settings, Admin for admins, a Theme row with System, Light, and Dark buttons, set apart by a line above and below, and Sign out. Escape or a click outside closes it, and choosing a theme leaves it open.
+  - An account card shows who is signed in: their avatar, display name, and `@handle` from `/api/me/profile` and `/api/me`. Without a display name it shows the handle alone, and without an avatar, or when it fails to load, the name's first letter in a rounded square. A dot on the avatar's corner shows how current this device's copy is: green when synced, breathing while syncing or downloading, grey when open in another tab, and red when it failed, with the status in words on hover: "Synced 2 min ago", "Downloading 3 chats…", "Syncing…", or that the copy is open in another tab or failed to open. The card is a button that opens a menu above it. The menu starts with where the chats live, "Stored on your PDS", or "Stored on this server" with "Your PDS doesn't support spaces yet" beneath, then the same dot, the status in words, and a Sync button that syncs the index now, then Settings, Admin for admins, a Theme row with System, Light, and Dark buttons and a Report an issue link to the project's issues on Tangled, which opens in a new tab, set apart by a line above and below, and Sign out. Escape or a click outside closes it, and choosing a theme leaves it open.
 
   What this device has seen is kept in `localStorage` per account, as the newest seen reply of each chat. The first list on a device seeds it, so older replies don't all show as new, and the open chat's newest reply counts as seen. Icons come from `src/shared/icons.tsx`: Lucide's, and the app's own puffier ones drawn to sit with the logo's bubble letters, in the text color and hidden from assistive technology, which a fork can swap for another set.
 - **Conversation.** It shows the messages on the current branch, from the root to the selected leaf. A message with siblings shows "2/3" between chevrons that switch branches. By default the branch follows the newest sibling at each level, and below a focused message it follows the newest sibling at each level after it. A conversation with no messages, once its refresh from the PDS has finished, says to describe what they need or drop in a file, an instruction rather than a question so it hints at what the app takes, where the chat is saved, and offers a few starters, each of which begins the message in the composer for the user to finish. With no chat open, on `/`, the page is that empty conversation with its composer, whose first message creates the chat, sends to it, and opens it. A send that fails after creating the chat reuses that chat when tried again, so a retry never makes a second one.
-- 
knotmirror 0.0.1