diff --git a/docs/pages/docs/collaboration/comments.mdx b/docs/pages/docs/collaboration/comments.mdx
index 38de97cf9d..803611e3df 100644
--- a/docs/pages/docs/collaboration/comments.mdx
+++ b/docs/pages/docs/collaboration/comments.mdx
@@ -4,7 +4,7 @@ description: Learn how to enable comments in your BlockNote editor
 imageTitle: Comments
 ---
 
-import { Example } from "@/components/example";
+import {Example} from "@/components/example";
 
 # Comments
 
@@ -33,7 +33,7 @@ const editor = useCreateBlockNote({
 
 **Demo**
 
-<Example name="collaboration/comments" />
+<Example name="collaboration/comments"/>
 
 ## ThreadStores
 
@@ -63,7 +63,10 @@ The `RESTYjsThreadStore` combines Yjs storage with a REST API backend, providing
 In this implementation, data is written to the Yjs document via a REST API which can handle access control. Data is still retrieved from the Yjs document directly (after it's been updated by the REST API), this way all comment information automatically syncs between clients using the existing collaboration provider.
 
 ```tsx
-import { RESTYjsThreadStore, DefaultThreadStoreAuth } from "@blocknote/core/comments";
+import {
+  RESTYjsThreadStore,
+  DefaultThreadStoreAuth,
+} from "@blocknote/core/comments";
 
 const threadStore = new RESTYjsThreadStore(
   "https://api.example.com/comments", // Base URL for the REST API
@@ -84,7 +87,10 @@ _Note: Because writes are executed via a REST API, the `RESTYjsThreadStore` is n
 The `TiptapThreadStore` integrates with Tiptap's collaboration provider for comment management. This implementation is designed specifically for use with Tiptap's collaborative editing features.
 
 ```tsx
-import { TiptapThreadStore, DefaultThreadStoreAuth } from "@blocknote/core/comments";
+import {
+  TiptapThreadStore,
+  DefaultThreadStoreAuth,
+} from "@blocknote/core/comments";
 import { TiptapCollabProvider } from "@hocuspocus/provider";
 
 // Create a TiptapCollabProvider (you probably have this already)
@@ -130,9 +136,27 @@ async function myResolveUsers(userIds: string[]): Promise<User[]> {
   // fetch user information from your database / backend
   // and return an array of User objects
 
-  return await callYourBackend(userIds); //
+  return await callYourBackend(userIds);
 
   // Return a list of users
   return users;
 }
 ```
+
+## Sidebar View
+
+BlockNote also offers a different way of viewing and interacting with comments, via a sidebar instead of floating in the editor, using the `ThreadsSidebar` component:
+
+<Example name="collaboration/comments-with-sidebar"/>
+
+The only requirement for `ThreadsSidebar` is that it should be placed somewhere within your `BlockNoteView`, other than that you can position and style it however you want.
+
+`ThreadsSidebar` also takes 2 props:
+
+**`filter`**: Filter the comments in the sidebar. Can pass `"open"`, `"resolved"`, or `"all"`, to only show open, resolved, or all comments. Defaults to `"all"`.
+
+**`sort`**: Sort the comments in the sidebar. Can pass `"position"`, `"recent-activity"`, or `"oldest"`. Sorting by `"recent-activity"` uses the most recently added comment to sort threads, while `"oldest"` uses the thread creation date. Sorting by `"position"` puts comments in the same order as their reference text in the editor. Defaults to `"position"`.
+
+**`maxCommentsBeforeCollapse`**: The maximum number of comments that can be in a thread before the replies get collapsed. Defaults to 5.
+
+See [here](https://playground.blocknotejs.org/collaboration/comments-with-sidebar?hideMenu=true) for a standalone example of the `ThreadsSidebar` component.
diff --git a/examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx b/examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx
index 92c4b48073..aa8e5b9f92 100644
--- a/examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx
+++ b/examples/03-ui-components/02-formatting-toolbar-buttons/App.tsx
@@ -16,7 +16,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { BlueButton } from "./BlueButton";
+import { BlueButton } from "./BlueButton.js";
 
 export default function App() {
   // Creates a new editor instance.
diff --git a/examples/03-ui-components/04-side-menu-buttons/App.tsx b/examples/03-ui-components/04-side-menu-buttons/App.tsx
index 8661c08baa..445b2daba9 100644
--- a/examples/03-ui-components/04-side-menu-buttons/App.tsx
+++ b/examples/03-ui-components/04-side-menu-buttons/App.tsx
@@ -8,7 +8,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { RemoveBlockButton } from "./RemoveBlockButton";
+import { RemoveBlockButton } from "./RemoveBlockButton.js";
 
 export default function App() {
   // Creates a new editor instance.
diff --git a/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx b/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx
index 80733a2c9b..a923e77c64 100644
--- a/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx
+++ b/examples/03-ui-components/05-side-menu-drag-handle-items/App.tsx
@@ -10,7 +10,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { ResetBlockTypeItem } from "./ResetBlockTypeItem";
+import { ResetBlockTypeItem } from "./ResetBlockTypeItem.js";
 
 export default function App() {
   // Creates a new editor instance.
diff --git a/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx b/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx
index c0d9f8d05f..49749a8c49 100644
--- a/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx
+++ b/examples/03-ui-components/10-suggestion-menus-grid-mentions/App.tsx
@@ -12,7 +12,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { Mention } from "./Mention";
+import { Mention } from "./Mention.js";
 
 // Our schema with inline content specs, which contain the configs and
 // implementations for inline content  that we want our editor to use.
diff --git a/examples/03-ui-components/11-uppy-file-panel/App.tsx b/examples/03-ui-components/11-uppy-file-panel/App.tsx
index d94aaa2def..00962f1b1f 100644
--- a/examples/03-ui-components/11-uppy-file-panel/App.tsx
+++ b/examples/03-ui-components/11-uppy-file-panel/App.tsx
@@ -9,8 +9,8 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { FileReplaceButton } from "./FileReplaceButton";
-import { uploadFile, UppyFilePanel } from "./UppyFilePanel";
+import { FileReplaceButton } from "./FileReplaceButton.js";
+import { uploadFile, UppyFilePanel } from "./UppyFilePanel.js";
 
 export default function App() {
   // Creates a new editor instance.
diff --git a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx b/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx
index d1f1444469..a3f48d96b6 100644
--- a/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx
+++ b/examples/03-ui-components/11-uppy-file-panel/FileReplaceButton.tsx
@@ -13,7 +13,8 @@ import {
 import { useEffect, useState } from "react";
 
 import { RiImageEditFill } from "react-icons/ri";
-import { UppyFilePanel } from "./UppyFilePanel";
+
+import { UppyFilePanel } from "./UppyFilePanel.js";
 
 // Copied with minor changes from:
 // https://github.com/TypeCellOS/BlockNote/blob/main/packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx
diff --git a/examples/03-ui-components/13-custom-ui/App.tsx b/examples/03-ui-components/13-custom-ui/App.tsx
index f2892ae0d4..29e5e2ded8 100644
--- a/examples/03-ui-components/13-custom-ui/App.tsx
+++ b/examples/03-ui-components/13-custom-ui/App.tsx
@@ -11,10 +11,10 @@ import "@blocknote/react/style.css";
 import { createTheme, ThemeProvider, useMediaQuery } from "@mui/material";
 import { useMemo } from "react";
 
-import { schema } from "./schema";
-import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar";
-import { CustomMUISideMenu } from "./MUISideMenu";
-import { MUISuggestionMenu } from "./MUISuggestionMenu";
+import { schema } from "./schema.js";
+import { CustomMUIFormattingToolbar } from "./MUIFormattingToolbar.js";
+import { CustomMUISideMenu } from "./MUISideMenu.js";
+import { MUISuggestionMenu } from "./MUISuggestionMenu.js";
 
 import "./style.css";
 
diff --git a/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx b/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx
index 4c464ebd56..7c4cabc3d3 100644
--- a/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx
+++ b/examples/03-ui-components/13-custom-ui/MUIFormattingToolbar.tsx
@@ -42,7 +42,7 @@ import {
   ReactNode,
 } from "react";
 
-import { TextBlockSchema } from "./schema";
+import { TextBlockSchema } from "./schema.js";
 
 // This replaces the generic Mantine `ToolbarSelect` component with a simplified
 // MUI version:
diff --git a/examples/03-ui-components/13-custom-ui/MUISideMenu.tsx b/examples/03-ui-components/13-custom-ui/MUISideMenu.tsx
index 60b53e48ba..251b409d58 100644
--- a/examples/03-ui-components/13-custom-ui/MUISideMenu.tsx
+++ b/examples/03-ui-components/13-custom-ui/MUISideMenu.tsx
@@ -11,7 +11,7 @@ import {
 } from "@mui/material";
 import { MouseEvent, ReactNode, useCallback, useMemo, useState } from "react";
 
-import { TextBlockSchema } from "./schema";
+import { TextBlockSchema } from "./schema.js";
 
 // This replaces the default `RemoveBlockItem` component with a simplified
 // MUI version:
diff --git a/examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx b/examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx
index d677bfe155..9b8aed593c 100644
--- a/examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx
+++ b/examples/03-ui-components/13-custom-ui/MUISuggestionMenu.tsx
@@ -16,7 +16,7 @@ import {
 } from "@mui/material";
 import { useEffect, useMemo, useRef } from "react";
 
-import { TextBlockSchema } from "./schema";
+import { TextBlockSchema } from "./schema.js";
 
 // If you want to change the items in a Suggestion Menu, like the Slash Menu,
 // you don't need to modify any of the components in this file. Instead, you
diff --git a/examples/03-ui-components/link-toolbar-buttons/App.tsx b/examples/03-ui-components/link-toolbar-buttons/App.tsx
index 23e9902f85..27a3fdb1e8 100644
--- a/examples/03-ui-components/link-toolbar-buttons/App.tsx
+++ b/examples/03-ui-components/link-toolbar-buttons/App.tsx
@@ -7,7 +7,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { AlertButton } from "./AlertButton";
+import { AlertButton } from "./AlertButton.js";
 
 export default function App() {
   // Creates a new editor instance.
diff --git a/examples/06-custom-schema/01-alert-block/App.tsx b/examples/06-custom-schema/01-alert-block/App.tsx
index 6d58d740ed..4582849798 100644
--- a/examples/06-custom-schema/01-alert-block/App.tsx
+++ b/examples/06-custom-schema/01-alert-block/App.tsx
@@ -14,7 +14,7 @@ import {
 } from "@blocknote/react";
 
 import { RiAlertFill } from "react-icons/ri";
-import { Alert } from "./Alert";
+import { Alert } from "./Alert.js";
 
 // Our schema with block specs, which contain the configs and implementations for blocks
 // that we want our editor to use.
diff --git a/examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx b/examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx
index c1fec94a4f..16d93cdeb9 100644
--- a/examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx
+++ b/examples/06-custom-schema/02-suggestion-menus-mentions/App.tsx
@@ -12,7 +12,7 @@ import {
   useCreateBlockNote,
 } from "@blocknote/react";
 
-import { Mention } from "./Mention";
+import { Mention } from "./Mention.js";
 
 // Our schema with inline content specs, which contain the configs and
 // implementations for inline content  that we want our editor to use.
diff --git a/examples/06-custom-schema/03-font-style/App.tsx b/examples/06-custom-schema/03-font-style/App.tsx
index 4cae9935b1..ecd08a6846 100644
--- a/examples/06-custom-schema/03-font-style/App.tsx
+++ b/examples/06-custom-schema/03-font-style/App.tsx
@@ -21,7 +21,7 @@ import {
 
 import { RiText } from "react-icons/ri";
 
-import { Font } from "./Font";
+import { Font } from "./Font.js";
 
 // Our schema with style specs, which contain the configs and implementations for styles
 // that we want our editor to use.
diff --git a/examples/06-custom-schema/04-pdf-file-block/App.tsx b/examples/06-custom-schema/04-pdf-file-block/App.tsx
index 1c3129e3bc..327ff9fc8b 100644
--- a/examples/06-custom-schema/04-pdf-file-block/App.tsx
+++ b/examples/06-custom-schema/04-pdf-file-block/App.tsx
@@ -15,7 +15,7 @@ import {
 
 import { RiFilePdfFill } from "react-icons/ri";
 
-import { PDF } from "./PDF";
+import { PDF } from "./PDF.js";
 
 // Our schema with block specs, which contain the configs and implementations for blocks
 // that we want our editor to use.
diff --git a/examples/07-collaboration/04-comments/App.tsx b/examples/07-collaboration/04-comments/App.tsx
index 6f8b921ea5..665d243a87 100644
--- a/examples/07-collaboration/04-comments/App.tsx
+++ b/examples/07-collaboration/04-comments/App.tsx
@@ -7,11 +7,14 @@ import {
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
 import { useCreateBlockNote } from "@blocknote/react";
-import { MantineProvider, Select } from "@mantine/core";
 import { YDocProvider, useYDoc, useYjsProvider } from "@y-sweet/react";
 import { useMemo, useState } from "react";
+
+import { SettingsSelect } from "./SettingsSelect.js";
 import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata.js";
 
+import "./style.css";
+
 // The resolveUsers function fetches information about your users
 // (e.g. their name, avatar, etc.). Usually, you'd fetch this from your
 // own database or user management system.
@@ -27,21 +30,20 @@ async function resolveUsers(userIds: string[]) {
 // (but of course, you also use other collaboration providers
 // see the docs for more information)
 export default function App() {
-  const docId = "my-blocknote-document-with-comments";
+  const docId = "my-blocknote-document-with-comments-1";
 
   return (
-    <MantineProvider>
-      <YDocProvider
-        docId={docId}
-        authEndpoint="https://demos.y-sweet.dev/api/auth">
-        <Document />
-      </YDocProvider>
-    </MantineProvider>
+    <YDocProvider
+      docId={docId}
+      authEndpoint="https://demos.y-sweet.dev/api/auth">
+      <Document />
+    </YDocProvider>
   );
 }
 
 function Document() {
-  const [user, setUser] = useState<MyUserType>(HARDCODED_USERS[0]);
+  const [activeUser, setActiveUser] = useState<MyUserType>(HARDCODED_USERS[0]);
+
   const provider = useYjsProvider();
 
   // take the Y.Doc collaborative document from Y-Sweet
@@ -57,16 +59,16 @@ function Document() {
     //   document: doc,
     // });
     // return new TiptapThreadStore(
-    //   user.id,
+    //   activeUser.id,
     //   provider,
-    //   new DefaultThreadStoreAuth(user.id, user.role)
+    //   new DefaultThreadStoreAuth(activeUser.id, activeUser.role)
     // );
     return new YjsThreadStore(
-      user.id,
+      activeUser.id,
       doc.getMap("threads"),
-      new DefaultThreadStoreAuth(user.id, user.role)
+      new DefaultThreadStoreAuth(activeUser.id, activeUser.role)
     );
-  }, [doc, user]);
+  }, [doc, activeUser]);
 
   // setup the editor with comments and collaboration
   const editor = useCreateBlockNote(
@@ -78,34 +80,32 @@ function Document() {
       collaboration: {
         provider,
         fragment: doc.getXmlFragment("blocknote"),
-        user: { color: getRandomColor(), name: user.username },
+        user: { color: getRandomColor(), name: activeUser.username },
       },
     },
-    [user, threadStore]
+    [activeUser, threadStore]
   );
 
   return (
-    <div>
-      {/* This is a simple user selector to switch between users, for demo purposes */}
-      <Select
-        style={{ maxWidth: "300px" }}
-        required
-        label="Active user:"
-        placeholder="Pick value"
-        data={HARDCODED_USERS.map((user) => ({
-          value: user.id,
-          label: user.username + " (" + user.role + ")",
-        }))}
-        onChange={(value) => {
-          if (!value) {
-            return;
-          }
-          setUser(HARDCODED_USERS.find((user) => user.id === value)!);
-        }}
-        value={user.id}
-      />
-      {/* render the actual editor */}
-      <BlockNoteView editor={editor} editable={user.role === "editor"} />
-    </div>
+    <BlockNoteView
+      className={"comments-main-container"}
+      editor={editor}
+      editable={activeUser.role === "editor"}>
+      {/* We place user settings select within `BlockNoteView` as it uses
+      BlockNote UI components and needs the context for them. */}
+      <div className={"settings"}>
+        <SettingsSelect
+          label={"User"}
+          items={HARDCODED_USERS.map((user) => ({
+            text: `${user.username} (${
+              user.role === "editor" ? "Editor" : "Commenter"
+            })`,
+            icon: null,
+            onClick: () => setActiveUser(user),
+            isSelected: user.id === activeUser.id,
+          }))}
+        />
+      </div>
+    </BlockNoteView>
   );
 }
diff --git a/examples/07-collaboration/04-comments/README.md b/examples/07-collaboration/04-comments/README.md
index e94dcd5a37..a168d10264 100644
--- a/examples/07-collaboration/04-comments/README.md
+++ b/examples/07-collaboration/04-comments/README.md
@@ -1,13 +1,13 @@
 # Comments & Threads
 
-In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments.
+In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text.
 
 **Try it out:** Click the "Add comment" button in the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) to add a comment!
 
 **Relevant Docs:**
 
-- [Editor Setup](/docs/editor-basics/setup)
+- [Comments](/docs/collaboration/comments)
 - [Real-time collaboration](/docs/collaboration/real-time-collaboration)
 - [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)
-- [Comments](/docs/collaboration/comments)
+- [Editor Setup](/docs/editor-basics/setup)
 
diff --git a/examples/07-collaboration/04-comments/SettingsSelect.tsx b/examples/07-collaboration/04-comments/SettingsSelect.tsx
new file mode 100644
index 0000000000..0dfc79dc3f
--- /dev/null
+++ b/examples/07-collaboration/04-comments/SettingsSelect.tsx
@@ -0,0 +1,24 @@
+import { ComponentProps, useComponentsContext } from "@blocknote/react";
+
+// This component is used to display a selection dropdown with a label. By using
+// the useComponentsContext hook, we can create it out of existing components
+// within the same UI library that `BlockNoteView` uses (Mantine, Ariakit, or
+// ShadCN), to match the design of the editor.
+export const SettingsSelect = (props: {
+  label: string;
+  items: ComponentProps["FormattingToolbar"]["Select"]["items"];
+}) => {
+  const Components = useComponentsContext()!;
+
+  return (
+    <div className={"settings-select"}>
+      <Components.Generic.Toolbar.Root className={"bn-toolbar"}>
+        <h2>{props.label + ":"}</h2>
+        <Components.Generic.Toolbar.Select
+          className={"bn-select"}
+          items={props.items}
+        />
+      </Components.Generic.Toolbar.Root>
+    </div>
+  );
+};
diff --git a/examples/07-collaboration/04-comments/style.css b/examples/07-collaboration/04-comments/style.css
new file mode 100644
index 0000000000..4393d32843
--- /dev/null
+++ b/examples/07-collaboration/04-comments/style.css
@@ -0,0 +1,42 @@
+.comments-main-container {
+  align-items: center;
+  background-color: var(--bn-colors-disabled-background);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 10px;
+  height: 100%;
+  max-width: none;
+  padding: 10px;
+  width: 100%;
+}
+
+.comments-main-container .bn-editor {
+  max-height: 100%;
+  max-width: 700px;
+  overflow: auto;
+  width: 100%;
+}
+
+.comments-main-container .settings {
+  display: flex;
+  max-width: 700px;
+  width: 100%;
+}
+
+.comments-main-container .settings-select {
+  display: flex;
+  gap: 10px;
+}
+
+.comments-main-container .settings-select .bn-toolbar {
+  align-items: center;
+  box-shadow: none;
+}
+
+.comments-main-container .settings-select h2 {
+  color: var(--bn-colors-menu-text);
+  margin: 0;
+  font-size: 12px;
+  line-height: 12px;
+  padding-left: 14px;
+}
\ No newline at end of file
diff --git a/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json b/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json
new file mode 100644
index 0000000000..5a36ea6c4b
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/.bnexample.json
@@ -0,0 +1,14 @@
+{
+  "playground": true,
+  "docs": true,
+  "author": "matthewlipski",
+  "tags": [
+    "Advanced",
+    "Comments",
+    "Collaboration"
+  ],
+  "dependencies": {
+    "@y-sweet/react": "^0.6.3",
+    "@mantine/core": "^7.10.1"
+  }
+}
diff --git a/examples/07-collaboration/05-comments-with-sidebar/App.tsx b/examples/07-collaboration/05-comments-with-sidebar/App.tsx
new file mode 100644
index 0000000000..7a09a86434
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/App.tsx
@@ -0,0 +1,202 @@
+"use client";
+
+import {
+  DefaultThreadStoreAuth,
+  YjsThreadStore,
+} from "@blocknote/core/comments";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import {
+  BlockNoteViewEditor,
+  FloatingComposerController,
+  ThreadsSidebar,
+  useCreateBlockNote,
+} from "@blocknote/react";
+import { YDocProvider, useYDoc, useYjsProvider } from "@y-sweet/react";
+import { useMemo, useState } from "react";
+
+import { SettingsSelect } from "./SettingsSelect.js";
+import { HARDCODED_USERS, MyUserType, getRandomColor } from "./userdata.js";
+
+import "./style.css";
+
+// The resolveUsers function fetches information about your users
+// (e.g. their name, avatar, etc.). Usually, you'd fetch this from your
+// own database or user management system.
+// Here, we just return the hardcoded users (from userdata.ts)
+async function resolveUsers(userIds: string[]) {
+  // fake a (slow) network request
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  return HARDCODED_USERS.filter((user) => userIds.includes(user.id));
+}
+
+// This follows the Y-Sweet example to setup a collabotive editor
+// (but of course, you also use other collaboration providers
+// see the docs for more information)
+export default function App() {
+  const docId = "my-blocknote-document-with-comments-2";
+
+  return (
+    <YDocProvider
+      docId={docId}
+      authEndpoint="https://demos.y-sweet.dev/api/auth">
+      <Document />
+    </YDocProvider>
+  );
+}
+
+function Document() {
+  const [activeUser, setActiveUser] = useState<MyUserType>(HARDCODED_USERS[0]);
+  const [commentFilter, setCommentFilter] = useState<
+    "open" | "resolved" | "all"
+  >("open");
+  const [commentSort, setCommentSort] = useState<
+    "position" | "recent-activity" | "oldest"
+  >("position");
+
+  const provider = useYjsProvider();
+
+  // take the Y.Doc collaborative document from Y-Sweet
+  const doc = useYDoc();
+
+  // setup the thread store which stores / and syncs thread / comment data
+  const threadStore = useMemo(() => {
+    // (alternative, use TiptapCollabProvider)
+    // const provider = new TiptapCollabProvider({
+    //   name: "test",
+    //   baseUrl: "https://collab.yourdomain.com",
+    //   appId: "test",
+    //   document: doc,
+    // });
+    // return new TiptapThreadStore(
+    //   activeUser.id,
+    //   provider,
+    //   new DefaultThreadStoreAuth(activeUser.id, activeUser.role)
+    // );
+    return new YjsThreadStore(
+      activeUser.id,
+      doc.getMap("threads"),
+      new DefaultThreadStoreAuth(activeUser.id, activeUser.role)
+    );
+  }, [doc, activeUser]);
+
+  // setup the editor with comments and collaboration
+  const editor = useCreateBlockNote(
+    {
+      resolveUsers,
+      comments: {
+        threadStore,
+      },
+      collaboration: {
+        provider,
+        fragment: doc.getXmlFragment("blocknote"),
+        user: { color: getRandomColor(), name: activeUser.username },
+      },
+    },
+    [activeUser, threadStore]
+  );
+
+  return (
+    <BlockNoteView
+      className={"sidebar-comments-main-container"}
+      editor={editor}
+      editable={activeUser.role === "editor"}
+      // In other examples, `BlockNoteView` renders both editor element itself,
+      // and the container element which contains the necessary context for
+      // BlockNote UI components. However, in this example, we want more control
+      // over the rendering of the editor, so we set `renderEditor` to `false`.
+      // Now, `BlockNoteView` will only render the container element, and we can
+      // render the editor element anywhere we want using `BlockNoteEditorView`.
+      renderEditor={false}
+      // We also disable the default rendering of comments in the editor, as we
+      // want to render them in the `ThreadsSidebar` component instead.
+      comments={false}>
+      {/* We place the editor, the sidebar, and any settings selects within
+      `BlockNoteView` as they use BlockNote UI components and need the context
+      for them. */}
+      <div className={"editor-layout-wrapper"}>
+        <div className={"editor-section"}>
+          <h1>Editor</h1>
+          <div className={"settings"}>
+            <SettingsSelect
+              label={"User"}
+              items={HARDCODED_USERS.map((user) => ({
+                text: `${user.username} (${
+                  user.role === "editor" ? "Editor" : "Commenter"
+                })`,
+                icon: null,
+                onClick: () => {
+                  setActiveUser(user);
+                },
+                isSelected: user.id === activeUser.id,
+              }))}
+            />
+          </div>
+          {/* Because we set `renderEditor` to false, we can now manually place
+          `BlockNoteViewEditor` (the actual editor component) in its own
+          section below the user settings select. */}
+          <BlockNoteViewEditor />
+          {/* Since we disabled rendering of comments with `comments={false}`,
+          we need to re-add the floating composer, which is the UI element that
+          appears when creating new threads. */}
+          <FloatingComposerController />
+        </div>
+      </div>
+      {/* We also place the `ThreadsSidebar` component in its own section,
+      along with settings for filtering and sorting. */}
+      <div className={"threads-sidebar-section"}>
+        <h1>Comments</h1>
+        <div className={"settings"}>
+          <SettingsSelect
+            label={"Filter"}
+            items={[
+              {
+                text: "All",
+                icon: null,
+                onClick: () => setCommentFilter("all"),
+                isSelected: commentFilter === "all",
+              },
+              {
+                text: "Open",
+                icon: null,
+                onClick: () => setCommentFilter("open"),
+                isSelected: commentFilter === "open",
+              },
+              {
+                text: "Resolved",
+                icon: null,
+                onClick: () => setCommentFilter("resolved"),
+                isSelected: commentFilter === "resolved",
+              },
+            ]}
+          />
+          <SettingsSelect
+            label={"Sort"}
+            items={[
+              {
+                text: "Position",
+                icon: null,
+                onClick: () => setCommentSort("position"),
+                isSelected: commentSort === "position",
+              },
+              {
+                text: "Recent activity",
+                icon: null,
+                onClick: () => setCommentSort("recent-activity"),
+                isSelected: commentSort === "recent-activity",
+              },
+              {
+                text: "Oldest",
+                icon: null,
+                onClick: () => setCommentSort("oldest"),
+                isSelected: commentSort === "oldest",
+              },
+            ]}
+          />
+        </div>
+        <ThreadsSidebar filter={commentFilter} sort={commentSort} />
+      </div>
+    </BlockNoteView>
+  );
+}
diff --git a/examples/07-collaboration/05-comments-with-sidebar/README.md b/examples/07-collaboration/05-comments-with-sidebar/README.md
new file mode 100644
index 0000000000..c73c9f9bbd
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/README.md
@@ -0,0 +1,14 @@
+# Threads Sidebar
+
+In this example, you can add comments to the document while collaborating with others. You can also pick user accounts with different permissions, as well as react to, reply to, and resolve existing comments. The comments are displayed floating next to the text they refer to, and appear when selecting said text. The comments are shown in a separate sidebar using the `ThreadsSidebar` component.
+
+**Try it out:** Click the "Add comment" button in
+the [Formatting Toolbar](/docs/ui-components/formatting-toolbar) to add a
+comment!
+
+**Relevant Docs:**
+
+- [Comments Sidebar](/docs/collaboration/comments#sidebar-view)
+- [Real-time collaboration](/docs/collaboration/real-time-collaboration)
+- [Y-Sweet on Jamsocket](https://docs.jamsocket.com/y-sweet/tutorials/blocknote)
+- [Editor Setup](/docs/editor-basics/setup)
diff --git a/examples/07-collaboration/05-comments-with-sidebar/SettingsSelect.tsx b/examples/07-collaboration/05-comments-with-sidebar/SettingsSelect.tsx
new file mode 100644
index 0000000000..0dfc79dc3f
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/SettingsSelect.tsx
@@ -0,0 +1,24 @@
+import { ComponentProps, useComponentsContext } from "@blocknote/react";
+
+// This component is used to display a selection dropdown with a label. By using
+// the useComponentsContext hook, we can create it out of existing components
+// within the same UI library that `BlockNoteView` uses (Mantine, Ariakit, or
+// ShadCN), to match the design of the editor.
+export const SettingsSelect = (props: {
+  label: string;
+  items: ComponentProps["FormattingToolbar"]["Select"]["items"];
+}) => {
+  const Components = useComponentsContext()!;
+
+  return (
+    <div className={"settings-select"}>
+      <Components.Generic.Toolbar.Root className={"bn-toolbar"}>
+        <h2>{props.label + ":"}</h2>
+        <Components.Generic.Toolbar.Select
+          className={"bn-select"}
+          items={props.items}
+        />
+      </Components.Generic.Toolbar.Root>
+    </div>
+  );
+};
diff --git a/examples/07-collaboration/05-comments-with-sidebar/index.html b/examples/07-collaboration/05-comments-with-sidebar/index.html
new file mode 100644
index 0000000000..0fb8941655
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/index.html
@@ -0,0 +1,14 @@
+<html lang="en">
+  <head>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Threads Sidebar</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/07-collaboration/05-comments-with-sidebar/main.tsx b/examples/07-collaboration/05-comments-with-sidebar/main.tsx
new file mode 100644
index 0000000000..f88b490fbd
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/examples/07-collaboration/05-comments-with-sidebar/package.json b/examples/07-collaboration/05-comments-with-sidebar/package.json
new file mode 100644
index 0000000000..246a0fdfc5
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@blocknote/example-comments-with-sidebar",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --max-warnings 0"
+  },
+  "dependencies": {
+    "@blocknote/core": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/ariakit": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/shadcn": "latest",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@y-sweet/react": "^0.6.3",
+    "@mantine/core": "^7.10.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.9",
+    "@vitejs/plugin-react": "^4.3.1",
+    "eslint": "^8.10.0",
+    "vite": "^5.3.4"
+  },
+  "eslintConfig": {
+    "extends": [
+      "../../../.eslintrc.js"
+    ]
+  },
+  "eslintIgnore": [
+    "dist"
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-collaboration/05-comments-with-sidebar/style.css b/examples/07-collaboration/05-comments-with-sidebar/style.css
new file mode 100644
index 0000000000..ea297d6efe
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/style.css
@@ -0,0 +1,74 @@
+.sidebar-comments-main-container {
+  background-color: var(--bn-colors-disabled-background);
+  display: flex;
+  gap: 10px;
+  height: 100%;
+  max-width: none;
+  padding: 10px;
+  width: 100%;
+}
+
+.sidebar-comments-main-container .editor-layout-wrapper {
+  display: flex;
+  flex: 2;
+  justify-content: center;
+  width: 0;
+}
+
+.sidebar-comments-main-container .editor-section, .threads-sidebar-section {
+  border-radius: var(--bn-border-radius-large);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 100%;
+  width: 0;
+}
+
+.sidebar-comments-main-container .editor-section h1, .threads-sidebar-section h1 {
+  color: var(--bn-colors-menu-text);
+  margin: 0;
+  font-size: 32px;
+}
+
+.sidebar-comments-main-container .bn-editor, .bn-threads-sidebar {
+  border-radius: var(--bn-border-radius-medium);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+  overflow: auto;
+}
+
+.sidebar-comments-main-container .editor-section {
+  max-width: 700px;
+}
+
+.sidebar-comments-main-container .threads-sidebar-section,
+.sidebar-comments-main-container .bn-threads-sidebar .bn-thread {
+  min-width: 0;
+}
+
+.sidebar-comments-main-container .settings {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.sidebar-comments-main-container .settings-select {
+  display: flex;
+  gap: 10px;
+}
+
+.sidebar-comments-main-container .settings-select .bn-toolbar {
+  align-items: center;
+  box-shadow: none;
+}
+
+.sidebar-comments-main-container .settings-select h2 {
+  color: var(--bn-colors-menu-text);
+  margin: 0;
+  font-size: 12px;
+  line-height: 12px;
+  padding-left: 14px;
+}
\ No newline at end of file
diff --git a/examples/07-collaboration/05-comments-with-sidebar/tsconfig.json b/examples/07-collaboration/05-comments-with-sidebar/tsconfig.json
new file mode 100644
index 0000000000..dbe3e6f62d
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/tsconfig.json
@@ -0,0 +1,36 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true
+  },
+  "include": [
+    "."
+  ],
+  "__ADD_FOR_LOCAL_DEV_references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/07-collaboration/05-comments-with-sidebar/userdata.ts b/examples/07-collaboration/05-comments-with-sidebar/userdata.ts
new file mode 100644
index 0000000000..c54eaf0f9a
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/userdata.ts
@@ -0,0 +1,47 @@
+import type { User } from "@blocknote/core/comments";
+
+const colors = [
+  "#958DF1",
+  "#F98181",
+  "#FBBC88",
+  "#FAF594",
+  "#70CFF8",
+  "#94FADB",
+  "#B9F18D",
+];
+
+const getRandomElement = (list: any[]) =>
+  list[Math.floor(Math.random() * list.length)];
+
+export const getRandomColor = () => getRandomElement(colors);
+
+export type MyUserType = User & {
+  role: "editor" | "comment";
+};
+
+export const HARDCODED_USERS: MyUserType[] = [
+  {
+    id: "1",
+    username: "John Doe",
+    avatarUrl: "https://placehold.co/100x100?text=John",
+    role: "editor",
+  },
+  {
+    id: "2",
+    username: "Jane Doe",
+    avatarUrl: "https://placehold.co/100x100?text=Jane",
+    role: "editor",
+  },
+  {
+    id: "3",
+    username: "Bob Smith",
+    avatarUrl: "https://placehold.co/100x100?text=Bob",
+    role: "comment",
+  },
+  {
+    id: "4",
+    username: "Betty Smith",
+    avatarUrl: "https://placehold.co/100x100?text=Betty",
+    role: "comment",
+  },
+];
diff --git a/examples/07-collaboration/05-comments-with-sidebar/vite.config.ts b/examples/07-collaboration/05-comments-with-sidebar/vite.config.ts
new file mode 100644
index 0000000000..f62ab20bc2
--- /dev/null
+++ b/examples/07-collaboration/05-comments-with-sidebar/vite.config.ts
@@ -0,0 +1,32 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// import eslintPlugin from "vite-plugin-eslint";
+// https://vitejs.dev/config/
+export default defineConfig((conf) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/"
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/"
+            ),
+          } as any),
+  },
+}));
diff --git a/examples/08-extensions/01-tiptap-arrow-conversion/App.tsx b/examples/08-extensions/01-tiptap-arrow-conversion/App.tsx
index 94619d637c..dfe1bb6e71 100644
--- a/examples/08-extensions/01-tiptap-arrow-conversion/App.tsx
+++ b/examples/08-extensions/01-tiptap-arrow-conversion/App.tsx
@@ -2,14 +2,15 @@ import "@blocknote/core/fonts/inter.css";
 import { useCreateBlockNote } from "@blocknote/react";
 import { BlockNoteView } from "@blocknote/mantine";
 import "@blocknote/mantine/style.css";
-import { ArrowConversionExtension } from "./ArrowConversionExtension";
+
+import { ArrowConversionExtension } from "./ArrowConversionExtension.js";
 
 export default function App() {
   // Creates a new editor instance.
   const editor = useCreateBlockNote({
     _tiptapOptions: {
-      extensions: [ArrowConversionExtension]
-    }
+      extensions: [ArrowConversionExtension],
+    },
   });
 
   // Renders the editor instance using a React component.
diff --git a/packages/ariakit/src/comments/Card.tsx b/packages/ariakit/src/comments/Card.tsx
index 0a31a72806..a4d61ea62c 100644
--- a/packages/ariakit/src/comments/Card.tsx
+++ b/packages/ariakit/src/comments/Card.tsx
@@ -1,4 +1,4 @@
-import { Group as AriakitGroup } from "@ariakit/react";
+import { Button as AriakitButton, Group as AriakitGroup } from "@ariakit/react";
 
 import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
 import { ComponentProps } from "@blocknote/react";
@@ -8,14 +8,31 @@ export const Card = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Card"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const {
+    className,
+    children,
+    selected,
+    headerText,
+    onFocus,
+    onBlur,
+    tabIndex,
+    ...rest
+  } = props;
 
   assertEmpty(rest, false);
 
   return (
     <AriakitGroup
-      className={mergeCSSClasses(className, "bn-ak-hovercard")}
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-hovercard",
+        selected && "selected"
+      )}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
       ref={ref}>
+      {headerText && <div className={"bn-header-text"}>{headerText}</div>}
       {children}
     </AriakitGroup>
   );
@@ -37,3 +54,23 @@ export const CardSection = forwardRef<
     </AriakitGroup>
   );
 });
+
+export const ExpandSectionsPrompt = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Comments"]["ExpandSectionsPrompt"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <AriakitButton
+      className={mergeCSSClasses(
+        className,
+        "bn-ak-button bn-ak-secondary bn-ak-expand-sections-prompt"
+      )}
+      ref={ref}>
+      {children}
+    </AriakitButton>
+  );
+});
diff --git a/packages/ariakit/src/comments/Comment.tsx b/packages/ariakit/src/comments/Comment.tsx
index 9db7a93778..9fee199a16 100644
--- a/packages/ariakit/src/comments/Comment.tsx
+++ b/packages/ariakit/src/comments/Comment.tsx
@@ -6,9 +6,12 @@ import { forwardRef, useState } from "react";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
-  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+  Pick<
+    ComponentProps["Comments"]["Comment"],
+    "authorInfo" | "timeString" | "edited"
+  >
 >((props, _ref) => {
-  const { authorInfo, timeString, ...rest } = props;
+  const { authorInfo, timeString, edited, ...rest } = props;
 
   assertEmpty(rest, false);
 
@@ -30,7 +33,9 @@ const AuthorInfo = forwardRef<
       />
       <div className={"bn-ak-username"}>
         {authorInfo.username}
-        <span>{timeString}</span>
+        <span>
+          {timeString} {edited && "(edited)"}
+        </span>
       </div>
     </AriakitGroup>
   );
@@ -47,6 +52,7 @@ export const Comment = forwardRef<
     timeString,
     actions,
     children,
+    edited,
     ...rest
   } = props;
 
diff --git a/packages/ariakit/src/comments/Editor.tsx b/packages/ariakit/src/comments/Editor.tsx
index 2080107063..fa95b4a260 100644
--- a/packages/ariakit/src/comments/Editor.tsx
+++ b/packages/ariakit/src/comments/Editor.tsx
@@ -12,13 +12,14 @@ export const Editor = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Editor"]
 >((props, ref) => {
-  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+  const { className, onFocus, onBlur, autoFocus, editor, editable, ...rest } =
+    props;
 
   assertEmpty(rest, false);
 
   return (
     <BlockNoteView
-      autoFocus={true}
+      autoFocus={autoFocus}
       className={className}
       editor={props.editor}
       sideMenu={false}
diff --git a/packages/ariakit/src/components.ts b/packages/ariakit/src/components.ts
index 71e75e151c..ab70ebb21f 100644
--- a/packages/ariakit/src/components.ts
+++ b/packages/ariakit/src/components.ts
@@ -33,7 +33,7 @@ import { TableHandle } from "./tableHandle/TableHandle.js";
 import { Toolbar } from "./toolbar/Toolbar.js";
 import { ToolbarButton } from "./toolbar/ToolbarButton.js";
 import { ToolbarSelect } from "./toolbar/ToolbarSelect.js";
-import { Card, CardSection } from "./comments/Card.js";
+import { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
 import { Badge, BadgeGroup } from "./badge/Badge.js";
@@ -60,6 +60,7 @@ export const components: Components = {
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,
+    Select: ToolbarSelect,
   },
   SideMenu: {
     Root: SideMenu,
@@ -81,6 +82,7 @@ export const components: Components = {
     Editor: Editor,
     Card: Card,
     CardSection: CardSection,
+    ExpandSectionsPrompt: ExpandSectionsPrompt,
   },
   Generic: {
     Badge: {
@@ -90,6 +92,7 @@ export const components: Components = {
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
+      Select: ToolbarSelect,
     },
     Form: {
       Root: Form,
diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css
index 2f55720b70..2de17b435b 100644
--- a/packages/ariakit/src/style.css
+++ b/packages/ariakit/src/style.css
@@ -90,7 +90,7 @@
   --highlight: rgb(255 255 255/20%);
   --shadow: rgb(0 0 0/10%);
   box-shadow: inset 0 0 0 1px var(--border), inset 0 2px 0 var(--highlight),
-    inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
+  inset 0 -1px 0 var(--shadow), 0 1px 1px var(--shadow);
   font-size: 0.7rem;
   border-radius: 4px;
   padding-inline: 4px;
@@ -221,14 +221,14 @@
 }
 
 .bn-ariakit .bn-thread-comments {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .bn-ak-avatar {
-    height: 24px;
-    width: 24px;
+  height: 24px;
+  width: 24px;
 }
 
 .bn-ak-username {
@@ -244,9 +244,9 @@
 }
 
 .bn-ak-author-info {
-    align-items: center;
-    display: flex;
-    gap: 16px
+  align-items: center;
+  display: flex;
+  gap: 16px
 }
 
 .bn-ariakit .bn-comment-editor .bn-editor {
@@ -271,9 +271,9 @@
 }
 
 .bn-ak-badge-group {
-    align-items: center;
-    display: flex;
-    gap: 4px;
+  align-items: center;
+  display: flex;
+  gap: 4px;
   flex-wrap: wrap;
   width: 100%;
 }
@@ -309,11 +309,33 @@
 }
 
 .bn-ak-skeleton {
-    background-color: rgb(255 255 255/25%);
+  background-color: rgb(255 255 255/25%);
 }
 
 .bn-ak-username.bn-ak-skeleton {
   border-radius: 8px;
   height: 16px;
   width: 100px;
+}
+
+.bn-ak-expand-sections-prompt {
+  padding: 0;
+  width: fit-content;
+}
+
+.bn-ak-expand-sections-prompt:hover {
+  background-color: transparent;
+}
+
+.bn-ariakit .bn-thread .bn-header-text,
+.bn-ariakit .bn-thread .bn-resolved-text {
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
+.bn-ariakit .bn-thread.selected .bn-header-text,
+.bn-ariakit .bn-thread.selected .bn-resolved-text,
+.bn-ariakit .bn-thread.selected .bn-ak-author-info,
+.bn-ariakit .bn-thread.selected .bn-ak-expand-sections-prompt {
+  color: var(--bn-colors-selected-text);
 }
\ No newline at end of file
diff --git a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts
index 8ea61887e3..9732a9ed15 100644
--- a/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts
+++ b/packages/core/src/comments/threadstore/yjs/YjsThreadStore.ts
@@ -237,6 +237,7 @@ export class YjsThreadStore extends YjsThreadStoreBase {
 
     yThread.set("resolved", true);
     yThread.set("resolvedUpdatedAt", new Date().getTime());
+    yThread.set("resolvedBy", this.userId);
   });
 
   public unresolveThread = this.transact((options: { threadId: string }) => {
diff --git a/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts b/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts
index dafdee6827..7c45eb59e0 100644
--- a/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts
+++ b/packages/core/src/comments/threadstore/yjs/yjsHelpers.ts
@@ -40,6 +40,7 @@ export function threadToYMap(thread: ThreadData) {
   yMap.set("comments", commentsArray);
   yMap.set("resolved", thread.resolved);
   yMap.set("resolvedUpdatedAt", thread.resolvedUpdatedAt?.getTime());
+  yMap.set("resolvedBy", thread.resolvedBy);
   yMap.set("metadata", thread.metadata);
   return yMap;
 }
@@ -115,7 +116,8 @@ export function yMapToThread(yMap: Y.Map<any>): ThreadData {
       (comment) => yMapToComment(comment)
     ),
     resolved: yMap.get("resolved"),
-    resolvedUpdatedAt: yMap.get("resolvedUpdatedAt"),
+    resolvedUpdatedAt: new Date(yMap.get("resolvedUpdatedAt")),
+    resolvedBy: yMap.get("resolvedBy"),
     metadata: yMap.get("metadata"),
   };
 }
diff --git a/packages/core/src/comments/types.ts b/packages/core/src/comments/types.ts
index f29d3a4ea5..4ce11ea723 100644
--- a/packages/core/src/comments/types.ts
+++ b/packages/core/src/comments/types.ts
@@ -105,6 +105,10 @@ export type ThreadData = {
    * The date when the thread was marked as resolved.
    */
   resolvedUpdatedAt?: Date;
+  /**
+   * The id of the user that marked the thread as resolved.
+   */
+  resolvedBy?: string;
   /**
    * You can use this store any additional information about the thread.
    */
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index 07413fa894..f8eb8c1d67 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -542,6 +542,6 @@ NESTED BLOCKS
   background: rgba(255, 200, 0, 0.15);
 }
 
-.bn-thread-mark:not([data-orphan="true"]) .bn-thread-mark-selected {
+.bn-thread-mark .bn-thread-mark-selected {
   background: rgba(255, 200, 0, 0.25);
 }
diff --git a/packages/core/src/extensions/Comments/CommentsPlugin.ts b/packages/core/src/extensions/Comments/CommentsPlugin.ts
index 53cdb240cc..de69d1ca65 100644
--- a/packages/core/src/extensions/Comments/CommentsPlugin.ts
+++ b/packages/core/src/extensions/Comments/CommentsPlugin.ts
@@ -16,11 +16,6 @@ const PLUGIN_KEY = new PluginKey(`blocknote-comments`);
 const SET_SELECTED_THREAD_ID = "SET_SELECTED_THREAD_ID";
 
 type CommentsPluginState = {
-  /**
-   * Store the positions of all threads in the document.
-   * this can be used later to implement a floating sidebar
-   */
-  threadPositions: Map<string, { from: number; to: number }>;
   /**
    * Decorations to be rendered, specifically to indicate the selected thread
    */
@@ -28,15 +23,11 @@ type CommentsPluginState = {
 };
 
 /**
- * Get a new state (theadPositions and decorations) from the current document state
+ * Calculate the thread positions from the current document state
  */
-function updateState(
-  doc: Node,
-  selectedThreadId: string | undefined,
-  markType: string
-): CommentsPluginState {
+function getUpdatedThreadPositions(doc: Node, markType: string) {
   const threadPositions = new Map<string, { from: number; to: number }>();
-  const decorations: Decoration[] = [];
+
   // find all thread marks and store their position + create decoration for selected thread
   doc.descendants((node, pos) => {
     node.marks.forEach((mark) => {
@@ -59,34 +50,38 @@ function updateState(
           from: Math.min(from, currentPosition.from),
           to: Math.max(to, currentPosition.to),
         });
-
-        if (selectedThreadId === thisThreadId) {
-          decorations.push(
-            Decoration.inline(from, to, {
-              class: "bn-thread-mark-selected",
-            })
-          );
-        }
       }
     });
   });
-  return {
-    decorations: DecorationSet.create(doc, decorations),
-    threadPositions,
-  };
+  return threadPositions;
 }
 
 export class CommentsPlugin extends EventEmitter<any> {
   public readonly plugin: Plugin;
   public readonly userStore: UserStore<User>;
 
+  /**
+   * Whether a comment is currently being composed
+   */
   private pendingComment = false;
+
+  /**
+   * The currently selected thread id
+   */
   private selectedThreadId: string | undefined;
 
+  /**
+   * Store the positions of all threads in the document.
+   * this can be used later to implement a floating sidebar
+   */
+  private threadPositions: Map<string, { from: number; to: number }> =
+    new Map();
+
   private emitStateUpdate() {
     this.emit("update", {
       selectedThreadId: this.selectedThreadId,
       pendingComment: this.pendingComment,
+      threadPositions: this.threadPositions,
     });
   }
 
@@ -168,18 +163,51 @@ export class CommentsPlugin extends EventEmitter<any> {
       state: {
         init() {
           return {
-            threadPositions: new Map<string, { from: number; to: number }>(),
             decorations: DecorationSet.empty,
           };
         },
         apply(tr, state) {
           const action = tr.getMeta(PLUGIN_KEY);
+
           if (!tr.docChanged && !action) {
             return state;
           }
 
-          // The doc changed or the selected thread changed
-          return updateState(tr.doc, self.selectedThreadId, markType);
+          // only update threadPositions if the doc changed
+          const threadPositions = tr.docChanged
+            ? getUpdatedThreadPositions(tr.doc, self.markType)
+            : self.threadPositions;
+
+          if (threadPositions.size > 0 || self.threadPositions.size > 0) {
+            // small optimization; don't emit event if threadPositions before / after were both empty
+            self.threadPositions = threadPositions;
+            self.emitStateUpdate();
+          }
+
+          // update decorations if doc or selected thread changed
+          const decorations = [];
+
+          if (self.selectedThreadId) {
+            const selectedThreadPosition = threadPositions.get(
+              self.selectedThreadId
+            );
+
+            if (selectedThreadPosition) {
+              decorations.push(
+                Decoration.inline(
+                  selectedThreadPosition.from,
+                  selectedThreadPosition.to,
+                  {
+                    class: "bn-thread-mark-selected",
+                  }
+                )
+              );
+            }
+          }
+
+          return {
+            decorations: DecorationSet.create(tr.doc, decorations),
+          };
         },
       },
       props: {
@@ -206,7 +234,7 @@ export class CommentsPlugin extends EventEmitter<any> {
           );
 
           const threadId = commentMark?.attrs.threadId as string | undefined;
-          self.selectThread(threadId);
+          self.selectThread(threadId, false);
         },
       },
     });
@@ -219,6 +247,7 @@ export class CommentsPlugin extends EventEmitter<any> {
     callback: (state: {
       pendingComment: boolean;
       selectedThreadId: string | undefined;
+      threadPositions: Map<string, { from: number; to: number }>;
     }) => void
   ) {
     return this.on("update", callback);
@@ -227,7 +256,7 @@ export class CommentsPlugin extends EventEmitter<any> {
   /**
    * Set the selected thread
    */
-  public selectThread(threadId: string | undefined) {
+  public selectThread(threadId: string | undefined, scrollToThread = true) {
     if (this.selectedThreadId === threadId) {
       return;
     }
@@ -238,6 +267,24 @@ export class CommentsPlugin extends EventEmitter<any> {
         name: SET_SELECTED_THREAD_ID,
       })
     );
+
+    if (threadId && scrollToThread) {
+      const selectedThreadPosition = this.threadPositions.get(threadId);
+
+      if (!selectedThreadPosition) {
+        return;
+      }
+
+      // When a new thread is selected, scrolls the page to its reference text in
+      // the editor.
+      (
+        this.editor.prosemirrorView?.domAtPos(selectedThreadPosition.from)
+          .node as Element | undefined
+      )?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
   }
 
   /**
diff --git a/packages/core/src/i18n/locales/ar.ts b/packages/core/src/i18n/locales/ar.ts
index 29475f75e2..cdb930d347 100644
--- a/packages/core/src/i18n/locales/ar.ts
+++ b/packages/core/src/i18n/locales/ar.ts
@@ -325,6 +325,10 @@ export const ar: Dictionary = {
     reactions: {
       reacted_by: "تفاعل بواسطة",
     },
+    sidebar: {
+      marked_as_resolved: "تم وضع علامة كتم الحل",
+      more_replies: (count) => `${count} ردود أخرى`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/de.ts b/packages/core/src/i18n/locales/de.ts
index 1510f228c7..fb860b7f1c 100644
--- a/packages/core/src/i18n/locales/de.ts
+++ b/packages/core/src/i18n/locales/de.ts
@@ -1,4 +1,6 @@
-export const de = {
+import { Dictionary } from "../dictionary.js";
+
+export const de: Dictionary = {
   slash_menu: {
     heading: {
       title: "Überschrift 1",
@@ -154,6 +156,8 @@ export const de = {
   drag_handle: {
     delete_menuitem: "Löschen",
     colors_menuitem: "Farben",
+    header_row_menuitem: "Kopfzeile",
+    header_column_menuitem: "Kopfspalte",
   },
   table_handle: {
     delete_column_menuitem: "Spalte löschen",
@@ -162,6 +166,9 @@ export const de = {
     add_right_menuitem: "Spalte rechts hinzufügen",
     add_above_menuitem: "Zeile oberhalb hinzufügen",
     add_below_menuitem: "Zeile unterhalb hinzufügen",
+    split_cell_menuitem: "Zelle teilen",
+    merge_cells_menuitem: "Zellen zusammenführen",
+    background_color_menuitem: "Hintergrundfarbe",
   },
   suggestion_menu: {
     no_items_title: "Keine Elemente gefunden",
@@ -276,6 +283,9 @@ export const de = {
     align_justify: {
       tooltip: "Text Blocksatz",
     },
+    table_cell_merge: {
+      tooltip: "Zellen zusammenführen",
+    },
     comment: {
       tooltip: "Kommentar hinzufügen",
     },
@@ -329,6 +339,10 @@ export const de = {
     reactions: {
       reacted_by: "Reagiert von",
     },
+    sidebar: {
+      marked_as_resolved: "Als gelöst markiert",
+      more_replies: (count) => `${count} weitere Antworten`,
+    },
   },
   generic: {
     ctrl_shortcut: "Strg",
diff --git a/packages/core/src/i18n/locales/en.ts b/packages/core/src/i18n/locales/en.ts
index b8115837ac..1f804d670a 100644
--- a/packages/core/src/i18n/locales/en.ts
+++ b/packages/core/src/i18n/locales/en.ts
@@ -340,6 +340,10 @@ export const en = {
     reactions: {
       reacted_by: "Reacted by",
     },
+    sidebar: {
+      marked_as_resolved: "Marked as resolved",
+      more_replies: (count: number) => `${count} more replies`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/es.ts b/packages/core/src/i18n/locales/es.ts
index 92690dc7b6..77e6fd7d7d 100644
--- a/packages/core/src/i18n/locales/es.ts
+++ b/packages/core/src/i18n/locales/es.ts
@@ -1,4 +1,6 @@
-export const es = {
+import { Dictionary } from "../dictionary.js";
+
+export const es: Dictionary = {
   slash_menu: {
     heading: {
       title: "Encabezado 1",
@@ -153,6 +155,8 @@ export const es = {
   drag_handle: {
     delete_menuitem: "Eliminar",
     colors_menuitem: "Colores",
+    header_row_menuitem: "Fila de encabezado",
+    header_column_menuitem: "Columna de encabezado",
   },
   table_handle: {
     delete_column_menuitem: "Eliminar columna",
@@ -161,6 +165,9 @@ export const es = {
     add_right_menuitem: "Agregar columna a la derecha",
     add_above_menuitem: "Agregar fila arriba",
     add_below_menuitem: "Agregar fila abajo",
+    split_cell_menuitem: "Dividir celda",
+    merge_cells_menuitem: "Combinar celdas",
+    background_color_menuitem: "Color de fondo",
   },
   suggestion_menu: {
     no_items_title: "No se encontraron elementos",
@@ -275,6 +282,9 @@ export const es = {
     align_justify: {
       tooltip: "Justificar texto",
     },
+    table_cell_merge: {
+      tooltip: "Combinar celdas",
+    },
     comment: {
       tooltip: "Añadir comentario",
     },
@@ -328,6 +338,10 @@ export const es = {
     reactions: {
       reacted_by: "Reaccionado por",
     },
+    sidebar: {
+      marked_as_resolved: "Marcado como resuelto",
+      more_replies: (count) => `${count} respuestas más`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/fr.ts b/packages/core/src/i18n/locales/fr.ts
index 25ab5297ae..3b41156b87 100644
--- a/packages/core/src/i18n/locales/fr.ts
+++ b/packages/core/src/i18n/locales/fr.ts
@@ -364,6 +364,10 @@ export const fr: Dictionary = {
     reactions: {
       reacted_by: "Réagi par",
     },
+    sidebar: {
+      marked_as_resolved: "Marqué comme résolu",
+      more_replies: (count) => `${count} réponses de plus`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/hr.ts b/packages/core/src/i18n/locales/hr.ts
index d3da2e4032..efe3a297d4 100644
--- a/packages/core/src/i18n/locales/hr.ts
+++ b/packages/core/src/i18n/locales/hr.ts
@@ -1,4 +1,6 @@
-export const hr = {
+import { Dictionary } from "../dictionary.js";
+
+export const hr: Dictionary = {
   slash_menu: {
     heading: {
       title: "Naslov 1",
@@ -68,6 +70,12 @@ export const hr = {
       aliases: ["tablica"],
       group: "Napredno",
     },
+    code_block: {
+      title: "Blok koda",
+      subtext: "Blok koda sa sintaksnim isticanjem",
+      aliases: ["code", "pre"],
+      group: "Osnovni blokovi",
+    },
     page_break: {
       title: "Prijelom stranice",
       subtext: "Razdjelnik stranice",
@@ -128,9 +136,6 @@ export const hr = {
       aliases: ["emoji", "emotikon", "emocija", "lice"],
       group: "Ostalo",
     },
-    comment: {
-      tooltip: "Dodaj komentar",
-    },
   },
   placeholders: {
     default: "Unesi tekst ili upiši ‘/’ za naredbe",
@@ -164,6 +169,8 @@ export const hr = {
   drag_handle: {
     delete_menuitem: "Ukloni",
     colors_menuitem: "Boje",
+    header_row_menuitem: "Zaglavni redak",
+    header_column_menuitem: "Zaglavni stupac",
   },
   table_handle: {
     delete_column_menuitem: "Ukloni stupac",
@@ -172,6 +179,9 @@ export const hr = {
     add_right_menuitem: "Dodaj stupac desno",
     add_above_menuitem: "Dodaj redak iznad",
     add_below_menuitem: "Dodaj redak ispod",
+    split_cell_menuitem: "Podijeli ćeliju",
+    merge_cells_menuitem: "Spoji ćelije",
+    background_color_menuitem: "Boja pozadine",
   },
   suggestion_menu: {
     no_items_title: "Stavke nisu pronađene",
@@ -287,6 +297,9 @@ export const hr = {
     align_justify: {
       tooltip: "Poravnaj tekst obostrano",
     },
+    table_cell_merge: {
+      tooltip: "Spoji ćelije",
+    },
     comment: {
       tooltip: "Dodaj komentar",
     },
@@ -340,6 +353,10 @@ export const hr = {
     reactions: {
       reacted_by: "Reagirao/la",
     },
+    sidebar: {
+      marked_as_resolved: "Označeno kao riješeno",
+      more_replies: (count) => `${count} dodatnih odgovora`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/is.ts b/packages/core/src/i18n/locales/is.ts
index 798c17d6ab..9e3b302bfc 100644
--- a/packages/core/src/i18n/locales/is.ts
+++ b/packages/core/src/i18n/locales/is.ts
@@ -332,6 +332,10 @@ export const is: Dictionary = {
     reactions: {
       reacted_by: "Brást við af",
     },
+    sidebar: {
+      marked_as_resolved: "Merkt sem leyst",
+      more_replies: (count) => `${count} fleiri svör`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/it.ts b/packages/core/src/i18n/locales/it.ts
index 75b9ff0783..1ce62b2e96 100644
--- a/packages/core/src/i18n/locales/it.ts
+++ b/packages/core/src/i18n/locales/it.ts
@@ -1,4 +1,6 @@
-export const it = {
+import { Dictionary } from "../dictionary.js";
+
+export const it: Dictionary = {
   slash_menu: {
     heading: {
       title: "Intestazione 1",
@@ -155,6 +157,8 @@ export const it = {
   drag_handle: {
     delete_menuitem: "Elimina",
     colors_menuitem: "Colori",
+    header_row_menuitem: "Riga intestazione",
+    header_column_menuitem: "Colonna intestazione",
   },
   table_handle: {
     delete_column_menuitem: "Elimina colonna",
@@ -163,6 +167,9 @@ export const it = {
     add_right_menuitem: "Aggiungi colonna a destra",
     add_above_menuitem: "Aggiungi riga sopra",
     add_below_menuitem: "Aggiungi riga sotto",
+    split_cell_menuitem: "Dividi cella",
+    merge_cells_menuitem: "Unisci celle",
+    background_color_menuitem: "Colore di sfondo",
   },
   suggestion_menu: {
     no_items_title: "Nessun elemento trovato",
@@ -278,6 +285,9 @@ export const it = {
     align_justify: {
       tooltip: "Giustifica testo",
     },
+    table_cell_merge: {
+      tooltip: "Unisci celle",
+    },
     comment: {
       tooltip: "Aggiungi commento",
     },
@@ -331,6 +341,10 @@ export const it = {
     reactions: {
       reacted_by: "Reagito da",
     },
+    sidebar: {
+      marked_as_resolved: "Contrassegnato come risolto",
+      more_replies: (count) => `${count} altre risposte`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/ja.ts b/packages/core/src/i18n/locales/ja.ts
index 2ddd826332..18177cf76b 100644
--- a/packages/core/src/i18n/locales/ja.ts
+++ b/packages/core/src/i18n/locales/ja.ts
@@ -360,6 +360,10 @@ export const ja: Dictionary = {
     reactions: {
       reacted_by: "リアクションした人",
     },
+    sidebar: {
+      marked_as_resolved: "解決済みとしてマーク",
+      more_replies: (count) => `${count} 件の追加返信`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/ko.ts b/packages/core/src/i18n/locales/ko.ts
index 0256c72ce3..94e13828fb 100644
--- a/packages/core/src/i18n/locales/ko.ts
+++ b/packages/core/src/i18n/locales/ko.ts
@@ -353,6 +353,10 @@ export const ko: Dictionary = {
     reactions: {
       reacted_by: "반응한 사람",
     },
+    sidebar: {
+      marked_as_resolved: "해결됨으로 표시됨",
+      more_replies: (count) => `${count}개의 추가 답글`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/nl.ts b/packages/core/src/i18n/locales/nl.ts
index a4eebaae24..14642667c3 100644
--- a/packages/core/src/i18n/locales/nl.ts
+++ b/packages/core/src/i18n/locales/nl.ts
@@ -339,6 +339,10 @@ export const nl: Dictionary = {
     reactions: {
       reacted_by: "Gereageerd door",
     },
+    sidebar: {
+      marked_as_resolved: "Gemarkeerd als opgelost",
+      more_replies: (count) => `${count} extra reacties`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/no.ts b/packages/core/src/i18n/locales/no.ts
index 27e37b052f..43023b2d92 100644
--- a/packages/core/src/i18n/locales/no.ts
+++ b/packages/core/src/i18n/locales/no.ts
@@ -339,6 +339,10 @@ export const no: Dictionary = {
     reactions: {
       reacted_by: "Reagert av",
     },
+    sidebar: {
+      marked_as_resolved: "Merket som løst",
+      more_replies: (count) => `${count} flere svar`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/pl.ts b/packages/core/src/i18n/locales/pl.ts
index 78a8461e45..8af5576052 100644
--- a/packages/core/src/i18n/locales/pl.ts
+++ b/packages/core/src/i18n/locales/pl.ts
@@ -324,6 +324,10 @@ export const pl: Dictionary = {
     reactions: {
       reacted_by: "Zareagowali",
     },
+    sidebar: {
+      marked_as_resolved: "Oznaczone jako rozwiązane",
+      more_replies: (count) => `${count} więcej odpowiedzi`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/pt.ts b/packages/core/src/i18n/locales/pt.ts
index 764f06c4b2..8e5d871b00 100644
--- a/packages/core/src/i18n/locales/pt.ts
+++ b/packages/core/src/i18n/locales/pt.ts
@@ -332,6 +332,10 @@ export const pt: Dictionary = {
     reactions: {
       reacted_by: "Reagido por",
     },
+    sidebar: {
+      marked_as_resolved: "Marcado como resolvido",
+      more_replies: (count) => `${count} respostas a mais`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/ru.ts b/packages/core/src/i18n/locales/ru.ts
index 3fc2b2b05c..b6fc53c3b3 100644
--- a/packages/core/src/i18n/locales/ru.ts
+++ b/packages/core/src/i18n/locales/ru.ts
@@ -367,6 +367,10 @@ export const ru: Dictionary = {
     reactions: {
       reacted_by: "Отреагировал(а)",
     },
+    sidebar: {
+      marked_as_resolved: "Отмечено как решенное",
+      more_replies: (count) => `${count} дополнительных ответов`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/uk.ts b/packages/core/src/i18n/locales/uk.ts
index 454617216d..bd2d1c6d7d 100644
--- a/packages/core/src/i18n/locales/uk.ts
+++ b/packages/core/src/i18n/locales/uk.ts
@@ -364,6 +364,10 @@ export const uk: Dictionary = {
     reactions: {
       reacted_by: "Відреагував(ла)",
     },
+    sidebar: {
+      marked_as_resolved: "Позначено як вирішене",
+      more_replies: (count) => `${count} додаткових відповідей`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/vi.ts b/packages/core/src/i18n/locales/vi.ts
index a557472618..0847e543f2 100644
--- a/packages/core/src/i18n/locales/vi.ts
+++ b/packages/core/src/i18n/locales/vi.ts
@@ -339,6 +339,10 @@ export const vi: Dictionary = {
     reactions: {
       reacted_by: "Phản ứng bởi",
     },
+    sidebar: {
+      marked_as_resolved: "Đã đánh dấu là đã giải quyết",
+      more_replies: (count) => `${count} câu trả lời nữa`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/core/src/i18n/locales/zh.ts b/packages/core/src/i18n/locales/zh.ts
index 7d935af33b..5167e448d0 100644
--- a/packages/core/src/i18n/locales/zh.ts
+++ b/packages/core/src/i18n/locales/zh.ts
@@ -373,6 +373,10 @@ export const zh: Dictionary = {
     reactions: {
       reacted_by: "已回应",
     },
+    sidebar: {
+      marked_as_resolved: "标记为已解决",
+      more_replies: (count) => `还有 ${count} 条回复`,
+    },
   },
   generic: {
     ctrl_shortcut: "Ctrl",
diff --git a/packages/mantine/src/comments/Card.tsx b/packages/mantine/src/comments/Card.tsx
index 38865105ae..7c5d1b3341 100644
--- a/packages/mantine/src/comments/Card.tsx
+++ b/packages/mantine/src/comments/Card.tsx
@@ -1,18 +1,50 @@
-import { assertEmpty } from "@blocknote/core";
-import { ComponentProps } from "@blocknote/react";
-import { Card as MantineCard } from "@mantine/core";
-import { forwardRef } from "react";
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps, mergeRefs } from "@blocknote/react";
+import {
+  Card as MantineCard,
+  Divider as MantineDivider,
+  Text as MantineText,
+} from "@mantine/core";
+import { forwardRef, useEffect, useRef } from "react";
 
 export const Card = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Card"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const {
+    className,
+    children,
+    headerText,
+    selected,
+    onFocus,
+    onBlur,
+    tabIndex,
+    ...rest
+  } = props;
 
   assertEmpty(rest, false);
 
+  // Makes the card scroll into view when selected.
+  const scrollRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (selected) {
+      scrollRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    }
+  }, [selected]);
+
   return (
-    <MantineCard w={350} p={"md"} className={className} ref={ref}>
+    <MantineCard
+      className={mergeCSSClasses(className, selected ? "selected" : "")}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
+      ref={mergeRefs([ref, scrollRef])}>
+      {headerText && (
+        <MantineText className={"bn-header-text"}>{headerText}</MantineText>
+      )}
       {children}
     </MantineCard>
   );
@@ -27,8 +59,25 @@ export const CardSection = forwardRef<
   assertEmpty(rest, false);
 
   return (
-    <MantineCard.Section p={"md"} className={className} ref={ref}>
+    <MantineCard.Section className={className} ref={ref}>
       {children}
     </MantineCard.Section>
   );
 });
+
+export const ExpandSectionsPrompt = forwardRef<
+  HTMLDivElement,
+  ComponentProps["Comments"]["ExpandSectionsPrompt"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  return (
+    <MantineDivider
+      className={className}
+      label={<MantineText>{children}</MantineText>}
+      ref={ref}
+    />
+  );
+});
diff --git a/packages/mantine/src/comments/Comment.tsx b/packages/mantine/src/comments/Comment.tsx
index 72aa98929e..3f0708ca16 100644
--- a/packages/mantine/src/comments/Comment.tsx
+++ b/packages/mantine/src/comments/Comment.tsx
@@ -6,9 +6,12 @@ import { forwardRef } from "react";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
-  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+  Pick<
+    ComponentProps["Comments"]["Comment"],
+    "authorInfo" | "timeString" | "edited"
+  >
 >((props, _ref) => {
-  const { authorInfo, timeString, ...rest } = props;
+  const { authorInfo, timeString, edited, ...rest } = props;
 
   assertEmpty(rest, false);
 
@@ -37,7 +40,7 @@ const AuthorInfo = forwardRef<
       <Text fz="sm" fw={"bold"}>
         {authorInfo.username}
         <Text fz="xs" c="dimmed" span ml={"xs"}>
-          {timeString}
+          {timeString} {edited && "(edited)"}
         </Text>
       </Text>
     </Group>
@@ -53,6 +56,7 @@ export const Comment = forwardRef<
     showActions,
     authorInfo,
     timeString,
+    edited,
     actions,
     children,
     ...rest
diff --git a/packages/mantine/src/comments/Editor.tsx b/packages/mantine/src/comments/Editor.tsx
index 2080107063..a288b25398 100644
--- a/packages/mantine/src/comments/Editor.tsx
+++ b/packages/mantine/src/comments/Editor.tsx
@@ -12,13 +12,14 @@ export const Editor = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Editor"]
 >((props, ref) => {
-  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+  const { className, autoFocus, onFocus, onBlur, editor, editable, ...rest } =
+    props;
 
   assertEmpty(rest, false);
 
   return (
     <BlockNoteView
-      autoFocus={true}
+      autoFocus={autoFocus}
       className={className}
       editor={props.editor}
       sideMenu={false}
diff --git a/packages/mantine/src/components.tsx b/packages/mantine/src/components.tsx
index 0f6b1e10b2..7d01c5c936 100644
--- a/packages/mantine/src/components.tsx
+++ b/packages/mantine/src/components.tsx
@@ -1,6 +1,6 @@
 import { Components } from "@blocknote/react";
 import { Badge, BadgeGroup } from "./badge/Badge.js";
-import { Card, CardSection } from "./comments/Card.js";
+import { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
 import { TextInput } from "./form/TextInput.js";
@@ -59,6 +59,7 @@ export const components: Components = {
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,
+    Select: ToolbarSelect,
   },
   SideMenu: {
     Root: SideMenu,
@@ -101,6 +102,7 @@ export const components: Components = {
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
+      Select: ToolbarSelect,
     },
   },
   Comments: {
@@ -108,5 +110,6 @@ export const components: Components = {
     Editor,
     Card,
     CardSection,
+    ExpandSectionsPrompt,
   },
 };
diff --git a/packages/mantine/src/style.css b/packages/mantine/src/style.css
index 44b9ec7c54..7077fd87b4 100644
--- a/packages/mantine/src/style.css
+++ b/packages/mantine/src/style.css
@@ -256,8 +256,7 @@
   max-height: 100%;
   position: relative;
   box-shadow: var(--mantine-shadow-md);
-  border: calc(0.0625rem * var(--mantine-scale)) solid
-    var(--mantine-color-gray-2);
+  border: calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-gray-2);
   border-radius: var(--mantine-radius-default);
   padding: 4px;
 }
@@ -577,8 +576,8 @@
 }
 
 .bn-mt-sub-menu-item
-  > .mantine-Menu-itemLabel
-  > div:not(.mantine-Menu-dropdown) {
+> .mantine-Menu-itemLabel
+> div:not(.mantine-Menu-dropdown) {
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -591,13 +590,30 @@
   border-radius: var(--bn-border-radius-medium);
   box-shadow: var(--bn-shadow-medium);
   color: var(--bn-colors-menu-text);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 350px;
   overflow: visible;
 }
 
-.bn-mantine .bn-thread-comments {
-  border-bottom: var(--bn-border);
+.bn-mantine .bn-threads-sidebar .bn-thread {
+  box-shadow: none;
+}
+
+.bn-mantine .bn-thread:not(.selected) {
+  cursor: pointer;
+}
+
+.bn-mantine .bn-thread-comments,
+.bn-mantine .bn-thread-composer {
   display: flex;
   flex-direction: column;
+  margin: 0;
+  padding: 0;
+}
+
+.bn-mantine .bn-thread-comments {
   gap: 1rem;
 }
 
@@ -615,6 +631,12 @@
   color: var(--bn-colors-menu-text);
 }
 
+.bn-mantine .bn-thread .bn-header-text,
+.bn-mantine .bn-thread-comment .bn-resolved-text {
+  font-size: 0.8rem;
+  font-style: italic;
+}
+
 .bn-mantine .bn-comment-actions-wrapper {
   width: 100%;
   display: flex;
@@ -692,18 +714,18 @@
 }
 
 .bn-mantine
-  .bn-badge
-  .mantine-Chip-label
-  > span:not(.mantine-Chip-iconWrapper) {
+.bn-badge
+.mantine-Chip-label
+> span:not(.mantine-Chip-iconWrapper) {
   display: inline-flex;
   gap: 4px;
 }
 
 .bn-mantine
-  .bn-badge
-  .mantine-Chip-label
-  > span:not(.mantine-Chip-iconWrapper)
-  > span {
+.bn-badge
+.mantine-Chip-label
+> span:not(.mantine-Chip-iconWrapper)
+> span {
   align-items: center;
   display: inline-flex;
   justify-content: center;
diff --git a/packages/react/src/components/Comments/Comment.tsx b/packages/react/src/components/Comments/Comment.tsx
index 10f7d28730..571ae72d47 100644
--- a/packages/react/src/components/Comments/Comment.tsx
+++ b/packages/react/src/components/Comments/Comment.tsx
@@ -2,13 +2,7 @@
 
 import { mergeCSSClasses } from "@blocknote/core";
 import type { CommentData, ThreadData } from "@blocknote/core/comments";
-import {
-  ComponentPropsWithoutRef,
-  MouseEvent,
-  ReactNode,
-  useCallback,
-  useState,
-} from "react";
+import { MouseEvent, ReactNode, useCallback, useState } from "react";
 import {
   RiArrowGoBackFill,
   RiCheckFill,
@@ -28,37 +22,11 @@ import { ReactionBadge } from "./ReactionBadge.js";
 import { schema } from "./schema.js";
 import { useUser } from "./useUsers.js";
 
-export interface CommentProps extends ComponentPropsWithoutRef<"div"> {
-  /**
-   * The comment to display.
-   */
+export type CommentProps = {
   comment: CommentData;
-
-  /**
-   * The thread the comment belongs to.
-   */
   thread: ThreadData;
-
-  /**
-   * How to show or hide the actions.
-   */
-  showActions?: boolean | "hover";
-
-  /**
-   * Whether to show the resolve action.
-   */
-  showResolveAction?: boolean;
-
-  /**
-   * Whether to show the comment if it was deleted. If set to `false`, it will render deleted comments as `null`.
-   */
-  showDeleted?: boolean;
-
-  /**
-   * Whether to show reactions.
-   */
-  showReactions?: boolean;
-}
+  showResolveButton?: boolean;
+};
 
 /**
  * The Comment component displays a single comment with actions,
@@ -70,11 +38,7 @@ export interface CommentProps extends ComponentPropsWithoutRef<"div"> {
 export const Comment = ({
   comment,
   thread,
-  showDeleted,
-  showActions = "hover",
-  showReactions = true,
-  showResolveAction = false,
-  className,
+  showResolveButton,
 }: CommentProps) => {
   // TODO: if REST API becomes popular, all interactions (click handlers) should implement a loading state and error state
   // (or optimistic local updates)
@@ -92,6 +56,7 @@ export const Comment = ({
         },
       },
       schema,
+      sideMenuDetection: "editor",
     },
     [comment.body]
   );
@@ -172,7 +137,7 @@ export const Comment = ({
 
   const user = useUser(editor, comment.userId);
 
-  if (!showDeleted && !comment.body) {
+  if (!comment.body) {
     return null;
   }
 
@@ -182,12 +147,12 @@ export const Comment = ({
   const canEditComment = threadStore.auth.canUpdateComment(comment);
 
   const showResolveOrReopen =
-    showResolveAction &&
+    showResolveButton &&
     (thread.resolved
       ? threadStore.auth.canUnresolveThread(thread)
       : threadStore.auth.canResolveThread(thread));
 
-  if (showActions && !isEditing) {
+  if (!isEditing) {
     actions = (
       <Components.Generic.Toolbar.Root
         className={mergeCSSClasses("bn-action-toolbar", "bn-comment-actions")}
@@ -257,14 +222,10 @@ export const Comment = ({
     );
   }
 
-  const timeString =
-    comment.createdAt.toLocaleDateString(undefined, {
-      month: "short",
-      day: "numeric",
-    }) +
-    (comment.updatedAt.getTime() !== comment.createdAt.getTime()
-      ? " (edited)"
-      : "");
+  const timeString = comment.createdAt.toLocaleDateString(undefined, {
+    month: "short",
+    day: "numeric",
+  });
 
   if (!comment.body) {
     throw new Error("soft deletes are not yet supported");
@@ -274,47 +235,48 @@ export const Comment = ({
     <Components.Comments.Comment
       authorInfo={user ?? "loading"}
       timeString={timeString}
-      showActions={showActions}
+      edited={comment.updatedAt.getTime() !== comment.createdAt.getTime()}
+      showActions={"hover"}
       actions={actions}
-      className={className}>
+      className={"bn-thread-comment"}>
       <CommentEditor
+        autoFocus={isEditing}
         editor={commentEditor}
         editable={isEditing}
         actions={
-          (showReactions && comment.reactions.length > 0) || isEditing
+          comment.reactions.length > 0 || isEditing
             ? ({ isEmpty }) => (
                 <>
-                  {showReactions &&
-                    comment.reactions.length > 0 &&
-                    !isEditing && (
-                      <Components.Generic.Badge.Group
-                        className={mergeCSSClasses(
-                          "bn-badge-group",
-                          "bn-comment-reactions"
-                        )}>
-                        {comment.reactions.map((reaction) => (
-                          <ReactionBadge
-                            comment={comment}
-                            emoji={reaction.emoji}
-                            onReactionSelect={onReactionSelect}
-                          />
-                        ))}
-                        <EmojiPicker
-                          onEmojiSelect={(emoji: { native: string }) =>
-                            onReactionSelect(emoji.native)
-                          }>
-                          <Components.Generic.Badge.Root
-                            className={mergeCSSClasses(
-                              "bn-badge",
-                              "bn-comment-add-reaction"
-                            )}
-                            text={"+"}
-                            icon={<RiEmotionLine size={16} />}
-                            mainTooltip={dict.comments.actions.add_reaction}
-                          />
-                        </EmojiPicker>
-                      </Components.Generic.Badge.Group>
-                    )}
+                  {comment.reactions.length > 0 && !isEditing && (
+                    <Components.Generic.Badge.Group
+                      className={mergeCSSClasses(
+                        "bn-badge-group",
+                        "bn-comment-reactions"
+                      )}>
+                      {comment.reactions.map((reaction) => (
+                        <ReactionBadge
+                          key={reaction.emoji}
+                          comment={comment}
+                          emoji={reaction.emoji}
+                          onReactionSelect={onReactionSelect}
+                        />
+                      ))}
+                      <EmojiPicker
+                        onEmojiSelect={(emoji: { native: string }) =>
+                          onReactionSelect(emoji.native)
+                        }>
+                        <Components.Generic.Badge.Root
+                          className={mergeCSSClasses(
+                            "bn-badge",
+                            "bn-comment-add-reaction"
+                          )}
+                          text={"+"}
+                          icon={<RiEmotionLine size={16} />}
+                          mainTooltip={dict.comments.actions.add_reaction}
+                        />
+                      </EmojiPicker>
+                    </Components.Generic.Badge.Group>
+                  )}
                   {isEditing && (
                     <Components.Generic.Toolbar.Root
                       variant="action-toolbar"
diff --git a/packages/react/src/components/Comments/CommentEditor.tsx b/packages/react/src/components/Comments/CommentEditor.tsx
index 1d79b334f3..abf8f9c311 100644
--- a/packages/react/src/components/Comments/CommentEditor.tsx
+++ b/packages/react/src/components/Comments/CommentEditor.tsx
@@ -15,6 +15,7 @@ import { schema } from "./schema.js";
  *
  */
 export const CommentEditor = (props: {
+  autoFocus?: boolean;
   editable: boolean;
   actions?: FC<{
     isFocused: boolean;
@@ -46,14 +47,15 @@ export const CommentEditor = (props: {
   // When we click the edit button on a comment, we also want to focus the
   // comment editor
   useEffect(() => {
-    if (props.editable) {
+    if (props.editable && props.autoFocus) {
       props.editor.focus();
     }
-  }, [props.editable, props.editor]);
+  }, [props.autoFocus, props.editable, props.editor]);
 
   return (
     <>
       <components.Comments.Editor
+        autoFocus={props.autoFocus}
         className="bn-comment-editor"
         editor={props.editor}
         onFocus={onFocus}
diff --git a/packages/react/src/components/Comments/Comments.tsx b/packages/react/src/components/Comments/Comments.tsx
new file mode 100644
index 0000000000..5a61cc2f30
--- /dev/null
+++ b/packages/react/src/components/Comments/Comments.tsx
@@ -0,0 +1,87 @@
+import { ThreadData } from "@blocknote/core/comments";
+
+import { useComponentsContext } from "../../editor/ComponentsContext.js";
+import { useDictionary } from "../../i18n/dictionary.js";
+import { Comment } from "./Comment.js";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useUsers } from "./useUsers.js";
+
+export type CommentsProps = {
+  thread: ThreadData;
+  maxCommentsBeforeCollapse?: number;
+};
+
+export const Comments = ({
+  thread,
+  maxCommentsBeforeCollapse,
+}: CommentsProps) => {
+  const Components = useComponentsContext()!;
+  const dict = useDictionary();
+  const editor = useBlockNoteEditor();
+  const users = useUsers(editor, thread.resolvedBy ? [thread.resolvedBy] : []);
+
+  // Maps all comments to elements.
+  const comments = thread.comments.map((comment, index) => (
+    <Comment
+      key={comment.id}
+      thread={thread}
+      comment={comment}
+      showResolveButton={index === 0}
+    />
+  ));
+
+  // Adds "resolved by" comment if needed.
+  if (thread.resolved && thread.resolvedUpdatedAt && thread.resolvedBy) {
+    const resolvedByUser = users.get(thread.resolvedBy);
+    if (!resolvedByUser) {
+      throw new Error(
+        `User ${thread.resolvedBy} resolved thread ${thread.id}, but their data could not be found.`
+      );
+    }
+
+    const resolvedCommentIndex =
+      thread.comments.findLastIndex(
+        (comment) =>
+          thread.resolvedUpdatedAt!.getTime() > comment.createdAt.getTime()
+      ) + 1;
+
+    comments.splice(
+      resolvedCommentIndex,
+      0,
+      <Components.Comments.Comment
+        key={"resolved-comment"}
+        className={"bn-thread-comment"}
+        authorInfo={
+          (thread.resolvedBy && users.get(thread.resolvedBy)) || "loading"
+        }
+        timeString={thread.resolvedUpdatedAt.toLocaleDateString(undefined, {
+          month: "short",
+          day: "numeric",
+        })}
+        edited={false}
+        showActions={false}>
+        <div className={"bn-resolved-text"}>
+          {dict.comments.sidebar.marked_as_resolved}
+        </div>
+      </Components.Comments.Comment>
+    );
+  }
+
+  // Collapses replies if needed.
+  if (
+    maxCommentsBeforeCollapse &&
+    comments.length > maxCommentsBeforeCollapse
+  ) {
+    comments.splice(
+      1,
+      comments.length - 2,
+      <Components.Comments.ExpandSectionsPrompt
+        key={"expand-prompt"}
+        className={"bn-thread-expand-prompt"}>
+        {dict.comments.sidebar.more_replies(thread.comments.length - 2)}
+      </Components.Comments.ExpandSectionsPrompt>
+    );
+  }
+
+  return comments;
+};
diff --git a/packages/react/src/components/Comments/EmojiPicker.tsx b/packages/react/src/components/Comments/EmojiPicker.tsx
index 055706e4f0..2693ee956f 100644
--- a/packages/react/src/components/Comments/EmojiPicker.tsx
+++ b/packages/react/src/components/Comments/EmojiPicker.tsx
@@ -35,6 +35,7 @@ export const EmojiPicker = (props: {
       </Components.Generic.Popover.Trigger>
       <Components.Generic.Popover.Content variant={"panel-popover"}>
         <Picker
+          perLine={7}
           onClickOutside={() => setOpen(false)}
           onEmojiSelect={(emoji: { native: string }) => {
             props.onEmojiSelect(emoji);
diff --git a/packages/react/src/components/Comments/FloatingComposer.tsx b/packages/react/src/components/Comments/FloatingComposer.tsx
index a53ecfa0cf..347575e606 100644
--- a/packages/react/src/components/Comments/FloatingComposer.tsx
+++ b/packages/react/src/components/Comments/FloatingComposer.tsx
@@ -33,11 +33,13 @@ export function FloatingComposer() {
       },
     },
     schema,
+    sideMenuDetection: "editor",
   });
 
   return (
     <Components.Comments.Card className={"bn-thread"}>
       <CommentEditor
+        autoFocus={true}
         editable={true}
         editor={newCommentEditor}
         actions={({ isEmpty }) => (
diff --git a/packages/react/src/components/Comments/FloatingThreadController.tsx b/packages/react/src/components/Comments/FloatingThreadController.tsx
index 42e8959e80..9902722d21 100644
--- a/packages/react/src/components/Comments/FloatingThreadController.tsx
+++ b/packages/react/src/components/Comments/FloatingThreadController.tsx
@@ -19,6 +19,7 @@ import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useUIElementPositioning } from "../../hooks/useUIElementPositioning.js";
 import { useUIPluginState } from "../../hooks/useUIPluginState.js";
 import { Thread } from "./Thread.js";
+import { useThreads } from "./useThreads.js";
 
 /**
  * This component is used to display a thread in a floating card.
@@ -86,6 +87,8 @@ export const FloatingThreadController = <
 
   useLayoutEffect(updateRef, [updateRef]);
 
+  const threads = useThreads(editor);
+
   if (!isMounted || !state) {
     return null;
   }
@@ -102,7 +105,10 @@ export const FloatingThreadController = <
 
   return (
     <div ref={ref} style={style} {...getFloatingProps()}>
-      <Component threadId={state.selectedThreadId} />
+      <Component
+        thread={threads.get(state.selectedThreadId)!}
+        selected={true}
+      />
     </div>
   );
 };
diff --git a/packages/react/src/components/Comments/Thread.tsx b/packages/react/src/components/Comments/Thread.tsx
index 3b173a85cf..b6d4ff26d6 100644
--- a/packages/react/src/components/Comments/Thread.tsx
+++ b/packages/react/src/components/Comments/Thread.tsx
@@ -1,47 +1,50 @@
 import { mergeCSSClasses } from "@blocknote/core";
-import type { ComponentPropsWithoutRef } from "react";
-import { useCallback, useMemo } from "react";
+import { ThreadData } from "@blocknote/core/comments";
+import { FocusEvent, useCallback } from "react";
+
 import { useComponentsContext } from "../../editor/ComponentsContext.js";
 import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
 import { useCreateBlockNote } from "../../hooks/useCreateBlockNote.js";
 import { useDictionary } from "../../i18n/dictionary.js";
-import { Comment, CommentProps } from "./Comment.js";
 import { CommentEditor } from "./CommentEditor.js";
+import { Comments } from "./Comments.js";
 import { schema } from "./schema.js";
-import { useThreads } from "./useThreads.js";
-import { useUsers } from "./useUsers.js";
 
-export interface ThreadProps extends ComponentPropsWithoutRef<"div"> {
+export type ThreadProps = {
   /**
-   * The thread to display.
+   * The thread to display - you can use the `useThreads` hook to retrieve a
+   * `Map` of all threads in the editor, mapped by their IDs.
    */
-  threadId: string;
-
+  thread: ThreadData;
   /**
-   * Whether to show the composer to reply to the thread.
+   * A boolean flag for whether the thread is selected. Selected threads show an
+   * editor for replies, and add a `selected` CSS class to the thread.
    */
-  showComposer?: boolean;
-
+  selected?: boolean;
   /**
-   * Whether to show the action to resolve the thread.
+   * The text in the editor that the thread refers to. See the
+   * [`ThreadsSidebar`](https://github.com/TypeCellOS/BlockNote/tree/main/packages/react/src/components/Comments/ThreadsSidebar.tsx#L137)
+   * component to find out how to get this.
    */
-  showResolveAction?: boolean;
-
+  referenceText?: string;
   /**
-   * How to show or hide the actions.
+   * The maximum number of comments that can be in a thread before the replies
+   * get collapsed.
    */
-  showActions?: CommentProps["showActions"];
-
+  maxCommentsBeforeCollapse?: number;
   /**
-   * Whether to show reactions.
+   * A function to call when the thread is focused.
    */
-  showReactions?: CommentProps["showReactions"];
-
+  onFocus?: (event: FocusEvent) => void;
   /**
-   * Whether to show deleted comments.
+   * A function to call when the thread is blurred.
    */
-  showDeletedComments?: CommentProps["showDeleted"];
-}
+  onBlur?: (event: FocusEvent) => void;
+  /**
+   * The tab index for the thread.
+   */
+  tabIndex?: number;
+};
 
 /**
  * The Thread component displays a (main) comment with a list of replies (other comments).
@@ -49,46 +52,27 @@ export interface ThreadProps extends ComponentPropsWithoutRef<"div"> {
  * It also includes a composer to reply to the thread.
  */
 export const Thread = ({
-  threadId,
-  showActions = "hover",
-  showDeletedComments,
-  showResolveAction = true,
-  showReactions = true,
-  showComposer = true,
-  className,
-  ...props
+  thread,
+  selected,
+  referenceText,
+  maxCommentsBeforeCollapse,
+  onFocus,
+  onBlur,
+  tabIndex,
 }: ThreadProps) => {
   // TODO: if REST API becomes popular, all interactions (click handlers) should implement a loading state and error state
   // (or optimistic local updates)
 
+  const Components = useComponentsContext()!;
+  const dict = useDictionary();
+
   const editor = useBlockNoteEditor();
 
   const comments = editor.comments;
-
   if (!comments) {
     throw new Error("Comments plugin not found");
   }
 
-  const Components = useComponentsContext()!;
-  const dict = useDictionary();
-
-  const threadMap = useThreads(editor);
-  const thread = threadMap.get(threadId);
-
-  if (!thread) {
-    throw new Error("Thread not found");
-  }
-
-  const userIds = useMemo(() => {
-    return thread.comments.flatMap((c) => [
-      c.userId,
-      ...c.reactions.flatMap((r) => r.userIds),
-    ]);
-  }, [thread.comments]);
-
-  // load all user data
-  useUsers(editor, userIds);
-
   const newCommentEditor = useCreateBlockNote({
     trailingBlock: false,
     dictionary: {
@@ -98,14 +82,9 @@ export const Thread = ({
       },
     },
     schema,
+    sideMenuDetection: "editor",
   });
 
-  const firstCommentIndex = useMemo(() => {
-    return showDeletedComments
-      ? 0
-      : thread.comments.findIndex((comment) => comment.body);
-  }, [showDeletedComments, thread.comments]);
-
   const onNewCommentSave = useCallback(async () => {
     await comments.threadStore.addComment({
       comment: {
@@ -118,38 +97,30 @@ export const Thread = ({
     newCommentEditor.removeBlocks(newCommentEditor.document);
   }, [comments, newCommentEditor, thread.id]);
 
-  showComposer =
-    showComposer && comments.threadStore.auth.canAddComment(thread);
-
   return (
     <Components.Comments.Card
-      className={mergeCSSClasses("bn-thread", className)}
-      {...props}>
+      className={"bn-thread"}
+      headerText={referenceText}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      selected={selected}
+      tabIndex={tabIndex}>
       <Components.Comments.CardSection className="bn-thread-comments">
-        {thread.comments.map((comment, index) => {
-          const isFirstComment = index === firstCommentIndex;
-
-          return (
-            <Comment
-              key={comment.id}
-              thread={thread}
-              className="bn-thread-comment"
-              comment={comment}
-              showDeleted={showDeletedComments}
-              showActions={showActions}
-              showReactions={showReactions}
-              showResolveAction={isFirstComment}
-            />
-          );
-        })}
+        <Comments
+          thread={thread}
+          maxCommentsBeforeCollapse={
+            !selected ? maxCommentsBeforeCollapse || 5 : undefined
+          }
+        />
       </Components.Comments.CardSection>
-      {showComposer && (
-        <Components.Comments.CardSection>
+      {selected && (
+        <Components.Comments.CardSection className={"bn-thread-composer"}>
           <CommentEditor
+            autoFocus={false}
             editable={true}
             editor={newCommentEditor}
-            actions={({ isFocused, isEmpty }) => {
-              if (!isFocused && isEmpty) {
+            actions={({ isEmpty }) => {
+              if (isEmpty) {
                 return null;
               }
 
diff --git a/packages/react/src/components/Comments/ThreadsSidebar.tsx b/packages/react/src/components/Comments/ThreadsSidebar.tsx
new file mode 100644
index 0000000000..443ebbf0e4
--- /dev/null
+++ b/packages/react/src/components/Comments/ThreadsSidebar.tsx
@@ -0,0 +1,257 @@
+import { BlockNoteEditor, UnreachableCaseError } from "@blocknote/core";
+import { ThreadData } from "@blocknote/core/comments";
+import React, { FocusEvent, useCallback, useMemo } from "react";
+import { useBlockNoteEditor } from "../../hooks/useBlockNoteEditor.js";
+import { useUIPluginState } from "../../hooks/useUIPluginState.js";
+import { Thread } from "./Thread.js";
+import { useThreads } from "./useThreads.js";
+
+type ThreadItemProps = {
+  thread: ThreadData;
+  selectedThreadId?: string;
+  editor: BlockNoteEditor<any, any, any>;
+  maxCommentsBeforeCollapse?: number;
+  referenceText: string;
+};
+
+/**
+ * This component is memoized because it's a child of the ThreadsSidebar component,
+ * which rerenders on every document update.
+ */
+const ThreadItem = React.memo(
+  ({
+    thread,
+    selectedThreadId,
+    editor,
+    maxCommentsBeforeCollapse,
+    referenceText,
+  }: ThreadItemProps) => {
+    const onFocus = useCallback(
+      (event: FocusEvent) => {
+        // If the focused element is within the action toolbar, we don't want to
+        // focus the thread for UX reasons.
+        if ((event.target as HTMLElement).closest(".bn-action-toolbar")) {
+          return;
+        }
+
+        editor.comments?.selectThread(thread.id);
+      },
+      [editor.comments, thread.id]
+    );
+
+    const onBlur = useCallback(
+      (event: React.FocusEvent) => {
+        // If the focused element is within the action toolbar, we don't want to
+        // blur the thread for UX reasons.
+        if (
+          (event.relatedTarget as HTMLElement).closest(".bn-action-toolbar")
+        ) {
+          return;
+        }
+
+        const targetElement =
+          event.target instanceof Node ? event.target : null;
+        const parentThreadElement =
+          event.relatedTarget instanceof Node
+            ? event.relatedTarget.closest(".bn-thread")
+            : null;
+
+        // When you focus the editor (reply composer), we don't want to unselect the thread
+        // This check prevents that. But we still want to unselect the thread when it gets blurred in all other cases
+        if (
+          !targetElement ||
+          !parentThreadElement ||
+          !parentThreadElement.contains(targetElement)
+        ) {
+          editor.comments?.selectThread(undefined);
+        }
+      },
+      [editor.comments]
+    );
+
+    return (
+      <Thread
+        thread={thread}
+        selected={thread.id === selectedThreadId}
+        referenceText={referenceText}
+        maxCommentsBeforeCollapse={maxCommentsBeforeCollapse}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        tabIndex={0}
+      />
+    );
+  }
+);
+
+function sortThreads(
+  threads: ThreadData[],
+  sort: "position" | "recent-activity" | "oldest",
+  threadPositions?: Map<string, { from: number; to: number }>
+) {
+  if (sort === "recent-activity") {
+    // sort by latest comment in thread first
+    return threads.sort(
+      (a, b) =>
+        b.comments[b.comments.length - 1].createdAt.getTime() -
+        a.comments[a.comments.length - 1].createdAt.getTime()
+    );
+  }
+
+  if (sort === "oldest") {
+    // sort by oldest thread first
+    return threads.sort(
+      (a, b) => a.createdAt.getTime() - b.createdAt.getTime()
+    );
+  }
+
+  if (sort === "position") {
+    // sort by position in document (when the comment mark is deleted, use Number.MAX_VALUE)
+    return threads.sort((a, b) => {
+      const threadA = threadPositions?.get(a.id)?.from || Number.MAX_VALUE;
+      const threadB = threadPositions?.get(b.id)?.from || Number.MAX_VALUE;
+
+      return threadA - threadB;
+    });
+  }
+
+  throw new UnreachableCaseError(sort);
+}
+
+/**
+ * Returns the text for a thread (basically, the text where the mark is).
+ *
+ * Note / TODO: it might be nicer to store and use the original content
+ * when the thread was created, instead of taking the actual content from the editor
+ */
+export function getReferenceText(
+  editor: BlockNoteEditor<any, any, any>,
+  threadPosition?: {
+    from: number;
+    to: number;
+  }
+) {
+  if (!threadPosition) {
+    return "Original content deleted";
+  }
+
+  // TODO: Handles an edge case where the editor is re-rendered and the document
+  //  is not yet fetched (causing it to be empty). We should store the original
+  //  reference text in the data model, as not only is it a general improvement,
+  //  but it also means we won't have to handle this edge case.
+  if (editor.prosemirrorState.doc.nodeSize < threadPosition.to) {
+    return "";
+  }
+
+  const referenceText = editor.prosemirrorState.doc.textBetween(
+    threadPosition.from,
+    threadPosition.to
+  );
+
+  if (referenceText.length > 15) {
+    return `${referenceText.slice(0, 15)}…`;
+  }
+
+  return referenceText;
+}
+
+/**
+ * The ThreadsSidebar component can be used to display a list of comments in a sidebar.
+ *
+ * This component is similar to Google Docs "Show All Comments" sidebar (cmd+option+shift+A)
+ */
+export function ThreadsSidebar(props: {
+  /**
+   * Filter the comments in the sidebar. Can pass `"open"`, `"resolved"`, or
+   * `"all"`, to only show open, resolved, or all comments.
+   *
+   * @default "all"
+   */
+  filter?: "open" | "resolved" | "all";
+  /**
+   * The maximum number of comments that can be in a thread before the replies
+   * get collapsed.
+   *
+   * @default 5
+   */
+  maxCommentsBeforeCollapse?: number;
+  /**
+   * Sort the comments in the sidebar. Can pass `"position"`,
+   * `"recent-activity"`, or `"oldest"`. Sorting by `"recent-activity"` uses the
+   * most recently added comment to sort threads, while `"oldest"` uses the
+   * thread creation date. Sorting by `"position"` puts comments in the same
+   * order as their reference text in the editor.
+   *
+   * @default "position"
+   */
+  sort?: "position" | "recent-activity" | "oldest";
+}) {
+  const editor = useBlockNoteEditor();
+
+  if (!editor.comments) {
+    throw new Error("Comments plugin not found");
+  }
+
+  // Note: because "threadPositions" is part of the state,
+  // this will potentially trigger a re-render on every document update
+  // this means we need to be mindful of children memoization
+  const state = useUIPluginState(
+    editor.comments.onUpdate.bind(editor.comments)
+  );
+
+  const selectedThreadId = state?.selectedThreadId;
+
+  const threads = useThreads(editor);
+
+  const filteredAndSortedThreads = useMemo(() => {
+    const threadsArray = Array.from(threads.values());
+
+    const sortedThreads = sortThreads(
+      threadsArray,
+      props.sort || "position",
+      state?.threadPositions
+    );
+
+    const ret: Array<{ thread: ThreadData; referenceText: string }> = [];
+
+    for (const thread of sortedThreads) {
+      if (!thread.resolved) {
+        if (props.filter === "open" || props.filter === "all") {
+          ret.push({
+            thread,
+            referenceText: getReferenceText(
+              editor,
+              state?.threadPositions.get(thread.id)
+            ),
+          });
+        }
+      } else {
+        if (props.filter === "resolved" || props.filter === "all") {
+          ret.push({
+            thread,
+            referenceText: getReferenceText(
+              editor,
+              state?.threadPositions.get(thread.id)
+            ),
+          });
+        }
+      }
+    }
+
+    return ret;
+  }, [threads, state?.threadPositions, props.filter, props.sort, editor]);
+
+  return (
+    <div className={"bn-threads-sidebar"}>
+      {filteredAndSortedThreads.map((thread) => (
+        <ThreadItem
+          key={thread.thread.id}
+          thread={thread.thread}
+          selectedThreadId={selectedThreadId}
+          editor={editor}
+          referenceText={thread.referenceText}
+          maxCommentsBeforeCollapse={props.maxCommentsBeforeCollapse}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/react/src/editor/BlockNoteView.tsx b/packages/react/src/editor/BlockNoteView.tsx
index 4f44d9b262..4737afd4b2 100644
--- a/packages/react/src/editor/BlockNoteView.tsx
+++ b/packages/react/src/editor/BlockNoteView.tsx
@@ -33,6 +33,7 @@ import {
 } from "./BlockNoteViewContext.js";
 import { Portals, getContentComponent } from "./EditorContent.js";
 import { ElementRenderer } from "./ElementRenderer.js";
+
 import "./styles.css";
 
 const emptyFn = () => {
@@ -104,6 +105,7 @@ function BlockNoteViewComponent<
     sideMenu,
     filePanel,
     tableHandles,
+    comments,
     autoFocus,
     renderEditor = !editor.headless,
     ...rest
@@ -156,14 +158,12 @@ function BlockNoteViewComponent<
     sideMenu,
     filePanel,
     tableHandles,
+    comments,
   };
 
   const editorProps = {
     autoFocus,
-    className,
-    editorColorScheme,
     contentEditableProps,
-    ...rest,
   };
 
   return (
@@ -174,16 +174,47 @@ function BlockNoteViewComponent<
           defaultUIProps,
         }}>
         <ElementRenderer ref={setElementRenderer} />
-        {renderEditor ? (
-          <BlockNoteViewEditor ref={ref}>{children}</BlockNoteViewEditor>
-        ) : (
-          children
-        )}
+        <BlockNoteViewContainer
+          className={className}
+          renderEditor={renderEditor}
+          editorColorScheme={editorColorScheme}
+          ref={ref}
+          {...rest}>
+          {children}
+        </BlockNoteViewContainer>
       </BlockNoteViewContext.Provider>
     </BlockNoteContext.Provider>
   );
 }
 
+/**
+ * Renders the div that wraps the editor and all default UI elements
+ * (.bn-container element).
+ */
+const BlockNoteViewContainer = React.forwardRef<
+  HTMLDivElement,
+  {
+    renderEditor: boolean;
+    editorColorScheme: "light" | "dark";
+    children: ReactNode;
+  } & Omit<
+    HTMLAttributes<HTMLDivElement>,
+    "onChange" | "onSelectionChange" | "children"
+  >
+>(({ className, renderEditor, editorColorScheme, children, ...rest }, ref) => (
+  <div
+    className={mergeCSSClasses("bn-container", editorColorScheme, className)}
+    data-color-scheme={editorColorScheme}
+    {...rest}
+    ref={ref}>
+    {renderEditor ? (
+      <BlockNoteViewEditor>{children}</BlockNoteViewEditor>
+    ) : (
+      children
+    )}
+  </div>
+));
+
 // https://fettblog.eu/typescript-react-generic-forward-refs/
 export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as <
   BSchema extends BlockSchema,
@@ -196,84 +227,52 @@ export const BlockNoteViewRaw = React.forwardRef(BlockNoteViewComponent) as <
 ) => ReturnType<typeof BlockNoteViewComponent<BSchema, ISchema, SSchema>>;
 
 /**
- * Renders the editor itself and the default UI elements
+ * Renders the contentEditable editor itself (.bn-editor element) and the
+ * default UI elements.
  */
-export const BlockNoteViewEditor = React.forwardRef(
-  (props: { children: ReactNode }, ref: React.Ref<HTMLDivElement>) => {
-    const ctx = useBlockNoteViewContext()!;
-    const editor = useBlockNoteEditor();
+export const BlockNoteViewEditor = (props: { children?: ReactNode }) => {
+  const ctx = useBlockNoteViewContext()!;
+  const editor = useBlockNoteEditor();
 
-    const portalManager = useMemo(() => {
-      return getContentComponent();
-    }, []);
+  const portalManager = useMemo(() => {
+    return getContentComponent();
+  }, []);
 
-    const mount = useCallback(
-      (element: HTMLElement | null) => {
-        editor.mount(element, portalManager);
-      },
-      [editor, portalManager]
-    );
+  const mount = useCallback(
+    (element: HTMLElement | null) => {
+      editor.mount(element, portalManager);
+    },
+    [editor, portalManager]
+  );
 
-    return (
-      <>
-        <Portals contentComponent={portalManager} />
-        <EditorElement {...ctx.editorProps} {...props} mount={mount} ref={ref}>
-          {/* Renders the UI elements such as formatting toolbar, etc, unless they have been explicitly disabled  in defaultUIProps */}
-          <BlockNoteDefaultUI {...ctx.defaultUIProps} />
-          {/* Manually passed in children, such as customized UI elements / controllers */}
-          {props.children}
-        </EditorElement>
-      </>
-    );
-  }
-);
+  return (
+    <>
+      <Portals contentComponent={portalManager} />
+      <ContentEditableElement {...ctx.editorProps} {...props} mount={mount} />
+      {/* Renders the UI elements such as formatting toolbar, etc, unless they have been explicitly disabled  in defaultUIProps */}
+      <BlockNoteDefaultUI {...ctx.defaultUIProps} />
+      {/* Manually passed in children, such as customized UI elements / controllers */}
+      {props.children}
+    </>
+  );
+};
 
 /**
- * Renders the container div + contentEditable div.
+ * Renders the contentEditable editor itself (.bn-editor element).
  */
-const EditorElement = React.forwardRef(
-  (
-    props: {
-      className?: string;
-      editorColorScheme?: string;
-      autoFocus?: boolean;
-      mount: (element: HTMLElement | null) => void;
-      contentEditableProps?: Record<string, any>;
-      children: ReactNode;
-    } & HTMLAttributes<HTMLDivElement>,
-    ref: React.Ref<HTMLDivElement>
-  ) => {
-    const {
-      className,
-      editorColorScheme,
-      autoFocus,
-      mount,
-      children,
-      contentEditableProps,
-      ...rest
-    } = props;
-    return (
-      // The container wraps the contentEditable div and UI Elements such as sidebar, formatting toolbar, etc.
-      <div
-        className={mergeCSSClasses(
-          "bn-container",
-          editorColorScheme,
-          className
-        )}
-        data-color-scheme={editorColorScheme}
-        {...rest}
-        ref={ref}>
-        {/* The actual contentEditable that Prosemirror mounts to */}
-        <div
-          aria-autocomplete="list"
-          aria-haspopup="listbox"
-          data-bn-autofocus={autoFocus}
-          ref={mount}
-          {...contentEditableProps}
-        />
-        {/* The UI elements such as sidebar, formatting toolbar, etc. */}
-        {children}
-      </div>
-    );
-  }
-);
+const ContentEditableElement = (props: {
+  autoFocus?: boolean;
+  mount: (element: HTMLElement | null) => void;
+  contentEditableProps?: Record<string, any>;
+}) => {
+  const { autoFocus, mount, contentEditableProps } = props;
+  return (
+    <div
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      data-bn-autofocus={autoFocus}
+      ref={mount}
+      {...contentEditableProps}
+    />
+  );
+};
diff --git a/packages/react/src/editor/BlockNoteViewContext.ts b/packages/react/src/editor/BlockNoteViewContext.ts
index f285ddace4..c96e197afa 100644
--- a/packages/react/src/editor/BlockNoteViewContext.ts
+++ b/packages/react/src/editor/BlockNoteViewContext.ts
@@ -2,7 +2,10 @@ import { createContext, useContext } from "react";
 import { BlockNoteDefaultUIProps } from "./BlockNoteDefaultUI.js";
 
 export type BlockNoteViewContextValue = {
-  editorProps: any;
+  editorProps: {
+    autoFocus?: boolean;
+    contentEditableProps?: Record<string, any>;
+  };
   defaultUIProps: BlockNoteDefaultUIProps;
 };
 
diff --git a/packages/react/src/editor/ComponentsContext.tsx b/packages/react/src/editor/ComponentsContext.tsx
index 400d7ba9ef..19f404e8d7 100644
--- a/packages/react/src/editor/ComponentsContext.tsx
+++ b/packages/react/src/editor/ComponentsContext.tsx
@@ -36,6 +36,18 @@ type ToolbarButtonType = {
   | { children?: undefined; label: string }
 );
 
+type ToolbarSelectType = {
+  className?: string;
+  items: {
+    text: string;
+    icon: ReactNode;
+    onClick: () => void;
+    isSelected: boolean;
+    isDisabled?: boolean;
+  }[];
+  isDisabled?: boolean;
+};
+
 type MenuButtonType = {
   className?: string;
   onClick?: (e: MouseEvent) => void;
@@ -52,17 +64,7 @@ export type ComponentProps = {
   FormattingToolbar: {
     Root: ToolbarRootType;
     Button: ToolbarButtonType;
-    Select: {
-      className?: string;
-      items: {
-        text: string;
-        icon: ReactNode;
-        onClick: () => void;
-        isSelected: boolean;
-        isDisabled?: boolean;
-      }[];
-      isDisabled?: boolean;
-    };
+    Select: ToolbarSelectType;
   };
   FilePanel: {
     Root: {
@@ -105,6 +107,7 @@ export type ComponentProps = {
   LinkToolbar: {
     Root: ToolbarRootType;
     Button: ToolbarButtonType;
+    Select: ToolbarSelectType;
   };
   SideMenu: {
     Root: {
@@ -199,14 +202,24 @@ export type ComponentProps = {
   Comments: {
     Card: {
       className?: string;
+      headerText?: string;
+      selected?: boolean;
+      onFocus?: (event: React.FocusEvent) => void;
+      onBlur?: (event: React.FocusEvent) => void;
+      tabIndex?: number;
       children?: ReactNode;
     };
     CardSection: {
       className?: string;
       children?: ReactNode;
     };
+    ExpandSectionsPrompt: {
+      className?: string;
+      children?: ReactNode;
+    };
     Editor: {
       className?: string;
+      autoFocus?: boolean;
       editable: boolean;
       editor: BlockNoteEditor<any, any, any>;
       onFocus?: () => void;
@@ -217,6 +230,7 @@ export type ComponentProps = {
       children?: ReactNode;
       authorInfo: "loading" | User;
       timeString: string;
+      edited: boolean;
       actions?: ReactNode;
       showActions?: boolean | "hover";
     };
@@ -318,6 +332,7 @@ export type ComponentProps = {
     Toolbar: {
       Root: ToolbarRootType;
       Button: ToolbarButtonType;
+      Select: ToolbarSelectType;
     };
   };
 };
diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css
index 2ac35161d8..eed164ff37 100644
--- a/packages/react/src/editor/styles.css
+++ b/packages/react/src/editor/styles.css
@@ -39,8 +39,8 @@
   --bn-colors-highlights-pink-background: #f4dfeb;
 
   --bn-font-family: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
-    "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  "Open Sans", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+  "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   --bn-border-radius: 6px;
 
   /* Derived values */
@@ -112,8 +112,8 @@
 
 /* Indent line styling */
 .bn-block-group
-  .bn-block-group
-  .bn-block-outer:not([data-prev-depth-changed])::before {
+.bn-block-group
+.bn-block-outer:not([data-prev-depth-changed])::before {
   border-left: 1px solid var(--bn-colors-side-menu);
 }
 
@@ -238,3 +238,31 @@
 .bn-side-menu[data-url="false"] {
   height: 54px;
 }
+
+/* Thread sidebar styling */
+.bn-threads-sidebar {
+  border-radius: var(--bn-border-radius-medium);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+}
+
+.bn-thread-expand-prompt .mantine-Text-root,
+.bn-thread .bn-header-text {
+  color: var(--bn-colors-menu-text);
+}
+
+.bn-threads-sidebar .bn-thread .bn-editor {
+  background-color: transparent;
+}
+
+.bn-threads-sidebar .bn-thread.selected {
+  background-color: #F5F9FD;
+  border: 2px solid #C2DCF8;
+}
+
+.dark .bn-threads-sidebar .bn-thread.selected {
+  background-color: #20242A;
+  border: 2px solid #23405B;
+}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index e697dc7734..9341b46171 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -98,6 +98,17 @@ export * from "./components/TableHandles/TableHandleMenu/DefaultButtons/DeleteBu
 export * from "./components/TableHandles/TableHandleMenu/TableHandleMenu.js";
 export * from "./components/TableHandles/TableHandleMenu/TableHandleMenuProps.js";
 
+// TODO: Revise comments exports/packaging
+export * from "./components/Comments/Comment.js";
+export * from "./components/Comments/Comments.js";
+export * from "./components/Comments/FloatingComposer.js";
+export * from "./components/Comments/FloatingComposerController.js";
+export * from "./components/Comments/FloatingThreadController.js";
+export * from "./components/Comments/Thread.js";
+export * from "./components/Comments/ThreadsSidebar.js";
+export * from "./components/Comments/useThreads.js";
+export * from "./components/Comments/useUsers.js";
+
 export * from "./hooks/useActiveStyles.js";
 export * from "./hooks/useBlockNoteEditor.js";
 export * from "./hooks/useCreateBlockNote.js";
diff --git a/packages/shadcn/src/comments/Card.tsx b/packages/shadcn/src/comments/Card.tsx
index 21de48b9d6..57d5df5aa0 100644
--- a/packages/shadcn/src/comments/Card.tsx
+++ b/packages/shadcn/src/comments/Card.tsx
@@ -9,7 +9,16 @@ export const Card = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Card"]
 >((props, ref) => {
-  const { className, children, ...rest } = props;
+  const {
+    className,
+    children,
+    selected,
+    headerText,
+    onFocus,
+    onBlur,
+    tabIndex,
+    ...rest
+  } = props;
 
   assertEmpty(rest);
 
@@ -17,8 +26,20 @@ export const Card = forwardRef<
 
   return (
     <ShadCNComponents.Card.Card
-      className={cn(className, "bn-w-[300px]")}
+      className={cn(
+        className,
+        "bn-w-[300px]",
+        selected ? "bn-bg-accent bn-text-accent-foreground" : ""
+      )}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      tabIndex={tabIndex}
       ref={ref}>
+      {headerText && (
+        <div className={"bn-px-4 bn-pt-4 bn-italic bn-text-sm"}>
+          {headerText}
+        </div>
+      )}
       {children}
     </ShadCNComponents.Card.Card>
   );
@@ -46,3 +67,25 @@ export const CardSection = forwardRef<
     </div>
   );
 });
+
+export const ExpandSectionsPrompt = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["Comments"]["ExpandSectionsPrompt"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest, false);
+
+  const ShadCNComponents = useShadCNComponentsContext()!;
+
+  return (
+    <ShadCNComponents.Button.Button
+      className={cn(
+        className,
+        "bn-p-0 bn-w-fit bn-text-foreground bn-bg-transparent hover:bn-bg-transparent"
+      )}
+      ref={ref}>
+      {children}
+    </ShadCNComponents.Button.Button>
+  );
+});
diff --git a/packages/shadcn/src/comments/Comment.tsx b/packages/shadcn/src/comments/Comment.tsx
index 9590c1d3b2..90c3df5398 100644
--- a/packages/shadcn/src/comments/Comment.tsx
+++ b/packages/shadcn/src/comments/Comment.tsx
@@ -7,9 +7,12 @@ import { useShadCNComponentsContext } from "../ShadCNComponentsContext.js";
 
 const AuthorInfo = forwardRef<
   HTMLDivElement,
-  Pick<ComponentProps["Comments"]["Comment"], "authorInfo" | "timeString">
+  Pick<
+    ComponentProps["Comments"]["Comment"],
+    "authorInfo" | "timeString" | "edited"
+  >
 >((props, _ref) => {
-  const { authorInfo, timeString, ...rest } = props;
+  const { authorInfo, timeString, edited, ...rest } = props;
 
   assertEmpty(rest, false);
 
@@ -54,7 +57,9 @@ const AuthorInfo = forwardRef<
           "bn-flex bn-flex-row bn-flex-nowrap bn-items-center bn-gap-2"
         }>
         <span className={"bn-text-sm bn-font-bold"}>{authorInfo.username}</span>
-        <span className={"bn-text-xs"}>{timeString}</span>
+        <span className={"bn-text-xs"}>
+          {timeString} {edited && "(edited)"}
+        </span>
       </div>
     </div>
   );
@@ -70,6 +75,7 @@ export const Comment = forwardRef<
     authorInfo,
     timeString,
     actions,
+    edited,
     children,
     ...rest
   } = props;
@@ -91,11 +97,7 @@ export const Comment = forwardRef<
       ref={ref}
       className={cn(className, "bn-relative bn-flex bn-flex-col bn-gap-2")}
       onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => {
-        // TODO: This is getting triggered when opening the "more actions"
-        //  popover?
-        setHovered(false);
-      }}>
+      onMouseLeave={() => setHovered(false)}>
       {doShowActions ? (
         <div
           className={"bn-absolute bn-right-0 bn-top-0 bn-z-10"}
diff --git a/packages/shadcn/src/comments/Editor.tsx b/packages/shadcn/src/comments/Editor.tsx
index a9184cb3a6..4da4bdfa07 100644
--- a/packages/shadcn/src/comments/Editor.tsx
+++ b/packages/shadcn/src/comments/Editor.tsx
@@ -14,13 +14,14 @@ export const Editor = forwardRef<
   HTMLDivElement,
   ComponentProps["Comments"]["Editor"]
 >((props, ref) => {
-  const { className, onFocus, onBlur, editor, editable, ...rest } = props;
+  const { className, onFocus, onBlur, autoFocus, editor, editable, ...rest } =
+    props;
 
   assertEmpty(rest);
 
   return (
     <BlockNoteView
-      autoFocus={true}
+      autoFocus={autoFocus}
       className={cn(className, "")}
       editor={props.editor}
       sideMenu={false}
diff --git a/packages/shadcn/src/components.ts b/packages/shadcn/src/components.ts
index 0b719e4fbe..8eeb14b9b2 100644
--- a/packages/shadcn/src/components.ts
+++ b/packages/shadcn/src/components.ts
@@ -27,7 +27,7 @@ import { SuggestionMenuLoader } from "./suggestionMenu/SuggestionMenuLoader.js";
 import { ExtendButton } from "./tableHandle/ExtendButton.js";
 import { TableHandle } from "./tableHandle/TableHandle.js";
 import { Toolbar, ToolbarButton, ToolbarSelect } from "./toolbar/Toolbar.js";
-import { Card, CardSection } from "./comments/Card.js";
+import { Card, CardSection, ExpandSectionsPrompt } from "./comments/Card.js";
 import { Comment } from "./comments/Comment.js";
 import { Editor } from "./comments/Editor.js";
 import { Badge, BadgeGroup } from "./badge/Badge.js";
@@ -54,6 +54,7 @@ export const components: Components = {
   LinkToolbar: {
     Root: Toolbar,
     Button: ToolbarButton,
+    Select: ToolbarSelect,
   },
   SideMenu: {
     Root: SideMenu,
@@ -81,6 +82,7 @@ export const components: Components = {
     Editor: Editor,
     Card: Card,
     CardSection: CardSection,
+    ExpandSectionsPrompt: ExpandSectionsPrompt,
   },
   Generic: {
     Badge: {
@@ -90,6 +92,7 @@ export const components: Components = {
     Toolbar: {
       Root: Toolbar,
       Button: ToolbarButton,
+      Select: ToolbarSelect,
     },
     Form: {
       Root: Form,
diff --git a/packages/shadcn/src/style.css b/packages/shadcn/src/style.css
index 6023d31cd9..00c52b6180 100644
--- a/packages/shadcn/src/style.css
+++ b/packages/shadcn/src/style.css
@@ -169,6 +169,7 @@
 .bn-shadcn .bn-extend-button-add-remove-rows {
   cursor: row-resize;
 }
+
 .bn-shadcn .bn-toolbar {
   overflow-x: auto;
   max-width: 100vw;
@@ -183,3 +184,8 @@
   padding: 0 4px;
   height: 12px;
 }
+
+.bn-shadcn .bn-thread .bn-resolved-text {
+  font-size: 14px;
+  font-style: italic;
+}
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index b2f7adda71..122f6c5c9a 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -1204,6 +1204,30 @@
           "pathFromRoot": "examples/07-collaboration",
           "slug": "collaboration"
         }
+      },
+      {
+        "projectSlug": "comments-with-sidebar",
+        "fullSlug": "collaboration/comments-with-sidebar",
+        "pathFromRoot": "examples/07-collaboration/05-comments-with-sidebar",
+        "config": {
+          "playground": true,
+          "docs": true,
+          "author": "matthewlipski",
+          "tags": [
+            "Advanced",
+            "Comments",
+            "Collaboration"
+          ],
+          "dependencies": {
+            "@y-sweet/react": "^0.6.3",
+            "@mantine/core": "^7.10.1"
+          } as any
+        },
+        "title": "Threads Sidebar",
+        "group": {
+          "pathFromRoot": "examples/07-collaboration",
+          "slug": "collaboration"
+        }
       }
     ]
   },
diff --git a/playground/src/style.css b/playground/src/style.css
index 43b27bc082..f6001c9206 100644
--- a/playground/src/style.css
+++ b/playground/src/style.css
@@ -14,10 +14,20 @@ body {
   padding-top: 0;
 }
 
+.mantine-AppShell-root {
+  height: 100vh;
+  width: 100vw;
+}
+
 .mantine-AppShell-navbar {
   background-color: #f7f7f5;
 }
 
+.mantine-AppShell-main {
+  height: 100%;
+  width: 100%;
+}
+
 @media (max-width: 767px) {
   .mantine-AppShell-navbar {
     display: none !important;