feat: Sprint W-0 — Sidebar reorg mode with inline category/entity reordering

Add a toggle button in the sidebar (Owner-only) that activates "reorg mode"
for inline drag-to-reorder of categories and entities. Category reorder uses
the existing PUT /sidebar-config API; entity reorder uses PUT /entities/:eid/reorder.

- Reorg toggle button next to "Categories" header (grip icon → check when active)
- Category D&D with drag handles, visibility toggles (eye icons), and save
- Entity D&D now conditional on reorg mode (was always active)
- Touch support for mobile D&D (touchstart/touchmove/touchend with ghost element)
- Auto-exit reorg mode on navigation or drill state change
- CSS styles for drop targets, drag handles, and mode indicators
- Updated relations/.ai.md with graph visualization features from V-4
- data-entity-type-id attribute on category links for JS identification

https://claude.ai/code/session_01QJLkgjQDu5qohzJKGV4hj9

Author: claude

.ai/status.md

@@ -8,6 +8,11 @@
 <!-- ====================================================================== -->
 
 ## Last Updated
+2026-03-10 -- **Sprint W-0: Nav Menu Reorg Mode (IN PROGRESS).**
+
+24. Starting W-0: Sidebar reorg mode toggle button, inline category reorder, conditional entity drag-and-drop, touch support for mobile. Primarily frontend work — existing APIs (`PUT /sidebar-config`, `PUT /entities/:eid/reorder`) already support reordering. Also updating stale relations widget documentation.
+
+### Previous Update
 2026-03-10 -- **Sprint V-4: Enhanced Graph View & Cover Images (COMPLETE).**
 
 18. **@Mention edges in graph**: `FindAllMentionLinks()` in entity repository scans `entry_html` for `data-mention-id` attributes across a campaign. `MentionLink` model. `GetMentionLinks()` service method. `MentionLinkProvider` interface bridges entities→relations without circular imports. Mention edges appear as dashed purple lines in the D3 graph.

.ai/todo.md

@@ -207,7 +207,7 @@ _Quick capture, backlinks, enhanced graph, editor power-ups. See `.ai/obsidian-n
 
 ### Phase W: Polish, Ecosystem & Delight
 
-- [ ] **Sprint W-0: Nav Menu Reorg Mode** — Small icon button near Dashboard in sidebar. Click to enter reorg mode for current level (categories or entities). Category level: drag to reorder category icons. Entity level: drag to reorder, create folders/submenus. Click again to exit reorg mode. Must work on desktop, tablet, and mobile. Button is context-aware: on base nav, reorders categories; drilled into a category, reorders entities.
+- [~] **Sprint W-0: Nav Menu Reorg Mode** — Small icon button near Dashboard in sidebar. Click to enter reorg mode for current level (categories or entities). Category level: drag to reorder category icons. Entity level: drag to reorder, create folders/submenus. Click again to exit reorg mode. Must work on desktop, tablet, and mobile. Button is context-aware: on base nav, reorders categories; drilled into a category, reorders entities.
 - [ ] **Sprint W-0.5: Owner Visual Customization** — Change "Chronicle" brand name per-campaign with optional image/logo. Top bar color/gradient/animation/background image (responsive). Visual customization editor with faux site outline (editable boxes for colors/backgrounds). Appearance-only, not layout editing. Future: per-addon "feature in use" indicators showing which entities/pages use each feature, which widgets are available, click associations to navigate. Disabled feature banner with "offline" sticker instead of complete removal.
 - [ ] **Sprint W-1: Command Palette & Saved Filters** — Ctrl+Shift+P action palette with fuzzy search. Saved entity list filter presets as sidebar links in `saved_filters` table.
 - [ ] **Sprint W-2: Map Drawing Tools, Regions & Measurement** — Leaflet.Draw integration (freehand, polygons, circles, rectangles, text). Uses existing `map_drawings` table. Per-drawing visibility, color/opacity. Also: map regions (polygon fills/strokes/labels), measurement/distance tool, map embed layout block for entity pages.

internal/templates/layouts/app.templ

@@ -207,11 +207,22 @@ templ Sidebar() {
 						hx-select="#main-content"
 						hx-swap="innerHTML show:window:top"
 					>
-						<div class="px-4 mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 sidebar-cat-list-label">
-							Categories
+						<div class="px-4 mb-2 flex items-center justify-between sidebar-cat-list-label">
+							<span class="text-xs font-semibold uppercase tracking-wider text-gray-500">Categories</span>
+							if GetCampaignRole(ctx) >= 3 {
+								<button
+									id="sidebar-reorg-toggle"
+									type="button"
+									class="w-5 h-5 flex items-center justify-center rounded text-gray-500 hover:text-gray-300 hover:bg-white/10 transition-colors"
+									data-campaign-id={ GetCampaignID(ctx) }
+									title="Reorder sidebar"
+								>
+									<i class="fa-solid fa-grip-vertical text-[10px]"></i>
+								</button>
+							}
 						</div>
 						for _, et := range GetEntityTypes(ctx) {
-							@entityTypeLink(et.Slug, et.NamePlural, et.Color, et.Icon, GetEntityCount(ctx, et.ID))
+							@entityTypeLink(et.Slug, et.NamePlural, et.Color, et.Icon, GetEntityCount(ctx, et.ID), et.ID)
 						}
 						<a
 							href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/entities", GetCampaignID(ctx))) }
@@ -555,7 +566,7 @@ templ DefaultSidebarNav() {
 
 // entityTypeLink renders a single category link in the sidebar icon list.
 // Clicking triggers the slide-over panel via sidebar_drill.js.
-templ entityTypeLink(slug string, label string, color string, icon string, count int) {
+templ entityTypeLink(slug string, label string, color string, icon string, count int, typeID int) {
 	<a
 		href={ templ.SafeURL(fmt.Sprintf("/campaigns/%s/%s", GetCampaignID(ctx), slug)) }
 		hx-boost="false"
@@ -565,6 +576,7 @@ templ entityTypeLink(slug string, label string, color string, icon string, count
 			templ.KV(sidebarNavInactive, !isPathPrefix(ctx, fmt.Sprintf("/campaigns/%s/%s", GetCampaignID(ctx), slug))) }
 		data-cat-slug={ slug }
 		data-cat-url={ fmt.Sprintf("/campaigns/%s/%s", GetCampaignID(ctx), slug) }
+		data-entity-type-id={ strconv.Itoa(typeID) }
 	>
 		<span class="w-4 h-4 mr-3 shrink-0 flex items-center justify-center">
 			if icon != "" {

internal/templates/layouts/base.templ

@@ -69,6 +69,8 @@ templ Base(title string) {
 		<script src="/static/js/sidebar_drill.js" defer></script>
 		<!-- Sidebar tree: collapsible hierarchy + drag-and-drop reordering -->
 		<script src="/static/js/sidebar_tree.js" defer></script>
+		<!-- Sidebar reorg mode: toggle inline category/entity reordering -->
+		<script src="/static/js/sidebar_reorg.js" defer></script>
 
 		<!-- Recently viewed entities tracker (localStorage-backed sidebar list) -->
 		<script src="/static/js/recent_entities.js" defer></script>

internal/widgets/relations/.ai.md

@@ -8,6 +8,10 @@ directed links between two entities within a campaign (e.g., "allied with",
 is created automatically. Provides API endpoints for CRUD operations and a
 frontend widget mounted on entity profile pages.
 
+Also provides an interactive **graph visualization** (D3.js force-directed)
+showing all entities and their connections, with filtering, @mention edges,
+orphan detection, and local/ego-graph mode.
+
 ## Tier
 
 Widget (Reusable UI block with API endpoints)
@@ -25,27 +29,44 @@ Widget (Reusable UI block with API endpoints)
   types.
 - **Bi-directional Delete:** Deleting one direction automatically deletes the
   reverse to maintain graph consistency.
+- **GraphData:** Combined node/edge dataset for graph visualization. Nodes are
+  entities with position/type data; edges are relations or @mention links.
+- **EdgeKind:** Distinguishes "relation" edges (explicit links) from "mention"
+  edges (inferred from @mention links in entity entry_html).
+- **GraphFilter:** Server-side filter struct supporting: entity type slugs,
+  name search, focus entity + hop depth (BFS), include_mentions, include_orphans.
+- **MentionLinkProvider:** Interface bridging the entities plugin to the relations
+  widget for campaign-wide @mention edge extraction (avoids circular imports).
+- **EntityTypeListerForGraph:** Interface for fetching entity type summaries
+  used in the graph page filter dropdown.
+- **Orphan Entities:** Entities with zero connections (no relations, no mentions).
+  Detected by subtracting graph-connected entities from all campaign entities.
+- **Local/Ego Graph:** BFS subgraph extraction from a focus entity to N hops
+  depth. Used by the `local_graph` layout block on entity profile pages.
 
 ## Files
 
 | File | Purpose |
 |------|---------|
-| model.go | Relation struct, request DTOs, common relation types |
-| repository.go | SQL queries for entity_relations table |
-| service.go | Validation, bi-directional create/delete logic |
-| handler.go | JSON API handlers for relation CRUD |
+| model.go | Relation struct, request DTOs, common relation types, GraphNode, GraphEdge, GraphData, GraphFilter, MentionLinkProvider, EntityTypeListerForGraph |
+| repository.go | SQL queries for entity_relations table, ListOrphanEntities |
+| service.go | Validation, bi-directional create/delete, GetGraphData, GetFilteredGraphData, bfsSubgraph, mention edge merging |
+| handler.go | JSON API handlers for relation CRUD, GraphAPI (filtered graph data), GraphPage (full-page graph view) |
 | routes.go | Campaign-scoped routes with role-based access |
+| graph.templ | Graph page template with filter toolbar and entity type data attributes |
 
 ## Frontend
 
 | File | Purpose |
 |------|---------|
-| static/js/widgets/relations.js | Relations display/management widget |
+| static/js/widgets/relations.js | Relations display/management widget on entity pages |
+| static/js/widgets/relation_graph.js | D3.js force-directed graph with filtering, mention edges, clustering, orphan display, local graph mode |
 
 ## Dependencies
 
 - **Uses:** campaigns (CampaignContext, RequireRole middleware), auth (RequireAuth, GetUserID), apperror
-- **Used by:** Entity profile pages display relations via the frontend widget
+- **Receives via injection:** MentionLinkProvider (from entities plugin, wired in routes.go), EntityTypeListerForGraph (from entities plugin)
+- **Used by:** Entity profile pages (relations widget), entity layout blocks (local_graph block), standalone graph page
 
 ## Routes
 
@@ -55,6 +76,8 @@ Widget (Reusable UI block with API endpoints)
 | POST | /campaigns/:id/entities/:eid/relations | CreateRelation | Create bi-directional relation (Scribe+) |
 | DELETE | /campaigns/:id/entities/:eid/relations/:rid | DeleteRelation | Delete relation and reverse (Scribe+) |
 | GET | /campaigns/:id/relation-types | GetCommonTypes | Predefined relation type pairs |
+| GET | /campaigns/:id/relations-graph/data | GraphAPI | Filtered graph data (JSON) with query params: types, search, focus, hops, include_mentions, include_orphans |
+| GET | /campaigns/:id/relations-graph/page | GraphPage | Full-page graph visualization with filter toolbar |
 
 ## Database
 
@@ -85,4 +108,11 @@ Unique: (source_entity_id, target_entity_id, relation_type)
 - [x] Frontend relations widget (JS)
 - [x] Relations block on entity profile pages
 - [x] Relations block in template editor palette
+- [x] Graph visualization page (D3.js force-directed)
+- [x] Graph API with filtering (types, search, focus/hops, mentions, orphans)
+- [x] @Mention edge extraction and display
+- [x] Local/ego graph mode (BFS subgraph)
+- [x] Graph filter toolbar UI
+- [x] Entity type clustering in graph
+- [x] Orphan entity detection and display
 - [ ] Tests written

static/css/input.css

@@ -817,6 +817,33 @@
     border-radius: 0 4px 4px 0;
   }
 
+  /* Reorg mode: drop target highlight for category links. */
+  .sidebar-reorg-drop-target {
+    background-color: rgba(99, 102, 241, 0.12) !important;
+    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
+    border-radius: 4px;
+  }
+
+  /* Reorg mode: drag handle visibility (hidden by default, shown in reorg). */
+  .reorg-drag-handle {
+    opacity: 0.5;
+    transition: opacity 150ms ease;
+  }
+  .reorg-drag-handle:hover {
+    opacity: 1;
+  }
+
+  /* Reorg mode: subtle border on reorderable items. */
+  .sidebar-reorg-active #sidebar-cat-list .sidebar-category-link,
+  .sidebar-reorg-active #sidebar-entity-tree .sidebar-tree-node {
+    transition: background-color 150ms ease, box-shadow 150ms ease;
+  }
+
+  /* Reorg mode active indicator on toggle button. */
+  #sidebar-reorg-toggle.bg-accent\/20 {
+    background-color: rgba(var(--color-accent-rgb, 99, 102, 241), 0.2);
+  }
+
   /* Tree toggle button styling. */
   .sidebar-tree-toggle {
     transition: transform 150ms ease;