element-hq · ZacksBot · Apr 15, 2026 · Apr 21, 2026 · Apr 21, 2026 · Apr 22, 2026
@@ -127,6 +127,8 @@ components that don't need a view model.
 
 All components should have accompanying Storybook stories for documentation and visual testing. Stories are written in TypeScript using the [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf).
 
+Use shallow, browse-oriented story titles such as `RoomList/RoomListSearchView` or `TimelineBody/DecryptionFailureBodyView`. Do not mirror the full source path in the Storybook title.
+
 #### Story File Structure
 
 Place the story file next to the component with the `.stories.tsx` extension:
@@ -254,7 +256,7 @@ Example with Figma integration:
 
 ```tsx
 const meta = {
-    title: "Room List/RoomListSearchView",
+    title: "RoomList/RoomListSearchView",
     component: RoomListSearchViewWrapper,
     tags: ["autodocs"],
     args: {
@@ -277,7 +279,7 @@ The Figma design will appear in the "Design" tab in Storybook.
 
 For utility functions, helpers, and other non-UI exports, create documentation stories using TSX format with TypeDoc-generated markdown.
 
-`src/utils/humanize.stories.tsx`
+`src/core/utils/humanize.stories.tsx`
 
 ```tsx
 import React from "react";
@@ -287,7 +289,7 @@ import type { Meta } from "@storybook/react-vite";
 import humanizeTimeDoc from "../../typedoc/functions/humanizeTime.md?raw";
 
 const meta = {
-    title: "utils/humanize",
+    title: "Core/Humanize",
     parameters: {
         docs: {
             page: () => (

@@ -11,7 +11,7 @@ import { type Meta, type StoryObj } from "@storybook/react-vite";
 import { AvatarWithDetails } from "./AvatarWithDetails";
 
 const meta = {
-    title: "core/AvatarWithDetails",
+    title: "Core/AvatarWithDetails",
     component: AvatarWithDetails,
     tags: ["autodocs"],
     args: {

@@ -14,7 +14,7 @@ import { items, SimpleItemComponent } from "../story-mock";
 import { getContainerAccessibleProps, getItemAccessibleProps } from "../accessbility";
 
 const meta = {
-    title: "Utils/VirtualizedList/FlatVirtualizedList",
+    title: "Core/FlatVirtualizedList",
     component: FlatVirtualizedList<SimpleItemComponent, undefined>,
     parameters: {
         docs: {

@@ -17,7 +17,7 @@ import { getContainerAccessibleProps, getGroupHeaderAccessibleProps, getItemAcce
 const totalRows = groups.reduce((total, group) => total + 1 + group.items.length, 0);
 
 const meta = {
-    title: "Utils/VirtualizedList/GroupedVirtualizedList",
+    title: "Core/GroupedVirtualizedList",
     component: GroupedVirtualizedList<SimpleGroupHeader, SimpleItemComponent, undefined>,
     parameters: {
         docs: {

@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Pill } from "./Pill";
 
 const meta = {
-    title: "PillInput/Pill",
+    title: "Core/Pill",
     component: Pill,
     tags: ["autodocs"],
     args: {

@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PillInput } from "./PillInput";
 
 const meta = {
-    title: "PillInput/PillInput",
+    title: "Core/PillInput",
     component: PillInput,
     tags: ["autodocs"],
     args: {

@@ -14,7 +14,7 @@ import { RichItem } from "./RichItem";
 const currentTimestamp = new Date("2025-03-09T12:00:00Z").getTime();
 
 const meta = {
-    title: "RichList/RichItem",
+    title: "Core/RichItem",
     component: RichItem,
     tags: ["autodocs"],
     args: {

@@ -14,7 +14,7 @@ import { RichItem } from "../RichItem";
 const avatar = <div style={{ width: 32, height: 32, backgroundColor: "#ccc", borderRadius: "50%" }} />;
 
 const meta = {
-    title: "RichList/RichList",
+    title: "Core/RichList",
     component: RichList,
     tags: ["autodocs"],
     decorators: [

@@ -13,7 +13,7 @@ import formatBytesDoc from "../../../typedoc/functions/formatBytes.md?raw";
 import formatSecondsDoc from "../../../typedoc/functions/formatSeconds.md?raw";
 
 const meta = {
-    title: "utils/FormattingUtils",
+    title: "Core/FormattingUtils",
     parameters: {
         docs: {
             page: () => (

@@ -13,7 +13,7 @@ import { LinkedText } from "./LinkedText";
 import { LinkedTextContext } from "./LinkedTextContext";
 
 const meta = {
-    title: "Utils/LinkedText",
+    title: "Core/LinkedText",
     component: LinkedText,
     decorators: [
         (Story, { args }) => (

@@ -12,7 +12,7 @@ import type { Meta } from "@storybook/react-vite";
 import humanizeTimeDoc from "../../../typedoc/functions/humanizeTime.md?raw";
 
 const meta = {
-    title: "utils/humanize",
+    title: "Core/Humanize",
     parameters: {
         docs: {
             page: () => (

@@ -18,7 +18,7 @@ import generateLinkedTextOptions from "../../../typedoc/functions/generateLinked
 import LinkedTextOptions from "../../../typedoc/interfaces/LinkedTextOptions.md?raw";
 
 const meta = {
-    title: "utils/linkify",
+    title: "Core/Linkify",
     parameters: {
         docs: {
             page: () => (

@@ -16,7 +16,7 @@ import percentageWithinDoc from "../../../typedoc/functions/percentageWithin.md?
 import sumDoc from "../../../typedoc/functions/sum.md?raw";
 
 const meta = {
-    title: "utils/numbers",
+    title: "Core/Numbers",
     parameters: {
         docs: {
             page: () => (

@@ -14,7 +14,7 @@ import { LinkPreview } from "./LinkPreview";
 import { LinkedTextContext } from "../../../core/utils/LinkedText";
 
 export default {
-    title: "Event/UrlPreviewGroupView/LinkPreview",
+    title: "EventTiles/LinkPreview",
     component: LinkPreview,
     tags: ["autodocs"],
     args: {

@@ -43,7 +43,7 @@ const UrlPreviewGroupViewWrapperImpl = ({
 const UrlPreviewGroupViewWrapper = withViewDocs(UrlPreviewGroupViewWrapperImpl, UrlPreviewGroupView);
 
 export default {
-    title: "Event/UrlPreviewGroupView",
+    title: "EventTiles/UrlPreviewGroupView",
     component: UrlPreviewGroupViewWrapper,
     tags: ["autodocs"],
     args: {

@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { RoomListToast } from "./RoomListToast";
 
 const meta = {
-    title: "Room List/RoomListView/RoomListToast",
+    title: "Room List/RoomListToast",
     component: RoomListToast,
     tags: ["autodocs"],
     args: {

@@ -13,7 +13,7 @@ import { RoomListItemAccessibilityWrapper } from "./RoomListItemAccessibilityWra
 import { createMockRoomItemViewModel, renderAvatar } from "../../story-mocks";
 
 const meta = {
-    title: "Room List/RoomListItemAccessibiltyWrapper",
+    title: "Room List/RoomListItemAccessibilityWrapper",
     component: RoomListItemAccessibilityWrapper,
     tags: ["autodocs"],
     args: {

@@ -37,7 +37,7 @@ const RoomStatusBarViewWrapperImpl = ({
 const RoomStatusBarViewWrapper = withViewDocs(RoomStatusBarViewWrapperImpl, RoomStatusBarView);
 
 const meta = {
-    title: "room/RoomStatusBarView",
+    title: "Room/RoomStatusBarView",
     component: RoomStatusBarViewWrapper,
     tags: ["autodocs"],
     argTypes: {},

@@ -38,7 +38,7 @@ const WidgetPipViewWrapperImpl = ({
 const WidgetPipViewWrapper = withViewDocs(WidgetPipViewWrapperImpl, WidgetPipView);
 
 export default {
-    title: "room/WidgetPipView",
+    title: "Room/WidgetPipView",
     component: WidgetPipViewWrapper,
     tags: ["autodocs"],
     argTypes: {},

@@ -13,7 +13,7 @@ import { Button } from "@vector-im/compound-web";
 import { Banner } from "./Banner";
 
 const meta = {
-    title: "room/Banner",
+    title: "Room/Banner",
     component: Banner,
     tags: ["autodocs"],
     args: {

@@ -45,7 +45,7 @@ const WidgetContextMenuViewWrapperImpl = ({
 const WidgetContextMenuViewWrapper = withViewDocs(WidgetContextMenuViewWrapperImpl, WidgetContextMenuView);
 
 const meta = {
-    title: "RightPanel/WidgetContextMenuView",
+    title: "Room/WidgetContextMenuView",
     component: WidgetContextMenuViewWrapper,
     tags: ["autodocs"],
     args: {

@@ -29,7 +29,7 @@ const DateSeparatorViewWrapperImpl = ({
 const DateSeparatorViewWrapper = withViewDocs(DateSeparatorViewWrapperImpl, DateSeparatorView);
 
 const meta = {
-    title: "Timeline/DateSeparatorView",
+    title: "Timeline/Timeline Meta/DateSeparatorView",
     component: DateSeparatorViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -32,7 +32,7 @@ const ReadMarkerWrapper = ({
 };
 
 const meta = {
-    title: "Timeline/ReadMarker",
+    title: "Timeline/Timeline Meta/ReadMarker",
     component: ReadMarkerWrapper,
     tags: ["autodocs"],
     args: {

@@ -12,7 +12,7 @@ import TimelineSeparator from "./TimelineSeparator";
 import styles from "./TimelineSeparator.module.css";
 
 const meta = {
-    title: "MessageBody/TimelineSeparator",
+    title: "Timeline/Timeline Meta/TimelineSeparator",
     component: TimelineSeparator,
     tags: ["autodocs"],
     args: {

@@ -30,7 +30,7 @@ const DisambiguatedProfileViewWrapperImpl = ({
 const DisambiguatedProfileViewWrapper = withViewDocs(DisambiguatedProfileViewWrapperImpl, DisambiguatedProfileView);
 
 const meta = {
-    title: "Profile/DisambiguatedProfile",
+    title: "Timeline/Timeline Event/DisambiguatedProfile",
     component: DisambiguatedProfileViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -25,7 +25,7 @@ const EncryptionEventViewWrapperImpl = ({
 const EncryptionEventViewWrapper = withViewDocs(EncryptionEventViewWrapperImpl, EncryptionEventView);
 
 const meta = {
-    title: "Event/EncryptionEvent",
+    title: "Timeline/Timeline Event/EncryptionEventView",
     component: EncryptionEventViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -12,7 +12,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { EventTileBubble } from "./EventTileBubble";
 
 const meta = {
-    title: "Event/EventTileBubble",
+    title: "Timeline/Timeline Event/EventTileBubble",
     component: EventTileBubble,
     tags: ["autodocs"],
     args: {

@@ -9,7 +9,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { PinnedMessageBadge } from "./PinnedMessageBadge";
 
 const meta = {
-    title: "Message body/PinnedMessageBadge",
+    title: "Timeline/Timeline Event/PinnedMessageBadge",
     component: PinnedMessageBadge,
     args: {
         "aria-describedby": "event-tile-description",

@@ -11,7 +11,7 @@ import { TextualEventView as TextualEventComponent } from "./TextualEventView";
 import { MockViewModel } from "../../../../../core/viewmodel/MockViewModel";
 
 const meta = {
-    title: "Event/TextualEvent",
+    title: "Timeline/Timeline Event/TextualEventView",
     component: TextualEventComponent,
     tags: ["autodocs"],
     args: {

@@ -34,7 +34,7 @@ const TileErrorViewWrapperImpl = ({
 const TileErrorViewWrapper = withViewDocs(TileErrorViewWrapperImpl, TileErrorView);
 
 const meta = {
-    title: "MessageBody/TileErrorView",
+    title: "Timeline/Timeline Event/TileErrorView",
     component: TileErrorViewWrapper,
     tags: ["autodocs"],
     decorators: [

@@ -58,7 +58,7 @@ const ActionBarViewWrapperImpl = ({ ...snapshotAndActions }: ActionBarProps): JS
 const ActionBarViewWrapper = withViewDocs(ActionBarViewWrapperImpl, ActionBarView);
 
 const meta = {
-    title: "Room/Timeline/EventTile/Actions/ActionBarView",
+    title: "Timeline/Timeline Action/ActionBarView",
     component: ActionBarViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -30,7 +30,7 @@ const AudioPlayerViewWrapperImpl = ({
 const AudioPlayerViewWrapper = withViewDocs(AudioPlayerViewWrapperImpl, AudioPlayerView);
 
 const meta = {
-    title: "Audio/AudioPlayerView",
+    title: "Timeline/Timeline Body/AudioPlayerView",
     component: AudioPlayerViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -29,7 +29,7 @@ const DecryptionFailureBodyViewWrapperImpl = ({
 const DecryptionFailureBodyViewWrapper = withViewDocs(DecryptionFailureBodyViewWrapperImpl, DecryptionFailureBodyView);
 
 const meta = {
-    title: "MessageBody/DecryptionFailureBodyView",
+    title: "Timeline/Timeline Body/DecryptionFailureBodyView",
     component: DecryptionFailureBodyViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -24,7 +24,7 @@ const EventContentBodyWrapperImpl = ({ as, ...snapshot }: EventContentBodyStoryP
 const EventContentBodyWrapper = withViewDocs(EventContentBodyWrapperImpl, EventContentBodyView);
 
 const meta = {
-    title: "MessageBody/EventContentBody",
+    title: "Timeline/Timeline Body/EventContentBody",
     component: EventContentBodyWrapper,
     tags: ["autodocs"],
     args: {

@@ -42,7 +42,7 @@ const FileBodyViewWrapperImpl = ({
 const FileBodyViewWrapper = withViewDocs(FileBodyViewWrapperImpl, FileBodyView);
 
 const meta = {
-    title: "MessageBody/FileBodyView",
+    title: "Timeline/Timeline Body/FileBodyView",
     component: FileBodyViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -62,7 +62,7 @@ const ImageBodyViewWrapperImpl = ({
 const ImageBodyViewWrapper = withViewDocs(ImageBodyViewWrapperImpl, ImageBodyView);
 
 const meta = {
-    title: "MessageBody/ImageBodyView",
+    title: "Timeline/Timeline Body/ImageBodyView",
     component: ImageBodyViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -45,7 +45,7 @@ const VideoBodyViewWrapperImpl = ({
 const VideoBodyViewWrapper = withViewDocs(VideoBodyViewWrapperImpl, VideoBodyView);
 
 const meta = {
-    title: "MessageBody/VideoBodyView",
+    title: "Timeline/Timeline Body/VideoBodyView",
     component: VideoBodyViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -9,7 +9,7 @@ import { MediaBody } from "./MediaBody";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 const meta = {
-    title: "MessageBody/MediaBody",
+    title: "Timeline/Timeline Body/MediaBody",
     component: MediaBody,
     tags: ["autodocs"],
     args: {

@@ -27,7 +27,7 @@ const RedactedBodyViewWrapperImpl = ({
 const RedactedBodyViewWrapper = withViewDocs(RedactedBodyViewWrapperImpl, RedactedBodyView);
 
 const meta = {
-    title: "MessageBody/RedactedBodyView",
+    title: "Timeline/Timeline Body/RedactedBodyView",
     component: RedactedBodyViewWrapper,
     tags: ["autodocs"],
     args: {

@@ -76,7 +76,7 @@ const TEXTUAL_BODY_VIEW_BODY_WRAPPER_KIND_OPTIONS = [
 ];
 
 const meta = {
-    title: "MessageBody/TextualBody",
+    title: "Timeline/Timeline Body/TextualBody",
     component: TextualBodyViewWrapper,
     tags: ["autodocs"],
     argTypes: {

@@ -81,7 +81,7 @@ const ReactionsRowViewWrapperImpl = ({
 const ReactionsRowViewWrapper = withViewDocs(ReactionsRowViewWrapperImpl, ReactionsRowView);
 
 const meta = {
-    title: "MessageBody/ReactionsRow",
+    title: "Timeline/Timeline Reaction/ReactionsRow",
     component: ReactionsRowViewWrapper,
     tags: ["autodocs"],
     args: {