From de784150372839b90101ad5d4e2f2a78d23af21f Mon Sep 17 00:00:00 2001
From: mjkatgithub <melchior.kannengiesser@gmx.de>
Date: Sun, 10 May 2026 01:15:39 +0200
Subject: [PATCH] Implement Matrix space hierarchy and drag-and-drop
 functionality in chat sidebar

- Added collapsible category headers for subspaces in the channel column, allowing rooms to be grouped under `m.space.child` order with a "General" segment for direct space children.
- Introduced drag-and-drop reordering for category blocks and rooms, with persistence managed via `m.space.child` and `m.room.power_levels` checks.
- Integrated `vue-draggable-plus` for enhanced drag-and-drop capabilities in the space channel sidebar.
- Developed helpers and unit tests for space category mapping, state writes, and permission checks related to the new hierarchy features.
- Updated internationalization support in `useAppI18n` to include new messages for category expansion and collapse actions.
---
 CHANGELOG.md                                  |  14 +-
 app/components/Chat/RoomCategoryList.vue      | 292 +++++++++++++++--
 app/composables/matrix/spaceStateHelpers.ts   | 198 ++++++++++++
 app/composables/useAppI18n.ts                 |   8 +-
 app/composables/useMatrixClient.ts            |  28 ++
 app/pages/chat.vue                            | 190 +++++++++--
 app/utils/matrixSpaceHierarchyPermissions.ts  | 100 ++++++
 app/utils/spaceRoomCategories.ts              | 303 ++++++++++++++++++
 package-lock.json                             |  24 ++
 package.json                                  |   1 +
 .../composables/spaceStateHelpers.spec.ts     |  52 +++
 .../matrixSpaceHierarchyPermissions.spec.ts   |  62 ++++
 tests/unit/utils/spaceRoomCategories.spec.ts  | 207 ++++++++++++
 13 files changed, 1422 insertions(+), 57 deletions(-)
 create mode 100644 app/composables/matrix/spaceStateHelpers.ts
 create mode 100644 app/utils/matrixSpaceHierarchyPermissions.ts
 create mode 100644 app/utils/spaceRoomCategories.ts
 create mode 100644 tests/unit/composables/spaceStateHelpers.spec.ts
 create mode 100644 tests/unit/utils/matrixSpaceHierarchyPermissions.spec.ts
 create mode 100644 tests/unit/utils/spaceRoomCategories.spec.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c1b0e1..c8c51ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Matrix space hierarchy in the channel column: subspaces as collapsible
+  category headers (chevron toggle), rooms grouped under `m.space.child`
+  order, and a root-level "General" segment for direct space children (#5)
+- Drag-and-drop reordering of category blocks and rooms (within and across
+  categories) with persistence via `m.space.child` / `order`, gated by
+  `m.room.power_levels` for `m.space.child` (no DnD when not allowed)
+- `vue-draggable-plus` dependency for the space channel sidebar
+- Helpers and unit tests for space category mapping, space state writes, and
+  hierarchy permission checks (`matrixSpaceHierarchyPermissions`)
 - reCAPTCHA UIA stage (`m.login.recaptcha`) in signup with consent-gated
   script load and optional iubenda hooks (#57)
 - Optional Synapse-backed E2E for registration captcha (`@recaptcha_signup`);
@@ -104,10 +113,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Space rail (first column) lists only root spaces; nested subspaces appear
+  only as categories in the second channel column
+- Room grouping under a selected space no longer uses `/` prefixes in room
+  names; ordering follows Matrix space state
 - Direct message resolution now consults `m.direct` account data before
   falling back to two-member heuristics for existing rooms
 - Global auth middleware now also protects the `/rooms` route prefix
-
 - Chat timeline now opens with a bounded initial message window to reduce
   startup scroll depth and perceived room-load latency
 - Login page now shows a post-signup success banner (#52)
diff --git a/app/components/Chat/RoomCategoryList.vue b/app/components/Chat/RoomCategoryList.vue
index 292b84b..d3c230b 100644
--- a/app/components/Chat/RoomCategoryList.vue
+++ b/app/components/Chat/RoomCategoryList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { VueDraggable } from 'vue-draggable-plus'
 import { useAppI18n } from '~/composables/useAppI18n'
 
 interface RoomItem {
@@ -9,25 +10,221 @@ interface RoomItem {
 interface RoomSectionItem {
   id: string
   name: string
+  kind?: 'root' | 'subspace'
+  subspaceRoomId?: string
+  rootChildAnchorIds?: string[]
+  canReorderRooms: boolean
   rooms: RoomItem[]
 }
 
-defineProps<{
+const props = defineProps<{
   selectedSpaceName: string
   categories: RoomSectionItem[]
   selectedRoomId: string | null
+  /** Reorder category blocks (m.space.child on root) — power-level gated */
+  canReorderCategories: boolean
+  /** When null (e.g. Home), hierarchy DnD is off */
+  selectedRootSpaceId: string | null
 }>()
 
 const emit = defineEmits<{
   selectRoom: [roomId: string]
   openSpaceSettings: []
+  persistRoomOrder: [
+    payload: { parentSpaceId: string; orderedRoomIds: string[] },
+  ]
+  moveRoomBetweenCategories: [
+    payload: {
+      roomId: string
+      previousParentSpaceId: string
+      nextParentSpaceId: string
+      insertIndex: number
+    },
+  ]
+  reorderRootCategories: [orderedRootChildIds: string[]]
 }>()
 
 const { translateText } = useAppI18n()
 
+const localCategories = ref<RoomSectionItem[]>([])
+/** Collapsed category ids (default: all expanded) */
+const collapsedCategoryIds = ref<Set<string>>(new Set())
+
+const categoryDragEnabled = computed(
+  () => Boolean(props.selectedRootSpaceId) && props.canReorderCategories,
+)
+
+watch(
+  () => props.categories,
+  (nextCategories) => {
+    localCategories.value = nextCategories.map((category) => ({
+      ...category,
+      rooms: [...category.rooms],
+      rootChildAnchorIds: category.rootChildAnchorIds
+        ? [...category.rootChildAnchorIds]
+        : [],
+    }))
+  },
+  { deep: true, immediate: true },
+)
+
+function isCategoryCollapsed(categoryId: string): boolean {
+  return collapsedCategoryIds.value.has(categoryId)
+}
+
+function toggleCategoryCollapsed(categoryId: string) {
+  const next = new Set(collapsedCategoryIds.value)
+  if (next.has(categoryId)) {
+    next.delete(categoryId)
+  } else {
+    next.add(categoryId)
+  }
+  collapsedCategoryIds.value = next
+}
+
+function parentSpaceIdFor(category: RoomSectionItem): string {
+  if (category.kind === 'subspace' && category.subspaceRoomId) {
+    return category.subspaceRoomId
+  }
+  return props.selectedRootSpaceId ?? ''
+}
+
+function roomListDragEnabled(category: RoomSectionItem): boolean {
+  return Boolean(props.selectedRootSpaceId) && category.canReorderRooms
+}
+
 function selectRoom(roomId: string) {
   emit('selectRoom', roomId)
 }
+
+/**
+ * Identify which category a Sortable list element belongs to (VueDraggable
+ * root does not receive our data-attrs). Empty lists use a sentinel node.
+ */
+function categoryIdFromRoomListEl(
+  listElement: HTMLElement | null | undefined,
+): string {
+  if (!listElement) {
+    return ''
+  }
+  const emptyMarker = listElement.querySelector('[data-category-empty]')
+  const emptyId = emptyMarker?.getAttribute('data-category-empty')
+  if (emptyId) {
+    return emptyId
+  }
+  const firstRoomButton = listElement.querySelector(
+    '[data-room-id]',
+  ) as HTMLElement | null
+  const roomId = firstRoomButton?.dataset?.roomId
+  if (!roomId) {
+    return ''
+  }
+  const category = localCategories.value.find((entry) =>
+    entry.rooms.some((room) => room.roomId === roomId),
+  )
+  return category?.id ?? ''
+}
+
+/**
+ * Block cross-list moves unless both parents allow m.space.child.
+ */
+function onRoomSortableMove(event: {
+  from?: HTMLElement
+  to?: HTMLElement
+}): boolean {
+  if (!props.selectedRootSpaceId) {
+    return false
+  }
+  const fromId = categoryIdFromRoomListEl(event.from ?? null)
+  const toId = categoryIdFromRoomListEl(event.to ?? null)
+  const fromCategory = localCategories.value.find(
+    (entry) => entry.id === fromId,
+  )
+  const toCategory = localCategories.value.find((entry) => entry.id === toId)
+  if (!fromCategory || !toCategory) {
+    return false
+  }
+  if (!fromCategory.canReorderRooms || !toCategory.canReorderRooms) {
+    return false
+  }
+  return true
+}
+
+function onCategoryDragEnd() {
+  if (!categoryDragEnabled.value || !props.selectedRootSpaceId) {
+    return
+  }
+  const previousIds = props.categories.map((category) => category.id).join(',')
+  const nextIds = localCategories.value.map((category) => category.id).join(',')
+  if (previousIds === nextIds) {
+    return
+  }
+  const orderedRootChildIds = localCategories.value.flatMap(
+    (category) => category.rootChildAnchorIds ?? [],
+  )
+  emit('reorderRootCategories', orderedRootChildIds)
+}
+
+function onRoomDragEnd(_category: RoomSectionItem, rawEvent: unknown) {
+  if (!props.selectedRootSpaceId) {
+    return
+  }
+  const event = rawEvent as {
+    from: HTMLElement
+    to: HTMLElement
+    oldIndex: number
+    newIndex: number
+    item?: HTMLElement
+  }
+  if (event.oldIndex === event.newIndex && event.from === event.to) {
+    return
+  }
+
+  const fromCategoryId = categoryIdFromRoomListEl(event.from)
+  const toCategoryId = categoryIdFromRoomListEl(event.to)
+
+  const fromCategory = localCategories.value.find(
+    (entry) => entry.id === fromCategoryId,
+  )
+  const toCategory = localCategories.value.find(
+    (entry) => entry.id === toCategoryId,
+  )
+
+  if (!fromCategory || !toCategory) {
+    return
+  }
+  if (!fromCategory.canReorderRooms || !toCategory.canReorderRooms) {
+    return
+  }
+
+  const roomIdFromDom = event.item?.dataset?.roomId
+  const roomId =
+    typeof roomIdFromDom === 'string' && roomIdFromDom.length > 0
+      ? roomIdFromDom
+      : toCategory.rooms[event.newIndex]?.roomId
+
+  if (!roomId) {
+    return
+  }
+
+  const previousParentSpaceId = parentSpaceIdFor(fromCategory)
+  const nextParentSpaceId = parentSpaceIdFor(toCategory)
+
+  if (previousParentSpaceId === nextParentSpaceId) {
+    emit('persistRoomOrder', {
+      parentSpaceId: previousParentSpaceId,
+      orderedRoomIds: toCategory.rooms.map((room) => room.roomId),
+    })
+    return
+  }
+
+  emit('moveRoomBetweenCategories', {
+    roomId,
+    previousParentSpaceId,
+    nextParentSpaceId,
+    insertIndex: event.newIndex,
+  })
+}
 </script>
 
 <template>
@@ -61,39 +258,96 @@ function selectRoom(roomId: string) {
     </header>
 
     <div class="flex-1 overflow-y-auto px-2 py-3">
-      <template v-if="categories.length === 0">
+      <template v-if="localCategories.length === 0">
         <p class="px-2 py-3 text-sm text-gray-500 dark:text-gray-400">
           {{ translateText('layout.noRoomsInSpace') }}
         </p>
       </template>
-      <template v-else>
+      <VueDraggable
+        v-else
+        v-model="localCategories"
+        :handle="categoryDragEnabled ? '.decentra-category-title' : undefined"
+        :disabled="!categoryDragEnabled"
+        :animation="150"
+        class="space-y-4"
+        @end="onCategoryDragEnd"
+      >
         <div
-          v-for="category in categories"
+          v-for="category in localCategories"
           :key="category.id"
           class="mb-4"
         >
-          <p
-            class="px-2 pb-1 text-xs font-semibold uppercase tracking-wide
-                   text-gray-500 dark:text-gray-400"
+          <div
+            class="flex items-center gap-1 px-2 pb-1 select-none"
           >
-            {{ category.name }}
-          </p>
-          <div class="space-y-1">
             <button
-              v-for="room in category.rooms"
-              :key="room.roomId"
               type="button"
-              class="w-full rounded-lg px-2 py-2 text-left text-sm transition"
-              :class="selectedRoomId === room.roomId
-                ? 'bg-primary-500/15 text-primary-500'
-                : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800'"
-              @click="selectRoom(room.roomId)"
+              class="shrink-0 rounded p-0.5 text-gray-500 transition
+                     hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800"
+              :aria-expanded="!isCategoryCollapsed(category.id)"
+              :aria-label="isCategoryCollapsed(category.id)
+                ? translateText('layout.expandCategory')
+                : translateText('layout.collapseCategory')"
+              @click.stop="toggleCategoryCollapsed(category.id)"
             >
-              <span class="truncate"># {{ room.name }}</span>
+              <span
+                class="block w-4 text-center text-xs font-semibold leading-none
+                       transition-transform duration-150"
+                :class="isCategoryCollapsed(category.id) ? '' : 'rotate-90'"
+              >></span>
             </button>
+            <p
+              class="decentra-category-title min-w-0 flex-1 text-xs font-semibold
+                     uppercase tracking-wide text-gray-500 dark:text-gray-400"
+              :class="categoryDragEnabled
+                ? 'cursor-grab touch-none active:cursor-grabbing'
+                : ''"
+            >
+              {{ category.name }}
+            </p>
+          </div>
+          <div
+            v-show="!isCategoryCollapsed(category.id)"
+            class="space-y-1"
+          >
+            <VueDraggable
+              v-model="category.rooms"
+              group="decentra-space-channels"
+              :disabled="!roomListDragEnabled(category)"
+              :animation="150"
+              class="space-y-1"
+              @move="onRoomSortableMove"
+              @end="(event: unknown) => onRoomDragEnd(category, event as {
+                from: HTMLElement
+                to: HTMLElement
+                oldIndex: number
+                newIndex: number
+                item?: HTMLElement
+              })"
+            >
+              <button
+                v-for="room in category.rooms"
+                :key="room.roomId"
+                type="button"
+                class="w-full rounded-lg px-2 py-2 text-left text-sm transition"
+                :class="selectedRoomId === room.roomId
+                  ? 'bg-primary-500/15 text-primary-500'
+                  : 'text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800'"
+                :data-room-id="room.roomId"
+                @click="selectRoom(room.roomId)"
+              >
+                <span class="truncate"># {{ room.name }}</span>
+              </button>
+              <div
+                v-if="category.rooms.length === 0"
+                :data-category-empty="category.id"
+                class="pointer-events-none h-px w-full opacity-0"
+                aria-hidden="true"
+              />
+            </VueDraggable>
           </div>
         </div>
-      </template>
+      </VueDraggable>
     </div>
   </section>
 </template>
diff --git a/app/composables/matrix/spaceStateHelpers.ts b/app/composables/matrix/spaceStateHelpers.ts
new file mode 100644
index 0000000..92094bb
--- /dev/null
+++ b/app/composables/matrix/spaceStateHelpers.ts
@@ -0,0 +1,198 @@
+import type { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk'
+import {
+  assignLexOrdersForSiblingCount,
+  parseSpaceChildEvents,
+  sortParsedSpaceChildren,
+  SPACE_CHILD_EVENT,
+  SPACE_PARENT_EVENT,
+  viaServersFromRoomId,
+} from '~/utils/spaceRoomCategories'
+
+function normalizeStateEvents(raw: MatrixEvent | MatrixEvent[]): MatrixEvent[] {
+  if (!raw) {
+    return []
+  }
+  return Array.isArray(raw) ? raw : [raw]
+}
+
+export function findSpaceStateEvent(
+  room: Room,
+  eventType: string,
+  stateKey: string,
+): MatrixEvent | null {
+  const raw = room.currentState?.getStateEvents?.(eventType)
+  for (const matrixEvent of normalizeStateEvents(raw)) {
+    if (matrixEvent?.getStateKey?.() === stateKey) {
+      return matrixEvent
+    }
+  }
+  return null
+}
+
+export async function sendSpaceChildState(
+  matrixClient: MatrixClient,
+  options: {
+    parentSpaceId: string
+    childRoomId: string
+    via: string[]
+    order?: string
+  },
+): Promise<void> {
+  const content: Record<string, unknown> = { via: options.via }
+  if (options.order !== undefined) {
+    content.order = options.order
+  }
+  await matrixClient.sendStateEvent(
+    options.parentSpaceId,
+    SPACE_CHILD_EVENT,
+    content,
+    options.childRoomId,
+  )
+}
+
+export async function sendSpaceParentState(
+  matrixClient: MatrixClient,
+  options: {
+    childRoomId: string
+    parentSpaceId: string
+    via: string[]
+  },
+): Promise<void> {
+  await matrixClient.sendStateEvent(
+    options.childRoomId,
+    SPACE_PARENT_EVENT,
+    { via: options.via },
+    options.parentSpaceId,
+  )
+}
+
+export async function redactSpaceStateIfPresent(
+  matrixClient: MatrixClient,
+  roomId: string,
+  eventType: string,
+  stateKey: string,
+): Promise<void> {
+  const room = matrixClient.getRoom(roomId)
+  if (!room) {
+    return
+  }
+  const matrixEvent = findSpaceStateEvent(room, eventType, stateKey)
+  const eventId = matrixEvent?.getId?.()
+  if (!eventId) {
+    return
+  }
+  await matrixClient.redactEvent(roomId, eventId)
+}
+
+export function readViaFromSpaceChild(room: Room, childRoomId: string): string[] {
+  const matrixEvent = findSpaceStateEvent(room, SPACE_CHILD_EVENT, childRoomId)
+  const content = matrixEvent?.getContent?.() as
+    | { via?: unknown }
+    | undefined
+  const via = content?.via
+  return Array.isArray(via)
+    ? via.filter((entry): entry is string => typeof entry === 'string')
+    : []
+}
+
+/**
+ * Re-index order fields for all children on a parent space room.
+ */
+export async function persistSpaceChildOrder(
+  matrixClient: MatrixClient,
+  parentSpaceId: string,
+  orderedChildRoomIds: string[],
+): Promise<void> {
+  const parentRoom = matrixClient.getRoom(parentSpaceId)
+  if (!parentRoom) {
+    throw new Error('Parent space room not available')
+  }
+  const orders = assignLexOrdersForSiblingCount(orderedChildRoomIds.length)
+  for (let index = 0; index < orderedChildRoomIds.length; index++) {
+    const childRoomId = orderedChildRoomIds[index]
+    if (!childRoomId) {
+      continue
+    }
+    const previousVia =
+      readViaFromSpaceChild(parentRoom, childRoomId) ||
+      viaServersFromRoomId(childRoomId)
+    const orderValue = orders[index]
+    if (!orderValue) {
+      continue
+    }
+    await sendSpaceChildState(matrixClient, {
+      parentSpaceId,
+      childRoomId,
+      via: previousVia.length > 0 ? previousVia : viaServersFromRoomId(childRoomId),
+      order: orderValue,
+    })
+  }
+}
+
+export async function moveRoomBetweenParents(options: {
+  matrixClient: MatrixClient
+  roomId: string
+  previousParentSpaceId: string | null
+  nextParentSpaceId: string
+  /** Insert position among siblings on next parent (default append) */
+  insertIndex?: number
+}): Promise<void> {
+  const {
+    matrixClient,
+    roomId,
+    previousParentSpaceId,
+    nextParentSpaceId,
+    insertIndex,
+  } = options
+
+  if (
+    previousParentSpaceId &&
+    previousParentSpaceId === nextParentSpaceId
+  ) {
+    return
+  }
+
+  const viaRoom = viaServersFromRoomId(roomId)
+  const viaNextParent = viaServersFromRoomId(nextParentSpaceId)
+
+  if (previousParentSpaceId) {
+    await redactSpaceStateIfPresent(
+      matrixClient,
+      previousParentSpaceId,
+      SPACE_CHILD_EVENT,
+      roomId,
+    )
+    await redactSpaceStateIfPresent(
+      matrixClient,
+      roomId,
+      SPACE_PARENT_EVENT,
+      previousParentSpaceId,
+    )
+  }
+
+  const nextParentRoom = matrixClient.getRoom(nextParentSpaceId)
+  if (!nextParentRoom) {
+    throw new Error('Target space room not available')
+  }
+
+  const existingChildren = sortParsedSpaceChildren(
+    parseSpaceChildEvents(nextParentRoom as never),
+    (childId) => childId,
+  ).map((parsed) => parsed.childRoomId)
+
+  const filtered = existingChildren.filter((childId) => childId !== roomId)
+  const position =
+    insertIndex === undefined || insertIndex < 0 || insertIndex > filtered.length
+      ? filtered.length
+      : insertIndex
+  const nextOrder = [...filtered]
+  nextOrder.splice(position, 0, roomId)
+
+  await persistSpaceChildOrder(matrixClient, nextParentSpaceId, nextOrder)
+
+  await sendSpaceParentState(matrixClient, {
+    childRoomId: roomId,
+    parentSpaceId: nextParentSpaceId,
+    via: viaNextParent.length > 0 ? viaNextParent : viaRoom,
+  })
+}
diff --git a/app/composables/useAppI18n.ts b/app/composables/useAppI18n.ts
index 7682be9..3d03cdb 100644
--- a/app/composables/useAppI18n.ts
+++ b/app/composables/useAppI18n.ts
@@ -143,6 +143,8 @@ const messages: Record<AppLocale, Record<string, string>> = {
     'layout.collapseSpaces': 'Collapse spaces',
     'layout.openAccountSettings': 'Account settings',
     'layout.openSpaceSettings': 'Space settings',
+    'layout.expandCategory': 'Expand category',
+    'layout.collapseCategory': 'Collapse category',
     'layout.createSpace': 'Create space',
     'layout.online': 'Online',
     'layout.away': 'Away',
@@ -205,7 +207,7 @@ const messages: Record<AppLocale, Record<string, string>> = {
     'settings.verificationRecoverySubmit': 'Restore encryption',
     'settings.verificationRecoverySuccess':
       'Encryption secrets were restored and this session is now verified. ' +
-      'Other clients (Element, Thunderbird, ...) may need a few minutes ' +
+      'Other Matrix clients may need a few minutes ' +
       'to refresh their device list before they show this session as verified.',
     'settings.verificationRecoveryErrorInvalidInput': 'Enter your recovery key.',
     'settings.verificationRecoveryErrorInvalidKey':
@@ -445,6 +447,8 @@ const messages: Record<AppLocale, Record<string, string>> = {
     'layout.collapseSpaces': 'Spaces einklappen',
     'layout.openAccountSettings': 'Account-Einstellungen',
     'layout.openSpaceSettings': 'Space-Einstellungen',
+    'layout.expandCategory': 'Kategorie aufklappen',
+    'layout.collapseCategory': 'Kategorie zuklappen',
     'layout.createSpace': 'Space erstellen',
     'layout.online': 'Online',
     'layout.away': 'Abwesend',
@@ -508,7 +512,7 @@ const messages: Record<AppLocale, Record<string, string>> = {
     'settings.verificationRecoverySubmit': 'Verschluesselung wiederherstellen',
     'settings.verificationRecoverySuccess':
       'Schluessel wurden wiederhergestellt und diese Session ist jetzt ' +
-      'verifiziert. Andere Clients (Element, Thunderbird, ...) benoetigen ' +
+      'verifiziert. Andere Matrix-Clients benoetigen ' +
       'eventuell ein paar Minuten, bis sie diese Session als verifiziert ' +
       'anzeigen.',
     'settings.verificationRecoveryErrorInvalidInput':
diff --git a/app/composables/useMatrixClient.ts b/app/composables/useMatrixClient.ts
index 6cda55e..ea6c25d 100644
--- a/app/composables/useMatrixClient.ts
+++ b/app/composables/useMatrixClient.ts
@@ -112,6 +112,10 @@ import {
   resolveTrustedAppHttpsOrigin,
   type MatrixOidcIntent
 } from './matrix/matrixOidcNative'
+import {
+  moveRoomBetweenParents,
+  persistSpaceChildOrder
+} from './matrix/spaceStateHelpers'
 
 export {
   MATRIX_DELEGATED_OIDC_CALLBACK_RELATIVE_PATH,
@@ -1176,6 +1180,28 @@ export function useMatrixClient() {
     return matrixClient
   }
 
+  async function reorderSpaceChildren(
+    parentSpaceId: string,
+    orderedChildRoomIds: string[]
+  ): Promise<void> {
+    const matrixClient = requireClient()
+    await persistSpaceChildOrder(
+      matrixClient,
+      parentSpaceId,
+      orderedChildRoomIds
+    )
+  }
+
+  async function moveChannelBetweenSpaceParents(options: {
+    roomId: string
+    previousParentSpaceId: string | null
+    nextParentSpaceId: string
+    insertIndex?: number
+  }): Promise<void> {
+    const matrixClient = requireClient()
+    await moveRoomBetweenParents({ matrixClient, ...options })
+  }
+
   async function mergeDirectAccountData(
     matrixClient: MatrixClient,
     peerUserId: string,
@@ -1462,6 +1488,8 @@ export function useMatrixClient() {
     joinRoomByIdOrAlias,
     searchPublicRooms,
     searchUsersDirectory,
+    reorderSpaceChildren,
+    moveChannelBetweenSpaceParents,
     incomingVerificationFromOtherOwnDeviceBeacon:
       getIncomingVerificationFromOtherOwnDeviceReadonly(),
     consumeIncomingVerificationFromOtherOwnDeviceBeacon
diff --git a/app/pages/chat.vue b/app/pages/chat.vue
index 71ee977..37b94a3 100644
--- a/app/pages/chat.vue
+++ b/app/pages/chat.vue
@@ -15,6 +15,13 @@ import {
   mapTimelineEventsToMessages,
   resolveTimelineWindowSelection,
 } from "~/utils/chatTimeline";
+import {
+  buildSpaceRoomCategories,
+  getJoinedSpaceRoomIds,
+  isRootSpaceRoom,
+  isRoomUnderAncestorSpace,
+} from "~/utils/spaceRoomCategories";
+import { canUserSendSpaceChildState } from "~/utils/matrixSpaceHierarchyPermissions";
 
 type PresenceStatus = "online" | "away" | "busy" | "offline" | "unknown";
 
@@ -68,15 +75,14 @@ interface RoomItem {
   parentSpaceIds: string[];
 }
 
-interface RoomCategory {
-  id: string;
-  name: string;
-  rooms: Array<{ roomId: string; name: string }>;
-}
-
 interface RoomCategoryGroup {
   id: string;
   name: string;
+  kind: "root" | "subspace";
+  subspaceRoomId?: string;
+  rootChildAnchorIds: string[];
+  /** Power-level: may send m.space.child on the parent of these rooms */
+  canReorderRooms: boolean;
   rooms: Array<{ roomId: string; name: string }>;
 }
 
@@ -99,6 +105,8 @@ const {
   logout,
   loadOlderMessages,
   toggleReaction,
+  reorderSpaceChildren,
+  moveChannelBetweenSpaceParents,
 } = useMatrixClient();
 const { translateText } = useAppI18n();
 const {
@@ -154,13 +162,29 @@ function getParentSpaceIds(room: Record<string, any>): string[] {
     .filter((spaceId): spaceId is string => Boolean(spaceId));
 }
 
+function getMatrixRoomId(room: unknown): string {
+  return String((room as { roomId: string }).roomId);
+}
+
 function refreshRooms() {
   matrixRooms.value = getRooms();
 }
 
+const joinedSpaceIds = computed(() =>
+  getJoinedSpaceRoomIds(
+    matrixRooms.value.map((room) => ({
+      roomId: room.roomId,
+      getType: () => getRoomType(room),
+    })),
+  ),
+);
+
 const spaceItems = computed<SpaceItem[]>(() => {
   const spaces = matrixRooms.value
     .filter((room) => getRoomType(room) === "m.space")
+    .filter((room) =>
+      isRootSpaceRoom(room, joinedSpaceIds.value, getParentSpaceIds),
+    )
     .map((spaceRoom) => ({
       id: spaceRoom.roomId,
       name: spaceRoom.name || translateText("layout.spaceFallback"),
@@ -198,11 +222,20 @@ const visibleRooms = computed(() => {
     return [];
   }
   const activeSpaceId = selectedSpaceId.value;
+  const roomsById = new Map<string, unknown>(
+    matrixRooms.value.map((room) => [room.roomId, room]),
+  );
   return roomItems.value.filter((room) => {
     if (room.parentSpaceIds.length === 0) {
       return activeSpaceId === HOME_SPACE_ID;
     }
-    return activeSpaceId ? room.parentSpaceIds.includes(activeSpaceId) : false;
+    return isRoomUnderAncestorSpace({
+      roomParentIds: room.parentSpaceIds,
+      ancestorSpaceId: activeSpaceId,
+      roomsById,
+      getRoomType,
+      getParentSpaceIds,
+    });
   });
 });
 
@@ -222,6 +255,16 @@ const roomCategories = computed<RoomCategoryGroup[]>(() => {
   return buildSpaceSections();
 });
 
+const canReorderRootCategories = computed(() => {
+  const rootId = selectedSpaceId.value;
+  const matrixClient = client.value;
+  const matrixUserId = userId.value;
+  if (!rootId || rootId === HOME_SPACE_ID || !matrixClient) {
+    return false;
+  }
+  return canUserSendSpaceChildState(matrixClient, rootId, matrixUserId);
+});
+
 function buildHomeSections(): RoomCategoryGroup[] {
   const directRooms = visibleRooms.value.filter((room) => isDirectRoom(room));
   const unassignedRooms = visibleRooms.value.filter((room) => {
@@ -233,6 +276,9 @@ function buildHomeSections(): RoomCategoryGroup[] {
     categories.push({
       id: "personal-chats",
       name: translateText("layout.personalChats"),
+      kind: "root",
+      rootChildAnchorIds: [],
+      canReorderRooms: false,
       rooms: directRooms.map((room) => ({
         roomId: room.roomId,
         name: room.name,
@@ -243,6 +289,9 @@ function buildHomeSections(): RoomCategoryGroup[] {
     categories.push({
       id: "unassigned-rooms",
       name: translateText("layout.unassignedRooms"),
+      kind: "root",
+      rootChildAnchorIds: [],
+      canReorderRooms: false,
       rooms: unassignedRooms.map((room) => ({
         roomId: room.roomId,
         name: room.name,
@@ -254,35 +303,47 @@ function buildHomeSections(): RoomCategoryGroup[] {
 }
 
 function buildSpaceSections(): RoomCategoryGroup[] {
-  const roomsInSpace = visibleRooms.value.filter((room) => !isDirectRoom(room));
-  const categories = new Map<string, RoomCategory>();
-
-  for (const room of roomsInSpace) {
-    const segments = room.name.split("/");
-    const rawCategory = segments.length > 1 ? (segments[0] || "").trim() : "";
-    const categoryName = rawCategory || translateText("layout.generalCategory");
-    const roomName =
-      segments.length > 1 ? segments.slice(1).join("/").trim() : room.name;
-    const categoryId = categoryName.toLowerCase().replace(/\s+/g, "-");
-    if (!categories.has(categoryId)) {
-      categories.set(categoryId, {
-        id: categoryId,
-        name: categoryName,
-        rooms: [],
-      });
-    }
-
-    const category = categories.get(categoryId);
-    if (!category) {
-      continue;
-    }
-    category.rooms.push({
-      roomId: room.roomId,
-      name: roomName || room.name,
-    });
+  const selectedId = selectedSpaceId.value;
+  if (!selectedId || selectedId === HOME_SPACE_ID) {
+    return [];
   }
-
-  return Array.from(categories.values());
+  const built = buildSpaceRoomCategories({
+    rootSpaceId: selectedId,
+    matrixRooms: matrixRooms.value,
+    getRoomType,
+    getRoomId: getMatrixRoomId,
+    getRoomDisplayName: (room) =>
+      String(
+        (room as { name?: string }).name ||
+          translateText("layout.roomFallback"),
+      ),
+    generalCategoryLabel: translateText("layout.generalCategory"),
+  });
+  const matrixClient = client.value;
+  const matrixUserId = userId.value;
+  return built.map((category) => {
+    const parentForRooms =
+      category.kind === "subspace" && category.subspaceRoomId
+        ? category.subspaceRoomId
+        : selectedId;
+    const canReorderRooms =
+      matrixClient && parentForRooms
+        ? canUserSendSpaceChildState(
+            matrixClient,
+            parentForRooms,
+            matrixUserId,
+          )
+        : false;
+    return {
+      id: category.id,
+      name: category.name,
+      kind: category.kind,
+      subspaceRoomId: category.subspaceRoomId,
+      rootChildAnchorIds: category.rootChildAnchorIds,
+      canReorderRooms,
+      rooms: category.rooms,
+    };
+  });
 }
 
 const selectedRoom = computed(() => {
@@ -743,6 +804,58 @@ function selectRoom(roomId: string) {
   }
 }
 
+async function onPersistRoomOrder(payload: {
+  parentSpaceId: string;
+  orderedRoomIds: string[];
+}) {
+  try {
+    await reorderSpaceChildren(
+      payload.parentSpaceId,
+      payload.orderedRoomIds,
+    );
+    refreshRooms();
+  } catch (thrownError) {
+    console.error("reorderSpaceChildren failed", thrownError);
+  }
+}
+
+async function onMoveRoomBetweenCategories(payload: {
+  roomId: string;
+  previousParentSpaceId: string;
+  nextParentSpaceId: string;
+  insertIndex: number;
+}) {
+  try {
+    await moveChannelBetweenSpaceParents({
+      roomId: payload.roomId,
+      previousParentSpaceId: payload.previousParentSpaceId,
+      nextParentSpaceId: payload.nextParentSpaceId,
+      insertIndex: payload.insertIndex,
+    });
+    refreshRooms();
+  } catch (thrownError) {
+    console.error(
+      "moveChannelBetweenSpaceParents failed",
+      thrownError,
+    );
+  }
+}
+
+async function onReorderRootCategories(
+  orderedRootChildIds: string[],
+) {
+  const rootId = selectedSpaceId.value;
+  if (!rootId || rootId === HOME_SPACE_ID) {
+    return;
+  }
+  try {
+    await reorderSpaceChildren(rootId, orderedRootChildIds);
+    refreshRooms();
+  } catch (thrownError) {
+    console.error("reorder root categories failed", thrownError);
+  }
+}
+
 function openSpaceSettings() {
   if (!selectedSpaceId.value) {
     return;
@@ -942,8 +1055,15 @@ watch(
           :selected-space-name="selectedSpaceName"
           :categories="roomCategories"
           :selected-room-id="selectedRoomId"
+          :can-reorder-categories="canReorderRootCategories"
+          :selected-root-space-id="
+            selectedSpaceId === HOME_SPACE_ID ? null : selectedSpaceId
+          "
           @select-room="selectRoom"
           @open-space-settings="openSpaceSettings"
+          @persist-room-order="onPersistRoomOrder"
+          @move-room-between-categories="onMoveRoomBetweenCategories"
+          @reorder-root-categories="onReorderRootCategories"
         />
       </div>
     </aside>
diff --git a/app/utils/matrixSpaceHierarchyPermissions.ts b/app/utils/matrixSpaceHierarchyPermissions.ts
new file mode 100644
index 0000000..8201be6
--- /dev/null
+++ b/app/utils/matrixSpaceHierarchyPermissions.ts
@@ -0,0 +1,100 @@
+import type { MatrixClient } from 'matrix-js-sdk'
+
+const POWER_LEVELS_TYPE = "m.room.power_levels";
+const SPACE_CHILD_TYPE = "m.space.child";
+
+function normalizeStateEvents(raw: unknown): Array<{
+  getContent?: () => Record<string, unknown>;
+}> {
+  if (!raw) {
+    return [];
+  }
+  return Array.isArray(raw) ? raw : [raw];
+}
+
+function getPowerLevelsContent(
+  matrixClient: MatrixClient,
+  roomId: string,
+): Record<string, unknown> | null {
+  const room = matrixClient.getRoom(roomId);
+  const stateEvents = room?.currentState?.getStateEvents?.(POWER_LEVELS_TYPE);
+  const list = normalizeStateEvents(stateEvents);
+  const first = list[0];
+  const content = first?.getContent?.();
+  return content && typeof content === "object" ? content : null;
+}
+
+function readNumeric(
+  record: Record<string, unknown> | null,
+  key: string,
+): number | undefined {
+  if (!record) {
+    return undefined;
+  }
+  const value = record[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+}
+
+/**
+ * Power level required to send `m.space.child` state on this room (space).
+ * Uses events[m.space.child] if set, else state_default (Matrix spec).
+ */
+export function getRequiredPowerForSpaceChild(
+  powerLevelsContent: Record<string, unknown> | null,
+): number {
+  if (!powerLevelsContent) {
+    return 100;
+  }
+  const events = powerLevelsContent.events as
+    | Record<string, unknown>
+    | undefined;
+  const specific = events?.[SPACE_CHILD_TYPE];
+  if (typeof specific === "number" && Number.isFinite(specific)) {
+    return specific;
+  }
+  const stateDefault = readNumeric(powerLevelsContent, "state_default");
+  if (stateDefault !== undefined) {
+    return stateDefault;
+  }
+  return 50;
+}
+
+export function getUserPowerLevelInRoomFromState(
+  powerLevelsContent: Record<string, unknown> | null,
+  userId: string,
+): number {
+  if (!powerLevelsContent) {
+    return 0;
+  }
+  const users = powerLevelsContent.users as
+    | Record<string, unknown>
+    | undefined;
+  const mine = users?.[userId];
+  if (typeof mine === "number" && Number.isFinite(mine)) {
+    return mine;
+  }
+  const usersDefault = readNumeric(powerLevelsContent, "users_default");
+  return usersDefault ?? 0;
+}
+
+/**
+ * True if the user may send `m.space.child` on this space room (reorder/move
+ * children in the hierarchy). This is room state — changes apply for all
+ * members once the homeserver accepts the event.
+ */
+export function canUserSendSpaceChildState(
+  matrixClient: MatrixClient,
+  spaceRoomId: string,
+  userId: string | null | undefined,
+): boolean {
+  if (!userId) {
+    return false;
+  }
+  const content = getPowerLevelsContent(matrixClient, spaceRoomId);
+  if (!content) {
+    return false;
+  }
+  const myLevel = getUserPowerLevelInRoomFromState(content, userId);
+  const required = getRequiredPowerForSpaceChild(content);
+  return myLevel >= required;
+}
diff --git a/app/utils/spaceRoomCategories.ts b/app/utils/spaceRoomCategories.ts
new file mode 100644
index 0000000..f5765a9
--- /dev/null
+++ b/app/utils/spaceRoomCategories.ts
@@ -0,0 +1,303 @@
+/**
+ * Matrix Spaces (MSC1772): map m.space.child / m.space.parent into grouped
+ * channel lists under a root space.
+ */
+
+export const SPACE_CHILD_EVENT = "m.space.child";
+export const SPACE_PARENT_EVENT = "m.space.parent";
+
+const ROOM_TYPE_SPACE = "m.space";
+
+export interface ParsedSpaceChild {
+  childRoomId: string;
+  /** Lex sort key; empty string if missing */
+  orderKey: string;
+  rawOrder?: string;
+  via?: string[];
+}
+
+export type SpaceCategoryKind = "root" | "subspace";
+
+export interface SpaceRoomCategory {
+  id: string;
+  name: string;
+  kind: SpaceCategoryKind;
+  /** Present when kind === "subspace" */
+  subspaceRoomId?: string;
+  /**
+   * Child room IDs under the root space (m.space.child state keys) that this
+   * UI block represents — used to reorder category blocks on the root.
+   */
+  rootChildAnchorIds: string[];
+  rooms: Array<{ roomId: string; name: string }>;
+}
+
+export interface MatrixRoomLike {
+  roomId: string;
+  currentState?: {
+    getStateEvents?: (eventType: string) => unknown;
+  };
+}
+
+function normalizeStateEventList(raw: unknown): Array<{
+  getStateKey?: () => string;
+  getContent?: () => Record<string, unknown>;
+}> {
+  if (!raw) {
+    return [];
+  }
+  return Array.isArray(raw) ? raw : [raw];
+}
+
+/**
+ * Read m.space.child links from a parent space room (state_key = child room id).
+ */
+export function parseSpaceChildEvents(
+  parentRoom: MatrixRoomLike,
+): ParsedSpaceChild[] {
+  const stateEvents = parentRoom.currentState?.getStateEvents?.(
+    SPACE_CHILD_EVENT,
+  );
+  const list = normalizeStateEventList(stateEvents);
+  const result: ParsedSpaceChild[] = [];
+  for (const stateEvent of list) {
+    const childRoomId = stateEvent.getStateKey?.();
+    if (!childRoomId) {
+      continue;
+    }
+    const content = stateEvent.getContent?.() ?? {};
+    const rawOrder =
+      typeof content.order === "string" ? content.order : undefined;
+    const via = Array.isArray(content.via)
+      ? (content.via as string[]).filter((entry) => typeof entry === "string")
+      : undefined;
+    result.push({
+      childRoomId,
+      orderKey: rawOrder ?? "",
+      rawOrder,
+      via,
+    });
+  }
+  return result;
+}
+
+export function sortParsedSpaceChildren(
+  children: ParsedSpaceChild[],
+  tieBreakLabel: (childRoomId: string) => string,
+): ParsedSpaceChild[] {
+  return [...children].sort((childA, childB) => {
+    const orderCompare = childA.orderKey.localeCompare(childB.orderKey);
+    if (orderCompare !== 0) {
+      return orderCompare;
+    }
+    return tieBreakLabel(childA.childRoomId).localeCompare(
+      tieBreakLabel(childB.childRoomId),
+    );
+  });
+}
+
+export function getJoinedSpaceRoomIds(
+  rooms: Array<{ roomId: string; getType?: () => string }>,
+): Set<string> {
+  const ids = new Set<string>();
+  for (const room of rooms) {
+    if (room.getType?.() === ROOM_TYPE_SPACE) {
+      ids.add(room.roomId);
+    }
+  }
+  return ids;
+}
+
+/**
+ * Root space = no joined m.space parent (parent must be another joined space).
+ */
+export function isRootSpaceRoom(
+  spaceRoom: { roomId: string; getType?: () => string },
+  joinedSpaceIds: Set<string>,
+  getParentSpaceIds: (room: unknown) => string[],
+): boolean {
+  if (spaceRoom.getType?.() !== ROOM_TYPE_SPACE) {
+    return false;
+  }
+  const parents = getParentSpaceIds(spaceRoom);
+  return !parents.some((parentId) => joinedSpaceIds.has(parentId));
+}
+
+export function viaServersFromRoomId(roomId: string): string[] {
+  const domain = roomId.split(":")[1];
+  return domain ? [domain] : [];
+}
+
+/**
+ * Assign fresh lex orders for a full sibling list (persist after reorder).
+ */
+export function assignLexOrdersForSiblingCount(count: number): string[] {
+  if (count <= 0) {
+    return [];
+  }
+  const width = Math.max(4, String(count - 1).length);
+  return Array.from({ length: count }, (_, index) =>
+    String(index).padStart(width, "0"),
+  );
+}
+
+/**
+ * Whether a non-space room should appear when a root (or nested) space is
+ * selected: some parent in m.space.parent chain equals selectedSpaceId.
+ */
+export function isRoomAssociatedWithSpace(
+  parentSpaceIds: string[],
+  selectedSpaceId: string,
+): boolean {
+  return parentSpaceIds.includes(selectedSpaceId);
+}
+
+/**
+ * True if `ancestorSpaceId` appears in the parent chain of a room, walking
+ * through joined parent spaces (for nested subspaces under a root).
+ */
+export function isRoomUnderAncestorSpace(options: {
+  roomParentIds: string[];
+  ancestorSpaceId: string;
+  roomsById: Map<string, unknown>;
+  getRoomType: (room: unknown) => string | undefined;
+  getParentSpaceIds: (room: unknown) => string[];
+}): boolean {
+  const {
+    roomParentIds,
+    ancestorSpaceId,
+    roomsById,
+    getRoomType,
+    getParentSpaceIds,
+  } = options;
+  if (roomParentIds.includes(ancestorSpaceId)) {
+    return true;
+  }
+  const visited = new Set<string>();
+  const queue = [...roomParentIds];
+  while (queue.length > 0) {
+    const parentId = queue.shift();
+    if (!parentId || visited.has(parentId)) {
+      continue;
+    }
+    visited.add(parentId);
+    if (parentId === ancestorSpaceId) {
+      return true;
+    }
+    const parentRoom = roomsById.get(parentId);
+    if (!parentRoom) {
+      continue;
+    }
+    if (getRoomType(parentRoom) !== ROOM_TYPE_SPACE) {
+      continue;
+    }
+    for (const grandParentId of getParentSpaceIds(parentRoom)) {
+      queue.push(grandParentId);
+    }
+  }
+  return false;
+}
+
+/**
+ * Build category sections for the middle column from Matrix space state.
+ * Preserves m.space.child order on the root: consecutive non-space children
+ * share one "General" segment; each subspace block lists its non-space
+ * children (sorted by m.space.child order on that subspace).
+ */
+export function buildSpaceRoomCategories(options: {
+  rootSpaceId: string;
+  matrixRooms: unknown[];
+  getRoomType: (room: unknown) => string | undefined;
+  getRoomId: (room: unknown) => string;
+  getRoomDisplayName: (room: unknown) => string;
+  generalCategoryLabel: string;
+}): SpaceRoomCategory[] {
+  const {
+    rootSpaceId,
+    matrixRooms,
+    getRoomType,
+    getRoomId,
+    getRoomDisplayName,
+    generalCategoryLabel,
+  } = options;
+
+  const roomsById = new Map<string, unknown>();
+  for (const room of matrixRooms) {
+    roomsById.set(getRoomId(room), room);
+  }
+
+  const rootRoom = roomsById.get(rootSpaceId);
+  if (!rootRoom || getRoomType(rootRoom) !== ROOM_TYPE_SPACE) {
+    return [];
+  }
+
+  const parsedRootChildren = sortParsedSpaceChildren(
+    parseSpaceChildEvents(rootRoom as MatrixRoomLike),
+    (childId) => getRoomDisplayName(roomsById.get(childId) ?? { roomId: childId }),
+  );
+
+  const categories: SpaceRoomCategory[] = [];
+  let directSegmentIndex = 0;
+  let directBuffer: Array<{ roomId: string; name: string }> = [];
+
+  function flushDirectBuffer() {
+    if (directBuffer.length === 0) {
+      return;
+    }
+    categories.push({
+      id: `${rootSpaceId}-direct-${directSegmentIndex}`,
+      name: generalCategoryLabel,
+      kind: "root",
+      rootChildAnchorIds: directBuffer.map((entry) => entry.roomId),
+      rooms: directBuffer,
+    });
+    directSegmentIndex += 1;
+    directBuffer = [];
+  }
+
+  for (const parsed of parsedRootChildren) {
+    const childRoom = roomsById.get(parsed.childRoomId);
+    if (!childRoom) {
+      continue;
+    }
+    const childType = getRoomType(childRoom);
+    if (childType === ROOM_TYPE_SPACE) {
+      flushDirectBuffer();
+      const subParsed = sortParsedSpaceChildren(
+        parseSpaceChildEvents(childRoom as MatrixRoomLike),
+        (childId) =>
+          getRoomDisplayName(roomsById.get(childId) ?? { roomId: childId }),
+      );
+      const roomsInSubspace: Array<{ roomId: string; name: string }> = [];
+      for (const sub of subParsed) {
+        const memberRoom = roomsById.get(sub.childRoomId);
+        if (!memberRoom) {
+          continue;
+        }
+        if (getRoomType(memberRoom) === ROOM_TYPE_SPACE) {
+          continue;
+        }
+        roomsInSubspace.push({
+          roomId: sub.childRoomId,
+          name: getRoomDisplayName(memberRoom),
+        });
+      }
+      categories.push({
+        id: parsed.childRoomId,
+        name: getRoomDisplayName(childRoom),
+        kind: "subspace",
+        subspaceRoomId: parsed.childRoomId,
+        rootChildAnchorIds: [parsed.childRoomId],
+        rooms: roomsInSubspace,
+      });
+    } else {
+      directBuffer.push({
+        roomId: parsed.childRoomId,
+        name: getRoomDisplayName(childRoom),
+      });
+    }
+  }
+  flushDirectBuffer();
+
+  return categories;
+}
diff --git a/package-lock.json b/package-lock.json
index fc87dfd..647c0cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "matrix-js-sdk": "^37.5.0",
         "nuxt": "^4.3.1",
         "vue": "^3.5.28",
+        "vue-draggable-plus": "^0.6.1",
         "vue-router": "^4.6.4",
         "vue3-recaptcha-v2": "^2.1.0"
       },
@@ -6013,6 +6014,12 @@
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "license": "MIT"
     },
+    "node_modules/@types/sortablejs": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.15.9.tgz",
+      "integrity": "sha512-7HP+rZGE2p886PKV9c9OJzLBI6BBJu1O7lJGYnPyG3fS4/duUCcngkNCjsLwIMV+WMqANe3tt4irrXHSIe68OQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
@@ -17432,6 +17439,23 @@
       "integrity": "sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==",
       "license": "MIT"
     },
+    "node_modules/vue-draggable-plus": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/vue-draggable-plus/-/vue-draggable-plus-0.6.1.tgz",
+      "integrity": "sha512-FbtQ/fuoixiOfTZzG3yoPl4JAo9HJXRHmBQZFB9x2NYCh6pq0TomHf7g5MUmpaDYv+LU2n6BPq2YN9sBO+FbIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/sortablejs": "^1.15.8"
+      },
+      "peerDependencies": {
+        "@types/sortablejs": "^1.15.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.6.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
diff --git a/package.json b/package.json
index 7fc93db..8603131 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "matrix-js-sdk": "^37.5.0",
     "nuxt": "^4.3.1",
     "vue": "^3.5.28",
+    "vue-draggable-plus": "^0.6.1",
     "vue-router": "^4.6.4",
     "vue3-recaptcha-v2": "^2.1.0"
   },
diff --git a/tests/unit/composables/spaceStateHelpers.spec.ts b/tests/unit/composables/spaceStateHelpers.spec.ts
new file mode 100644
index 0000000..c2f27d0
--- /dev/null
+++ b/tests/unit/composables/spaceStateHelpers.spec.ts
@@ -0,0 +1,52 @@
+import { describe, it } from 'vitest'
+import {
+  persistSpaceChildOrder,
+  sendSpaceChildState,
+} from '~/composables/matrix/spaceStateHelpers'
+import { SPACE_CHILD_EVENT } from '~/utils/spaceRoomCategories'
+
+describe('spaceStateHelpers', () => {
+  it('persistSpaceChildOrder sends one state event per child', async () => {
+    const sendCalls: unknown[][] = []
+    const matrixClient = {
+      getRoom: () => ({
+        currentState: {
+          getStateEvents: () => [],
+        },
+      }),
+      sendStateEvent: async (...args: unknown[]) => {
+        sendCalls.push(args)
+      },
+    }
+    await persistSpaceChildOrder(
+      matrixClient as never,
+      '!parent:example.org',
+      ['!a:example.org', '!b:example.org'],
+    )
+    sendCalls.length.should.equal(2)
+    sendCalls[0]![0].should.equal('!parent:example.org')
+    sendCalls[0]![1].should.equal(SPACE_CHILD_EVENT)
+    sendCalls[0]![3].should.equal('!a:example.org')
+  })
+
+  it('sendSpaceChildState passes content and state key', async () => {
+    const calls: unknown[][] = []
+    const matrixClient = {
+      sendStateEvent: async (...args: unknown[]) => {
+        calls.push(args)
+      },
+    }
+    await sendSpaceChildState(matrixClient as never, {
+      parentSpaceId: '!p:example.org',
+      childRoomId: '!c:example.org',
+      via: ['example.org'],
+      order: '0001',
+    })
+    calls.length.should.equal(1)
+    calls[0]![2].should.deep.equal({
+      via: ['example.org'],
+      order: '0001',
+    })
+    calls[0]![3].should.equal('!c:example.org')
+  })
+})
diff --git a/tests/unit/utils/matrixSpaceHierarchyPermissions.spec.ts b/tests/unit/utils/matrixSpaceHierarchyPermissions.spec.ts
new file mode 100644
index 0000000..47b1085
--- /dev/null
+++ b/tests/unit/utils/matrixSpaceHierarchyPermissions.spec.ts
@@ -0,0 +1,62 @@
+import { describe, it } from 'vitest'
+import {
+  canUserSendSpaceChildState,
+  getRequiredPowerForSpaceChild,
+  getUserPowerLevelInRoomFromState,
+} from '~/utils/matrixSpaceHierarchyPermissions'
+
+describe('matrixSpaceHierarchyPermissions', () => {
+  it('uses events m.space.child override when present', () => {
+    const need = getRequiredPowerForSpaceChild({
+      events: { 'm.space.child': 100 },
+      state_default: 50,
+    })
+    need.should.equal(100)
+  })
+
+  it('falls back to state_default', () => {
+    const need = getRequiredPowerForSpaceChild({
+      state_default: 50,
+    })
+    need.should.equal(50)
+  })
+
+  it('reads user level from users map', () => {
+    const pl = getUserPowerLevelInRoomFromState(
+      {
+        users: { '@a:example.org': 100 },
+        users_default: 0,
+      },
+      '@a:example.org',
+    )
+    pl.should.equal(100)
+  })
+
+  it('canUserSendSpaceChildState compares levels', () => {
+    const matrixClient = {
+      getRoom: () => ({
+        currentState: {
+          getStateEvents: () => ({
+            getContent: () => ({
+              users: { '@me:example.org': 100 },
+              users_default: 0,
+              state_default: 50,
+              events: { 'm.space.child': 100 },
+            }),
+          }),
+        },
+      }),
+    }
+    canUserSendSpaceChildState(
+      matrixClient as never,
+      '!s:example.org',
+      '@me:example.org',
+    ).should.equal(true)
+
+    canUserSendSpaceChildState(
+      matrixClient as never,
+      '!s:example.org',
+      '@other:example.org',
+    ).should.equal(false)
+  })
+})
diff --git a/tests/unit/utils/spaceRoomCategories.spec.ts b/tests/unit/utils/spaceRoomCategories.spec.ts
new file mode 100644
index 0000000..e9c22ae
--- /dev/null
+++ b/tests/unit/utils/spaceRoomCategories.spec.ts
@@ -0,0 +1,207 @@
+import { describe, it } from 'vitest'
+import {
+  assignLexOrdersForSiblingCount,
+  buildSpaceRoomCategories,
+  getJoinedSpaceRoomIds,
+  isRootSpaceRoom,
+  isRoomUnderAncestorSpace,
+  parseSpaceChildEvents,
+  sortParsedSpaceChildren,
+  viaServersFromRoomId,
+} from '~/utils/spaceRoomCategories'
+
+function mockStateEvent(
+  stateKey: string,
+  content: Record<string, unknown>,
+): {
+  getStateKey: () => string
+  getContent: () => Record<string, unknown>
+} {
+  return {
+    getStateKey: () => stateKey,
+    getContent: () => content,
+  }
+}
+
+describe('spaceRoomCategories', () => {
+  it('parses m.space.child state keys and order', () => {
+    const parentRoom = {
+      roomId: '!root:example.org',
+      currentState: {
+        getStateEvents: () => [
+          mockStateEvent('!b:example.org', {
+            order: 'b',
+            via: ['example.org'],
+          }),
+          mockStateEvent('!a:example.org', {
+            order: 'a',
+            via: ['example.org'],
+          }),
+        ],
+      },
+    }
+    const parsed = parseSpaceChildEvents(parentRoom)
+    parsed.length.should.equal(2)
+    parsed[0]!.childRoomId.should.equal('!b:example.org')
+    parsed[1]!.childRoomId.should.equal('!a:example.org')
+  })
+
+  it('sorts children lexicographically by order then name', () => {
+    const sorted = sortParsedSpaceChildren(
+      [
+        { childRoomId: '!z:example.org', orderKey: '' },
+        { childRoomId: '!a:example.org', orderKey: '2' },
+        { childRoomId: '!b:example.org', orderKey: '10' },
+      ],
+      () => 'Room',
+    )
+    sorted.map((entry) => entry.childRoomId).should.deep.equal([
+      '!z:example.org',
+      '!b:example.org',
+      '!a:example.org',
+    ])
+  })
+
+  it('detects root spaces vs joined subspaces', () => {
+    const joined = new Set(['!parent:example.org', '!child:example.org'])
+    const rootSpace = {
+      roomId: '!parent:example.org',
+      getType: () => 'm.space' as const,
+    }
+    const subSpace = {
+      roomId: '!child:example.org',
+      getType: () => 'm.space' as const,
+    }
+    const getParents = (room: unknown) =>
+      room === subSpace ? ['!parent:example.org'] : []
+
+    isRootSpaceRoom(rootSpace, joined, getParents).should.equal(true)
+    isRootSpaceRoom(subSpace, joined, getParents).should.equal(false)
+  })
+
+  it('builds categories from root children (general + subspace)', () => {
+    const rootId = '!root:example.org'
+    const subId = '!sub:example.org'
+    const roomGeneralId = '!gen:example.org'
+    const roomUnderSubId = '!under:example.org'
+
+    const matrixRooms = [
+      {
+        roomId: rootId,
+        name: 'Root',
+        getType: () => 'm.space',
+        currentState: {
+          getStateEvents: (eventType: string) => {
+            if (eventType !== 'm.space.child') {
+              return []
+            }
+            return [
+              mockStateEvent(roomGeneralId, {
+                order: '1',
+                via: ['example.org'],
+              }),
+              mockStateEvent(subId, { order: '2', via: ['example.org'] }),
+            ]
+          },
+        },
+      },
+      {
+        roomId: subId,
+        name: 'Subspace',
+        getType: () => 'm.space',
+        currentState: {
+          getStateEvents: (eventType: string) => {
+            if (eventType !== 'm.space.child') {
+              return []
+            }
+            return [
+              mockStateEvent(roomUnderSubId, {
+                order: '1',
+                via: ['example.org'],
+              }),
+            ]
+          },
+        },
+      },
+      {
+        roomId: roomGeneralId,
+        name: 'Lobby',
+        getType: () => undefined,
+      },
+      {
+        roomId: roomUnderSubId,
+        name: 'Inside',
+        getType: () => undefined,
+      },
+    ]
+
+    const categories = buildSpaceRoomCategories({
+      rootSpaceId: rootId,
+      matrixRooms,
+      getRoomType: (room: unknown) =>
+        (room as { getType?: () => string }).getType?.(),
+      getRoomId: (room: unknown) => (room as { roomId: string }).roomId,
+      getRoomDisplayName: (room: unknown) =>
+        String((room as { name?: string }).name ?? ''),
+      generalCategoryLabel: 'General',
+    })
+
+    categories.length.should.equal(2)
+    categories[0]!.kind.should.equal('root')
+    categories[0]!.rootChildAnchorIds.should.deep.equal([roomGeneralId])
+    categories[0]!.rooms.map((room) => room.roomId).should.deep.equal([
+      roomGeneralId,
+    ])
+    categories[1]!.kind.should.equal('subspace')
+    categories[1]!.subspaceRoomId.should.equal(subId)
+    categories[1]!.rootChildAnchorIds.should.deep.equal([subId])
+    categories[1]!.rooms.map((room) => room.roomId).should.deep.equal([
+      roomUnderSubId,
+    ])
+  })
+
+  it('detects nested parent association with ancestor space', () => {
+    const rootId = '!root:example.org'
+    const subId = '!sub:example.org'
+    const roomsById = new Map<string, unknown>([
+      [
+        subId,
+        {
+          getType: () => 'm.space',
+          roomId: subId,
+        },
+      ],
+    ])
+    const ok = isRoomUnderAncestorSpace({
+      roomParentIds: [subId],
+      ancestorSpaceId: rootId,
+      roomsById,
+      getRoomType: (room: unknown) =>
+        (room as { getType?: () => string }).getType?.(),
+      getParentSpaceIds: (room: unknown) =>
+        room === roomsById.get(subId) ? [rootId] : [],
+    })
+    ok.should.equal(true)
+  })
+
+  it('assigns lex orders for sibling lists', () => {
+    assignLexOrdersForSiblingCount(3).should.deep.equal([
+      '0000',
+      '0001',
+      '0002',
+    ])
+  })
+
+  it('extracts via server from room id', () => {
+    viaServersFromRoomId('!abc:matrix.org').should.deep.equal(['matrix.org'])
+  })
+
+  it('collects joined space ids', () => {
+    const ids = getJoinedSpaceRoomIds([
+      { roomId: '!s:example.org', getType: () => 'm.space' },
+      { roomId: '!r:example.org', getType: () => undefined },
+    ])
+    ids.has('!s:example.org').should.equal(true)
+    ids.has('!r:example.org').should.equal(false)
+  })
+})