feat(sidebar): custom room sections via u.* tags (#108)

Room context menu → "Add to Section" submenu: every u.<name> tag in use
across your rooms as a checkable item, plus a "New section…" field
(validated: non-empty, ≤ 40 chars, no dots, unique). Toggling writes or
deletes the standard u.<name> room tag (order 0.5), so sections sync
across devices and other clients see the same tags. The menu row reads
"Sections: Raids, Off-topic" once a room is in any.

Home renders each section as a collapsible category between Favorites
and Rooms (alphabetical; members by tag order then name; the same
closed-state store and unread-only-when-collapsed behaviour as the built-in
categories). A sectioned room leaves the plain Rooms list but keeps a
Favorite / Low Priority placement. Empty sections don't exist by
construction; rename is retag (v2). Derivation in utils/roomSections.ts
with unit tests.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PPmy3tPq869XDW4njjVaKA

src/app/features/room-nav/RoomNavItem.tsx

@@ -23,6 +23,7 @@ import {
   Overlay,
   OverlayBackdrop,
   OverlayCenter,
+  color,
   config,
   PopOut,
   toRem,
@@ -37,6 +38,13 @@ import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
+import {
+  isSectionTag,
+  listSectionNames,
+  sectionName,
+  sectionTag,
+  validateSectionName,
+} from '../../utils/roomSections';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -277,6 +285,14 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
 
     const [invitePrompt, setInvitePrompt] = useState(false);
     const [muteMenuAnchor, setMuteMenuAnchor] = useState<RectCords>();
+    // [Gitea #108] "Add to section" submenu: existing u.* sections + new one.
+    const [sectionMenuAnchor, setSectionMenuAnchor] = useState<RectCords>();
+    const [newSectionName, setNewSectionName] = useState('');
+    const [newSectionError, setNewSectionError] = useState<string>();
+    const sectionNames = useMemo(() => listSectionNames(mx), [mx]);
+    const roomSections = Object.keys(room.tags ?? {})
+      .filter(isSectionTag)
+      .map(sectionName);
     const isServerNotice = room.getType() === 'm.server_notice';
 
     const isFavorite = !!room.tags?.['m.favourite'];
@@ -316,6 +332,25 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
       requestClose();
     };
 
+    const handleToggleSection = (name: string) => {
+      const tag = sectionTag(name);
+      const op = room.tags?.[tag]
+        ? mx.deleteRoomTag(room.roomId, tag)
+        : mx.setRoomTag(room.roomId, tag, { order: 0.5 });
+      op.catch(notifyTagFailure);
+      requestClose();
+    };
+
+    const handleNewSection = (evt: React.FormEvent) => {
+      evt.preventDefault();
+      const error = validateSectionName(newSectionName, sectionNames);
+      if (error) {
+        setNewSectionError(error);
+        return;
+      }
+      handleToggleSection(newSectionName.trim());
+    };
+
     const markedUnread = useAtomValue(markedUnreadAtom).has(room.roomId);
 
     const handleMarkAsRead = () => {
@@ -498,6 +533,97 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
               {isLowPriority ? 'Remove from Low Priority' : 'Add to Low Priority'}
             </Text>
           </MenuItem>
+          <PopOut
+            anchor={sectionMenuAnchor}
+            position="Right"
+            align="Start"
+            offset={4}
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  onDeactivate: () => setSectionMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <Menu style={{ maxWidth: toRem(220), width: '100vw' }}>
+                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                    {sectionNames.map((name) => {
+                      const inSection = roomSections.includes(name);
+                      return (
+                        <MenuItem
+                          key={name}
+                          size="300"
+                          radii="300"
+                          role="menuitemcheckbox"
+                          aria-checked={inSection}
+                          after={inSection ? <Icon size="100" src={Icons.Check} /> : undefined}
+                          onClick={() => handleToggleSection(name)}
+                        >
+                          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                            {name}
+                          </Text>
+                        </MenuItem>
+                      );
+                    })}
+                    {sectionNames.length > 0 && <Line variant="Surface" size="300" />}
+                    <Box
+                      as="form"
+                      direction="Column"
+                      gap="100"
+                      onSubmit={handleNewSection}
+                      style={{ padding: config.space.S100 }}
+                    >
+                      <Input
+                        size="300"
+                        variant="Background"
+                        radii="300"
+                        placeholder="New section…"
+                        aria-label="New section name"
+                        value={newSectionName}
+                        onChange={(e) => {
+                          setNewSectionName(e.currentTarget.value);
+                          setNewSectionError(undefined);
+                        }}
+                        after={
+                          <IconButton
+                            type="submit"
+                            size="300"
+                            radii="300"
+                            variant="Background"
+                            aria-label="Create section"
+                          >
+                            <Icon size="100" src={Icons.Plus} />
+                          </IconButton>
+                        }
+                      />
+                      {newSectionError && (
+                        <Text size="T200" style={{ color: color.Critical.Main }}>
+                          {newSectionError}
+                        </Text>
+                      )}
+                    </Box>
+                  </Box>
+                </Menu>
+              </FocusTrap>
+            }
+          >
+            <MenuItem
+              size="300"
+              after={<Icon size="100" src={Icons.ChevronRight} />}
+              radii="300"
+              aria-pressed={!!sectionMenuAnchor}
+              aria-haspopup="menu"
+              onClick={(e) => setSectionMenuAnchor(e.currentTarget.getBoundingClientRect())}
+            >
+              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                {roomSections.length > 0
+                  ? `Sections: ${roomSections.join(', ')}`
+                  : 'Add to Section'}
+              </Text>
+            </MenuItem>
+          </PopOut>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"