v3: src/ gets one layout rule and keeps to it — each layer holds one kind of module, and every layer is split into the same domains — the previous pass sorted components into folders but left hooks, helpers and a barrel inside them, kept hooks/, utils/ and contexts/ flat, and still grouped most tests by theme. The rule: components/ holds only components (.tsx), contexts/ holds FooContext.ts + FooProvider.tsx pairs, hooks/ every hook, utils/ every non-React module, pages/ one component per route and nothing else. Each of components/, contexts/, hooks/ and utils/ is split into the same domains — auth, category, chat, comment, dump, editor, feed, form, layout, player, playlist, profile, social, theme, ws — plus shared/ for what belongs to no one domain, so the chat is components/chat, contexts/chat, hooks/chat and utils/chat. components/ui becomes components/shared to match. Out of components/: useApiForm goes to hooks/form, chat's message.ts and time.ts to utils/chat (with chatDraft and chatText, now draft.ts and text.ts), the emoji skin tone to utils/editor, the remembered volume to utils/player; player/icons.tsx is PlayerIcons.tsx. components/form/index.ts is gone: everything is imported from its own file, FormProvider straight from react-hook-form, and expectOk sits beside friendlyFetchError in utils/shared/api.ts (apiError.ts), since pages that have no form used it too. Out of pages/: the index's feed views, tab bar and presence row move to components/feed; HotFeed and NewFeed, identical but for the sort, are one DumpFeed with an order prop, which also takes over MainFeedProps from pages/index/types.ts. App is a named export like everything else. Tests mirror the tree one file per module — test/<layer>/<domain>/<Module>.test.tsx — so the themed files (hooks/misc, data, editor, sync; utils/misc, text, storage, remote, journal; contexts/providers; pages/auth and UserSubpages; layout/Fabs) are split by subject, the setup each piece needs kept and the rest dropped; the floating-button test becomes one test per button, 627 tests now. The README states the rule. No behaviour changes; the catalogues only move their source references.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

README.md

@@ -124,29 +124,23 @@ api/
   uploads/         # User-uploaded files — avatars, dumps, thumbnails, … (not committed)
 src/               # React frontend (Vite)
   config/          # API base URL, validation constants, feed tabs, upload limits
-  pages/           # Route-level components
-    index/         # Feed views (hot, new, followed, journal), feed tab bar, presence row
-  components/      # Shared UI components, by feature
-    category/      # Category picker, switcher and manager
-    chat/          # The chat modal and its message rows
-    comment/       # Comment threads, nodes and forms
-    dump/          # Dump cards, rich-content and file previews
-      create/      # The three-step new-dump modal
-    editor/        # Text editor, emoji picker, mentions, Markdown
-    form/          # Reusable form controls
-    layout/        # Header, page shell, floating buttons
-    player/        # Media player, global player, seek bar, waveform
-    playlist/      # Playlist cards, creation and membership
-    profile/       # Profile subpage header, password change
-    social/        # Vote, like and follow buttons, who-voted popover
-    ui/            # Generic pieces: modal, tooltip, tabs, avatar, thumbnails
-  test/            # Frontend tests (Vitest), mirroring src/
-  contexts/        # Auth, WebSocket, player, follows, theme
-  hooks/           # Data fetching and UI hooks
-  utils/           # Formatting, URL, hot-score, waveform, … helpers
+  pages/           # One component per route, nothing else
+  components/      # React components only (.tsx)
+  contexts/        # FooContext.ts + FooProvider.tsx pairs
+  hooks/           # Every hook (useFoo.ts)
+  utils/           # Every non-React module: pure helpers, storage, API glue
+  test/            # Frontend tests (Vitest): test/<layer>/<domain>/<Module>.test.tsx
   locales/         # Lingui message catalogues (en, fr)
   themes/          # Per-theme CSS files
   model.ts         # Shared frontend types
   i18n.ts          # Lingui runtime setup
 public/            # Static assets (favicon, manifest, service worker)
 ```
+
+Each of `components/`, `contexts/`, `hooks/` and `utils/` is split into the
+same domain folders — `auth`, `category`, `chat`, `comment`, `dump`, `editor`,
+`feed`, `form`, `layout`, `player`, `playlist`, `profile`, `social`, `theme`,
+`ws` — plus `shared/` for what belongs to no single domain. So the chat lives in
+`components/chat/`, `contexts/chat/`, `hooks/chat/` and `utils/chat/`, and its
+tests in `test/<same path>`. Files are imported directly (no `index.ts`
+barrels), and everything uses named exports.

api/services/dump-service.ts

@@ -240,7 +240,7 @@ export async function createFileDump(
 /**
  * A file dump's version as the app puts it in file and thumbnail URLs
  * (`?v=`): it changes whenever the file can have. Mirrored by
- * `dumpFileVersion` in src/utils/urls.ts.
+ * `dumpFileVersion` in src/utils/shared/urls.ts.
  */
 export function dumpFileVersion(
   dump: Pick<Dump, "fileSize" | "createdAt" | "updatedAt">,

src/App.tsx

@@ -10,17 +10,17 @@ import {
 
 import { RestrictedGuest } from "./pages/RestrictedGuest.tsx";
 import { RestrictedLoggedIn } from "./pages/RestrictedLoggedIn.tsx";
-import { useAuth } from "./hooks/useAuth.ts";
-import { useDefaultFeedTab } from "./hooks/useDefaultFeedTab.ts";
+import { useAuth } from "./hooks/auth/useAuth.ts";
+import { useDefaultFeedTab } from "./hooks/feed/useDefaultFeedTab.ts";
 import { DEFAULT_FEED_TAB } from "./config/feedTabs.ts";
 
-import { AuthProvider } from "./contexts/AuthProvider.tsx";
-import { PlayerProvider } from "./contexts/PlayerProvider.tsx";
-import { WSProvider } from "./contexts/WSProvider.tsx";
-import { FollowProvider } from "./contexts/FollowProvider.tsx";
-import { CategoriesProvider } from "./contexts/CategoriesProvider.tsx";
-import { ThemeProvider } from "./contexts/ThemeProvider.tsx";
-import { ChatProvider } from "./contexts/ChatProvider.tsx";
+import { AuthProvider } from "./contexts/auth/AuthProvider.tsx";
+import { PlayerProvider } from "./contexts/player/PlayerProvider.tsx";
+import { WSProvider } from "./contexts/ws/WSProvider.tsx";
+import { FollowProvider } from "./contexts/social/FollowProvider.tsx";
+import { CategoriesProvider } from "./contexts/category/CategoriesProvider.tsx";
+import { ThemeProvider } from "./contexts/theme/ThemeProvider.tsx";
+import { ChatProvider } from "./contexts/chat/ChatProvider.tsx";
 import { GlobalPlayer } from "./components/player/GlobalPlayer.tsx";
 import { DumpFab } from "./components/layout/DumpFab.tsx";
 import { ChatFab } from "./components/layout/ChatFab.tsx";
@@ -181,7 +181,7 @@ function AppRoutes() {
   );
 }
 
-function App() {
+export function App() {
   return (
     <ThemeProvider>
       <AuthProvider>
@@ -203,5 +203,3 @@ function App() {
     </ThemeProvider>
   );
 }
-
-export default App;

src/components/category/CategorySelect.tsx

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/react/macro";
-import { useCategories } from "../../hooks/useCategories.ts";
+import { useCategories } from "../../hooks/category/useCategories.ts";
 
 /**
  * Multi-select of categories rendered as toggle chips. Renders nothing when no

src/components/category/CategorySwitcher.tsx

@@ -8,7 +8,7 @@ import {
 import { createPortal } from "react-dom";
 import { useNavigate, useParams } from "react-router";
 import { t } from "@lingui/core/macro";
-import { useCategories } from "../../hooks/useCategories.ts";
+import { useCategories } from "../../hooks/category/useCategories.ts";
 import { DEFAULT_FEED_TAB } from "../../config/feedTabs.ts";
 
 /**

src/components/chat/ChatEditBox.tsx

@@ -1,7 +1,11 @@
 import { useEffect, useRef, useState } from "react";
 import { Trans } from "@lingui/react/macro";
 import { TextEditor, type TextEditorHandle } from "../editor/TextEditor.tsx";
-import { COUNT_FROM, MAX_CHAT_LENGTH, sendable } from "./message.ts";
+import {
+  COUNT_FROM,
+  MAX_CHAT_LENGTH,
+  sendable,
+} from "../../utils/chat/message.ts";
 
 export interface ChatEditBoxProps {
   initial: string;

src/components/chat/ChatMessageItem.tsx

@@ -3,16 +3,16 @@ import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { Link } from "react-router";
 import { Markdown } from "../editor/Markdown.tsx";
-import { Avatar } from "../ui/Avatar.tsx";
-import { ConfirmModal } from "../ui/ConfirmModal.tsx";
-import { Tooltip } from "../ui/Tooltip.tsx";
-import { useHeightTransition } from "../../hooks/useHeightTransition.ts";
-import { relativeTime } from "../../utils/relativeTime.ts";
+import { Avatar } from "../shared/Avatar.tsx";
+import { ConfirmModal } from "../shared/ConfirmModal.tsx";
+import { Tooltip } from "../shared/Tooltip.tsx";
+import { useHeightTransition } from "../../hooks/shared/useHeightTransition.ts";
+import { relativeTime } from "../../utils/shared/relativeTime.ts";
 import type { ChatMessage } from "../../model.ts";
 import { ChatEditBox } from "./ChatEditBox.tsx";
 import { ReplyRef } from "./ReplyRef.tsx";
-import { messageTextClass } from "./message.ts";
-import { clockTime } from "./time.ts";
+import { messageTextClass } from "../../utils/chat/message.ts";
+import { clockTime } from "../../utils/chat/time.ts";
 
 export interface ChatMessageItemProps {
   message: ChatMessage;

src/components/chat/ChatModal.tsx

@@ -9,19 +9,19 @@ import {
 } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { Avatar } from "../ui/Avatar.tsx";
-import { Modal } from "../ui/Modal.tsx";
+import { Avatar } from "../shared/Avatar.tsx";
+import { Modal } from "../shared/Modal.tsx";
 import { TextEditor, type TextEditorHandle } from "../editor/TextEditor.tsx";
-import { useWS, useWSChat } from "../../hooks/useWS.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { can } from "../../utils/permissions.ts";
-import { readDraft, writeDraft } from "../../utils/chatDraft.ts";
-import { mentionsUser } from "../../utils/chatText.ts";
+import { useWS, useWSChat } from "../../hooks/ws/useWS.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { can } from "../../utils/auth/permissions.ts";
+import { readDraft, writeDraft } from "../../utils/chat/draft.ts";
+import { mentionsUser } from "../../utils/chat/text.ts";
 import { API_URL } from "../../config/api.ts";
 import type {
   ChatReplyTarget,
   PendingChatMessage,
-} from "../../contexts/WSContext.ts";
+} from "../../contexts/ws/WSContext.ts";
 import {
   type ChatMessage,
   deserializeChatMessage,
@@ -29,8 +29,13 @@ import {
 } from "../../model.ts";
 import { ChatMessageItem } from "./ChatMessageItem.tsx";
 import { PendingItem } from "./PendingItem.tsx";
-import { COUNT_FROM, MAX_CHAT_LENGTH, sendable, snippet } from "./message.ts";
-import { dayLabel, isSameDay } from "./time.ts";
+import {
+  COUNT_FROM,
+  MAX_CHAT_LENGTH,
+  sendable,
+  snippet,
+} from "../../utils/chat/message.ts";
+import { dayLabel, isSameDay } from "../../utils/chat/time.ts";
 
 // Matches the server's default page size; a full page means there may be more.
 const PAGE_SIZE = 50;

src/components/chat/PendingItem.tsx

@@ -1,10 +1,10 @@
 import { Trans } from "@lingui/react/macro";
 import { Markdown } from "../editor/Markdown.tsx";
-import { Avatar } from "../ui/Avatar.tsx";
-import type { PendingChatMessage } from "../../contexts/WSContext.ts";
+import { Avatar } from "../shared/Avatar.tsx";
+import type { PendingChatMessage } from "../../contexts/ws/WSContext.ts";
 import type { PublicUser } from "../../model.ts";
 import { ReplyRef } from "./ReplyRef.tsx";
-import { messageTextClass } from "./message.ts";
+import { messageTextClass } from "../../utils/chat/message.ts";
 
 export interface PendingItemProps {
   pending: PendingChatMessage;

src/components/chat/ReplyRef.tsx

@@ -1,5 +1,5 @@
 import { Trans } from "@lingui/react/macro";
-import { snippet } from "./message.ts";
+import { snippet } from "../../utils/chat/message.ts";
 
 export interface ReplyRefProps {
   replyToId: string;

src/components/comment/CommentForm.tsx

@@ -1,14 +1,11 @@
 import React from "react";
-import { Controller } from "react-hook-form";
+import { Controller, FormProvider } from "react-hook-form";
 import { Trans } from "@lingui/react/macro";
 import { VALIDATION } from "../../config/api.ts";
 import { TextEditor, type TextEditorHandle } from "../editor/TextEditor.tsx";
-import {
-  FormError,
-  FormProvider,
-  SubmitButton,
-  useApiForm,
-} from "../form/index.ts";
+import { FormError } from "../form/FormError.tsx";
+import { SubmitButton } from "../form/SubmitButton.tsx";
+import { useApiForm } from "../../hooks/form/useApiForm.ts";
 
 export interface CommentFormProps {
   /** Async submit; throw to surface a root error, resolve to clear/close. */

src/components/comment/CommentNode.tsx

@@ -3,7 +3,7 @@ import { Link } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { API_URL } from "../../config/api.ts";
-import { can } from "../../utils/permissions.ts";
+import { can } from "../../utils/auth/permissions.ts";
 import type {
   Comment,
   CreateCommentRequest,
@@ -12,17 +12,17 @@ import type {
   User,
 } from "../../model.ts";
 import { deserializeComment } from "../../model.ts";
-import { Avatar } from "../ui/Avatar.tsx";
+import { Avatar } from "../shared/Avatar.tsx";
 import { Markdown } from "../editor/Markdown.tsx";
 import type { TextEditorHandle } from "../editor/TextEditor.tsx";
 import { LikeButton } from "../social/LikeButton.tsx";
-import { relativeTime } from "../../utils/relativeTime.ts";
-import { Tooltip } from "../ui/Tooltip.tsx";
-import { ConfirmModal } from "../ui/ConfirmModal.tsx";
-import { useHeightTransition } from "../../hooks/useHeightTransition.ts";
-import { useWS } from "../../hooks/useWS.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { expectOk } from "../form/index.ts";
+import { relativeTime } from "../../utils/shared/relativeTime.ts";
+import { Tooltip } from "../shared/Tooltip.tsx";
+import { ConfirmModal } from "../shared/ConfirmModal.tsx";
+import { useHeightTransition } from "../../hooks/shared/useHeightTransition.ts";
+import { useWS } from "../../hooks/ws/useWS.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { expectOk } from "../../utils/shared/api.ts";
 import { CommentForm } from "./CommentForm.tsx";
 
 interface CommentNodeProps {

src/components/comment/CommentThread.tsx

@@ -9,9 +9,9 @@ import type {
   User,
 } from "../../model.ts";
 import { deserializeComment } from "../../model.ts";
-import { Avatar } from "../ui/Avatar.tsx";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { expectOk } from "../form/index.ts";
+import { Avatar } from "../shared/Avatar.tsx";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { expectOk } from "../../utils/shared/api.ts";
 import { CommentForm } from "./CommentForm.tsx";
 import { CommentNode } from "./CommentNode.tsx";
 

src/components/dump/DumpCard.tsx

@@ -2,22 +2,22 @@ import { memo } from "react";
 import { Link } from "react-router";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../../model.ts";
-import { relativeTime } from "../../utils/relativeTime.ts";
-import { dumpThumbnailUrl, dumpUrl } from "../../utils/urls.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { useCategories } from "../../hooks/useCategories.ts";
-import { useDumpCardLink } from "../../hooks/useDumpCardLink.ts";
+import { relativeTime } from "../../utils/shared/relativeTime.ts";
+import { dumpThumbnailUrl, dumpUrl } from "../../utils/shared/urls.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useCategories } from "../../hooks/category/useCategories.ts";
+import { useDumpCardLink } from "../../hooks/dump/useDumpCardLink.ts";
 import {
   isDumpVisited,
   isRecent,
   markDumpVisited,
-} from "../../utils/visited.ts";
+} from "../../utils/shared/visited.ts";
 import { FilePreview } from "./FilePreview.tsx";
 import { RichContentCard } from "./RichContentCard.tsx";
-import { ThumbnailPlaceholder } from "../ui/ThumbnailPlaceholder.tsx";
+import { ThumbnailPlaceholder } from "../shared/ThumbnailPlaceholder.tsx";
 import { VoteButton } from "../social/VoteButton.tsx";
 import { Markdown } from "../editor/Markdown.tsx";
-import { Tooltip } from "../ui/Tooltip.tsx";
+import { Tooltip } from "../shared/Tooltip.tsx";
 
 interface DumpCardProps {
   dump: Dump;

src/components/dump/FilePreview.tsx

@@ -1,15 +1,19 @@
 import { useContext, useEffect, useState } from "react";
 import type { Dump } from "../../model.ts";
-import { formatBytes } from "../../utils/format.ts";
-import { dumpFileUrl, dumpThumbnailUrl, dumpUrl } from "../../utils/urls.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { IconPause, IconPlay } from "../player/icons.tsx";
+import { formatBytes } from "../../utils/shared/format.ts";
+import {
+  dumpFileUrl,
+  dumpThumbnailUrl,
+  dumpUrl,
+} from "../../utils/shared/urls.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { IconPause, IconPlay } from "../player/PlayerIcons.tsx";
 import { MediaPlayer } from "../player/MediaPlayer.tsx";
 import {
   PlayerContext,
   type PlayerItem,
   PlayerTimeContext,
-} from "../../contexts/PlayerContext.ts";
+} from "../../contexts/player/PlayerContext.ts";
 import {
   BAR_GAP,
   BAR_W,
@@ -17,7 +21,7 @@ import {
   NUM_BARS,
   VIEWBOX_W,
   WAVEFORM_H,
-} from "../../utils/waveform.ts";
+} from "../../utils/player/waveform.ts";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 

src/components/dump/JournalCard.tsx

@@ -2,28 +2,28 @@ import { memo } from "react";
 import { Link } from "react-router";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { Dump } from "../../model.ts";
-import { relativeTime } from "../../utils/relativeTime.ts";
-import { dumpThumbnailUrl, dumpUrl } from "../../utils/urls.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { useDumpCardLink } from "../../hooks/useDumpCardLink.ts";
+import { relativeTime } from "../../utils/shared/relativeTime.ts";
+import { dumpThumbnailUrl, dumpUrl } from "../../utils/shared/urls.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useDumpCardLink } from "../../hooks/dump/useDumpCardLink.ts";
 import {
   isDumpVisited,
   isRecent,
   markDumpVisited,
-} from "../../utils/visited.ts";
+} from "../../utils/shared/visited.ts";
 import {
   hasQuote,
   hasThumbnail,
   type JournalShape,
-} from "../../utils/journalLayout.ts";
+} from "../../utils/feed/journalLayout.ts";
 import { VoteButton } from "../social/VoteButton.tsx";
 import { Markdown } from "../editor/Markdown.tsx";
-import { Tooltip } from "../ui/Tooltip.tsx";
-import { Thumbnail } from "../ui/Thumbnail.tsx";
+import { Tooltip } from "../shared/Tooltip.tsx";
+import { Thumbnail } from "../shared/Thumbnail.tsx";
 import {
   canPlayRichContent,
   usePlayRichContent,
-} from "../../hooks/usePlayRichContent.ts";
+} from "../../hooks/player/usePlayRichContent.ts";
 
 export type { JournalShape };
 

src/components/dump/RichContentCard.tsx

@@ -1,12 +1,12 @@
 import { useContext } from "react";
 import { t } from "@lingui/core/macro";
 import type { RichContent } from "../../model.ts";
-import { PlayerContext } from "../../contexts/PlayerContext.ts";
+import { PlayerContext } from "../../contexts/player/PlayerContext.ts";
 import {
   canPlayRichContent,
   usePlayRichContent,
-} from "../../hooks/usePlayRichContent.ts";
-import { Thumbnail } from "../ui/Thumbnail.tsx";
+} from "../../hooks/player/usePlayRichContent.ts";
+import { Thumbnail } from "../shared/Thumbnail.tsx";
 
 interface RichContentCardProps {
   richContent: RichContent;

src/components/dump/create/DumpCreateModal.tsx

@@ -19,34 +19,32 @@ import {
   deserializeDumpUrlMatch,
   deserializePlaylistMembership,
 } from "../../../model.ts";
-import { useAuth } from "../../../hooks/useAuth.ts";
-import { useWS } from "../../../hooks/useWS.ts";
-import { dumpUrl, normalizeUrl } from "../../../utils/urls.ts";
-import { titleFromFileName } from "../../../utils/format.ts";
+import { useAuth } from "../../../hooks/auth/useAuth.ts";
+import { useWS } from "../../../hooks/ws/useWS.ts";
+import { dumpUrl, normalizeUrl } from "../../../utils/shared/urls.ts";
+import { titleFromFileName } from "../../../utils/shared/format.ts";
 import {
   clearDumpDraft,
   type DumpDraft,
   EMPTY_DUMP_DRAFT,
   loadDumpDraft,
   saveDumpDraft,
-} from "../../../utils/dumpDraft.ts";
+} from "../../../utils/dump/draft.ts";
 import { MAX_FILE_SIZE } from "../../../config/upload.ts";
 import { RichContentCard } from "../RichContentCard.tsx";
 import type { RichContent } from "../../../model.ts";
-import { Modal } from "../../ui/Modal.tsx";
+import { Modal } from "../../shared/Modal.tsx";
 import type { TextEditorHandle } from "../../editor/TextEditor.tsx";
 import { CategorySelect } from "../../category/CategorySelect.tsx";
 import { PlaylistMembershipPanel } from "../../playlist/PlaylistMembershipPanel.tsx";
-import {
-  expectOk,
-  FileField,
-  FormError,
-  FormProvider,
-  RichTextField,
-  SubmitButton,
-  useApiForm,
-  VisibilityToggle,
-} from "../../form/index.ts";
+import { expectOk } from "../../../utils/shared/api.ts";
+import { FileField } from "../../form/FileField.tsx";
+import { FormError } from "../../form/FormError.tsx";
+import { FormProvider } from "react-hook-form";
+import { RichTextField } from "../../form/RichTextField.tsx";
+import { SubmitButton } from "../../form/SubmitButton.tsx";
+import { useApiForm } from "../../../hooks/form/useApiForm.ts";
+import { VisibilityToggle } from "../../form/SegmentedField.tsx";
 import { DuplicateNotice } from "./DuplicateNotice.tsx";
 import { LocalFilePreview } from "./LocalFilePreview.tsx";
 import { type Step, StepIndicator } from "./StepIndicator.tsx";

src/components/dump/create/DuplicateNotice.tsx

@@ -1,8 +1,8 @@
 import { Link } from "react-router";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { DumpUrlMatch } from "../../../model.ts";
-import { dumpUrl } from "../../../utils/urls.ts";
-import { relativeTime } from "../../../utils/relativeTime.ts";
+import { dumpUrl } from "../../../utils/shared/urls.ts";
+import { relativeTime } from "../../../utils/shared/relativeTime.ts";
 
 /** "Already dumped" hint — never blocking, since reposts are sometimes on purpose. */
 export function DuplicateNotice(

src/components/editor/EmojiPickerPopup.tsx

@@ -12,7 +12,7 @@ import {
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { useLingui } from "@lingui/react";
-import { readSkinTone, SKIN_TONE_KEY } from "./skinTone.ts";
+import { readSkinTone, SKIN_TONE_KEY } from "../../utils/editor/skinTone.ts";
 
 /** Remembers the skin tone picked in the selector for the next picker. */
 function SkinTonePersist() {

src/components/editor/MentionDropdown.tsx

@@ -1,6 +1,6 @@
 import { type CSSProperties, useLayoutEffect, useRef } from "react";
-import { Avatar } from "../ui/Avatar.tsx";
-import type { UserResult } from "../../hooks/useMentionAutocomplete.ts";
+import { Avatar } from "../shared/Avatar.tsx";
+import type { UserResult } from "../../hooks/editor/useMentionAutocomplete.ts";
 
 interface MentionDropdownProps {
   /** For the textarea's `aria-controls` / `aria-activedescendant`. */

src/components/editor/TextEditor.tsx

@@ -11,13 +11,13 @@ import {
 import { createPortal } from "react-dom";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { charCountClass } from "../../utils/charCount.ts";
+import { charCountClass } from "../../utils/shared/charCount.ts";
 import { EmojiPickerPopup } from "./EmojiPickerPopup.tsx";
 import { MentionDropdown } from "./MentionDropdown.tsx";
-import { useMentionAutocomplete } from "../../hooks/useMentionAutocomplete.ts";
-import { useEmojiTrigger } from "../../hooks/useEmojiTrigger.ts";
-import { useAnchoredFloat } from "../../hooks/useAnchoredFloat.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
+import { useMentionAutocomplete } from "../../hooks/editor/useMentionAutocomplete.ts";
+import { useEmojiTrigger } from "../../hooks/editor/useEmojiTrigger.ts";
+import { useAnchoredFloat } from "../../hooks/shared/useAnchoredFloat.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 import { API_URL } from "../../config/api.ts";
 
 export interface TextEditorHandle {

src/components/feed/DumpFeed.tsx

@@ -1,12 +1,30 @@
-import { useMemo } from "react";
+import { type Ref, useMemo } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { DumpCard } from "../../components/dump/DumpCard.tsx";
-import { ErrorCard } from "../../components/ui/ErrorCard.tsx";
-import type { MainFeedProps } from "./types.ts";
+import { DumpCard } from "../dump/DumpCard.tsx";
+import { ErrorCard } from "../shared/ErrorCard.tsx";
+import type { Dump, User } from "../../model.ts";
+import { hotScore } from "../../utils/feed/hotScore.ts";
 
-export function NewFeed(
+// What the index hands whichever main feed its tab shows.
+export interface MainFeedProps {
+  dumps: Dump[];
+  loading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  loadingMore: boolean;
+  sentinelRef: Ref<HTMLDivElement>;
+  voteCounts: Record<string, number>;
+  myVotes: Set<string>;
+  user: User | null;
+  castVote: (id: string, shownCount?: number) => void;
+  removeVote: (id: string, shownCount?: number) => void;
+}
+
+// The hot and new tabs: the same list, ordered by hot score or by date.
+export function DumpFeed(
   {
+    order,
     dumps,
     loading,
     error,
@@ -18,12 +36,16 @@ export function NewFeed(
     user,
     castVote,
     removeVote,
-  }: MainFeedProps,
+  }: MainFeedProps & { order: "hot" | "new" },
 ) {
   const sorted = useMemo(
     () =>
-      [...dumps].sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()),
-    [dumps],
+      [...dumps].sort((a, b) =>
+        order === "hot"
+          ? hotScore(b) - hotScore(a)
+          : b.createdAt.getTime() - a.createdAt.getTime()
+      ),
+    [dumps, order],
   );
 
   if (loading) {

src/components/feed/FeedTabBar.tsx

@@ -1,14 +1,14 @@
 import { useNavigate, useParams } from "react-router";
 import { Trans } from "@lingui/react/macro";
-import { useAuth } from "../../hooks/useAuth.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 import {
   DEFAULT_FEED_TAB,
   FEED_TABS,
   type FeedTab,
 } from "../../config/feedTabs.ts";
-import { useDefaultFeedTab } from "../../hooks/useDefaultFeedTab.ts";
-import { TabBar } from "../../components/ui/TabBar.tsx";
-import { CategorySwitcher } from "../../components/category/CategorySwitcher.tsx";
+import { useDefaultFeedTab } from "../../hooks/feed/useDefaultFeedTab.ts";
+import { TabBar } from "../shared/TabBar.tsx";
+import { CategorySwitcher } from "../category/CategorySwitcher.tsx";
 
 /**
  * Feed sort tabs (hot/new/journal/followed). Navigation stays within the

src/components/feed/FollowedFeed.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useState } from "react";
-import { TabBar } from "../../components/ui/TabBar.tsx";
+import { TabBar } from "../shared/TabBar.tsx";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { DumpCard } from "../../components/dump/DumpCard.tsx";
-import { ErrorCard } from "../../components/ui/ErrorCard.tsx";
+import { DumpCard } from "../dump/DumpCard.tsx";
+import { ErrorCard } from "../shared/ErrorCard.tsx";
 import { API_URL, DEFAULT_PAGE_SIZE } from "../../config/api.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { useDumpListSync } from "../../hooks/useDumpListSync.ts";
-import { useFeedCache } from "../../hooks/useFeedCache.ts";
-import { useInfiniteScroll } from "../../hooks/useInfiniteScroll.ts";
-import { useScrollSave } from "../../hooks/useScrollSave.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useDumpListSync } from "../../hooks/dump/useDumpListSync.ts";
+import { useFeedCache } from "../../hooks/feed/useFeedCache.ts";
+import { useInfiniteScroll } from "../../hooks/feed/useInfiniteScroll.ts";
+import { useScrollSave } from "../../hooks/feed/useScrollSave.ts";
 import {
   deserializeDump,
   type Dump,
@@ -18,7 +18,7 @@ import {
   type RawDump,
   type User,
 } from "../../model.ts";
-import { friendlyFetchError } from "../../utils/apiError.ts";
+import { friendlyFetchError } from "../../utils/shared/api.ts";
 
 type FeedState =
   | { status: "loading" }

src/components/feed/JournalFeed.tsx

@@ -1,10 +1,10 @@
 import { Fragment, useMemo } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { ErrorCard } from "../../components/ui/ErrorCard.tsx";
-import { JournalCard } from "../../components/dump/JournalCard.tsx";
-import { composeJournal } from "../../utils/journalLayout.ts";
-import type { MainFeedProps } from "./types.ts";
+import { ErrorCard } from "../shared/ErrorCard.tsx";
+import { JournalCard } from "../dump/JournalCard.tsx";
+import { composeJournal } from "../../utils/feed/journalLayout.ts";
+import type { MainFeedProps } from "./DumpFeed.tsx";
 
 export function JournalFeed(
   {

src/components/feed/PresenceRow.tsx

@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { Link } from "react-router";
 import { t } from "@lingui/core/macro";
-import { Avatar } from "../../components/ui/Avatar.tsx";
-import { useWSPresence } from "../../hooks/useWS.ts";
-import { useRoomBeside } from "../../hooks/useRoomBeside.ts";
+import { Avatar } from "../shared/Avatar.tsx";
+import { useWSPresence } from "../../hooks/ws/useWS.ts";
+import { useRoomBeside } from "../../hooks/shared/useRoomBeside.ts";
 
 // Past this many, the row ends in a "+N" counter rather than growing, so a
 // busy evening doesn't push the feed tabs out of the header.

src/components/form/FileDropZone.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useRef, useState } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { formatBytes } from "../../utils/format.ts";
+import { formatBytes } from "../../utils/shared/format.ts";
 
 function fileIcon(mime: string): string {
   if (mime.startsWith("image/")) return "🖼";

src/components/form/FormError.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { useFormState } from "react-hook-form";
 
-import { ErrorCard } from "../ui/ErrorCard.tsx";
+import { ErrorCard } from "../shared/ErrorCard.tsx";
 
 /**
  * Renders the form's root error (set by {@link useApiForm}'s `submit` on a

src/components/form/TextField.tsx

@@ -7,7 +7,7 @@ import {
   useWatch,
 } from "react-hook-form";
 
-import { charCountClass } from "../../utils/charCount.ts";
+import { charCountClass } from "../../utils/shared/charCount.ts";
 
 interface TextFieldProps<T extends FieldValues> {
   name: Path<T>;

src/components/form/index.ts

@@ -1,9 +0,0 @@
-export { expectOk, useApiForm } from "./useApiForm.ts";
-export { TextField } from "./TextField.tsx";
-export { RichTextField } from "./RichTextField.tsx";
-export { SegmentedField, VisibilityToggle } from "./SegmentedField.tsx";
-export { FileField } from "./FileField.tsx";
-export { SubmitButton } from "./SubmitButton.tsx";
-export { FormActions } from "./FormActions.tsx";
-export { FormError } from "./FormError.tsx";
-export { FormProvider } from "react-hook-form";

src/components/layout/AppHeader.tsx

@@ -2,13 +2,13 @@ import { lazy, type ReactNode, Suspense, useRef, useState } from "react";
 import { Link, useLocation, useNavigate, useSearchParams } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { useWS } from "../../hooks/useWS.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useWS } from "../../hooks/ws/useWS.ts";
 import { NotificationBell } from "./NotificationBell.tsx";
 import { ChatButton } from "./ChatButton.tsx";
 import { UserMenu } from "./UserMenu.tsx";
 import { SearchBar } from "./SearchBar.tsx";
-import { SITE_EMOJI, SITE_NAME } from "../../hooks/useDocumentTitle.ts";
+import { SITE_EMOJI, SITE_NAME } from "../../hooks/shared/useDocumentTitle.ts";
 
 const DumpCreateModal = lazy(() =>
   import("../dump/create/DumpCreateModal.tsx").then((m) => ({

src/components/layout/ChatButton.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/core/macro";
-import { useWSChat } from "../../hooks/useWS.ts";
-import { useChat } from "../../hooks/useChat.ts";
+import { useWSChat } from "../../hooks/ws/useWS.ts";
+import { useChat } from "../../hooks/chat/useChat.ts";
 
 /** Header chat button with an unread-message badge. Opens the app-wide chat. */
 export function ChatButton() {

src/components/layout/ChatFab.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { t } from "@lingui/core/macro";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { useWSChat } from "../../hooks/useWS.ts";
-import { useChat } from "../../hooks/useChat.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useWSChat } from "../../hooks/ws/useWS.ts";
+import { useChat } from "../../hooks/chat/useChat.ts";
 
 /**
  * Floating chat button shown once the header has scrolled out of view, mirroring

src/components/layout/DumpFab.tsx

@@ -1,7 +1,7 @@
 import { lazy, Suspense, useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { t } from "@lingui/core/macro";
-import { useAuth } from "../../hooks/useAuth.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 
 const DumpCreateModal = lazy(() =>
   import("../dump/create/DumpCreateModal.tsx").then((m) => ({

src/components/layout/NotificationBell.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import { t } from "@lingui/core/macro";
-import { useWS } from "../../hooks/useWS.ts";
+import { useWS } from "../../hooks/ws/useWS.ts";
 
 export function NotificationBell() {
   const { unreadNotificationCount, lastNotification } = useWS();

src/components/layout/PageError.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { t } from "@lingui/core/macro";
 import { PageShell } from "./PageShell.tsx";
-import { ErrorCard } from "../ui/ErrorCard.tsx";
+import { ErrorCard } from "../shared/ErrorCard.tsx";
 
 export function PageError(
   { title, message, actions }: {

src/components/layout/UserMenu.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { Avatar } from "../ui/Avatar.tsx";
+import { Avatar } from "../shared/Avatar.tsx";
 import type { User } from "../../model.ts";
 
 export function UserMenu({ user }: { user: User }) {

src/components/player/GlobalPlayer.tsx

@@ -6,12 +6,12 @@ import {
   PlayerContext,
   type PlayerItem,
   playerItemKey,
-} from "../../contexts/PlayerContext.ts";
+} from "../../contexts/player/PlayerContext.ts";
 import { MediaPlayer } from "./MediaPlayer.tsx";
-import { fmt } from "../../utils/duration.ts";
-import { Thumbnail } from "../ui/Thumbnail.tsx";
-import { useYouTubePlaylist } from "../../hooks/useYouTubePlaylist.ts";
-import { embedListId, withJsApi } from "../../utils/youtube.ts";
+import { fmt } from "../../utils/player/duration.ts";
+import { Thumbnail } from "../shared/Thumbnail.tsx";
+import { useYouTubePlaylist } from "../../hooks/player/useYouTubePlaylist.ts";
+import { embedListId, withJsApi } from "../../utils/player/youtube.ts";
 
 type EmbedItem = Extract<PlayerItem, { kind: "embed" }>;
 

src/components/player/MediaPlayer.tsx

@@ -1,10 +1,15 @@
 import { useEffect, useRef, useState } from "react";
-import { fmt } from "../../utils/duration.ts";
+import { fmt } from "../../utils/player/duration.ts";
 import { t } from "@lingui/core/macro";
-import { IconFullscreen, IconPause, IconPlay, IconVolume } from "./icons.tsx";
+import {
+  IconFullscreen,
+  IconPause,
+  IconPlay,
+  IconVolume,
+} from "./PlayerIcons.tsx";
 import { SeekBar } from "./SeekBar.tsx";
 import { Waveform } from "./Waveform.tsx";
-import { rememberVolume, storedVolume } from "./volume.ts";
+import { rememberVolume, storedVolume } from "../../utils/player/volume.ts";
 
 const HIDE_DELAY = 2500;
 

src/components/player/Waveform.tsx

@@ -6,7 +6,7 @@ import {
   NUM_BARS,
   VIEWBOX_W,
   WAVEFORM_H,
-} from "../../utils/waveform.ts";
+} from "../../utils/player/waveform.ts";
 
 export function Waveform(
   { src, current, duration, onSeek }: {

src/components/playlist/AddToPlaylistModal.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { t } from "@lingui/core/macro";
 import { API_URL } from "../../config/api.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 import type { PlaylistMembership, RawPlaylistMembership } from "../../model.ts";
 import { deserializePlaylistMembership } from "../../model.ts";
-import { Modal } from "../ui/Modal.tsx";
+import { Modal } from "../shared/Modal.tsx";
 import { PlaylistMembershipPanel } from "./PlaylistMembershipPanel.tsx";
 
 interface AddToPlaylistModalProps {

src/components/playlist/NewPlaylistButton.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import type { Playlist } from "../../model.ts";
-import { Modal } from "../ui/Modal.tsx";
+import { Modal } from "../shared/Modal.tsx";
 import { PlaylistCreateForm } from "./PlaylistCreateForm.tsx";
 
 interface NewPlaylistButtonProps {

src/components/playlist/PlaylistCard.tsx

@@ -2,14 +2,14 @@ import { Link, useNavigate } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Plural, Trans } from "@lingui/react/macro";
 import type { Playlist } from "../../model.ts";
-import { relativeTime } from "../../utils/relativeTime.ts";
-import { playlistImageUrl, playlistUrl } from "../../utils/urls.ts";
+import { relativeTime } from "../../utils/shared/relativeTime.ts";
+import { playlistImageUrl, playlistUrl } from "../../utils/shared/urls.ts";
 import {
   isPlaylistVisited,
   isRecent,
   markPlaylistVisited,
-} from "../../utils/visited.ts";
-import { Tooltip } from "../ui/Tooltip.tsx";
+} from "../../utils/shared/visited.ts";
+import { Tooltip } from "../shared/Tooltip.tsx";
 
 interface PlaylistCardProps {
   playlist: Playlist;

src/components/playlist/PlaylistCreateForm.tsx

@@ -7,18 +7,16 @@ import type {
   RawPlaylist,
 } from "../../model.ts";
 import { deserializePlaylist } from "../../model.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import {
-  expectOk,
-  FormActions,
-  FormError,
-  FormProvider,
-  RichTextField,
-  SubmitButton,
-  TextField,
-  useApiForm,
-  VisibilityToggle,
-} from "../form/index.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { expectOk } from "../../utils/shared/api.ts";
+import { FormActions } from "../form/FormActions.tsx";
+import { FormError } from "../form/FormError.tsx";
+import { FormProvider } from "react-hook-form";
+import { RichTextField } from "../form/RichTextField.tsx";
+import { SubmitButton } from "../form/SubmitButton.tsx";
+import { TextField } from "../form/TextField.tsx";
+import { useApiForm } from "../../hooks/form/useApiForm.ts";
+import { VisibilityToggle } from "../form/SegmentedField.tsx";
 
 interface PlaylistCreateFormProps {
   /** If provided, the new playlist will have this dump added to it. */

src/components/profile/ChangePasswordModal.tsx

@@ -2,17 +2,15 @@ import { useState } from "react";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
 import { API_URL, VALIDATION } from "../../config/api.ts";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { Modal } from "../ui/Modal.tsx";
-import {
-  expectOk,
-  FormActions,
-  FormError,
-  FormProvider,
-  SubmitButton,
-  TextField,
-  useApiForm,
-} from "../form/index.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { Modal } from "../shared/Modal.tsx";
+import { expectOk } from "../../utils/shared/api.ts";
+import { FormActions } from "../form/FormActions.tsx";
+import { FormError } from "../form/FormError.tsx";
+import { FormProvider } from "react-hook-form";
+import { SubmitButton } from "../form/SubmitButton.tsx";
+import { TextField } from "../form/TextField.tsx";
+import { useApiForm } from "../../hooks/form/useApiForm.ts";
 
 interface ChangePasswordModalProps {
   onClose: () => void;

src/components/profile/ProfileSubpageHeader.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { Link } from "react-router";
 import type { PublicUser } from "../../model.ts";
-import { Avatar } from "../ui/Avatar.tsx";
+import { Avatar } from "../shared/Avatar.tsx";
 
 interface ProfileSubpageHeaderProps {
   username: string;

src/components/shared/Avatar.tsx

@@ -1,6 +1,6 @@
 import { useContext, useState } from "react";
 import { API_URL } from "../../config/api.ts";
-import { AvatarOverrideContext } from "../../contexts/AvatarOverrideContext.ts";
+import { AvatarOverrideContext } from "../../contexts/ws/AvatarOverrideContext.ts";
 
 interface AvatarProps {
   userId: string;

src/components/shared/ConfirmModal.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId } from "react";
 import { createPortal } from "react-dom";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { useScrollLock } from "../../hooks/useScrollLock.ts";
+import { useScrollLock } from "../../hooks/shared/useScrollLock.ts";
 
 interface ConfirmModalProps {
   message: string;

src/components/shared/CountedInput.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { charCountClass } from "../../utils/charCount.ts";
+import { charCountClass } from "../../utils/shared/charCount.ts";
 
 interface CountedInputProps
   extends

src/components/shared/Modal.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useCallback, useEffect, useId, useRef } from "react";
 import { createPortal } from "react-dom";
 import { t } from "@lingui/core/macro";
-import { useScrollLock } from "../../hooks/useScrollLock.ts";
+import { useScrollLock } from "../../hooks/shared/useScrollLock.ts";
 
 interface ModalProps {
   title: string;

src/components/shared/Thumbnail.tsx

@@ -1,5 +1,5 @@
 import { type ComponentProps, useState } from "react";
-import { canProxyImage, proxyImageUrl } from "../../utils/proxyImage.ts";
+import { canProxyImage, proxyImageUrl } from "../../utils/shared/proxyImage.ts";
 import { ThumbnailPlaceholder } from "./ThumbnailPlaceholder.tsx";
 
 interface ThumbnailProps {

src/components/shared/ThumbnailPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
-import { proxyImageUrl } from "../../utils/proxyImage.ts";
-import { initialsFor, tintFor } from "../../utils/thumbnailTint.ts";
+import { proxyImageUrl } from "../../utils/shared/proxyImage.ts";
+import { initialsFor, tintFor } from "../../utils/shared/thumbnailTint.ts";
 
 interface ThumbnailPlaceholderProps {
   /** The dumped URL — seeds the fallback hue and the initial. */

src/components/social/FollowButton.tsx

@@ -1,7 +1,7 @@
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { useAuth } from "../../hooks/useAuth.ts";
-import { useFollows } from "../../hooks/useFollows.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { useFollows } from "../../hooks/social/useFollows.ts";
 
 interface FollowUserButtonProps {
   targetUserId: string;

src/components/social/UserListPopover.tsx

@@ -3,8 +3,8 @@ import { createPortal } from "react-dom";
 import { Link } from "react-router";
 import { t } from "@lingui/core/macro";
 import { Trans } from "@lingui/react/macro";
-import { Avatar } from "../ui/Avatar.tsx";
-import { useAuth } from "../../hooks/useAuth.ts";
+import { Avatar } from "../shared/Avatar.tsx";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 import { DEFAULT_PAGE_SIZE } from "../../config/api.ts";
 import {
   deserializePublicUser,

src/contexts/auth/AuthContext.ts

@@ -1,6 +1,6 @@
 import { createContext, type Dispatch, type SetStateAction } from "react";
 
-import { type AuthResponse } from "../model.ts";
+import { type AuthResponse } from "../../model.ts";
 
 export interface AuthContextValue {
   authResponse: AuthResponse | null;

src/contexts/auth/AuthProvider.tsx

@@ -2,14 +2,14 @@ import { type ReactNode, useEffect, useState } from "react";
 
 import { AuthContext, type AuthContextValue } from "./AuthContext.ts";
 
-import { type AuthResponse, deserializePublicUser } from "../model.ts";
-import { API_URL } from "../config/api.ts";
+import { type AuthResponse, deserializePublicUser } from "../../model.ts";
+import { API_URL } from "../../config/api.ts";
 import {
   AUTH_STORAGE_KEY,
   forgetStoredSession,
   readStoredSession,
   storeSession,
-} from "../utils/authStorage.ts";
+} from "../../utils/auth/storage.ts";
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [authResponse, setAuthResponse] = useState<AuthResponse | null>(

src/contexts/category/CategoriesContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-import type { Category } from "../model.ts";
+import type { Category } from "../../model.ts";
 
 export interface CategoriesContextValue {
   categories: Category[];

src/contexts/category/CategoriesProvider.tsx

@@ -9,12 +9,12 @@ import {
   CategoriesContext,
   type CategoriesContextValue,
 } from "./CategoriesContext.ts";
-import { API_URL } from "../config/api.ts";
+import { API_URL } from "../../config/api.ts";
 import {
   type Category,
   deserializeCategory,
   type RawCategory,
-} from "../model.ts";
+} from "../../model.ts";
 
 async function fetchCategories(
   signal?: AbortSignal,

src/contexts/chat/ChatProvider.tsx

@@ -7,11 +7,11 @@ import {
   useState,
 } from "react";
 import { useSearchParams } from "react-router";
-import { useAuth } from "../hooks/useAuth.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 import { ChatContext, type ChatContextValue } from "./ChatContext.ts";
 
 const ChatModal = lazy(() =>
-  import("../components/chat/ChatModal.tsx").then((m) => ({
+  import("../../components/chat/ChatModal.tsx").then((m) => ({
     default: m.ChatModal,
   }))
 );

src/contexts/player/PlayerProvider.tsx

@@ -5,8 +5,11 @@ import {
   playerItemKey,
   PlayerTimeContext,
 } from "./PlayerContext.ts";
-import { isStreamStale, resolveStreamQueue } from "../utils/streamSources.ts";
-import { useAuth } from "../hooks/useAuth.ts";
+import {
+  isStreamStale,
+  resolveStreamQueue,
+} from "../../utils/player/streamSources.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
 
 const STORAGE_KEY = "player";
 

src/contexts/social/FollowProvider.tsx

@@ -6,9 +6,9 @@ import {
   useState,
 } from "react";
 import { FollowContext, type FollowContextValue } from "./FollowContext.ts";
-import { API_URL } from "../config/api.ts";
-import { useAuth } from "../hooks/useAuth.ts";
-import type { FollowStatus } from "../model.ts";
+import { API_URL } from "../../config/api.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import type { FollowStatus } from "../../model.ts";
 
 export function FollowProvider({ children }: { children: ReactNode }) {
   const { token, authFetch } = useAuth();

src/contexts/ws/WSContext.ts

@@ -7,7 +7,7 @@ import type {
   OnlineUser,
   Playlist,
   PublicUser,
-} from "../model.ts";
+} from "../../model.ts";
 
 export interface VoteEvent {
   dumpId: string;

src/contexts/ws/WSProvider.tsx

@@ -27,7 +27,7 @@ import {
   type AvatarOverride,
   AvatarOverrideContext,
 } from "./AvatarOverrideContext.ts";
-import { WS_URL } from "../config/api.ts";
+import { WS_URL } from "../../config/api.ts";
 import type {
   ChatMessage,
   Dump,
@@ -35,7 +35,7 @@ import type {
   Notification,
   OnlineUser,
   OutgoingWSMessage,
-} from "../model.ts";
+} from "../../model.ts";
 import {
   deserializeChatMessage,
   deserializeComment,
@@ -43,12 +43,12 @@ import {
   deserializeNotification,
   deserializePlaylist,
   deserializePublicUser,
-} from "../model.ts";
+} from "../../model.ts";
 import { t } from "@lingui/core/macro";
-import { useAuth } from "../hooks/useAuth.ts";
-import { setTitleBadge } from "../hooks/useDocumentTitle.ts";
-import { playChime } from "../utils/sound.ts";
-import { mentionsUser } from "../utils/chatText.ts";
+import { useAuth } from "../../hooks/auth/useAuth.ts";
+import { setTitleBadge } from "../../hooks/shared/useDocumentTitle.ts";
+import { playChime } from "../../utils/shared/sound.ts";
+import { mentionsUser } from "../../utils/chat/text.ts";
 
 interface WSProviderProps {
   children: ReactNode;

src/hooks/auth/useAuth.ts

@@ -1,13 +1,13 @@
 import { useCallback, useContext } from "react";
 
-import { AuthContext } from "../contexts/AuthContext.ts";
+import { AuthContext } from "../../contexts/auth/AuthContext.ts";
 
-import { type AuthResponse } from "../model.ts";
+import { type AuthResponse } from "../../model.ts";
 import {
   forgetStoredSession,
   isTokenExpired,
   storeSession,
-} from "../utils/authStorage.ts";
+} from "../../utils/auth/storage.ts";
 
 export const useAuth = () => {
   const { authResponse, setAuthResponse } = useContext(AuthContext);

src/hooks/category/useCategories.ts

@@ -1,4 +1,4 @@
 import { useContext } from "react";
-import { CategoriesContext } from "../contexts/CategoriesContext.ts";
+import { CategoriesContext } from "../../contexts/category/CategoriesContext.ts";
 
 export const useCategories = () => useContext(CategoriesContext);

src/hooks/chat/useChat.ts

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { ChatContext } from "../contexts/ChatContext.ts";
+import { ChatContext } from "../../contexts/chat/ChatContext.ts";
 
 export function useChat() {
   return useContext(ChatContext);

src/hooks/dump/useDumpCardLink.ts

@@ -1,8 +1,8 @@
 import type { MouseEvent } from "react";
 import { useNavigate } from "react-router";
-import type { Dump } from "../model.ts";
-import { dumpUrl } from "../utils/urls.ts";
-import { markDumpVisited } from "../utils/visited.ts";
+import type { Dump } from "../../model.ts";
+import { dumpUrl } from "../../utils/shared/urls.ts";
+import { markDumpVisited } from "../../utils/shared/visited.ts";
 
 function isOverLink(e: MouseEvent) {
   return (e.target as Element).closest("a") !== null;

src/hooks/dump/useDumpListSync.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef } from "react";
-import type { Dump } from "../model.ts";
-import { useWS } from "./useWS.ts";
+import type { Dump } from "../../model.ts";
+import { useWS } from "../ws/useWS.ts";
 
 interface DumpListSyncOptions {
   /** Keep private dumps visible (caller is the owner). */

src/hooks/dump/useUserDumpFeed.ts

@@ -7,18 +7,18 @@ import {
   useState,
 } from "react";
 
-import { API_URL, DEFAULT_PAGE_SIZE } from "../config/api.ts";
-import { friendlyFetchError } from "../utils/apiError.ts";
-import type { Dump, PaginatedData, PublicUser, RawDump } from "../model.ts";
+import { API_URL, DEFAULT_PAGE_SIZE } from "../../config/api.ts";
+import { friendlyFetchError } from "../../utils/shared/api.ts";
+import type { Dump, PaginatedData, PublicUser, RawDump } from "../../model.ts";
 import {
   deserializeDump,
   deserializePublicUser,
   hydrateDump,
-} from "../model.ts";
-import { useAuth } from "./useAuth.ts";
-import { useFeedCache } from "./useFeedCache.ts";
-import { useInfiniteScroll } from "./useInfiniteScroll.ts";
-import { useScrollSave } from "./useScrollSave.ts";
+} from "../../model.ts";
+import { useAuth } from "../auth/useAuth.ts";
+import { useFeedCache } from "../feed/useFeedCache.ts";
+import { useInfiniteScroll } from "../feed/useInfiniteScroll.ts";
+import { useScrollSave } from "../feed/useScrollSave.ts";
 
 type State =
   | { status: "loading" }

src/hooks/editor/useEmojiTrigger.ts

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from "react";
-import { insideCode } from "../utils/editorText.ts";
+import { insideCode } from "../../utils/editor/text.ts";
 
 // Trigger: ':' not preceded by a letter, digit or another ':', followed by a
 // letter then at least one more word char / '+' / '-'. Two characters, not

src/hooks/editor/useMentionAutocomplete.ts

@@ -5,8 +5,8 @@ import {
   useRef,
   useState,
 } from "react";
-import { API_URL } from "../config/api.ts";
-import { insideCode } from "../utils/editorText.ts";
+import { API_URL } from "../../config/api.ts";
+import { insideCode } from "../../utils/editor/text.ts";
 
 export interface UserResult {
   id: string;

src/hooks/feed/useDefaultFeedTab.ts

@@ -3,7 +3,7 @@ import {
   DEFAULT_FEED_TAB,
   FEED_TABS,
   type FeedTab,
-} from "../config/feedTabs.ts";
+} from "../../config/feedTabs.ts";
 
 const STORAGE_KEY = "default-feed-tab";
 

src/hooks/form/useApiForm.ts

@@ -7,8 +7,7 @@ import {
   type UseFormReturn,
 } from "react-hook-form";
 
-import { friendlyFetchError } from "../../utils/apiError.ts";
-import { parseAPIResponse } from "../../model.ts";
+import { friendlyFetchError } from "../../utils/shared/api.ts";
 
 export interface UseApiFormReturn<T extends FieldValues>
   extends UseFormReturn<T> {
@@ -16,7 +15,7 @@ export interface UseApiFormReturn<T extends FieldValues>
    * Wraps an async submit handler with the shared API-form lifecycle: clears the
    * previous root error, runs the handler while RHF keeps `formState.isSubmitting`
    * true, and on a thrown error surfaces a single root error via
-   * `friendlyFetchError`. Pair it with {@link expectOk} so API-level failures and
+   * `friendlyFetchError`. Pair it with `expectOk` so API-level failures and
    * network failures both become root errors through one code path. Returns the
    * `onSubmit` handler to spread onto `<form onSubmit={...}>`.
    */
@@ -46,15 +45,3 @@ export function useApiForm<T extends FieldValues>(
 
   return { ...form, submit };
 }
-
-/**
- * Reads a fetch `Response` through the standard API envelope and returns the
- * payload, throwing the server's message on `success: false`. A thrown error
- * here (or a network `TypeError` from the `fetch` itself) is caught by
- * {@link useApiForm}'s `submit` and rendered as the form's root error.
- */
-export async function expectOk<T>(res: Response): Promise<T> {
-  const body = parseAPIResponse<T>(await res.json());
-  if (!body.success) throw new Error(body.error.message);
-  return body.data;
-}

src/hooks/player/usePlayRichContent.ts

@@ -1,7 +1,10 @@
 import { useCallback, useContext, useState } from "react";
-import { PlayerContext, type PlayerItem } from "../contexts/PlayerContext.ts";
-import { BANDCAMP_PLAYER } from "../config/playerMode.ts";
-import { resolveBandcampQueue } from "../utils/bandcamp.ts";
+import {
+  PlayerContext,
+  type PlayerItem,
+} from "../../contexts/player/PlayerContext.ts";
+import { BANDCAMP_PLAYER } from "../../config/playerMode.ts";
+import { resolveBandcampQueue } from "../../utils/player/bandcamp.ts";
 
 export interface PlayableRichContent {
   type: string;

src/hooks/player/useYouTubePlaylist.ts

@@ -10,7 +10,7 @@ import {
   embedListId,
   fetchPlaylistTracks,
   type YouTubeTrack,
-} from "../utils/youtube.ts";
+} from "../../utils/player/youtube.ts";
 
 /**
  * Tracklist and transport for a YouTube playlist embed.

src/hooks/playlist/usePlaylistListSync.ts

@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef } from "react";
-import type { Playlist } from "../model.ts";
-import { useWS } from "./useWS.ts";
+import type { Playlist } from "../../model.ts";
+import { useWS } from "../ws/useWS.ts";
 
 interface PlaylistListSyncOptions {
   /** Keep private playlists visible (caller is the owner). */

src/hooks/shared/useSoundsEnabled.ts

@@ -1,5 +1,8 @@
 import { useCallback, useState } from "react";
-import { readSoundsEnabled, writeSoundsEnabled } from "../utils/sound.ts";
+import {
+  readSoundsEnabled,
+  writeSoundsEnabled,
+} from "../../utils/shared/sound.ts";
 
 /**
  * User preference for notification and chat sounds, persisted to localStorage