From 4f4de3a53dbc083070c2a53b94a8569947edd3d3 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 13 May 2026 14:07:32 +0200
Subject: [PATCH 1/5] feat: smart composer experiment

---
 .../fields/RichTextEditor/RichTextToolbar.tsx |  59 ++--
 .../src/components/fields/RichTextInput.tsx   | 276 +++++++++++-------
 .../src/components/icons/Maximize/filled.svg  |   7 +
 .../src/components/icons/Maximize/index.tsx   |  10 +
 .../components/icons/Maximize/outlined.svg    |   7 +
 .../src/components/icons/Minimize/filled.svg  |   7 +
 .../src/components/icons/Minimize/index.tsx   |  10 +
 .../components/icons/Minimize/outlined.svg    |   7 +
 packages/shared/src/components/icons/index.ts |   2 +
 .../shared/src/components/modals/common.tsx   |   8 +
 .../src/components/modals/common/types.ts     |   1 +
 .../modals/post/SmartComposerModal.tsx        | 254 ++++++++++++++++
 .../components/post/composer/AudienceChip.tsx | 268 +++++++++++++++++
 .../post/composer/KindModePicker.tsx          | 109 +++++++
 .../src/components/post/composer/LinkForm.tsx | 112 +++++++
 .../src/components/post/composer/PollForm.tsx | 181 ++++++++++++
 .../src/components/post/composer/TextForm.tsx | 198 +++++++++++++
 .../src/components/post/composer/types.ts     |  30 ++
 .../post/composer/useComposerAudience.ts      |  81 +++++
 .../post/composer/useComposerSubmit.ts        | 272 +++++++++++++++++
 .../components/post/composer/utils.spec.ts    |  18 ++
 .../src/components/post/composer/utils.ts     |  25 ++
 .../post/write/CreatePostButton.tsx           |  48 ++-
 .../shared/src/hooks/post/useSmartComposer.ts |  12 +
 .../src/hooks/squads/usePostToSquad.tsx       |  25 +-
 packages/shared/src/lib/featureManagement.ts  |   2 +
 26 files changed, 1884 insertions(+), 145 deletions(-)
 create mode 100644 packages/shared/src/components/icons/Maximize/filled.svg
 create mode 100644 packages/shared/src/components/icons/Maximize/index.tsx
 create mode 100644 packages/shared/src/components/icons/Maximize/outlined.svg
 create mode 100644 packages/shared/src/components/icons/Minimize/filled.svg
 create mode 100644 packages/shared/src/components/icons/Minimize/index.tsx
 create mode 100644 packages/shared/src/components/icons/Minimize/outlined.svg
 create mode 100644 packages/shared/src/components/modals/post/SmartComposerModal.tsx
 create mode 100644 packages/shared/src/components/post/composer/AudienceChip.tsx
 create mode 100644 packages/shared/src/components/post/composer/KindModePicker.tsx
 create mode 100644 packages/shared/src/components/post/composer/LinkForm.tsx
 create mode 100644 packages/shared/src/components/post/composer/PollForm.tsx
 create mode 100644 packages/shared/src/components/post/composer/TextForm.tsx
 create mode 100644 packages/shared/src/components/post/composer/types.ts
 create mode 100644 packages/shared/src/components/post/composer/useComposerAudience.ts
 create mode 100644 packages/shared/src/components/post/composer/useComposerSubmit.ts
 create mode 100644 packages/shared/src/components/post/composer/utils.spec.ts
 create mode 100644 packages/shared/src/components/post/composer/utils.ts
 create mode 100644 packages/shared/src/hooks/post/useSmartComposer.ts

diff --git a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
index c6c43ac4763..0866de26d9c 100644
--- a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
+++ b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import type { ReactElement, ReactNode, Ref } from 'react';
 import React, {
   useState,
@@ -24,9 +25,13 @@ import { LinkModal } from './LinkModal';
 export interface RichTextToolbarProps {
   editor: Editor;
   onLinkAdd: (url: string, label?: string) => void;
+  leadingActions?: ReactNode;
   inlineActions?: ReactNode;
   rightActions?: ReactNode;
   allowBlockFormatting?: boolean;
+  position?: 'top' | 'bottom';
+  className?: string;
+  hideInlineLink?: boolean;
 }
 
 export interface RichTextToolbarRef {
@@ -47,8 +52,9 @@ const ToolbarButton = ({
   isActive,
   onClick,
   disabled = false,
-}: ToolbarButtonProps): ReactElement | null => {
-  if (disabled) {
+  alwaysVisible = false,
+}: ToolbarButtonProps & { alwaysVisible?: boolean }): ReactElement | null => {
+  if (disabled && !alwaysVisible) {
     return null;
   }
 
@@ -64,6 +70,7 @@ const ToolbarButton = ({
         })}
         pressed={isActive}
         onClick={onClick}
+        disabled={disabled}
         type="button"
         className="leading-none"
       />
@@ -75,9 +82,13 @@ function RichTextToolbarComponent(
   {
     editor,
     onLinkAdd,
+    leadingActions,
     inlineActions,
     rightActions,
     allowBlockFormatting = true,
+    position = 'top',
+    className,
+    hideInlineLink = false,
   }: RichTextToolbarProps,
   ref: Ref<RichTextToolbarRef>,
 ): ReactElement {
@@ -147,8 +158,29 @@ function RichTextToolbarComponent(
 
   return (
     <>
-      <div className="flex flex-row flex-wrap items-center gap-1 border-b border-border-subtlest-tertiary px-2 py-1">
+      <div
+        className={classNames(
+          'flex flex-row flex-wrap items-center gap-1 px-2 py-1',
+          position === 'top' && 'border-b border-border-subtlest-tertiary',
+          className,
+        )}
+      >
         <div className="flex flex-1 flex-wrap items-center gap-0">
+          {leadingActions && (
+            <div className="mr-2 flex items-center gap-1">{leadingActions}</div>
+          )}
+          {inlineActions && (
+            <div className="flex items-center gap-1">{inlineActions}</div>
+          )}
+          {!hideInlineLink && (
+            <ToolbarButton
+              tooltip={editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)'}
+              icon={<LinkIcon />}
+              isActive={editorState.isLink}
+              onClick={openLinkModal}
+            />
+          )}
+          <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
           <ToolbarButton
             tooltip="Bold (⌘B)"
             icon={<BoldIcon />}
@@ -161,7 +193,7 @@ function RichTextToolbarComponent(
             isActive={editorState.isItalic}
             onClick={() => editor.chain().focus().toggleItalic().run()}
           />
-          {allowBlockFormatting ? (
+          {allowBlockFormatting && (
             <>
               <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
               <ToolbarButton
@@ -177,29 +209,15 @@ function RichTextToolbarComponent(
                 onClick={() => editor.chain().focus().toggleOrderedList().run()}
               />
             </>
-          ) : null}
-          <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-          <ToolbarButton
-            tooltip={editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)'}
-            icon={<LinkIcon />}
-            isActive={editorState.isLink}
-            onClick={openLinkModal}
-          />
-          {inlineActions && (
-            <>
-              <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-              <div className="flex items-center gap-1">{inlineActions}</div>
-            </>
-          )}
-          {(editorState.canUndo || editorState.canRedo) && (
-            <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
           )}
+          <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
           <ToolbarButton
             tooltip="Undo (⌘Z)"
             icon={<UndoIcon />}
             isActive={false}
             onClick={() => editor.chain().focus().undo().run()}
             disabled={!editorState.canUndo}
+            alwaysVisible
           />
           <ToolbarButton
             tooltip="Redo (⌘⇧Z)"
@@ -207,6 +225,7 @@ function RichTextToolbarComponent(
             isActive={false}
             onClick={() => editor.chain().focus().redo().run()}
             disabled={!editorState.canRedo}
+            alwaysVisible
           />
         </div>
         {rightActions && (
diff --git a/packages/shared/src/components/fields/RichTextInput.tsx b/packages/shared/src/components/fields/RichTextInput.tsx
index 2172a66569f..5d45be20665 100644
--- a/packages/shared/src/components/fields/RichTextInput.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.tsx
@@ -28,6 +28,7 @@ import Image from '@tiptap/extension-image';
 import { ImageIcon, AtIcon, MarkdownIcon } from '../icons';
 import { EditIcon } from '../icons/Edit';
 import { GifIcon } from '../icons/Gif';
+import { LinkIcon } from '../icons/Link';
 import { Button, ButtonSize, ButtonVariant } from '../buttons/Button';
 import { RecommendedMentionTooltip } from '../tooltips/RecommendedMentionTooltip';
 import { SimpleTooltip } from '../tooltips/SimpleTooltip';
@@ -147,6 +148,13 @@ interface RichTextInputProps {
   minHeightClassName?: string;
   markdownToHtml?: (markdown: string) => string;
   hideToolbar?: boolean;
+  toolbarPosition?: 'top' | 'bottom';
+  toolbarLeading?: ReactNode;
+  toolbarRightActions?: ReactNode;
+  hideMarkdownToggle?: boolean;
+  hideMarkdownHeader?: boolean;
+  hideFooter?: boolean;
+  onMarkdownModeChange?: (isMarkdownMode: boolean) => void;
 }
 
 export interface RichTextInputRef {
@@ -154,6 +162,7 @@ export interface RichTextInputRef {
   clearDraft: () => void;
   setInput: (value: string) => void;
   focus: () => void;
+  toggleMarkdownMode: () => void;
 }
 
 function RichTextInput(
@@ -183,6 +192,13 @@ function RichTextInput(
     minHeightClassName = 'min-h-[8rem]',
     markdownToHtml = markdownToHtmlBasic,
     hideToolbar = false,
+    toolbarPosition = 'top',
+    toolbarLeading,
+    toolbarRightActions,
+    hideMarkdownToggle = false,
+    hideMarkdownHeader = false,
+    hideFooter = false,
+    onMarkdownModeChange,
   }: RichTextInputProps,
   ref: ForwardedRef<RichTextInputRef>,
 ): ReactElement {
@@ -205,6 +221,7 @@ function RichTextInput(
   }, []);
 
   const isUploadEnabled = enabledCommand[MarkdownCommand.Upload];
+  const isLinkEnabled = enabledCommand[MarkdownCommand.Link];
   const isMentionEnabled = enabledCommand[MarkdownCommand.Mention];
   const isEmojiEnabled = enabledCommand[MarkdownCommand.Emoji];
   const isGifEnabled = enabledCommand[MarkdownCommand.Gif];
@@ -508,6 +525,18 @@ function RichTextInput(
     setIsMarkdownMode(false);
   }, [markdownToHtml]);
 
+  const toggleMarkdownMode = useCallback(() => {
+    if (isMarkdownMode) {
+      switchToRichMode();
+      return;
+    }
+    switchToMarkdownMode();
+  }, [isMarkdownMode, switchToMarkdownMode, switchToRichMode]);
+
+  useEffect(() => {
+    onMarkdownModeChange?.(isMarkdownMode);
+  }, [isMarkdownMode, onMarkdownModeChange]);
+
   const onMarkdownInput = useCallback(
     (event: React.FormEvent<HTMLTextAreaElement>) => {
       const { value } = event.currentTarget;
@@ -603,6 +632,7 @@ function RichTextInput(
 
       editor?.commands.focus();
     },
+    toggleMarkdownMode,
   }));
 
   useEffect(() => {
@@ -638,7 +668,8 @@ function RichTextInput(
           : editor?.storage.characterCount?.characters?.() ?? input.length)
       : null;
 
-  const hasToolbarActions = isUploadEnabled || isMentionEnabled || isGifEnabled;
+  const hasToolbarActions =
+    isUploadEnabled || isLinkEnabled || isMentionEnabled || isGifEnabled;
   const toolbarActions = (
     <>
       {isUploadEnabled && (
@@ -652,6 +683,15 @@ function RichTextInput(
           type="button"
         />
       )}
+      {isLinkEnabled && (
+        <Button
+          variant={ButtonVariant.Tertiary}
+          size={headerActionSize}
+          icon={<LinkIcon />}
+          onClick={() => toolbarRef.current?.openLinkModal()}
+          type="button"
+        />
+      )}
       {isMentionEnabled && (
         <Button
           variant={ButtonVariant.Tertiary}
@@ -737,26 +777,28 @@ function RichTextInput(
         >
           {isMarkdownMode ? (
             <>
-              <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-subtlest-tertiary p-2">
-                <span className="px-2 text-text-tertiary typo-caption1">
-                  Markdown editor
-                </span>
-                <div className="flex items-center gap-2">
-                  {savingLabel}
-                  <SimpleTooltip content="Switch to Rich Text Editor">
-                    <Button
-                      type="button"
-                      variant={ButtonVariant.Tertiary}
-                      size={ButtonSize.Small}
-                      icon={<EditIcon />}
-                      onClick={switchToRichMode}
-                    />
-                  </SimpleTooltip>
-                  {onClose && (
-                    <CloseButton size={ButtonSize.Small} onClick={onClose} />
-                  )}
+              {!hideMarkdownHeader && (
+                <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border-subtlest-tertiary p-2">
+                  <span className="px-2 text-text-tertiary typo-caption1">
+                    Markdown editor
+                  </span>
+                  <div className="flex items-center gap-2">
+                    {savingLabel}
+                    <SimpleTooltip content="Switch to Rich Text Editor">
+                      <Button
+                        type="button"
+                        variant={ButtonVariant.Tertiary}
+                        size={ButtonSize.Small}
+                        icon={<EditIcon />}
+                        onClick={switchToRichMode}
+                      />
+                    </SimpleTooltip>
+                    {onClose && (
+                      <CloseButton size={ButtonSize.Small} onClick={onClose} />
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
               <textarea
                 {...textareaProps}
                 name={undefined}
@@ -764,7 +806,7 @@ function RichTextInput(
                 value={input}
                 className={classNames(
                   minHeightClassName,
-                  'resize-y bg-transparent p-4 outline-none',
+                  'flex-1 bg-transparent p-4 font-mono outline-none',
                   className?.input,
                 )}
                 onInput={onMarkdownInput}
@@ -773,8 +815,31 @@ function RichTextInput(
               />
             </>
           ) : (
-            <>
-              {hideToolbar ? null : (
+            (() => {
+              const inlineActionsNode = hasToolbarActions
+                ? toolbarActions
+                : null;
+              const rightActionsNode = (
+                <div className="flex items-center gap-1">
+                  {savingLabel}
+                  {!hideMarkdownToggle && (
+                    <SimpleTooltip content="Switch to Markdown Editor">
+                      <Button
+                        type="button"
+                        variant={ButtonVariant.Tertiary}
+                        size={ButtonSize.Small}
+                        icon={<MarkdownIcon />}
+                        onClick={switchToMarkdownMode}
+                      />
+                    </SimpleTooltip>
+                  )}
+                  {onClose && (
+                    <CloseButton size={ButtonSize.Small} onClick={onClose} />
+                  )}
+                  {toolbarRightActions}
+                </div>
+              );
+              const toolbarNode = hideToolbar ? null : (
                 <RichTextToolbar
                   ref={toolbarRef}
                   editor={editor}
@@ -798,61 +863,56 @@ function RichTextInput(
                       })
                       .run();
                   }}
-                  inlineActions={hasToolbarActions ? toolbarActions : null}
-                  rightActions={
-                    <div className="flex items-center gap-0">
-                      {savingLabel}
-                      <SimpleTooltip content="Switch to Markdown Editor">
-                        <Button
-                          type="button"
-                          variant={ButtonVariant.Tertiary}
-                          size={ButtonSize.Small}
-                          icon={<MarkdownIcon />}
-                          onClick={switchToMarkdownMode}
-                        />
-                      </SimpleTooltip>
-                      {onClose && (
-                        <CloseButton
-                          size={ButtonSize.Small}
-                          onClick={onClose}
-                        />
-                      )}
-                    </div>
+                  position={toolbarPosition}
+                  className={
+                    toolbarPosition === 'bottom'
+                      ? '!gap-3 !px-5 !pb-4 !pt-3'
+                      : undefined
                   }
+                  leadingActions={toolbarLeading}
+                  inlineActions={inlineActionsNode}
+                  hideInlineLink={isLinkEnabled}
+                  rightActions={rightActionsNode}
                 />
-              )}
-              {isUploadEnabled && (
-                <input
-                  type="file"
-                  className="hidden"
-                  name="content_upload"
-                  ref={upload.uploadRef}
-                  accept={allowedContentImage.join(',')}
-                  onInput={upload.onUpload}
-                />
-              )}
-              <div className="flex w-full flex-row">
-                {showUserAvatar && user && (
-                  <ProfilePicture
-                    size={ProfileImageSize.Large}
-                    className={classNames('ml-3 mt-3', className?.profile)}
-                    user={user}
-                    nativeLazyLoading
-                    fetchPriority="low"
-                  />
-                )}
-                <EditorContent
-                  editor={editor}
-                  className={classNames(
-                    styles.editor,
-                    minHeightClassName,
-                    'min-w-0 flex-1 p-4',
-                    showUserAvatar && user && 'ml-3 tablet:ml-0',
-                    className?.input,
+              );
+              return (
+                <>
+                  {toolbarPosition === 'top' && toolbarNode}
+                  {isUploadEnabled && (
+                    <input
+                      type="file"
+                      className="hidden"
+                      name="content_upload"
+                      ref={upload.uploadRef}
+                      accept={allowedContentImage.join(',')}
+                      onInput={upload.onUpload}
+                    />
                   )}
-                />
-              </div>
-            </>
+                  <div className="flex w-full flex-1 flex-row">
+                    {showUserAvatar && user && (
+                      <ProfilePicture
+                        size={ProfileImageSize.Large}
+                        className={classNames('ml-3 mt-3', className?.profile)}
+                        user={user}
+                        nativeLazyLoading
+                        fetchPriority="low"
+                      />
+                    )}
+                    <EditorContent
+                      editor={editor}
+                      className={classNames(
+                        styles.editor,
+                        minHeightClassName,
+                        'min-w-0 flex-1 p-4',
+                        showUserAvatar && user && 'ml-3 tablet:ml-0',
+                        className?.input,
+                      )}
+                    />
+                  </div>
+                  {toolbarPosition === 'bottom' && toolbarNode}
+                </>
+              );
+            })()
           )}
           {textareaProps.name && (
             <input type="hidden" name={textareaProps.name} value={input} />
@@ -890,41 +950,43 @@ function RichTextInput(
           onClickOutside={emoji.clearEmoji}
         />
       )}
-      {footer ?? (
-        <span className="flex flex-row items-center gap-3 border-border-subtlest-tertiary p-2 px-3 text-text-tertiary laptop:border-t">
-          {shouldShowSubmit && !isMarkdownMode && (
-            <span className="hidden text-text-quaternary typo-caption1 tablet:inline">
-              Press {submitShortcut} to send
-            </span>
-          )}
-          {maxLength && remainingCharacters !== null && (
-            <span
-              className={classNames(
-                'ml-auto font-bold typo-callout',
-                remainingCharacters < 100
-                  ? 'text-status-warning'
-                  : 'text-text-tertiary',
+      {hideFooter
+        ? null
+        : footer ?? (
+            <span className="flex flex-row items-center gap-3 border-border-subtlest-tertiary p-2 px-3 text-text-tertiary laptop:border-t">
+              {shouldShowSubmit && !isMarkdownMode && (
+                <span className="hidden text-text-quaternary typo-caption1 tablet:inline">
+                  Press {submitShortcut} to send
+                </span>
+              )}
+              {maxLength && remainingCharacters !== null && (
+                <span
+                  className={classNames(
+                    'ml-auto font-bold typo-callout',
+                    remainingCharacters < 100
+                      ? 'text-status-warning'
+                      : 'text-text-tertiary',
+                  )}
+                >
+                  {remainingCharacters}
+                </span>
+              )}
+              {shouldShowSubmit && (
+                <Button
+                  size={ButtonSize.Small}
+                  className={
+                    maxLength && remainingCharacters !== null ? '' : 'ml-auto'
+                  }
+                  variant={submitButtonVariant}
+                  type="submit"
+                  disabled={isLoading || disabledSubmit || isInputEmpty}
+                  loading={isLoading}
+                >
+                  {submitCopy}
+                </Button>
               )}
-            >
-              {remainingCharacters}
             </span>
           )}
-          {shouldShowSubmit && (
-            <Button
-              size={ButtonSize.Small}
-              className={
-                maxLength && remainingCharacters !== null ? '' : 'ml-auto'
-              }
-              variant={submitButtonVariant}
-              type="submit"
-              disabled={isLoading || disabledSubmit || isInputEmpty}
-              loading={isLoading}
-            >
-              {submitCopy}
-            </Button>
-          )}
-        </span>
-      )}
     </div>
   );
 }
diff --git a/packages/shared/src/components/icons/Maximize/filled.svg b/packages/shared/src/components/icons/Maximize/filled.svg
new file mode 100644
index 00000000000..556f0c46199
--- /dev/null
+++ b/packages/shared/src/components/icons/Maximize/filled.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Maximize/Filled</title>
+    <g id="Icon/Maximize/Filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19.5,3 C20.3284271,3 21,3.67157288 21,4.5 L21,9.5 C21,10.3284271 20.3284271,11 19.5,11 C18.6715729,11 18,10.3284271 18,9.5 L18,8.12132034 L14.5606602,11.5606602 C13.9748737,12.1464466 13.0251263,12.1464466 12.4393398,11.5606602 C11.8535534,10.9748737 11.8535534,10.0251263 12.4393398,9.43933983 L15.8786797,6 L14.5,6 C13.6715729,6 13,5.32842712 13,4.5 C13,3.67157288 13.6715729,3 14.5,3 L19.5,3 Z M11.5606602,12.4393398 C12.1464466,13.0251263 12.1464466,13.9748737 11.5606602,14.5606602 L8.12132034,18 L9.5,18 C10.3284271,18 11,18.6715729 11,19.5 C11,20.3284271 10.3284271,21 9.5,21 L4.5,21 C3.67157288,21 3,20.3284271 3,19.5 L3,14.5 C3,13.6715729 3.67157288,13 4.5,13 C5.32842712,13 6,13.6715729 6,14.5 L6,15.8786797 L9.43933983,12.4393398 C10.0251263,11.8535534 10.9748737,11.8535534 11.5606602,12.4393398 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/Maximize/index.tsx b/packages/shared/src/components/icons/Maximize/index.tsx
new file mode 100644
index 00000000000..f8e06d49f33
--- /dev/null
+++ b/packages/shared/src/components/icons/Maximize/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const MaximizeIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Maximize/outlined.svg b/packages/shared/src/components/icons/Maximize/outlined.svg
new file mode 100644
index 00000000000..fe2fdd19b59
--- /dev/null
+++ b/packages/shared/src/components/icons/Maximize/outlined.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Maximize/Outline</title>
+    <g id="Icon/Maximize/Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M19,3 C19.5522847,3 20,3.44771525 20,4 L20,9 C20,9.55228475 19.5522847,10 19,10 C18.4477153,10 18,9.55228475 18,9 L18,6.41421356 L13.7071068,10.7071068 C13.3165825,11.0976311 12.6834175,11.0976311 12.2928932,10.7071068 C11.9023689,10.3165825 11.9023689,9.68341751 12.2928932,9.29289322 L16.5857864,5 L14,5 C13.4477153,5 13,4.55228475 13,4 C13,3.44771525 13.4477153,3 14,3 L19,3 Z M11.7071068,13.2928932 C12.0976311,13.6834175 12.0976311,14.3165825 11.7071068,14.7071068 L7.41421356,19 L10,19 C10.5522847,19 11,19.4477153 11,20 C11,20.5522847 10.5522847,21 10,21 L5,21 C4.44771525,21 4,20.5522847 4,20 L4,15 C4,14.4477153 4.44771525,14 5,14 C5.55228475,14 6,14.4477153 6,15 L6,17.5857864 L10.2928932,13.2928932 C10.6834175,12.9023689 11.3165825,12.9023689 11.7071068,13.2928932 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/Minimize/filled.svg b/packages/shared/src/components/icons/Minimize/filled.svg
new file mode 100644
index 00000000000..35ff8743b9a
--- /dev/null
+++ b/packages/shared/src/components/icons/Minimize/filled.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Minimize/Filled</title>
+    <g id="Icon/Minimize/Filled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.5606602,3.43933983 C21.1464466,4.02512627 21.1464466,4.97487373 20.5606602,5.56066017 L17.1213203,9 L18.5,9 C19.3284271,9 20,9.67157288 20,10.5 C20,11.3284271 19.3284271,12 18.5,12 L13.5,12 C12.6715729,12 12,11.3284271 12,10.5 L12,5.5 C12,4.67157288 12.6715729,4 13.5,4 C14.3284271,4 15,4.67157288 15,5.5 L15,6.87867966 L18.4393398,3.43933983 C19.0251263,2.85355339 19.9748737,2.85355339 20.5606602,3.43933983 Z M5.5,12 L10.5,12 C11.3284271,12 12,12.6715729 12,13.5 L12,18.5 C12,19.3284271 11.3284271,20 10.5,20 C9.67157288,20 9,19.3284271 9,18.5 L9,17.1213203 L5.56066017,20.5606602 C4.97487373,21.1464466 4.02512627,21.1464466 3.43933983,20.5606602 C2.85355339,19.9748737 2.85355339,19.0251263 3.43933983,18.4393398 L6.87867966,15 L5.5,15 C4.67157288,15 4,14.3284271 4,13.5 C4,12.6715729 4.67157288,12 5.5,12 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/Minimize/index.tsx b/packages/shared/src/components/icons/Minimize/index.tsx
new file mode 100644
index 00000000000..ed8622e24e8
--- /dev/null
+++ b/packages/shared/src/components/icons/Minimize/index.tsx
@@ -0,0 +1,10 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import type { IconProps } from '../../Icon';
+import Icon from '../../Icon';
+import OutlinedIcon from './outlined.svg';
+import FilledIcon from './filled.svg';
+
+export const MinimizeIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Minimize/outlined.svg b/packages/shared/src/components/icons/Minimize/outlined.svg
new file mode 100644
index 00000000000..cdf084f0bed
--- /dev/null
+++ b/packages/shared/src/components/icons/Minimize/outlined.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>Icon/Minimize/Outline</title>
+    <g id="Icon/Minimize/Outline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M20.7071068,3.29289322 C21.0976311,3.68341751 21.0976311,4.31658249 20.7071068,4.70710678 L16.4142136,9 L19,9 C19.5522847,9 20,9.44771525 20,10 C20,10.5522847 19.5522847,11 19,11 L14,11 C13.4477153,11 13,10.5522847 13,10 L13,5 C13,4.44771525 13.4477153,4 14,4 C14.5522847,4 15,4.44771525 15,5 L15,7.58578644 L19.2928932,3.29289322 C19.6834175,2.90236893 20.3165825,2.90236893 20.7071068,3.29289322 Z M5,13 L10,13 C10.5522847,13 11,13.4477153 11,14 L11,19 C11,19.5522847 10.5522847,20 10,20 C9.44771525,20 9,19.5522847 9,19 L9,16.4142136 L4.70710678,20.7071068 C4.31658249,21.0976311 3.68341751,21.0976311 3.29289322,20.7071068 C2.90236893,20.3165825 2.90236893,19.6834175 3.29289322,19.2928932 L7.58578644,15 L5,15 C4.44771525,15 4,14.5522847 4,14 C4,13.4477153 4.44771525,13 5,13 Z" id="Shape" fill="#FFFFFF"></path>
+    </g>
+</svg>
diff --git a/packages/shared/src/components/icons/index.ts b/packages/shared/src/components/icons/index.ts
index 2a18dfe034d..37ba3f92871 100644
--- a/packages/shared/src/components/icons/index.ts
+++ b/packages/shared/src/components/icons/index.ts
@@ -96,6 +96,7 @@ export * from './Magic';
 export * from './Mail';
 export * from './Markdown';
 export * from './Mastodon';
+export * from './Maximize';
 export * from './MedalBadge';
 export * from './Megaphone';
 export * from './Menu';
@@ -103,6 +104,7 @@ export * from './Merge';
 export * from './Microphone';
 export * from './Microsoft';
 export * from './MiniClose';
+export * from './Minimize';
 export * from './Minus';
 export * from './Moon';
 export * from './MoveTo';
diff --git a/packages/shared/src/components/modals/common.tsx b/packages/shared/src/components/modals/common.tsx
index b75b7d6d95b..73d0b0c45b8 100644
--- a/packages/shared/src/components/modals/common.tsx
+++ b/packages/shared/src/components/modals/common.tsx
@@ -48,6 +48,13 @@ const CreateSharedPostModal = dynamic(
     ),
 );
 
+const SmartComposerModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "smartComposerModal" */ './post/SmartComposerModal'
+    ),
+);
+
 const ReportPostModal = dynamic(
   () =>
     import(
@@ -495,6 +502,7 @@ export const modals = {
   [LazyModal.ReadingHistory]: ReadingHistoryModal,
   [LazyModal.SquadPromotion]: SquadPromotionModal,
   [LazyModal.CreateSharedPost]: CreateSharedPostModal,
+  [LazyModal.SmartComposer]: SmartComposerModal,
   [LazyModal.ReportPost]: ReportPostModal,
   [LazyModal.ReportComment]: ReportCommentModal,
   [LazyModal.SquadNotifications]: SquadNotificationsModal,
diff --git a/packages/shared/src/components/modals/common/types.ts b/packages/shared/src/components/modals/common/types.ts
index e0f59663375..8f8add1ee11 100644
--- a/packages/shared/src/components/modals/common/types.ts
+++ b/packages/shared/src/components/modals/common/types.ts
@@ -32,6 +32,7 @@ export enum LazyModal {
   ReadingHistory = 'readingHistory',
   SquadPromotion = 'squadPromotion',
   CreateSharedPost = 'createSharedPost',
+  SmartComposer = 'smartComposer',
   ReasonSelection = 'reasonSelection',
   ReportPost = 'reportPost',
   ReportComment = 'reportComment',
diff --git a/packages/shared/src/components/modals/post/SmartComposerModal.tsx b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
new file mode 100644
index 00000000000..f56cd00ca36
--- /dev/null
+++ b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
@@ -0,0 +1,254 @@
+import type { ReactElement } from 'react';
+import React, { useRef, useState } from 'react';
+import classNames from 'classnames';
+import type { LazyModalCommonProps } from '../common/Modal';
+import { Modal } from '../common/Modal';
+import { ModalKind, ModalSize } from '../common/types';
+import { Button, ButtonVariant } from '../../buttons/Button';
+import CloseButton from '../../CloseButton';
+import { ButtonSize } from '../../buttons/common';
+import { ProfileImageSize, ProfilePicture } from '../../ProfilePicture';
+import {
+  InfoIcon,
+  MarkdownIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from '../../icons';
+import { IconSize } from '../../Icon';
+import { Tooltip } from '../../tooltip/Tooltip';
+import { labels } from '../../../lib/labels';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import type { ExternalLinkPreview } from '../../../graphql/posts';
+import { AudienceChip } from '../../post/composer/AudienceChip';
+import { KindModePicker } from '../../post/composer/KindModePicker';
+import {
+  TextForm,
+  type TextFormCover,
+  type TextFormHandle,
+} from '../../post/composer/TextForm';
+import { LinkForm } from '../../post/composer/LinkForm';
+import { PollForm } from '../../post/composer/PollForm';
+import {
+  isUserAudience,
+  useComposerAudience,
+} from '../../post/composer/useComposerAudience';
+import { useComposerSubmit } from '../../post/composer/useComposerSubmit';
+import {
+  DEFAULT_LINK,
+  DEFAULT_POLL,
+  DEFAULT_TEXT,
+  type ComposerKind,
+  type LinkFormState,
+  type PollFormState,
+  type TextFormState,
+} from '../../post/composer/types';
+
+export interface SmartComposerModalProps extends LazyModalCommonProps {
+  initialUrl?: string;
+  initialSquadHandle?: string;
+  preview?: ExternalLinkPreview;
+}
+
+export function SmartComposerModal({
+  onRequestClose,
+  initialUrl,
+  initialSquadHandle,
+  preview: initialPreview,
+  ...props
+}: SmartComposerModalProps): ReactElement {
+  const { user } = useAuthContext();
+  const [kind, setKind] = useState<ComposerKind>(initialUrl ? 'link' : 'text');
+  const [text, setText] = useState<TextFormState>(DEFAULT_TEXT);
+  const [link, setLink] = useState<LinkFormState>({
+    ...DEFAULT_LINK,
+    url: initialUrl ?? '',
+  });
+  const [poll, setPoll] = useState<PollFormState>(DEFAULT_POLL);
+  const [cover, setCover] = useState<TextFormCover | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isMarkdownMode, setIsMarkdownMode] = useState(false);
+  const textFormRef = useRef<TextFormHandle>(null);
+
+  const { audiences, selectedIds, selected, setSelectedIds, userAudienceId } =
+    useComposerAudience(initialSquadHandle);
+  const primary = selected[0];
+
+  const {
+    handleSubmit,
+    isSubmitDisabled,
+    isInFlight,
+    preview,
+    isLoadingPreview,
+    fetchPreview,
+  } = useComposerSubmit({
+    kind,
+    text,
+    link,
+    poll,
+    cover,
+    primary,
+    selected,
+    selectedIds,
+    initialPreview,
+    onComplete: () => onRequestClose?.(),
+  });
+
+  const showSpamWarning =
+    selected.filter((audience) => !isUserAudience(audience)).length > 1;
+  const submitLabel = kind === 'poll' ? 'Post poll' : 'Post';
+
+  const kindPickerNode = (
+    <KindModePicker value={kind} onChange={setKind} disabled={isInFlight} />
+  );
+
+  const postButtonNode = (
+    <Button
+      form="smart_composer"
+      type="submit"
+      variant={ButtonVariant.Primary}
+      size={ButtonSize.Small}
+      disabled={isSubmitDisabled}
+      loading={isInFlight}
+      className="px-5"
+    >
+      {submitLabel}
+    </Button>
+  );
+
+  return (
+    <Modal
+      kind={ModalKind.FlexibleTop}
+      size={isExpanded ? ModalSize.XLarge : ModalSize.Medium}
+      onRequestClose={onRequestClose}
+      overlayClassName={isExpanded ? '!pt-0' : 'tablet:!pt-16 laptop:!pt-12'}
+      className={classNames(
+        'flex flex-col',
+        isExpanded
+          ? '!mb-0 !mt-0 !h-[100vh] !max-h-[100vh] !w-[100vw] !max-w-[100vw] !rounded-none'
+          : '!min-h-[30.5rem] !max-w-[48.75rem] tablet:!max-h-[calc(100vh-7rem)] tablet:w-[48.75rem] laptop:!max-h-[calc(100vh-6rem)]',
+      )}
+      {...props}
+    >
+      <form
+        id="smart_composer"
+        onSubmit={handleSubmit}
+        className="flex h-full min-h-0 w-full flex-col"
+      >
+        <div className="flex shrink-0 items-start justify-between gap-2 px-5 pb-2 pt-5">
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            {user && (
+              <ProfilePicture
+                user={user}
+                size={ProfileImageSize.Medium}
+                nativeLazyLoading
+              />
+            )}
+            <AudienceChip
+              audiences={audiences}
+              selectedIds={selectedIds}
+              onChange={setSelectedIds}
+              userAudienceId={userAudienceId}
+              disabled={isInFlight}
+            />
+          </div>
+          <div className="flex shrink-0 items-center gap-1">
+            {kind === 'text' && (
+              <Tooltip
+                content={
+                  isMarkdownMode ? 'Switch to rich text' : 'Switch to Markdown'
+                }
+              >
+                <Button
+                  type="button"
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Tertiary}
+                  icon={<MarkdownIcon secondary={isMarkdownMode} />}
+                  pressed={isMarkdownMode}
+                  onClick={() => textFormRef.current?.toggleMarkdownMode()}
+                  aria-label={
+                    isMarkdownMode
+                      ? 'Switch to rich text'
+                      : 'Switch to Markdown'
+                  }
+                  aria-pressed={isMarkdownMode}
+                />
+              </Tooltip>
+            )}
+            <Tooltip
+              content={isExpanded ? 'Collapse composer' : 'Expand composer'}
+            >
+              <Button
+                type="button"
+                size={ButtonSize.Small}
+                variant={ButtonVariant.Tertiary}
+                icon={
+                  isExpanded ? (
+                    <MinimizeIcon size={IconSize.Size16} />
+                  ) : (
+                    <MaximizeIcon size={IconSize.Size16} />
+                  )
+                }
+                onClick={() => setIsExpanded((prev) => !prev)}
+                aria-label={
+                  isExpanded ? 'Collapse composer' : 'Expand composer'
+                }
+                aria-pressed={isExpanded}
+              />
+            </Tooltip>
+            <CloseButton
+              type="button"
+              size={ButtonSize.Small}
+              onClick={(event) => onRequestClose?.(event)}
+              aria-label="Close composer"
+            />
+          </div>
+        </div>
+        {showSpamWarning && (
+          <div className="flex w-full shrink-0 items-center gap-2 bg-overlay-tertiary-bun px-5 py-1.5 text-text-secondary typo-caption2">
+            <InfoIcon
+              size={IconSize.Size16}
+              secondary
+              className="shrink-0 text-status-warning"
+            />
+            <span>{labels.postCreation.warnings.spammyPosts}</span>
+          </div>
+        )}
+        {kind === 'text' && (
+          <TextForm
+            ref={textFormRef}
+            value={text}
+            onChange={setText}
+            sourceId={primary?.id}
+            cover={cover}
+            onCoverChange={setCover}
+            toolbarLeading={kindPickerNode}
+            toolbarRightActions={postButtonNode}
+            onMarkdownModeChange={setIsMarkdownMode}
+          />
+        )}
+        {kind !== 'text' && (
+          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-5 pb-3 pt-2">
+            {kind === 'link' && (
+              <LinkForm
+                value={link}
+                onChange={setLink}
+                preview={preview}
+                isLoadingPreview={isLoadingPreview}
+                fetchPreview={fetchPreview}
+              />
+            )}
+            {kind === 'poll' && <PollForm value={poll} onChange={setPoll} />}
+          </div>
+        )}
+        {(kind !== 'text' || isMarkdownMode) && (
+          <div className="flex shrink-0 items-center justify-between gap-3 px-5 pb-4 pt-3">
+            {kindPickerNode}
+            {postButtonNode}
+          </div>
+        )}
+      </form>
+    </Modal>
+  );
+}
+
+export default SmartComposerModal;
diff --git a/packages/shared/src/components/post/composer/AudienceChip.tsx b/packages/shared/src/components/post/composer/AudienceChip.tsx
new file mode 100644
index 00000000000..2902e7cc1ad
--- /dev/null
+++ b/packages/shared/src/components/post/composer/AudienceChip.tsx
@@ -0,0 +1,268 @@
+import type { ReactElement } from 'react';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
+import { SourceAvatar } from '../../profile/source';
+import { ProfileImageSize } from '../../ProfilePicture';
+import { ArrowIcon, InfoIcon, VIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import { TruncateText } from '../../utilities';
+import type { Squad } from '../../../graphql/sources';
+import { MAX_AUDIENCE_SQUADS, isUserAudience } from './useComposerAudience';
+
+interface AudienceChipProps {
+  audiences: Squad[];
+  selectedIds: string[];
+  onChange: (ids: string[]) => void;
+  userAudienceId: string | undefined;
+  disabled?: boolean;
+}
+
+const AvatarStack = ({
+  audiences,
+}: {
+  audiences: Squad[];
+}): ReactElement | null => {
+  const visible = audiences.slice(0, 3);
+  if (visible.length === 0) {
+    return null;
+  }
+  return (
+    <span className="flex shrink-0 items-center -space-x-1">
+      {visible.map((audience) => (
+        <SourceAvatar
+          key={audience.id}
+          source={audience}
+          size={ProfileImageSize.XSmall}
+          className="!mr-0 ring-2 ring-background-default"
+        />
+      ))}
+    </span>
+  );
+};
+
+export const AudienceChip = ({
+  audiences,
+  selectedIds,
+  onChange,
+  userAudienceId,
+  disabled,
+}: AudienceChipProps): ReactElement | null => {
+  const [open, setOpen] = useState(false);
+
+  const selected = audiences.filter(
+    (audience) => !!audience.id && selectedIds.includes(audience.id),
+  );
+  const primary = selected[0];
+  if (!primary) {
+    return null;
+  }
+
+  const isMulti = selected.length > 1;
+  const showChevron = !disabled;
+  const triggerLabel = (() => {
+    if (isMulti) {
+      return `${selected.length} audiences`;
+    }
+    return isUserAudience(primary) ? 'Everyone' : primary.name;
+  })();
+  const showSinglePrimaryAvatar = !isMulti && !isUserAudience(primary);
+
+  const isEveryoneSelected =
+    !!userAudienceId && selectedIds.includes(userAudienceId);
+  const selectedSquadCount = selected.filter(
+    (audience) => !isUserAudience(audience),
+  ).length;
+  const isAtSquadLimit = selectedSquadCount >= MAX_AUDIENCE_SQUADS;
+
+  const toggleEveryone = () => {
+    if (!userAudienceId) {
+      return;
+    }
+    if (isEveryoneSelected) {
+      if (selectedSquadCount === 0) {
+        return; // last-resort floor — keep Everyone selected
+      }
+      onChange(selectedIds.filter((id) => id !== userAudienceId));
+      return;
+    }
+    onChange([...selectedIds, userAudienceId]);
+  };
+
+  const toggleSquad = (squad: Squad) => {
+    const { id } = squad;
+    if (!id) {
+      return;
+    }
+    if (selectedIds.includes(id)) {
+      const remaining = selectedIds.filter((entry) => entry !== id);
+      if (remaining.length === 0) {
+        onChange(userAudienceId ? [userAudienceId] : [id]);
+        return;
+      }
+      onChange(remaining);
+      return;
+    }
+    if (isAtSquadLimit) {
+      return;
+    }
+    onChange([...selectedIds, id]);
+  };
+
+  const toggleOption = (option: Squad) => {
+    if (isUserAudience(option)) {
+      toggleEveryone();
+      return;
+    }
+    toggleSquad(option);
+  };
+
+  const handleReset = () => {
+    if (userAudienceId) {
+      onChange([userAudienceId]);
+    }
+  };
+
+  const canReset = !isEveryoneSelected || selectedSquadCount > 0;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          aria-label={
+            isMulti
+              ? `Posting to ${selected.length} audiences. Open audience menu.`
+              : `Posting to ${triggerLabel}. Open audience menu.`
+          }
+          className={classNames(
+            'flex max-w-full shrink-0 items-center gap-1.5 rounded-12 px-2.5 py-1 text-text-primary transition-colors typo-callout',
+            !disabled && 'hover:bg-surface-float',
+            disabled && 'cursor-default',
+            open && !disabled && 'bg-surface-float',
+          )}
+        >
+          {isMulti ? (
+            <AvatarStack audiences={selected} />
+          ) : (
+            showSinglePrimaryAvatar && (
+              <SourceAvatar source={primary} size={ProfileImageSize.XSmall} />
+            )
+          )}
+          <TruncateText className="max-w-48 font-bold">
+            {triggerLabel}
+          </TruncateText>
+          {showChevron && (
+            <ArrowIcon
+              className={classNames(
+                'shrink-0 text-text-tertiary transition-transform',
+                open ? 'rotate-0' : 'rotate-180',
+              )}
+              size={IconSize.Size16}
+            />
+          )}
+        </button>
+      </DropdownMenuTrigger>
+      {showChevron && (
+        <DropdownMenuContent
+          align="start"
+          variant="field"
+          className={classNames(
+            '!min-w-64 !max-w-72',
+            isAtSquadLimit && '!pb-0',
+          )}
+          scrollableClassName=""
+        >
+          <div className="flex items-center justify-between gap-2 px-3 pb-1 pt-2">
+            <span className="text-text-tertiary typo-caption2">Post to</span>
+            <button
+              type="button"
+              onClick={handleReset}
+              disabled={!canReset}
+              className={classNames(
+                'rounded-6 px-1 transition-colors typo-caption1',
+                canReset
+                  ? 'text-text-link hover:underline'
+                  : 'cursor-default text-text-disabled',
+              )}
+            >
+              Reset
+            </button>
+          </div>
+          <div className="flex max-h-60 flex-col gap-px overflow-y-auto">
+            {audiences.map((option) => {
+              const isSelected = !!option.id && selectedIds.includes(option.id);
+              const reachedLimit =
+                !isSelected && !isUserAudience(option) && isAtSquadLimit;
+              const optionLabel = isUserAudience(option)
+                ? 'Everyone'
+                : option.name;
+              return (
+                <DropdownMenuItem
+                  key={option.id}
+                  onSelect={(event: Event) => {
+                    event.preventDefault();
+                    if (reachedLimit) {
+                      return;
+                    }
+                    toggleOption(option);
+                  }}
+                  disabled={reachedLimit}
+                  aria-checked={isSelected}
+                  className="!h-9 gap-2 !overflow-visible !px-2"
+                >
+                  <SourceAvatar
+                    source={option}
+                    size={ProfileImageSize.XSmall}
+                    className="!mr-0 shrink-0"
+                  />
+                  <span
+                    className={classNames(
+                      'min-w-0 flex-1 truncate text-left typo-callout',
+                      isSelected && 'font-bold text-text-primary',
+                      reachedLimit && 'text-text-disabled',
+                    )}
+                  >
+                    {optionLabel}
+                  </span>
+                  <span
+                    aria-hidden
+                    className="flex size-4 shrink-0 items-center justify-center"
+                  >
+                    {isSelected && (
+                      <VIcon
+                        secondary
+                        size={IconSize.Size16}
+                        className="text-accent-cabbage-default"
+                      />
+                    )}
+                  </span>
+                </DropdownMenuItem>
+              );
+            })}
+          </div>
+          {isAtSquadLimit && (
+            <div className="flex items-center gap-2 border-t border-border-subtlest-tertiary bg-surface-float px-3 py-2 text-text-secondary typo-caption1">
+              <InfoIcon
+                size={IconSize.Size16}
+                secondary
+                className="shrink-0 text-status-info"
+              />
+              <span className="font-bold">
+                You can post to up to {MAX_AUDIENCE_SQUADS} squads
+              </span>
+            </div>
+          )}
+        </DropdownMenuContent>
+      )}
+    </DropdownMenu>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/KindModePicker.tsx b/packages/shared/src/components/post/composer/KindModePicker.tsx
new file mode 100644
index 00000000000..9efa4dba093
--- /dev/null
+++ b/packages/shared/src/components/post/composer/KindModePicker.tsx
@@ -0,0 +1,109 @@
+import type { ReactElement } from 'react';
+import React, { cloneElement, useState } from 'react';
+import classNames from 'classnames';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
+import { IconSize } from '../../Icon';
+import { ArrowIcon, EditIcon, LinkIcon, PollIcon } from '../../icons';
+import type { ComposerKind } from './types';
+
+interface KindOption {
+  kind: ComposerKind;
+  label: string;
+  icon: ReactElement;
+}
+
+const KIND_OPTIONS: KindOption[] = [
+  { kind: 'text', label: 'Text', icon: <EditIcon /> },
+  { kind: 'link', label: 'Link', icon: <LinkIcon /> },
+  { kind: 'poll', label: 'Poll', icon: <PollIcon /> },
+];
+
+const findOption = (kind: ComposerKind): KindOption =>
+  KIND_OPTIONS.find((option) => option.kind === kind) ?? KIND_OPTIONS[0];
+
+interface KindModePickerProps {
+  value: ComposerKind;
+  onChange: (kind: ComposerKind) => void;
+  disabled?: boolean;
+}
+
+export const KindModePicker = ({
+  value,
+  onChange,
+  disabled,
+}: KindModePickerProps): ReactElement => {
+  const [open, setOpen] = useState(false);
+  const active = findOption(value);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <button
+          type="button"
+          disabled={disabled}
+          aria-haspopup="menu"
+          aria-expanded={open}
+          aria-label={`${active.label} mode — change post type`}
+          className={classNames(
+            'inline-flex h-8 shrink-0 items-center gap-1.5 rounded-8 border border-border-subtlest-tertiary px-2 text-text-primary transition-colors',
+            'hover:border-border-subtlest-secondary',
+            open ? 'bg-surface-float' : 'bg-transparent hover:bg-surface-float',
+            disabled && 'opacity-60 cursor-default',
+          )}
+        >
+          {cloneElement(active.icon, { size: IconSize.Size16 })}
+          <span className="whitespace-nowrap typo-caption1">
+            {active.label} mode
+          </span>
+          <ArrowIcon
+            size={IconSize.Size16}
+            className={classNames(
+              'shrink-0 text-text-tertiary transition-transform',
+              open ? 'rotate-180' : 'rotate-0',
+            )}
+          />
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="start"
+        side="top"
+        variant="action"
+        className="!min-w-36"
+      >
+        {KIND_OPTIONS.map((option) => {
+          const isActive = option.kind === value;
+          return (
+            <DropdownMenuItem
+              key={option.kind}
+              onSelect={(event: Event) => {
+                event.preventDefault();
+                onChange(option.kind);
+                setOpen(false);
+              }}
+              aria-checked={isActive}
+              className="!gap-2"
+            >
+              {cloneElement(option.icon, {
+                size: IconSize.XXSmall,
+                className: 'shrink-0 text-text-primary',
+              })}
+              <span
+                className={classNames(
+                  'min-w-0 flex-1 truncate text-left text-text-primary',
+                  isActive && 'font-bold',
+                )}
+              >
+                {option.label}
+              </span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/LinkForm.tsx b/packages/shared/src/components/post/composer/LinkForm.tsx
new file mode 100644
index 00000000000..7f38ed9923a
--- /dev/null
+++ b/packages/shared/src/components/post/composer/LinkForm.tsx
@@ -0,0 +1,112 @@
+import type { FormEvent, ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useDebouncedUrl } from '../../../hooks/input';
+import { WriteLinkPreview } from '../write/WriteLinkPreview';
+import { WritePreviewSkeleton } from '../write/WritePreviewSkeleton';
+import type { ExternalLinkPreview } from '../../../graphql/posts';
+import { TITLE_MAX_LENGTH, type LinkFormState } from './types';
+import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
+
+const looksLikeRealUrl = (value: string): boolean => {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
+      return false;
+    }
+    return url.hostname === 'localhost' || url.hostname.includes('.');
+  } catch {
+    return false;
+  }
+};
+
+interface LinkFormProps {
+  value: LinkFormState;
+  onChange: (next: LinkFormState) => void;
+  preview?: ExternalLinkPreview;
+  isLoadingPreview?: boolean;
+  fetchPreview: (url?: string) => void;
+}
+
+export const LinkForm = ({
+  value,
+  onChange,
+  preview,
+  isLoadingPreview,
+  fetchPreview,
+}: LinkFormProps): ReactElement => {
+  const urlRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    urlRef.current?.focus();
+  }, []);
+
+  const hasPreviewForUrl = useCallback(
+    (next?: string): boolean => {
+      if (!next || !looksLikeRealUrl(next)) {
+        return false;
+      }
+      return !isPreviewForComposerUrl(preview, next);
+    },
+    [preview],
+  );
+
+  const [checkUrl] = useDebouncedUrl(fetchPreview, hasPreviewForUrl);
+
+  const onUrlChange = (event: FormEvent<HTMLInputElement>) => {
+    const next = event.currentTarget.value;
+    onChange({ ...value, url: next });
+    checkUrl(normalizeComposerUrl(next));
+  };
+
+  const normalizedUrl = normalizeComposerUrl(value.url);
+  const showPreview = isPreviewForComposerUrl(preview, value.url);
+
+  return (
+    <div className="flex flex-1 flex-col gap-3">
+      <input
+        ref={urlRef}
+        type="text"
+        name="url"
+        inputMode="url"
+        autoComplete="url"
+        autoCapitalize="none"
+        autoCorrect="off"
+        spellCheck={false}
+        placeholder="Paste a link…"
+        value={value.url}
+        onInput={onUrlChange}
+        aria-label="Link URL"
+        className="w-full bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
+      />
+      <textarea
+        name="commentary"
+        placeholder="Add a comment (optional)"
+        maxLength={TITLE_MAX_LENGTH}
+        rows={1}
+        value={value.commentary}
+        onChange={(event) =>
+          onChange({
+            ...value,
+            commentary: event.currentTarget.value.replace(/\n/g, ''),
+          })
+        }
+        aria-label="Post commentary"
+        className="w-full resize-none overflow-hidden break-words bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary"
+      />
+      {isLoadingPreview && (
+        <WritePreviewSkeleton
+          link={normalizedUrl || value.url}
+          className="flex-col-reverse"
+        />
+      )}
+      {!isLoadingPreview && preview && showPreview && (
+        <WriteLinkPreview
+          className="!w-auto flex-col-reverse"
+          preview={preview}
+          link={normalizedUrl}
+          showPreviewLink={false}
+        />
+      )}
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/PollForm.tsx b/packages/shared/src/components/post/composer/PollForm.tsx
new file mode 100644
index 00000000000..81730fc4611
--- /dev/null
+++ b/packages/shared/src/components/post/composer/PollForm.tsx
@@ -0,0 +1,181 @@
+import type { ReactElement } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { MiniCloseIcon, PlusIcon, ArrowIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuOptions,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
+import { Tooltip } from '../../tooltip/Tooltip';
+import {
+  POLL_OPTIONS_MAX,
+  POLL_OPTIONS_MIN,
+  POLL_OPTION_MAX_LENGTH,
+  TITLE_MAX_LENGTH,
+  type PollFormState,
+} from './types';
+
+interface PollFormProps {
+  value: PollFormState;
+  onChange: (next: PollFormState) => void;
+}
+
+const DURATION_OPTIONS: Array<{ label: string; value: number | undefined }> = [
+  { label: '1 day', value: 1 },
+  { label: '3 days', value: 3 },
+  { label: '7 days', value: 7 },
+  { label: '14 days', value: 14 },
+  { label: '30 days', value: 30 },
+  { label: 'No end date', value: undefined },
+];
+
+const findDurationLabel = (value: number | undefined): string =>
+  DURATION_OPTIONS.find((option) => option.value === value)?.label ?? '7 days';
+
+export const PollForm = ({ value, onChange }: PollFormProps): ReactElement => {
+  const [durationOpen, setDurationOpen] = useState(false);
+  const questionRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    questionRef.current?.focus();
+  }, []);
+
+  const updateOption = useCallback(
+    (index: number, next: string) => {
+      const options = [...value.options];
+      options[index] = next;
+      onChange({ ...value, options });
+    },
+    [onChange, value],
+  );
+
+  const removeOption = useCallback(
+    (index: number) => {
+      if (value.options.length <= POLL_OPTIONS_MIN) {
+        return;
+      }
+      onChange({
+        ...value,
+        options: value.options.filter((_, i) => i !== index),
+      });
+    },
+    [onChange, value],
+  );
+
+  const addOption = useCallback(() => {
+    if (value.options.length >= POLL_OPTIONS_MAX) {
+      return;
+    }
+    onChange({ ...value, options: [...value.options, ''] });
+  }, [onChange, value]);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <textarea
+        ref={questionRef}
+        name="question"
+        placeholder="Ask a question…"
+        maxLength={TITLE_MAX_LENGTH}
+        rows={1}
+        value={value.question}
+        onChange={(e) =>
+          onChange({
+            ...value,
+            question: e.currentTarget.value.replace(/\n/g, ''),
+          })
+        }
+        aria-label="Poll question"
+        className="w-full resize-none overflow-hidden break-words bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
+      />
+      <div className="flex flex-col gap-2">
+        {value.options.map((option, index) => {
+          const canRemove = value.options.length > POLL_OPTIONS_MIN;
+          return (
+            <div
+              // eslint-disable-next-line react/no-array-index-key
+              key={index}
+              className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 focus-within:border-border-subtlest-primary"
+            >
+              <span className="text-text-tertiary typo-callout">
+                {index + 1}.
+              </span>
+              <input
+                type="text"
+                value={option}
+                maxLength={POLL_OPTION_MAX_LENGTH}
+                placeholder={`Option ${index + 1}`}
+                onChange={(e) => updateOption(index, e.currentTarget.value)}
+                aria-label={`Poll option ${index + 1}`}
+                className="flex-1 bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary"
+              />
+              {canRemove && (
+                <Tooltip content="Remove option">
+                  <Button
+                    type="button"
+                    size={ButtonSize.XSmall}
+                    variant={ButtonVariant.Tertiary}
+                    icon={<MiniCloseIcon size={IconSize.Size16} />}
+                    onClick={() => removeOption(index)}
+                    aria-label={`Remove option ${index + 1}`}
+                  />
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+        {value.options.length < POLL_OPTIONS_MAX && (
+          <Button
+            type="button"
+            size={ButtonSize.Small}
+            variant={ButtonVariant.Subtle}
+            icon={<PlusIcon />}
+            onClick={addOption}
+            className="self-start"
+          >
+            Add option
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <span className="text-text-tertiary typo-callout">
+          Poll closes after
+        </span>
+        <DropdownMenu open={durationOpen} onOpenChange={setDurationOpen}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Tertiary}
+              className="!rounded-12 !border !border-border-subtlest-tertiary !px-3 !font-normal !typo-callout"
+            >
+              {findDurationLabel(value.durationDays)}
+              <ArrowIcon
+                className="ml-2 rotate-180 text-text-tertiary"
+                secondary
+                size={IconSize.Size16}
+              />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="start"
+            variant="field"
+            className="min-w-44"
+          >
+            <DropdownMenuOptions
+              options={DURATION_OPTIONS.map((option) => ({
+                label: option.label,
+                action: () => {
+                  onChange({ ...value, durationDays: option.value });
+                  setDurationOpen(false);
+                },
+              }))}
+            />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/shared/src/components/post/composer/TextForm.tsx b/packages/shared/src/components/post/composer/TextForm.tsx
new file mode 100644
index 00000000000..68bf944a44c
--- /dev/null
+++ b/packages/shared/src/components/post/composer/TextForm.tsx
@@ -0,0 +1,198 @@
+import type { ReactElement, ReactNode } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import RichTextInput, {
+  type RichTextInputRef,
+} from '../../fields/RichTextInput';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { CameraIcon, MiniCloseIcon } from '../../icons';
+import { IconSize } from '../../Icon';
+import { Tooltip } from '../../tooltip/Tooltip';
+import { useFileInput } from '../../../hooks/utils/useFileInput';
+import {
+  acceptedTypesList,
+  ACCEPTED_TYPES,
+  imageSizeLimitMB,
+} from '../../../graphql/posts';
+import { TITLE_MAX_LENGTH, type TextFormState } from './types';
+
+export interface TextFormCover {
+  preview: string;
+  file: File;
+}
+
+interface TextFormProps {
+  value: TextFormState;
+  onChange: (next: TextFormState) => void;
+  sourceId?: string;
+  cover?: TextFormCover | null;
+  onCoverChange?: (cover: TextFormCover | null) => void;
+  toolbarLeading?: ReactNode;
+  toolbarRightActions?: ReactNode;
+  onMarkdownModeChange?: (isMarkdownMode: boolean) => void;
+}
+
+export interface TextFormHandle {
+  focus: () => void;
+  toggleMarkdownMode: () => void;
+}
+
+const BODY_MAX_LENGTH = 10_000;
+
+export const TextForm = forwardRef<TextFormHandle, TextFormProps>(
+  function TextForm(
+    {
+      value,
+      onChange,
+      sourceId,
+      cover,
+      onCoverChange,
+      toolbarLeading,
+      toolbarRightActions,
+      onMarkdownModeChange,
+    },
+    ref,
+  ): ReactElement {
+    const titleRef = useRef<HTMLTextAreaElement>(null);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    const editorRef = useRef<RichTextInputRef>(null);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => titleRef.current?.focus(),
+      toggleMarkdownMode: () => editorRef.current?.toggleMarkdownMode(),
+    }));
+
+    useEffect(() => {
+      titleRef.current?.focus();
+    }, []);
+
+    const setCoverFile = useCallback(
+      (file?: File) => {
+        if (!file) {
+          onCoverChange?.(null);
+          return;
+        }
+        const reader = new FileReader();
+        reader.onload = () => {
+          onCoverChange?.({ preview: reader.result as string, file });
+        };
+        reader.readAsDataURL(file);
+      },
+      [onCoverChange],
+    );
+
+    const { onFileChange } = useFileInput({
+      acceptedTypes: acceptedTypesList,
+      limitMb: imageSizeLimitMB,
+      onChange: (_, file) => setCoverFile(file),
+    });
+
+    const onFileInputChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onFileChange(event.target.files?.[0]);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      },
+      [onFileChange],
+    );
+
+    return (
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex shrink-0 flex-col gap-3 px-5 pb-3 pt-2">
+          <textarea
+            ref={titleRef}
+            name="title"
+            placeholder="Post title…"
+            maxLength={TITLE_MAX_LENGTH}
+            rows={1}
+            value={value.title}
+            onChange={(e) =>
+              onChange({
+                ...value,
+                title: e.currentTarget.value.replace(/\n/g, ''),
+              })
+            }
+            aria-label="Post title"
+            className="w-full resize-none overflow-hidden break-words bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
+          />
+          {cover ? (
+            <div className="relative">
+              <img
+                src={cover.preview}
+                alt="Post cover"
+                className="block aspect-[2/1] w-full rounded-16 object-cover"
+              />
+              <Tooltip content="Remove cover">
+                <Button
+                  type="button"
+                  size={ButtonSize.Small}
+                  variant={ButtonVariant.Primary}
+                  icon={<MiniCloseIcon />}
+                  onClick={() => onCoverChange?.(null)}
+                  aria-label="Remove cover"
+                  className="absolute right-3 top-3 !rounded-full !bg-surface-invert !text-text-primary !shadow-3"
+                />
+              </Tooltip>
+            </div>
+          ) : (
+            onCoverChange && (
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="inline-flex w-fit items-center gap-1.5 rounded-12 border border-dashed border-border-subtlest-tertiary px-3 py-1.5 text-text-tertiary transition-colors typo-callout hover:border-border-subtlest-secondary hover:bg-surface-float hover:text-text-primary"
+                aria-label="Add a cover image"
+              >
+                <CameraIcon size={IconSize.Size16} />
+                Add cover
+              </button>
+            )
+          )}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept={ACCEPTED_TYPES}
+            className="hidden"
+            onChange={onFileInputChange}
+          />
+        </div>
+        <RichTextInput
+          ref={editorRef}
+          initialContent={value.body}
+          onValueUpdate={(body) => onChange({ ...value, body })}
+          sourceId={sourceId}
+          textareaProps={{
+            name: 'content',
+            placeholder: 'Share your thoughts',
+          }}
+          enabledCommand={{
+            upload: true,
+            link: true,
+            mention: true,
+            emoji: true,
+            gif: true,
+          }}
+          maxInputLength={BODY_MAX_LENGTH}
+          allowBlockFormatting
+          minHeightClassName="min-h-[12rem]"
+          toolbarPosition="bottom"
+          toolbarLeading={toolbarLeading}
+          toolbarRightActions={toolbarRightActions}
+          hideMarkdownToggle
+          hideMarkdownHeader
+          hideFooter
+          onMarkdownModeChange={onMarkdownModeChange}
+          className={{
+            container: '!min-h-0 !flex-1 !rounded-none !bg-transparent',
+            input: '!px-5',
+          }}
+        />
+      </div>
+    );
+  },
+);
diff --git a/packages/shared/src/components/post/composer/types.ts b/packages/shared/src/components/post/composer/types.ts
new file mode 100644
index 00000000000..0cea7ad0721
--- /dev/null
+++ b/packages/shared/src/components/post/composer/types.ts
@@ -0,0 +1,30 @@
+export type ComposerKind = 'text' | 'link' | 'poll';
+
+export interface TextFormState {
+  title: string;
+  body: string;
+}
+
+export interface LinkFormState {
+  url: string;
+  commentary: string;
+}
+
+export interface PollFormState {
+  question: string;
+  options: string[];
+  durationDays: number | undefined;
+}
+
+export const DEFAULT_TEXT: TextFormState = { title: '', body: '' };
+export const DEFAULT_LINK: LinkFormState = { url: '', commentary: '' };
+export const DEFAULT_POLL: PollFormState = {
+  question: '',
+  options: ['', ''],
+  durationDays: 7,
+};
+
+export const POLL_OPTIONS_MIN = 2;
+export const POLL_OPTIONS_MAX = 4;
+export const POLL_OPTION_MAX_LENGTH = 35;
+export const TITLE_MAX_LENGTH = 250;
diff --git a/packages/shared/src/components/post/composer/useComposerAudience.ts b/packages/shared/src/components/post/composer/useComposerAudience.ts
new file mode 100644
index 00000000000..bac765bc6f1
--- /dev/null
+++ b/packages/shared/src/components/post/composer/useComposerAudience.ts
@@ -0,0 +1,81 @@
+import { useMemo, useState, useEffect } from 'react';
+import { useAuthContext } from '../../../contexts/AuthContext';
+import { generateUserSourceAsSquad } from '../write/MultipleSourceSelect';
+import type { Squad } from '../../../graphql/sources';
+import { SourcePermissions, SourceType } from '../../../graphql/sources';
+import { verifyPermission } from '../../../graphql/squads';
+
+export const MAX_AUDIENCE_SQUADS = 3;
+
+export const isUserAudience = (audience: Squad | undefined): boolean =>
+  // @ts-expect-error UserSource intentionally reused as Squad
+  audience?.type === SourceType.User;
+
+interface UseComposerAudience {
+  audiences: Squad[];
+  selectedIds: string[];
+  selected: Squad[];
+  setSelectedIds: (ids: string[]) => void;
+  userAudienceId: string | undefined;
+}
+
+export const useComposerAudience = (
+  initialSquadHandle?: string,
+): UseComposerAudience => {
+  const { user, squads } = useAuthContext();
+
+  const audiences = useMemo<Squad[]>(() => {
+    if (!user) {
+      return [];
+    }
+    const userAudience = generateUserSourceAsSquad(user);
+    const postableSquads = (squads ?? []).filter(
+      (squad) =>
+        squad?.active && verifyPermission(squad, SourcePermissions.Post),
+    );
+    return [userAudience, ...postableSquads];
+  }, [user, squads]);
+
+  const userAudienceId = useMemo(
+    () => audiences.find(isUserAudience)?.id,
+    [audiences],
+  );
+
+  const defaultId = useMemo(() => {
+    if (initialSquadHandle) {
+      const match = audiences.find(
+        (audience) => audience.handle === initialSquadHandle,
+      );
+      if (match?.id) {
+        return match.id;
+      }
+    }
+    return userAudienceId;
+  }, [audiences, initialSquadHandle, userAudienceId]);
+
+  const [selectedIds, setSelectedIds] = useState<string[]>(() =>
+    defaultId ? [defaultId] : [],
+  );
+
+  useEffect(() => {
+    if (selectedIds.length === 0 && defaultId) {
+      setSelectedIds([defaultId]);
+    }
+  }, [defaultId, selectedIds.length]);
+
+  const selected = useMemo(
+    () =>
+      audiences.filter(
+        (audience) => !!audience.id && selectedIds.includes(audience.id),
+      ),
+    [audiences, selectedIds],
+  );
+
+  return {
+    audiences,
+    selectedIds,
+    selected,
+    setSelectedIds,
+    userAudienceId,
+  };
+};
diff --git a/packages/shared/src/components/post/composer/useComposerSubmit.ts b/packages/shared/src/components/post/composer/useComposerSubmit.ts
new file mode 100644
index 00000000000..c1a6ef54922
--- /dev/null
+++ b/packages/shared/src/components/post/composer/useComposerSubmit.ts
@@ -0,0 +1,272 @@
+import type { FormEvent } from 'react';
+import { useCallback, useMemo } from 'react';
+import { usePostToSquad } from '../../../hooks';
+import { useMultipleSourcePost } from '../../../features/squads/hooks/useMultipleSourcePost';
+import { useToastNotification } from '../../../hooks/useToastNotification';
+import type {
+  CreatePostInMultipleSourcesArgs,
+  ExternalLinkPreview,
+} from '../../../graphql/posts';
+import type { ApiErrorResult } from '../../../graphql/common';
+import { DEFAULT_ERROR } from '../../../graphql/common';
+import type { Squad } from '../../../graphql/sources';
+import {
+  POLL_OPTIONS_MIN,
+  type ComposerKind,
+  type LinkFormState,
+  type PollFormState,
+  type TextFormState,
+} from './types';
+import type { TextFormCover } from './TextForm';
+import { isPreviewForComposerUrl } from './utils';
+
+const isApiErrorResult = (error: unknown): error is ApiErrorResult =>
+  !!(error as ApiErrorResult)?.response?.errors;
+
+const isTextValid = (state: TextFormState): boolean =>
+  state.title.trim().length > 0 && state.body.trim().length > 0;
+
+const isLinkValid = (preview?: ExternalLinkPreview): boolean =>
+  Boolean(preview?.title && (preview.url || preview.permalink));
+
+const isPollValid = (state: PollFormState): boolean => {
+  if (!state.question.trim()) {
+    return false;
+  }
+  const filled = state.options.map((option) => option.trim()).filter(Boolean);
+  return filled.length >= POLL_OPTIONS_MIN;
+};
+
+const filledPollOptions = (state: PollFormState): string[] =>
+  state.options.map((option) => option.trim()).filter(Boolean);
+
+interface UseComposerSubmitProps {
+  kind: ComposerKind;
+  text: TextFormState;
+  link: LinkFormState;
+  poll: PollFormState;
+  cover: TextFormCover | null;
+  primary: Squad | undefined;
+  selected: Squad[];
+  selectedIds: string[];
+  initialPreview?: ExternalLinkPreview;
+  onComplete: () => void;
+}
+
+interface UseComposerSubmit {
+  handleSubmit: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+  isSubmitDisabled: boolean;
+  isInFlight: boolean;
+  preview: ExternalLinkPreview | undefined;
+  isLoadingPreview: boolean;
+  fetchPreview: (url?: string) => void;
+}
+
+export const useComposerSubmit = ({
+  kind,
+  text,
+  link,
+  poll,
+  cover,
+  primary,
+  selected,
+  selectedIds,
+  initialPreview,
+  onComplete,
+}: UseComposerSubmitProps): UseComposerSubmit => {
+  const { displayToast } = useToastNotification();
+  const handleError = useCallback(
+    (error: ApiErrorResult) => {
+      displayToast(error.response?.errors?.[0]?.message ?? DEFAULT_ERROR);
+    },
+    [displayToast],
+  );
+  const {
+    getLinkPreview,
+    isLoadingPreview,
+    preview,
+    isPosting,
+    onSubmitPost,
+    onSubmitFreeformPost,
+    onSubmitPollPost,
+  } = usePostToSquad({
+    initialPreview,
+    onComplete,
+    displayMutationErrors: true,
+  });
+
+  const { onCreate: createMulti, isPending: isMultiPending } =
+    useMultipleSourcePost({ onSuccess: onComplete, onError: handleError });
+
+  const fetchPreview = useCallback(
+    (url?: string) => {
+      if (!url) {
+        return;
+      }
+      getLinkPreview(url).catch(() => {
+        // surfaced via usePostToSquad toast
+      });
+    },
+    [getLinkPreview],
+  );
+
+  const isMulti = selected.length > 1;
+  const isInFlight = isPosting || isMultiPending;
+
+  const isSubmitDisabled = useMemo(() => {
+    if (isInFlight || !primary) {
+      return true;
+    }
+    if (kind === 'text') {
+      return !isTextValid(text);
+    }
+    if (kind === 'link') {
+      return (
+        !isLinkValid(preview) || !isPreviewForComposerUrl(preview, link.url)
+      );
+    }
+    return !isPollValid(poll);
+  }, [isInFlight, kind, link.url, poll, preview, primary, text]);
+
+  const submitMulti = useCallback(async () => {
+    if (kind === 'text') {
+      await createMulti({
+        sourceIds: selectedIds,
+        title: text.title.trim(),
+        content: text.body,
+        ...(cover?.file ? { image: cover.file } : {}),
+      } as unknown as CreatePostInMultipleSourcesArgs);
+      return;
+    }
+    if (kind === 'poll') {
+      await createMulti({
+        sourceIds: selectedIds,
+        title: poll.question.trim(),
+        options: filledPollOptions(poll).map((value, order) => ({
+          text: value,
+          order,
+        })),
+        ...(poll.durationDays != null ? { duration: poll.durationDays } : {}),
+      } as unknown as CreatePostInMultipleSourcesArgs);
+      return;
+    }
+    if (!isPreviewForComposerUrl(preview, link.url)) {
+      displayToast('Invalid link');
+      return;
+    }
+
+    const url = preview?.finalUrl ?? preview?.url;
+    if (!url || !preview?.title) {
+      return;
+    }
+    const commentary = link.commentary.trim();
+    if (preview.id) {
+      await createMulti({
+        sourceIds: selectedIds,
+        sharedPostId: preview.id,
+        commentary,
+      } as unknown as CreatePostInMultipleSourcesArgs);
+      return;
+    }
+    await createMulti({
+      sourceIds: selectedIds,
+      externalLink: url,
+      title: preview.title,
+      imageUrl: preview.image,
+      commentary,
+    } as unknown as CreatePostInMultipleSourcesArgs);
+  }, [
+    createMulti,
+    cover?.file,
+    displayToast,
+    kind,
+    link.commentary,
+    link.url,
+    poll,
+    preview,
+    selectedIds,
+    text,
+  ]);
+
+  const submitSingle = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      if (!primary) {
+        return;
+      }
+      if (kind === 'text') {
+        await onSubmitFreeformPost(
+          {
+            title: text.title.trim(),
+            content: text.body,
+            ...(cover?.file ? { image: cover.file } : {}),
+          },
+          primary,
+        );
+        return;
+      }
+      if (kind === 'link') {
+        if (!isPreviewForComposerUrl(preview, link.url)) {
+          displayToast('Invalid link');
+          return;
+        }
+
+        await onSubmitPost(event, primary, link.commentary.trim());
+        return;
+      }
+      await onSubmitPollPost(
+        {
+          title: poll.question.trim(),
+          options: filledPollOptions(poll),
+          ...(poll.durationDays != null ? { duration: poll.durationDays } : {}),
+        },
+        primary,
+      );
+    },
+    [
+      cover?.file,
+      displayToast,
+      kind,
+      link.commentary,
+      link.url,
+      onSubmitFreeformPost,
+      onSubmitPollPost,
+      onSubmitPost,
+      poll,
+      preview,
+      primary,
+      text,
+    ],
+  );
+
+  const handleSubmit = useCallback(
+    async (event: FormEvent<HTMLFormElement>) => {
+      event.preventDefault();
+      if (isSubmitDisabled) {
+        return;
+      }
+      try {
+        if (isMulti) {
+          await submitMulti();
+          return;
+        }
+        await submitSingle(event);
+      } catch (error) {
+        if (isApiErrorResult(error)) {
+          return;
+        }
+
+        throw error;
+      }
+    },
+    [isMulti, isSubmitDisabled, submitMulti, submitSingle],
+  );
+
+  return {
+    handleSubmit,
+    isSubmitDisabled,
+    isInFlight,
+    preview,
+    isLoadingPreview,
+    fetchPreview,
+  };
+};
diff --git a/packages/shared/src/components/post/composer/utils.spec.ts b/packages/shared/src/components/post/composer/utils.spec.ts
new file mode 100644
index 00000000000..84800b76868
--- /dev/null
+++ b/packages/shared/src/components/post/composer/utils.spec.ts
@@ -0,0 +1,18 @@
+import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
+
+describe('composer utils', () => {
+  it('normalizes URLs without a protocol', () => {
+    expect(normalizeComposerUrl('daily.dev')).toBe('https://daily.dev');
+  });
+
+  it('matches previews against the current composer URL', () => {
+    const preview = {
+      title: 'daily.dev',
+      url: 'https://daily.dev',
+      finalUrl: 'https://daily.dev/posts/1',
+    };
+
+    expect(isPreviewForComposerUrl(preview, 'daily.dev')).toBe(true);
+    expect(isPreviewForComposerUrl(preview, 'https://example.com')).toBe(false);
+  });
+});
diff --git a/packages/shared/src/components/post/composer/utils.ts b/packages/shared/src/components/post/composer/utils.ts
new file mode 100644
index 00000000000..b6fb1f05b66
--- /dev/null
+++ b/packages/shared/src/components/post/composer/utils.ts
@@ -0,0 +1,25 @@
+import type { ExternalLinkPreview } from '../../../graphql/posts';
+import { urlStartRegexMatch } from '../../../lib/links';
+
+export const normalizeComposerUrl = (value: string): string => {
+  const trimmed = value.trim();
+  if (!trimmed) {
+    return '';
+  }
+
+  return urlStartRegexMatch.test(trimmed) ? trimmed : `https://${trimmed}`;
+};
+
+export const isPreviewForComposerUrl = (
+  preview: ExternalLinkPreview | undefined,
+  value: string,
+): boolean => {
+  const normalized = normalizeComposerUrl(value);
+  if (!normalized || !preview?.title) {
+    return false;
+  }
+
+  return [preview.url, preview.finalUrl, preview.permalink].includes(
+    normalized,
+  );
+};
diff --git a/packages/shared/src/components/post/write/CreatePostButton.tsx b/packages/shared/src/components/post/write/CreatePostButton.tsx
index 75ee24c78ab..cb2a7f12194 100644
--- a/packages/shared/src/components/post/write/CreatePostButton.tsx
+++ b/packages/shared/src/components/post/write/CreatePostButton.tsx
@@ -1,9 +1,12 @@
-import type { ReactElement } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { link } from '../../../lib/links';
 import { useAuthContext } from '../../../contexts/AuthContext';
 import { useActions, useSquad, useViewSize, ViewSize } from '../../../hooks';
+import { useLazyModal } from '../../../hooks/useLazyModal';
+import { useSmartComposer } from '../../../hooks/post/useSmartComposer';
+import { LazyModal } from '../../modals/common/types';
 import { verifyPermission } from '../../../graphql/squads';
 import { SourcePermissions } from '../../../graphql/sources';
 import type {
@@ -37,18 +40,22 @@ export function CreatePostButton<Tag extends AllowedTags>({
   onClick,
   showIcon,
   ...attrs
-}: CreatePostButtonProps<Tag>): ReactElement {
+}: CreatePostButtonProps<Tag>): ReactElement | null {
   const { user, squads } = useAuthContext();
   const { route, query } = useRouter();
+  const { openModal } = useLazyModal();
+  const isSmartComposerEnabled = useSmartComposer();
   const isTablet = useViewSize(ViewSize.Tablet);
   const isLaptop = useViewSize(ViewSize.Laptop);
   const isLaptopL = useViewSize(ViewSize.LaptopL);
   const handle = route === '/squads/[handle]' ? (query.handle as string) : '';
   const { squad } = useSquad({ handle });
-  const allowedToPost = verifyPermission(squad, SourcePermissions.Post);
+  const allowedToPost = squad
+    ? verifyPermission(squad, SourcePermissions.Post)
+    : false;
   const hasAccess =
     !handle ||
-    squads?.some((item) => verifyPermission(item, SourcePermissions.Post));
+    !!squads?.some((item) => verifyPermission(item, SourcePermissions.Post));
   const { isActionsFetched, checkHasCompleted, completeAction } = useActions();
   const completedPollType = checkHasCompleted(ActionType.SeenPostPollTooltip);
   const [shouldShowPollTooltip, setShouldShowPollTooltip] = useState(false);
@@ -87,15 +94,38 @@ export function CreatePostButton<Tag extends AllowedTags>({
   const href =
     link.post.create + (squad && allowedToPost ? `?sid=${squad.handle}` : '');
 
+  const openSmartComposer = (
+    event: React.MouseEvent<AllowedElements, MouseEvent>,
+  ) => {
+    event.preventDefault();
+    openModal({
+      type: LazyModal.SmartComposer,
+      props: {
+        initialSquadHandle: squad && allowedToPost ? squad.handle : undefined,
+      },
+    });
+  };
+
+  const shouldUseSmartComposer = isSmartComposerEnabled && !onClick;
+
   const buttonProps: {
     tag?: AllowedTags;
     onClick?: (e: React.MouseEvent<AllowedElements, MouseEvent>) => void;
-  } = onClick ? { onClick } : { tag: 'a' };
+  } = (() => {
+    if (onClick) {
+      return { onClick };
+    }
+    if (shouldUseSmartComposer) {
+      return { onClick: openSmartComposer };
+    }
+    return { tag: 'a' };
+  })();
 
-  const shouldUseLink = !onClick;
+  const shouldUseLink = !onClick && !shouldUseSmartComposer;
 
   const shouldShowAsCompact =
     compact !== false && ((isLaptop && !isLaptopL) || compact);
+  const icon = shouldShowAsCompact || showIcon ? <PlusIcon /> : undefined;
 
   const getTooltipContent = () => {
     if (!shouldShowPollTooltip) {
@@ -127,7 +157,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
       variant={sidebar || footer ? ButtonVariant.Float : ButtonVariant.Primary}
       className={className}
       disabled={getIsDisabled()}
-      icon={(shouldShowAsCompact || showIcon) && <PlusIcon />}
+      icon={icon}
       size={
         isLaptop || sidebar || footer ? ButtonSize.Medium : ButtonSize.Small
       }
@@ -140,7 +170,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
   return (
     <ConditionalWrapper
       condition={shouldShowAsCompact || shouldShowPollTooltip}
-      wrapper={(component: ReactElement) => (
+      wrapper={(component: ReactNode) => (
         <Tooltip
           side="right"
           content={getTooltipContent()}
@@ -152,7 +182,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
     >
       <ConditionalWrapper
         condition={shouldUseLink}
-        wrapper={(component: ReactElement) => (
+        wrapper={(component: ReactNode) => (
           <Link href={href} passHref prefetch={false}>
             {component}
           </Link>
diff --git a/packages/shared/src/hooks/post/useSmartComposer.ts b/packages/shared/src/hooks/post/useSmartComposer.ts
new file mode 100644
index 00000000000..acd6c28ccff
--- /dev/null
+++ b/packages/shared/src/hooks/post/useSmartComposer.ts
@@ -0,0 +1,12 @@
+import { useAuthContext } from '../../contexts/AuthContext';
+import { useConditionalFeature } from '../useConditionalFeature';
+import { featureSmartComposer } from '../../lib/featureManagement';
+
+export const useSmartComposer = (): boolean => {
+  const { user, isAuthReady } = useAuthContext();
+  const { value } = useConditionalFeature({
+    feature: featureSmartComposer,
+    shouldEvaluate: isAuthReady && !!user,
+  });
+  return !!value;
+};
diff --git a/packages/shared/src/hooks/squads/usePostToSquad.tsx b/packages/shared/src/hooks/squads/usePostToSquad.tsx
index 3d26d488f67..103dbc8ac9a 100644
--- a/packages/shared/src/hooks/squads/usePostToSquad.tsx
+++ b/packages/shared/src/hooks/squads/usePostToSquad.tsx
@@ -84,6 +84,7 @@ interface UsePostToSquadProps {
   initialPreview?: ExternalLinkPreview;
   onMutate?: (data: unknown) => void;
   onError?: (error: ApiErrorResult) => void;
+  displayMutationErrors?: boolean;
 }
 
 const getSquadIdOrThrow = (squad: Squad): string => {
@@ -103,6 +104,7 @@ export const usePostToSquad = ({
   onSourcePostModerationSuccess,
   getSharedPostSuccessToast,
   initialPreview,
+  displayMutationErrors = false,
 }: UsePostToSquadProps = {}): UsePostToSquad => {
   const { toggleGroup, getGroupStatus } = useNotificationSettings();
   const { displayToast } = useToastNotification();
@@ -116,14 +118,19 @@ export const usePostToSquad = ({
   const requestMethod = requestMethodContext ?? gqlClient.request;
 
   const handleMutationError = useCallback(
-    (err: unknown): void => {
+    (err: unknown, options: { displayError?: boolean } = {}): void => {
       if (!isApiErrorResult(err)) {
         return;
       }
 
+      const { displayError = true } = options;
+      if (displayMutationErrors && displayError) {
+        displayToast(err.response?.errors?.[0]?.message ?? DEFAULT_ERROR);
+      }
+
       onError?.(err);
     },
-    [onError],
+    [displayMutationErrors, displayToast, onError],
   );
 
   const handlePostSuccess = useCallback(
@@ -143,7 +150,7 @@ export const usePostToSquad = ({
   } = useMutation({
     mutationFn: createPost,
     onMutate,
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
     onSuccess: handlePostSuccess,
   });
   const {
@@ -154,7 +161,7 @@ export const usePostToSquad = ({
     mutationFn: editPost,
     onMutate,
     onSuccess: handlePostSuccess,
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const {
@@ -180,7 +187,7 @@ export const usePostToSquad = ({
       }
       handlePostSuccess(data);
     },
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const { mutateAsync: getLinkPreview, isPending: isLoadingPreview } =
@@ -196,7 +203,7 @@ export const usePostToSquad = ({
         const rateLimited = getApiError(err, ApiError.RateLimited);
         const message = rateLimited?.message ?? DEFAULT_ERROR;
         displayToast(message);
-        handleMutationError(err);
+        handleMutationError(err, { displayError: false });
       },
     });
 
@@ -270,7 +277,7 @@ export const usePostToSquad = ({
       onSharedPostSuccessfully();
       handlePostSuccess(data);
     },
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const {
@@ -283,7 +290,7 @@ export const usePostToSquad = ({
       onSharedPostSuccessfully(true);
       handlePostSuccess(data);
     },
-    onError: handleMutationError,
+    onError: (err) => handleMutationError(err),
   });
 
   const {
@@ -305,7 +312,7 @@ export const usePostToSquad = ({
       const rateLimited = getApiError(err, ApiError.RateLimited);
       const message = rateLimited?.message ?? DEFAULT_ERROR;
       displayToast(message);
-      handleMutationError(err);
+      handleMutationError(err, { displayError: false });
     },
   });
 
diff --git a/packages/shared/src/lib/featureManagement.ts b/packages/shared/src/lib/featureManagement.ts
index 32712d73b9a..f8c496a50bd 100644
--- a/packages/shared/src/lib/featureManagement.ts
+++ b/packages/shared/src/lib/featureManagement.ts
@@ -61,6 +61,8 @@ export const featurePlusApiLanding = new Feature('plus_api_landing_v2', false);
 
 export const featureLuckyButton = new Feature('lucky_button', false);
 
+export const featureSmartComposer = new Feature('smart_composer', false);
+
 export const featureAutorotateAds = new Feature('autorotate_ads', 0);
 
 export const featureFeedAdTemplate = new Feature('feed_ad_template', {

From f5c46333597f7069df9e2e34c8bf6e949a0434d9 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Wed, 13 May 2026 14:22:31 +0200
Subject: [PATCH 2/5] fix: more cleanup

---
 .../modals/post/SmartComposerModal.tsx        |   3 +-
 .../src/components/post/composer/LinkForm.tsx |  20 +-
 .../post/composer/useComposerSubmit.ts        | 210 +++++++-----------
 .../components/post/composer/utils.spec.ts    |   7 +-
 .../src/components/post/composer/utils.ts     |  17 +-
 5 files changed, 96 insertions(+), 161 deletions(-)

diff --git a/packages/shared/src/components/modals/post/SmartComposerModal.tsx b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
index f56cd00ca36..83b78ab2b28 100644
--- a/packages/shared/src/components/modals/post/SmartComposerModal.tsx
+++ b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
@@ -72,6 +72,7 @@ export function SmartComposerModal({
   const { audiences, selectedIds, selected, setSelectedIds, userAudienceId } =
     useComposerAudience(initialSquadHandle);
   const primary = selected[0];
+  const isMulti = selected.length > 1;
 
   const {
     handleSubmit,
@@ -87,8 +88,8 @@ export function SmartComposerModal({
     poll,
     cover,
     primary,
-    selected,
     selectedIds,
+    isMulti,
     initialPreview,
     onComplete: () => onRequestClose?.(),
   });
diff --git a/packages/shared/src/components/post/composer/LinkForm.tsx b/packages/shared/src/components/post/composer/LinkForm.tsx
index 7f38ed9923a..770d15350fe 100644
--- a/packages/shared/src/components/post/composer/LinkForm.tsx
+++ b/packages/shared/src/components/post/composer/LinkForm.tsx
@@ -7,18 +7,6 @@ import type { ExternalLinkPreview } from '../../../graphql/posts';
 import { TITLE_MAX_LENGTH, type LinkFormState } from './types';
 import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
 
-const looksLikeRealUrl = (value: string): boolean => {
-  try {
-    const url = new URL(value);
-    if (url.protocol !== 'http:' && url.protocol !== 'https:') {
-      return false;
-    }
-    return url.hostname === 'localhost' || url.hostname.includes('.');
-  } catch {
-    return false;
-  }
-};
-
 interface LinkFormProps {
   value: LinkFormState;
   onChange: (next: LinkFormState) => void;
@@ -41,12 +29,8 @@ export const LinkForm = ({
   }, []);
 
   const hasPreviewForUrl = useCallback(
-    (next?: string): boolean => {
-      if (!next || !looksLikeRealUrl(next)) {
-        return false;
-      }
-      return !isPreviewForComposerUrl(preview, next);
-    },
+    (next?: string): boolean =>
+      !!next && !isPreviewForComposerUrl(preview, next),
     [preview],
   );
 
diff --git a/packages/shared/src/components/post/composer/useComposerSubmit.ts b/packages/shared/src/components/post/composer/useComposerSubmit.ts
index c1a6ef54922..955724ba314 100644
--- a/packages/shared/src/components/post/composer/useComposerSubmit.ts
+++ b/packages/shared/src/components/post/composer/useComposerSubmit.ts
@@ -1,5 +1,5 @@
 import type { FormEvent } from 'react';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { usePostToSquad } from '../../../hooks';
 import { useMultipleSourcePost } from '../../../features/squads/hooks/useMultipleSourcePost';
 import { useToastNotification } from '../../../hooks/useToastNotification';
@@ -7,8 +7,6 @@ import type {
   CreatePostInMultipleSourcesArgs,
   ExternalLinkPreview,
 } from '../../../graphql/posts';
-import type { ApiErrorResult } from '../../../graphql/common';
-import { DEFAULT_ERROR } from '../../../graphql/common';
 import type { Squad } from '../../../graphql/sources';
 import {
   POLL_OPTIONS_MIN,
@@ -20,25 +18,22 @@ import {
 import type { TextFormCover } from './TextForm';
 import { isPreviewForComposerUrl } from './utils';
 
-const isApiErrorResult = (error: unknown): error is ApiErrorResult =>
-  !!(error as ApiErrorResult)?.response?.errors;
+const trimmedOptions = (state: PollFormState): string[] =>
+  state.options.map((option) => option.trim()).filter(Boolean);
 
 const isTextValid = (state: TextFormState): boolean =>
-  state.title.trim().length > 0 && state.body.trim().length > 0;
-
-const isLinkValid = (preview?: ExternalLinkPreview): boolean =>
-  Boolean(preview?.title && (preview.url || preview.permalink));
+  !!state.title.trim() && !!state.body.trim();
 
-const isPollValid = (state: PollFormState): boolean => {
-  if (!state.question.trim()) {
-    return false;
-  }
-  const filled = state.options.map((option) => option.trim()).filter(Boolean);
-  return filled.length >= POLL_OPTIONS_MIN;
-};
+const isLinkValid = (
+  state: LinkFormState,
+  preview: ExternalLinkPreview | undefined,
+): boolean =>
+  !!preview?.title &&
+  !!(preview.url || preview.permalink) &&
+  isPreviewForComposerUrl(preview, state.url);
 
-const filledPollOptions = (state: PollFormState): string[] =>
-  state.options.map((option) => option.trim()).filter(Boolean);
+const isPollValid = (state: PollFormState): boolean =>
+  !!state.question.trim() && trimmedOptions(state).length >= POLL_OPTIONS_MIN;
 
 interface UseComposerSubmitProps {
   kind: ComposerKind;
@@ -47,8 +42,8 @@ interface UseComposerSubmitProps {
   poll: PollFormState;
   cover: TextFormCover | null;
   primary: Squad | undefined;
-  selected: Squad[];
   selectedIds: string[];
+  isMulti: boolean;
   initialPreview?: ExternalLinkPreview;
   onComplete: () => void;
 }
@@ -69,18 +64,12 @@ export const useComposerSubmit = ({
   poll,
   cover,
   primary,
-  selected,
   selectedIds,
+  isMulti,
   initialPreview,
   onComplete,
 }: UseComposerSubmitProps): UseComposerSubmit => {
   const { displayToast } = useToastNotification();
-  const handleError = useCallback(
-    (error: ApiErrorResult) => {
-      displayToast(error.response?.errors?.[0]?.message ?? DEFAULT_ERROR);
-    },
-    [displayToast],
-  );
   const {
     getLinkPreview,
     isLoadingPreview,
@@ -94,26 +83,27 @@ export const useComposerSubmit = ({
     onComplete,
     displayMutationErrors: true,
   });
-
   const { onCreate: createMulti, isPending: isMultiPending } =
-    useMultipleSourcePost({ onSuccess: onComplete, onError: handleError });
+    useMultipleSourcePost({
+      onSuccess: onComplete,
+      onError: (error) =>
+        displayToast(error.response?.errors?.[0]?.message ?? 'Failed to post'),
+    });
 
   const fetchPreview = useCallback(
     (url?: string) => {
       if (!url) {
         return;
       }
-      getLinkPreview(url).catch(() => {
-        // surfaced via usePostToSquad toast
-      });
+      // surfaced via usePostToSquad toast
+      getLinkPreview(url).catch(() => undefined);
     },
     [getLinkPreview],
   );
 
-  const isMulti = selected.length > 1;
   const isInFlight = isPosting || isMultiPending;
 
-  const isSubmitDisabled = useMemo(() => {
+  const getIsSubmitDisabled = (): boolean => {
     if (isInFlight || !primary) {
       return true;
     }
@@ -121,149 +111,107 @@ export const useComposerSubmit = ({
       return !isTextValid(text);
     }
     if (kind === 'link') {
-      return (
-        !isLinkValid(preview) || !isPreviewForComposerUrl(preview, link.url)
-      );
+      return !isLinkValid(link, preview);
     }
     return !isPollValid(poll);
-  }, [isInFlight, kind, link.url, poll, preview, primary, text]);
+  };
 
-  const submitMulti = useCallback(async () => {
-    if (kind === 'text') {
+  const submitText = async () => {
+    const payload = {
+      title: text.title.trim(),
+      content: text.body,
+      ...(cover?.file ? { image: cover.file } : {}),
+    };
+    if (isMulti) {
       await createMulti({
         sourceIds: selectedIds,
-        title: text.title.trim(),
-        content: text.body,
-        ...(cover?.file ? { image: cover.file } : {}),
+        ...payload,
       } as unknown as CreatePostInMultipleSourcesArgs);
       return;
     }
-    if (kind === 'poll') {
+    await onSubmitFreeformPost(payload, primary as Squad);
+  };
+
+  const submitPoll = async () => {
+    const options = trimmedOptions(poll);
+    const duration = poll.durationDays;
+    if (isMulti) {
       await createMulti({
         sourceIds: selectedIds,
         title: poll.question.trim(),
-        options: filledPollOptions(poll).map((value, order) => ({
-          text: value,
-          order,
-        })),
-        ...(poll.durationDays != null ? { duration: poll.durationDays } : {}),
+        options: options.map((value, order) => ({ text: value, order })),
+        ...(duration != null ? { duration } : {}),
       } as unknown as CreatePostInMultipleSourcesArgs);
       return;
     }
+    await onSubmitPollPost(
+      {
+        title: poll.question.trim(),
+        options,
+        ...(duration != null ? { duration } : {}),
+      },
+      primary as Squad,
+    );
+  };
+
+  const submitLink = async (event: FormEvent<HTMLFormElement>) => {
     if (!isPreviewForComposerUrl(preview, link.url)) {
       displayToast('Invalid link');
       return;
     }
-
-    const url = preview?.finalUrl ?? preview?.url;
-    if (!url || !preview?.title) {
+    const commentary = link.commentary.trim();
+    if (!isMulti) {
+      await onSubmitPost(event, primary as Squad, commentary);
       return;
     }
-    const commentary = link.commentary.trim();
-    if (preview.id) {
-      await createMulti({
-        sourceIds: selectedIds,
-        sharedPostId: preview.id,
-        commentary,
-      } as unknown as CreatePostInMultipleSourcesArgs);
+    const url = preview?.finalUrl ?? preview?.url;
+    if (!url || !preview?.title) {
       return;
     }
+    const sharedArgs = preview.id
+      ? { sharedPostId: preview.id }
+      : { externalLink: url, title: preview.title, imageUrl: preview.image };
     await createMulti({
       sourceIds: selectedIds,
-      externalLink: url,
-      title: preview.title,
-      imageUrl: preview.image,
       commentary,
+      ...sharedArgs,
     } as unknown as CreatePostInMultipleSourcesArgs);
-  }, [
-    createMulti,
-    cover?.file,
-    displayToast,
-    kind,
-    link.commentary,
-    link.url,
-    poll,
-    preview,
-    selectedIds,
-    text,
-  ]);
+  };
 
-  const submitSingle = useCallback(
+  const handleSubmit = useCallback(
     async (event: FormEvent<HTMLFormElement>) => {
-      if (!primary) {
+      event.preventDefault();
+      if (getIsSubmitDisabled()) {
         return;
       }
       if (kind === 'text') {
-        await onSubmitFreeformPost(
-          {
-            title: text.title.trim(),
-            content: text.body,
-            ...(cover?.file ? { image: cover.file } : {}),
-          },
-          primary,
-        );
+        await submitText();
         return;
       }
-      if (kind === 'link') {
-        if (!isPreviewForComposerUrl(preview, link.url)) {
-          displayToast('Invalid link');
-          return;
-        }
-
-        await onSubmitPost(event, primary, link.commentary.trim());
+      if (kind === 'poll') {
+        await submitPoll();
         return;
       }
-      await onSubmitPollPost(
-        {
-          title: poll.question.trim(),
-          options: filledPollOptions(poll),
-          ...(poll.durationDays != null ? { duration: poll.durationDays } : {}),
-        },
-        primary,
-      );
+      await submitLink(event);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
-      cover?.file,
-      displayToast,
       kind,
-      link.commentary,
-      link.url,
-      onSubmitFreeformPost,
-      onSubmitPollPost,
-      onSubmitPost,
-      poll,
-      preview,
+      isMulti,
       primary,
+      preview,
       text,
+      link,
+      poll,
+      cover,
+      selectedIds,
+      isInFlight,
     ],
   );
 
-  const handleSubmit = useCallback(
-    async (event: FormEvent<HTMLFormElement>) => {
-      event.preventDefault();
-      if (isSubmitDisabled) {
-        return;
-      }
-      try {
-        if (isMulti) {
-          await submitMulti();
-          return;
-        }
-        await submitSingle(event);
-      } catch (error) {
-        if (isApiErrorResult(error)) {
-          return;
-        }
-
-        throw error;
-      }
-    },
-    [isMulti, isSubmitDisabled, submitMulti, submitSingle],
-  );
-
   return {
     handleSubmit,
-    isSubmitDisabled,
+    isSubmitDisabled: getIsSubmitDisabled(),
     isInFlight,
     preview,
     isLoadingPreview,
diff --git a/packages/shared/src/components/post/composer/utils.spec.ts b/packages/shared/src/components/post/composer/utils.spec.ts
index 84800b76868..ba4649d231f 100644
--- a/packages/shared/src/components/post/composer/utils.spec.ts
+++ b/packages/shared/src/components/post/composer/utils.spec.ts
@@ -2,7 +2,12 @@ import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
 
 describe('composer utils', () => {
   it('normalizes URLs without a protocol', () => {
-    expect(normalizeComposerUrl('daily.dev')).toBe('https://daily.dev');
+    expect(normalizeComposerUrl('daily.dev')).toBe('https://daily.dev/');
+  });
+
+  it('rejects values that are not real URLs', () => {
+    expect(normalizeComposerUrl('aaaaa')).toBe('');
+    expect(normalizeComposerUrl('https://aaaaa')).toBe('');
   });
 
   it('matches previews against the current composer URL', () => {
diff --git a/packages/shared/src/components/post/composer/utils.ts b/packages/shared/src/components/post/composer/utils.ts
index b6fb1f05b66..50057421539 100644
--- a/packages/shared/src/components/post/composer/utils.ts
+++ b/packages/shared/src/components/post/composer/utils.ts
@@ -1,13 +1,9 @@
 import type { ExternalLinkPreview } from '../../../graphql/posts';
-import { urlStartRegexMatch } from '../../../lib/links';
+import { urlParseSchema } from '../../../lib/links';
 
 export const normalizeComposerUrl = (value: string): string => {
-  const trimmed = value.trim();
-  if (!trimmed) {
-    return '';
-  }
-
-  return urlStartRegexMatch.test(trimmed) ? trimmed : `https://${trimmed}`;
+  const result = urlParseSchema.safeParse(value.trim());
+  return result.success ? result.data : '';
 };
 
 export const isPreviewForComposerUrl = (
@@ -19,7 +15,8 @@ export const isPreviewForComposerUrl = (
     return false;
   }
 
-  return [preview.url, preview.finalUrl, preview.permalink].includes(
-    normalized,
-  );
+  return [preview.url, preview.finalUrl, preview.permalink]
+    .filter((url): url is string => !!url)
+    .map(normalizeComposerUrl)
+    .includes(normalized);
 };

From c2296cbaa1a238759d3aa4c373a94a44c7c93516 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 15 May 2026 14:36:30 +0200
Subject: [PATCH 3/5] fix: several improvements

---
 .../fields/RichTextEditor/RichTextToolbar.tsx | 391 ++++++++++++++---
 .../src/components/fields/RichTextInput.tsx   | 211 +++++----
 .../modals/post/SmartComposerModal.tsx        | 401 ++++++++++++------
 .../components/post/composer/AudienceChip.tsx |  30 +-
 .../post/composer/KindModePicker.tsx          |  16 +-
 .../src/components/post/composer/LinkForm.tsx |  69 ++-
 .../src/components/post/composer/PollForm.tsx |   7 +-
 .../src/components/post/composer/TextForm.tsx |  42 +-
 .../post/write/CreatePostButton.tsx           |   2 +-
 .../src/components/squads/SharePostBar.tsx    |  18 +-
 packages/shared/src/lib/log.ts                |   9 +
 11 files changed, 895 insertions(+), 301 deletions(-)

diff --git a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
index 0866de26d9c..f84fb14c74f 100644
--- a/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
+++ b/packages/shared/src/components/fields/RichTextEditor/RichTextToolbar.tsx
@@ -3,6 +3,10 @@ import type { ReactElement, ReactNode, Ref } from 'react';
 import React, {
   useState,
   useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
   forwardRef,
   useImperativeHandle,
 } from 'react';
@@ -11,15 +15,22 @@ import type { Editor } from '@tiptap/react';
 import { getMarkRange } from '@tiptap/core';
 import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
 import {
+  ArrowIcon,
   BoldIcon,
-  ItalicIcon,
   BulletListIcon,
+  ItalicIcon,
   NumberedListIcon,
-  UndoIcon,
   RedoIcon,
+  UndoIcon,
 } from '../../icons';
 import { LinkIcon } from '../../icons/Link';
 import { Tooltip } from '../../tooltip/Tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../../dropdown/DropdownMenu';
 import { LinkModal } from './LinkModal';
 
 export interface RichTextToolbarProps {
@@ -38,12 +49,32 @@ export interface RichTextToolbarRef {
   openLinkModal: () => void;
 }
 
+interface ToolbarItem {
+  id: string;
+  tooltip: string;
+  label: string;
+  icon: ReactElement;
+  isActive: boolean;
+  onClick: () => void;
+  disabled?: boolean;
+  priority: number;
+  group: string;
+}
+
+const ToolbarDivider = (): ReactElement => (
+  <span
+    aria-hidden
+    className="mx-1.5 h-5 w-px shrink-0 bg-border-subtlest-tertiary"
+  />
+);
+
 interface ToolbarButtonProps {
   tooltip: string;
   icon: ReactElement;
   isActive: boolean;
   onClick: () => void;
   disabled?: boolean;
+  alwaysVisible?: boolean;
 }
 
 const ToolbarButton = ({
@@ -53,7 +84,7 @@ const ToolbarButton = ({
   onClick,
   disabled = false,
   alwaysVisible = false,
-}: ToolbarButtonProps & { alwaysVisible?: boolean }): ReactElement | null => {
+}: ToolbarButtonProps): ReactElement | null => {
   if (disabled && !alwaysVisible) {
     return null;
   }
@@ -70,14 +101,64 @@ const ToolbarButton = ({
         })}
         pressed={isActive}
         onClick={onClick}
+        onMouseDown={(event: React.MouseEvent) => event.preventDefault()}
         disabled={disabled}
         type="button"
-        className="leading-none"
+        className="shrink-0 leading-none"
       />
     </Tooltip>
   );
 };
 
+interface OverflowMenuProps {
+  items: ToolbarItem[];
+}
+
+const OverflowMenu = ({ items }: OverflowMenuProps): ReactElement | null => {
+  const [open, setOpen] = useState(false);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <Tooltip content="More formatting">
+        <DropdownMenuTrigger asChild>
+          <Button
+            type="button"
+            variant={ButtonVariant.Tertiary}
+            size={ButtonSize.Small}
+            icon={<ArrowIcon className="rotate-180" secondary />}
+            aria-label="More formatting"
+            onMouseDown={(event: React.MouseEvent) => event.preventDefault()}
+            className="shrink-0"
+          />
+        </DropdownMenuTrigger>
+      </Tooltip>
+      <DropdownMenuContent align="end" variant="field" className="min-w-56">
+        {items.map((item) => (
+          <DropdownMenuItem
+            key={item.id}
+            onSelect={(event: Event) => {
+              event.preventDefault();
+              item.onClick();
+              setOpen(false);
+            }}
+            disabled={item.disabled}
+            className={classNames('gap-2', item.isActive && 'text-text-link')}
+          >
+            {React.cloneElement(item.icon, { className: 'shrink-0' })}
+            <span>{item.label}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const TOOLBAR_BUTTON_WIDTH = 32;
+
 function RichTextToolbarComponent(
   {
     editor,
@@ -98,13 +179,11 @@ function RichTextToolbarComponent(
 
   const openLinkModal = useCallback(() => {
     if (editor.isActive('link')) {
-      // Get current link attributes for editing
       const attrs = editor.getAttributes('link');
       const { $from } = editor.state.selection;
       const linkMark = editor.schema.marks.link;
       const range = getMarkRange($from, linkMark);
 
-      // Get full link text from mark range
       let linkText = '';
       if (range) {
         linkText = editor.state.doc.textBetween(range.from, range.to, '');
@@ -114,7 +193,6 @@ function RichTextToolbarComponent(
       setInitialLabel(linkText);
       setIsLinkModalOpen(true);
     } else {
-      // Get selected text as initial label
       const { from, to } = editor.state.selection;
       const selectedText = editor.state.doc.textBetween(from, to, '');
       setInitialUrl('');
@@ -129,7 +207,6 @@ function RichTextToolbarComponent(
 
   const handleLinkSubmit = useCallback(
     (url: string, label?: string) => {
-      // If editing existing link, remove it first
       if (editor.isActive('link')) {
         editor.chain().focus().unsetLink().run();
       }
@@ -156,80 +233,260 @@ function RichTextToolbarComponent(
     }),
   });
 
+  const formattingItems = useMemo<ToolbarItem[]>(() => {
+    const items: ToolbarItem[] = [];
+
+    if (!hideInlineLink) {
+      items.push({
+        id: 'link',
+        priority: 1,
+        group: 'link',
+        label: editorState.isLink ? 'Edit link' : 'Add link',
+        tooltip: editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)',
+        icon: <LinkIcon />,
+        isActive: editorState.isLink,
+        onClick: openLinkModal,
+      });
+    }
+
+    items.push(
+      {
+        id: 'bold',
+        priority: 0,
+        group: 'format',
+        label: 'Bold',
+        tooltip: 'Bold (⌘B)',
+        icon: <BoldIcon />,
+        isActive: editorState.isBold,
+        onClick: () => editor.chain().focus().toggleBold().run(),
+      },
+      {
+        id: 'italic',
+        priority: 0,
+        group: 'format',
+        label: 'Italic',
+        tooltip: 'Italic (⌘I)',
+        icon: <ItalicIcon />,
+        isActive: editorState.isItalic,
+        onClick: () => editor.chain().focus().toggleItalic().run(),
+      },
+    );
+
+    if (allowBlockFormatting) {
+      items.push(
+        {
+          id: 'bullet-list',
+          priority: 4,
+          group: 'list',
+          label: 'Bullet list',
+          tooltip: 'Bullet list (⌘⇧8)',
+          icon: <BulletListIcon />,
+          isActive: editorState.isBulletList,
+          onClick: () => editor.chain().focus().toggleBulletList().run(),
+        },
+        {
+          id: 'numbered-list',
+          priority: 4,
+          group: 'list',
+          label: 'Numbered list',
+          tooltip: 'Numbered list (⌘⇧7)',
+          icon: <NumberedListIcon />,
+          isActive: editorState.isOrderedList,
+          onClick: () => editor.chain().focus().toggleOrderedList().run(),
+        },
+      );
+    }
+
+    items.push(
+      {
+        id: 'undo',
+        priority: 5,
+        group: 'history',
+        label: 'Undo',
+        tooltip: 'Undo (⌘Z)',
+        icon: <UndoIcon />,
+        isActive: false,
+        onClick: () => editor.chain().focus().undo().run(),
+        disabled: !editorState.canUndo,
+      },
+      {
+        id: 'redo',
+        priority: 5,
+        group: 'history',
+        label: 'Redo',
+        tooltip: 'Redo (⌘⇧Z)',
+        icon: <RedoIcon />,
+        isActive: false,
+        onClick: () => editor.chain().focus().redo().run(),
+        disabled: !editorState.canRedo,
+      },
+    );
+
+    return items;
+  }, [
+    allowBlockFormatting,
+    editor,
+    editorState,
+    hideInlineLink,
+    openLinkModal,
+  ]);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inlineActionsRef = useRef<HTMLDivElement>(null);
+  const rightActionsRef = useRef<HTMLDivElement>(null);
+  const leadingActionsRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [reservedWidth, setReservedWidth] = useState(0);
+
+  const isOverflowable = position === 'bottom';
+
+  useLayoutEffect(() => {
+    if (!isOverflowable) {
+      return undefined;
+    }
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      setContainerWidth(entry.contentRect.width);
+    });
+    observer.observe(el);
+    setContainerWidth(el.getBoundingClientRect().width);
+    return () => observer.disconnect();
+  }, [isOverflowable]);
+
+  useEffect(() => {
+    if (!isOverflowable) {
+      return;
+    }
+    const leadingWidth =
+      leadingActionsRef.current?.getBoundingClientRect().width ?? 0;
+    const inlineWidth =
+      inlineActionsRef.current?.getBoundingClientRect().width ?? 0;
+    const rightWidth =
+      rightActionsRef.current?.getBoundingClientRect().width ?? 0;
+    setReservedWidth(
+      leadingWidth + inlineWidth + rightWidth + TOOLBAR_BUTTON_WIDTH,
+    );
+  }, [
+    isOverflowable,
+    rightActions,
+    inlineActions,
+    leadingActions,
+    containerWidth,
+  ]);
+
+  const visibleCount = useMemo(() => {
+    if (!isOverflowable || containerWidth === 0) {
+      return formattingItems.length;
+    }
+    const available = Math.max(0, containerWidth - reservedWidth);
+    const fits = Math.floor(available / TOOLBAR_BUTTON_WIDTH);
+    return Math.min(formattingItems.length, Math.max(0, fits));
+  }, [containerWidth, reservedWidth, formattingItems.length, isOverflowable]);
+
+  const sortedByPriority = useMemo(
+    () => [...formattingItems].sort((a, b) => a.priority - b.priority),
+    [formattingItems],
+  );
+
+  const visibleIds = useMemo(
+    () => new Set(sortedByPriority.slice(0, visibleCount).map((i) => i.id)),
+    [sortedByPriority, visibleCount],
+  );
+
+  const visibleItems = useMemo(
+    () => formattingItems.filter((item) => visibleIds.has(item.id)),
+    [formattingItems, visibleIds],
+  );
+
+  const overflowItems = useMemo(
+    () => formattingItems.filter((item) => !visibleIds.has(item.id)),
+    [formattingItems, visibleIds],
+  );
+
+  const renderedFormattingItems = (() => {
+    const nodes: ReactElement[] = [];
+    let lastGroup: string | undefined;
+    visibleItems.forEach((item) => {
+      if (lastGroup !== undefined && item.group !== lastGroup) {
+        nodes.push(<ToolbarDivider key={`divider-${lastGroup}-${item.id}`} />);
+      }
+      const button = (
+        <ToolbarButton
+          key={item.id}
+          tooltip={item.tooltip}
+          icon={item.icon}
+          isActive={item.isActive}
+          onClick={item.onClick}
+          disabled={item.disabled}
+          alwaysVisible={item.group === 'history'}
+        />
+      );
+      if (button) {
+        nodes.push(button);
+      }
+      lastGroup = item.group;
+    });
+    return nodes;
+  })();
+
   return (
     <>
       <div
+        ref={containerRef}
         className={classNames(
-          'flex flex-row flex-wrap items-center gap-1 px-2 py-1',
-          position === 'top' && 'border-b border-border-subtlest-tertiary',
+          'flex flex-row items-center gap-1 px-2 py-1',
+          position === 'top' &&
+            'flex-wrap border-b border-border-subtlest-tertiary',
+          position === 'bottom' && 'flex-nowrap',
           className,
         )}
       >
-        <div className="flex flex-1 flex-wrap items-center gap-0">
+        <div
+          className={classNames(
+            'flex flex-1 items-center gap-0',
+            position === 'top' && 'flex-wrap',
+            position === 'bottom' && 'flex-nowrap overflow-hidden',
+          )}
+        >
           {leadingActions && (
-            <div className="mr-2 flex items-center gap-1">{leadingActions}</div>
+            <>
+              <div
+                ref={leadingActionsRef}
+                className="flex shrink-0 items-center gap-1"
+              >
+                {leadingActions}
+              </div>
+              <ToolbarDivider />
+            </>
           )}
           {inlineActions && (
-            <div className="flex items-center gap-1">{inlineActions}</div>
-          )}
-          {!hideInlineLink && (
-            <ToolbarButton
-              tooltip={editorState.isLink ? 'Edit link (⌘K)' : 'Add link (⌘K)'}
-              icon={<LinkIcon />}
-              isActive={editorState.isLink}
-              onClick={openLinkModal}
-            />
-          )}
-          <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-          <ToolbarButton
-            tooltip="Bold (⌘B)"
-            icon={<BoldIcon />}
-            isActive={editorState.isBold}
-            onClick={() => editor.chain().focus().toggleBold().run()}
-          />
-          <ToolbarButton
-            tooltip="Italic (⌘I)"
-            icon={<ItalicIcon />}
-            isActive={editorState.isItalic}
-            onClick={() => editor.chain().focus().toggleItalic().run()}
-          />
-          {allowBlockFormatting && (
             <>
-              <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-              <ToolbarButton
-                tooltip="Bullet list (⌘⇧8)"
-                icon={<BulletListIcon />}
-                isActive={editorState.isBulletList}
-                onClick={() => editor.chain().focus().toggleBulletList().run()}
-              />
-              <ToolbarButton
-                tooltip="Numbered list (⌘⇧7)"
-                icon={<NumberedListIcon />}
-                isActive={editorState.isOrderedList}
-                onClick={() => editor.chain().focus().toggleOrderedList().run()}
-              />
+              <div
+                ref={inlineActionsRef}
+                className="flex shrink-0 items-center gap-1"
+              >
+                {inlineActions}
+              </div>
+              {visibleItems.length > 0 && <ToolbarDivider />}
             </>
           )}
-          <div className="mx-1 h-4 w-px bg-border-subtlest-tertiary" />
-          <ToolbarButton
-            tooltip="Undo (⌘Z)"
-            icon={<UndoIcon />}
-            isActive={false}
-            onClick={() => editor.chain().focus().undo().run()}
-            disabled={!editorState.canUndo}
-            alwaysVisible
-          />
-          <ToolbarButton
-            tooltip="Redo (⌘⇧Z)"
-            icon={<RedoIcon />}
-            isActive={false}
-            onClick={() => editor.chain().focus().redo().run()}
-            disabled={!editorState.canRedo}
-            alwaysVisible
-          />
+          {renderedFormattingItems}
+          {isOverflowable && <OverflowMenu items={overflowItems} />}
         </div>
         {rightActions && (
-          <div className="flex shrink-0 items-center gap-0">{rightActions}</div>
+          <div
+            ref={rightActionsRef}
+            className="flex shrink-0 items-center gap-0"
+          >
+            {rightActions}
+          </div>
         )}
       </div>
       <LinkModal
diff --git a/packages/shared/src/components/fields/RichTextInput.tsx b/packages/shared/src/components/fields/RichTextInput.tsx
index 5d45be20665..68c3d79e101 100644
--- a/packages/shared/src/components/fields/RichTextInput.tsx
+++ b/packages/shared/src/components/fields/RichTextInput.tsx
@@ -11,6 +11,7 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -432,9 +433,13 @@ function RichTextInput(
 
         if (isSpecialKey && event.key === 'Enter' && inputRef.current?.length) {
           event.preventDefault();
-          onSubmit?.({
-            currentTarget: { value: inputRef.current },
-          } as React.FormEvent<HTMLTextAreaElement>);
+          if (onSubmit) {
+            onSubmit({
+              currentTarget: { value: inputRef.current },
+            } as React.FormEvent<HTMLTextAreaElement>);
+          } else {
+            editorContainerRef.current?.closest('form')?.requestSubmit();
+          }
           return true;
         }
 
@@ -537,6 +542,34 @@ function RichTextInput(
     onMarkdownModeChange?.(isMarkdownMode);
   }, [isMarkdownMode, onMarkdownModeChange]);
 
+  const didInitMarkdownRef = useRef(false);
+  useEffect(() => {
+    if (!didInitMarkdownRef.current) {
+      didInitMarkdownRef.current = true;
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => {
+      if (isMarkdownMode) {
+        markdownTextareaRef.current?.focus();
+        return;
+      }
+      editorRef.current?.commands.focus();
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [isMarkdownMode]);
+
+  useLayoutEffect(() => {
+    if (!isMarkdownMode) {
+      return;
+    }
+    const ta = markdownTextareaRef.current;
+    if (!ta) {
+      return;
+    }
+    ta.style.height = 'auto';
+    ta.style.height = `${ta.scrollHeight}px`;
+  }, [input, isMarkdownMode]);
+
   const onMarkdownInput = useCallback(
     (event: React.FormEvent<HTMLTextAreaElement>) => {
       const { value } = event.currentTarget;
@@ -553,9 +586,13 @@ function RichTextInput(
       }
 
       event.preventDefault();
-      onSubmit?.({
-        currentTarget: { value: inputRef.current },
-      } as React.FormEvent<HTMLTextAreaElement>);
+      if (onSubmit) {
+        onSubmit({
+          currentTarget: { value: inputRef.current },
+        } as React.FormEvent<HTMLTextAreaElement>);
+        return;
+      }
+      event.currentTarget.form?.requestSubmit();
     },
     [onSubmit],
   );
@@ -670,42 +707,55 @@ function RichTextInput(
 
   const hasToolbarActions =
     isUploadEnabled || isLinkEnabled || isMentionEnabled || isGifEnabled;
+  const preventEditorBlur = (event: React.MouseEvent) => event.preventDefault();
   const toolbarActions = (
     <>
       {isUploadEnabled && (
-        <Button
-          size={headerActionSize}
-          variant={ButtonVariant.Tertiary}
-          icon={actionIcon}
-          onClick={() => {
-            upload.uploadRef?.current?.click();
-          }}
-          type="button"
-        />
+        <SimpleTooltip content="Add image">
+          <Button
+            size={headerActionSize}
+            variant={ButtonVariant.Tertiary}
+            icon={actionIcon}
+            onClick={() => {
+              upload.uploadRef?.current?.click();
+            }}
+            onMouseDown={preventEditorBlur}
+            type="button"
+            aria-label="Add image"
+          />
+        </SimpleTooltip>
       )}
       {isLinkEnabled && (
-        <Button
-          variant={ButtonVariant.Tertiary}
-          size={headerActionSize}
-          icon={<LinkIcon />}
-          onClick={() => toolbarRef.current?.openLinkModal()}
-          type="button"
-        />
+        <SimpleTooltip content="Add link">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={headerActionSize}
+            icon={<LinkIcon />}
+            onClick={() => toolbarRef.current?.openLinkModal()}
+            onMouseDown={preventEditorBlur}
+            type="button"
+            aria-label="Add link"
+          />
+        </SimpleTooltip>
       )}
       {isMentionEnabled && (
-        <Button
-          variant={ButtonVariant.Tertiary}
-          size={headerActionSize}
-          icon={<AtIcon />}
-          onClick={() => {
-            if (!editor) {
-              return;
-            }
-            editor.chain().focus().insertContent('@').run();
-            updateSuggestionsFromEditor(editor);
-          }}
-          type="button"
-        />
+        <SimpleTooltip content="Mention someone">
+          <Button
+            variant={ButtonVariant.Tertiary}
+            size={headerActionSize}
+            icon={<AtIcon />}
+            onClick={() => {
+              if (!editor) {
+                return;
+              }
+              editor.chain().focus().insertContent('@').run();
+              updateSuggestionsFromEditor(editor);
+            }}
+            onMouseDown={preventEditorBlur}
+            type="button"
+            aria-label="Mention someone"
+          />
+        </SimpleTooltip>
       )}
       {isGifEnabled && (
         <GifPopover
@@ -767,7 +817,7 @@ function RichTextInput(
         )}
       >
         <div
-          className="flex flex-1 flex-col"
+          className="flex min-h-0 flex-1 flex-col"
           ref={editorContainerRef}
           onDrop={isMarkdownMode ? undefined : upload.handleDrop}
           onDragOver={
@@ -799,20 +849,30 @@ function RichTextInput(
                   </div>
                 </div>
               )}
-              <textarea
-                {...textareaProps}
-                name={undefined}
-                ref={markdownTextareaRef}
-                value={input}
-                className={classNames(
-                  minHeightClassName,
-                  'flex-1 bg-transparent p-4 font-mono outline-none',
-                  className?.input,
+              <ConditionalWrapper
+                condition={toolbarPosition === 'bottom'}
+                wrapper={(component) => (
+                  <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+                    {component}
+                  </div>
                 )}
-                onInput={onMarkdownInput}
-                onPaste={onMarkdownPaste}
-                onKeyDown={onMarkdownKeyDown}
-              />
+              >
+                <textarea
+                  {...textareaProps}
+                  name={undefined}
+                  ref={markdownTextareaRef}
+                  value={input}
+                  className={classNames(
+                    minHeightClassName,
+                    'flex-1 resize-none bg-transparent p-4 font-mono outline-none',
+                    toolbarPosition === 'bottom' && 'overflow-hidden',
+                    className?.input,
+                  )}
+                  onInput={onMarkdownInput}
+                  onPaste={onMarkdownPaste}
+                  onKeyDown={onMarkdownKeyDown}
+                />
+              </ConditionalWrapper>
             </>
           ) : (
             (() => {
@@ -866,7 +926,7 @@ function RichTextInput(
                   position={toolbarPosition}
                   className={
                     toolbarPosition === 'bottom'
-                      ? '!gap-3 !px-5 !pb-4 !pt-3'
+                      ? '!gap-3 !px-5 !pb-5 !pt-4'
                       : undefined
                   }
                   leadingActions={toolbarLeading}
@@ -875,6 +935,29 @@ function RichTextInput(
                   rightActions={rightActionsNode}
                 />
               );
+              const editorBody = (
+                <div className="flex w-full flex-1 flex-row">
+                  {showUserAvatar && user && (
+                    <ProfilePicture
+                      size={ProfileImageSize.Large}
+                      className={classNames('ml-3 mt-3', className?.profile)}
+                      user={user}
+                      nativeLazyLoading
+                      fetchPriority="low"
+                    />
+                  )}
+                  <EditorContent
+                    editor={editor}
+                    className={classNames(
+                      styles.editor,
+                      minHeightClassName,
+                      'min-w-0 flex-1 p-4',
+                      showUserAvatar && user && 'ml-3 tablet:ml-0',
+                      className?.input,
+                    )}
+                  />
+                </div>
+              );
               return (
                 <>
                   {toolbarPosition === 'top' && toolbarNode}
@@ -888,27 +971,13 @@ function RichTextInput(
                       onInput={upload.onUpload}
                     />
                   )}
-                  <div className="flex w-full flex-1 flex-row">
-                    {showUserAvatar && user && (
-                      <ProfilePicture
-                        size={ProfileImageSize.Large}
-                        className={classNames('ml-3 mt-3', className?.profile)}
-                        user={user}
-                        nativeLazyLoading
-                        fetchPriority="low"
-                      />
-                    )}
-                    <EditorContent
-                      editor={editor}
-                      className={classNames(
-                        styles.editor,
-                        minHeightClassName,
-                        'min-w-0 flex-1 p-4',
-                        showUserAvatar && user && 'ml-3 tablet:ml-0',
-                        className?.input,
-                      )}
-                    />
-                  </div>
+                  {toolbarPosition === 'bottom' ? (
+                    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+                      {editorBody}
+                    </div>
+                  ) : (
+                    editorBody
+                  )}
                   {toolbarPosition === 'bottom' && toolbarNode}
                 </>
               );
diff --git a/packages/shared/src/components/modals/post/SmartComposerModal.tsx b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
index 83b78ab2b28..a6bb954e49b 100644
--- a/packages/shared/src/components/modals/post/SmartComposerModal.tsx
+++ b/packages/shared/src/components/modals/post/SmartComposerModal.tsx
@@ -1,10 +1,16 @@
 import type { ReactElement } from 'react';
-import React, { useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import type { LazyModalCommonProps } from '../common/Modal';
 import { Modal } from '../common/Modal';
 import { ModalKind, ModalSize } from '../common/types';
-import { Button, ButtonVariant } from '../../buttons/Button';
+import { Button, ButtonColor, ButtonVariant } from '../../buttons/Button';
 import CloseButton from '../../CloseButton';
 import { ButtonSize } from '../../buttons/common';
 import { ProfileImageSize, ProfilePicture } from '../../ProfilePicture';
@@ -16,8 +22,13 @@ import {
 } from '../../icons';
 import { IconSize } from '../../Icon';
 import { Tooltip } from '../../tooltip/Tooltip';
+import { Drawer, DrawerPosition } from '../../drawers/Drawer';
 import { labels } from '../../../lib/labels';
 import { useAuthContext } from '../../../contexts/AuthContext';
+import { useLogContext } from '../../../contexts/LogContext';
+import { LogEvent } from '../../../lib/log';
+import { useViewSize, ViewSize } from '../../../hooks';
+import { usePrompt } from '../../../hooks/usePrompt';
 import type { ExternalLinkPreview } from '../../../graphql/posts';
 import { AudienceChip } from '../../post/composer/AudienceChip';
 import { KindModePicker } from '../../post/composer/KindModePicker';
@@ -57,6 +68,9 @@ export function SmartComposerModal({
   ...props
 }: SmartComposerModalProps): ReactElement {
   const { user } = useAuthContext();
+  const { logEvent } = useLogContext();
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const { showPrompt } = usePrompt();
   const [kind, setKind] = useState<ComposerKind>(initialUrl ? 'link' : 'text');
   const [text, setText] = useState<TextFormState>(DEFAULT_TEXT);
   const [link, setLink] = useState<LinkFormState>({
@@ -69,6 +83,115 @@ export function SmartComposerModal({
   const [isMarkdownMode, setIsMarkdownMode] = useState(false);
   const textFormRef = useRef<TextFormHandle>(null);
 
+  const isDirty = useMemo(() => {
+    if (cover) {
+      return true;
+    }
+    if (text.title.trim() || text.body.trim()) {
+      return true;
+    }
+    if (link.url.trim() || link.commentary.trim()) {
+      return true;
+    }
+    if (poll.question.trim() || poll.options.some((option) => option.trim())) {
+      return true;
+    }
+    return false;
+  }, [cover, text, link, poll]);
+
+  const handleClose = useCallback(
+    async (event?: React.MouseEvent | React.KeyboardEvent) => {
+      const closeAndLog = () => {
+        logEvent({
+          event_name: LogEvent.CloseSmartComposer,
+          extra: JSON.stringify({ kind, isDirty }),
+        });
+        onRequestClose?.(event);
+      };
+      if (!isDirty) {
+        closeAndLog();
+        return;
+      }
+      const confirmed = await showPrompt({
+        title: 'Discard draft?',
+        description:
+          'You have unsaved changes. Are you sure you want to discard them?',
+        okButton: {
+          title: 'Discard',
+          variant: ButtonVariant.Primary,
+          color: ButtonColor.Ketchup,
+        },
+        cancelButton: { title: 'Keep editing' },
+      });
+      if (confirmed) {
+        closeAndLog();
+      }
+    },
+    [isDirty, kind, logEvent, onRequestClose, showPrompt],
+  );
+
+  useEffect(() => {
+    logEvent({
+      event_name: LogEvent.OpenSmartComposer,
+      extra: JSON.stringify({ kind, hasInitialUrl: !!initialUrl }),
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onKindChange = useCallback(
+    (next: ComposerKind) => {
+      setKind((prev) => {
+        if (prev !== next) {
+          logEvent({
+            event_name: LogEvent.SwitchComposerKind,
+            extra: JSON.stringify({ from: prev, to: next }),
+          });
+        }
+        return next;
+      });
+    },
+    [logEvent],
+  );
+
+  const onCoverChange = useCallback(
+    (next: TextFormCover | null) => {
+      setCover((prev) => {
+        if (next && !prev) {
+          logEvent({ event_name: LogEvent.AddComposerCover });
+        } else if (!next && prev) {
+          logEvent({ event_name: LogEvent.RemoveComposerCover });
+        }
+        return next;
+      });
+    },
+    [logEvent],
+  );
+
+  const onToggleExpand = useCallback(() => {
+    setIsExpanded((prev) => {
+      logEvent({
+        event_name: LogEvent.ToggleComposerExpand,
+        extra: JSON.stringify({ expanded: !prev }),
+      });
+      return !prev;
+    });
+  }, [logEvent]);
+
+  const onMarkdownModeChange = useCallback(
+    (next: boolean) => {
+      setIsMarkdownMode((prev) => {
+        if (prev !== next) {
+          logEvent({
+            event_name: LogEvent.ToggleComposerMarkdown,
+            extra: JSON.stringify({ markdown: next }),
+          });
+        }
+        return next;
+      });
+    },
+    [logEvent],
+  );
+
   const { audiences, selectedIds, selected, setSelectedIds, userAudienceId } =
     useComposerAudience(initialSquadHandle);
   const primary = selected[0];
@@ -99,155 +222,195 @@ export function SmartComposerModal({
   const submitLabel = kind === 'poll' ? 'Post poll' : 'Post';
 
   const kindPickerNode = (
-    <KindModePicker value={kind} onChange={setKind} disabled={isInFlight} />
+    <KindModePicker
+      value={kind}
+      onChange={onKindChange}
+      disabled={isInFlight}
+    />
   );
 
+  const onFormSubmit = useCallback(
+    (event: React.FormEvent<HTMLFormElement>) => {
+      logEvent({
+        event_name: LogEvent.SubmitSmartComposer,
+        extra: JSON.stringify({ kind, audiences: selectedIds.length }),
+      });
+      return handleSubmit(event);
+    },
+    [handleSubmit, kind, logEvent, selectedIds.length],
+  );
+
+  const isCoverUploading = !!cover?.isUploading;
   const postButtonNode = (
     <Button
       form="smart_composer"
       type="submit"
       variant={ButtonVariant.Primary}
       size={ButtonSize.Small}
-      disabled={isSubmitDisabled}
-      loading={isInFlight}
-      className="px-5"
+      disabled={isSubmitDisabled || isCoverUploading}
+      loading={isInFlight || isCoverUploading}
+      className="ml-2 px-5"
     >
       {submitLabel}
     </Button>
   );
 
-  return (
-    <Modal
-      kind={ModalKind.FlexibleTop}
-      size={isExpanded ? ModalSize.XLarge : ModalSize.Medium}
-      onRequestClose={onRequestClose}
-      overlayClassName={isExpanded ? '!pt-0' : 'tablet:!pt-16 laptop:!pt-12'}
+  const formContent = (
+    <form
+      id="smart_composer"
+      onSubmit={onFormSubmit}
       className={classNames(
-        'flex flex-col',
-        isExpanded
-          ? '!mb-0 !mt-0 !h-[100vh] !max-h-[100vh] !w-[100vw] !max-w-[100vw] !rounded-none'
-          : '!min-h-[30.5rem] !max-w-[48.75rem] tablet:!max-h-[calc(100vh-7rem)] tablet:w-[48.75rem] laptop:!max-h-[calc(100vh-6rem)]',
+        'flex h-full min-h-0 w-full flex-col',
+        isExpanded && 'mx-auto max-w-[58rem]',
       )}
-      {...props}
     >
-      <form
-        id="smart_composer"
-        onSubmit={handleSubmit}
-        className="flex h-full min-h-0 w-full flex-col"
-      >
-        <div className="flex shrink-0 items-start justify-between gap-2 px-5 pb-2 pt-5">
-          <div className="flex min-w-0 flex-1 items-center gap-2">
-            {user && (
-              <ProfilePicture
-                user={user}
-                size={ProfileImageSize.Medium}
-                nativeLazyLoading
-              />
-            )}
-            <AudienceChip
-              audiences={audiences}
-              selectedIds={selectedIds}
-              onChange={setSelectedIds}
-              userAudienceId={userAudienceId}
-              disabled={isInFlight}
+      <div className="flex shrink-0 items-start justify-between gap-2 px-5 pb-2 pt-5">
+        <div className="flex min-w-0 flex-1 items-center gap-2">
+          {user && (
+            <ProfilePicture
+              user={user}
+              size={ProfileImageSize.Medium}
+              nativeLazyLoading
             />
-          </div>
-          <div className="flex shrink-0 items-center gap-1">
-            {kind === 'text' && (
-              <Tooltip
-                content={
-                  isMarkdownMode ? 'Switch to rich text' : 'Switch to Markdown'
-                }
-              >
-                <Button
-                  type="button"
-                  size={ButtonSize.Small}
-                  variant={ButtonVariant.Tertiary}
-                  icon={<MarkdownIcon secondary={isMarkdownMode} />}
-                  pressed={isMarkdownMode}
-                  onClick={() => textFormRef.current?.toggleMarkdownMode()}
-                  aria-label={
-                    isMarkdownMode
-                      ? 'Switch to rich text'
-                      : 'Switch to Markdown'
-                  }
-                  aria-pressed={isMarkdownMode}
-                />
-              </Tooltip>
-            )}
+          )}
+          <AudienceChip
+            audiences={audiences}
+            selectedIds={selectedIds}
+            onChange={setSelectedIds}
+            userAudienceId={userAudienceId}
+            disabled={isInFlight}
+          />
+        </div>
+        <div className="flex shrink-0 items-center gap-1">
+          {kind === 'text' && (
             <Tooltip
-              content={isExpanded ? 'Collapse composer' : 'Expand composer'}
+              content={
+                isMarkdownMode ? 'Switch to rich text' : 'Switch to Markdown'
+              }
             >
               <Button
                 type="button"
                 size={ButtonSize.Small}
                 variant={ButtonVariant.Tertiary}
-                icon={
-                  isExpanded ? (
-                    <MinimizeIcon size={IconSize.Size16} />
-                  ) : (
-                    <MaximizeIcon size={IconSize.Size16} />
-                  )
-                }
-                onClick={() => setIsExpanded((prev) => !prev)}
+                icon={<MarkdownIcon secondary={isMarkdownMode} />}
+                pressed={isMarkdownMode}
+                onClick={() => textFormRef.current?.toggleMarkdownMode()}
                 aria-label={
-                  isExpanded ? 'Collapse composer' : 'Expand composer'
+                  isMarkdownMode ? 'Switch to rich text' : 'Switch to Markdown'
                 }
-                aria-pressed={isExpanded}
+                aria-pressed={isMarkdownMode}
               />
             </Tooltip>
-            <CloseButton
+          )}
+          <Tooltip
+            content={isExpanded ? 'Collapse composer' : 'Expand composer'}
+          >
+            <Button
               type="button"
               size={ButtonSize.Small}
-              onClick={(event) => onRequestClose?.(event)}
-              aria-label="Close composer"
+              variant={ButtonVariant.Tertiary}
+              icon={
+                isExpanded ? (
+                  <MinimizeIcon size={IconSize.Size16} />
+                ) : (
+                  <MaximizeIcon size={IconSize.Size16} />
+                )
+              }
+              onClick={onToggleExpand}
+              aria-label={isExpanded ? 'Collapse composer' : 'Expand composer'}
+              aria-pressed={isExpanded}
             />
-          </div>
+          </Tooltip>
+          <CloseButton
+            type="button"
+            size={ButtonSize.Small}
+            onClick={(event) => {
+              handleClose(event);
+            }}
+            aria-label="Close composer"
+          />
         </div>
-        {showSpamWarning && (
-          <div className="flex w-full shrink-0 items-center gap-2 bg-overlay-tertiary-bun px-5 py-1.5 text-text-secondary typo-caption2">
-            <InfoIcon
-              size={IconSize.Size16}
-              secondary
-              className="shrink-0 text-status-warning"
-            />
-            <span>{labels.postCreation.warnings.spammyPosts}</span>
-          </div>
-        )}
-        {kind === 'text' && (
-          <TextForm
-            ref={textFormRef}
-            value={text}
-            onChange={setText}
-            sourceId={primary?.id}
-            cover={cover}
-            onCoverChange={setCover}
-            toolbarLeading={kindPickerNode}
-            toolbarRightActions={postButtonNode}
-            onMarkdownModeChange={setIsMarkdownMode}
+      </div>
+      {showSpamWarning && (
+        <div className="bg-status-warning/10 flex w-full shrink-0 items-center gap-2 px-5 py-1.5 text-text-secondary typo-caption2">
+          <InfoIcon
+            size={IconSize.Size16}
+            secondary
+            className="shrink-0 text-status-warning"
           />
-        )}
-        {kind !== 'text' && (
-          <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-5 pb-3 pt-2">
-            {kind === 'link' && (
-              <LinkForm
-                value={link}
-                onChange={setLink}
-                preview={preview}
-                isLoadingPreview={isLoadingPreview}
-                fetchPreview={fetchPreview}
-              />
-            )}
-            {kind === 'poll' && <PollForm value={poll} onChange={setPoll} />}
-          </div>
-        )}
-        {(kind !== 'text' || isMarkdownMode) && (
-          <div className="flex shrink-0 items-center justify-between gap-3 px-5 pb-4 pt-3">
-            {kindPickerNode}
-            {postButtonNode}
-          </div>
-        )}
-      </form>
+          <span>{labels.postCreation.warnings.spammyPosts}</span>
+        </div>
+      )}
+      {kind === 'text' && (
+        <TextForm
+          ref={textFormRef}
+          value={text}
+          onChange={setText}
+          sourceId={primary?.id}
+          cover={cover}
+          onCoverChange={onCoverChange}
+          toolbarLeading={kindPickerNode}
+          toolbarRightActions={postButtonNode}
+          onMarkdownModeChange={onMarkdownModeChange}
+        />
+      )}
+      {kind !== 'text' && (
+        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-5 pb-3 pt-2">
+          {kind === 'link' && (
+            <LinkForm
+              value={link}
+              onChange={setLink}
+              preview={preview}
+              isLoadingPreview={isLoadingPreview}
+              fetchPreview={fetchPreview}
+              onDismissPreview={() =>
+                logEvent({ event_name: LogEvent.DismissComposerPreview })
+              }
+            />
+          )}
+          {kind === 'poll' && <PollForm value={poll} onChange={setPoll} />}
+        </div>
+      )}
+      {(kind !== 'text' || isMarkdownMode) && (
+        <div className="flex shrink-0 items-center justify-between gap-3 px-5 pb-5 pt-4">
+          {kindPickerNode}
+          {postButtonNode}
+        </div>
+      )}
+    </form>
+  );
+
+  if (!isLaptop) {
+    return (
+      <Drawer
+        isOpen
+        isFullScreen
+        position={DrawerPosition.Bottom}
+        onClose={() => {
+          handleClose();
+        }}
+        className={{ wrapper: 'flex flex-col p-0' }}
+      >
+        {formContent}
+      </Drawer>
+    );
+  }
+
+  return (
+    <Modal
+      kind={ModalKind.FlexibleTop}
+      size={isExpanded ? ModalSize.XLarge : ModalSize.Medium}
+      onRequestClose={handleClose}
+      overlayClassName={isExpanded ? '!pt-0' : 'tablet:!pt-16 laptop:!pt-12'}
+      className={classNames(
+        'flex flex-col',
+        isExpanded
+          ? '!mb-0 !mt-0 !h-[100vh] !max-h-[100vh] !w-[100vw] !max-w-[100vw] !rounded-none'
+          : '!min-h-[30.5rem] !max-w-[48.75rem] tablet:!max-h-[calc(100vh-7rem)] tablet:w-[48.75rem] laptop:!max-h-[calc(100vh-6rem)]',
+      )}
+      {...props}
+    >
+      {formContent}
     </Modal>
   );
 }
diff --git a/packages/shared/src/components/post/composer/AudienceChip.tsx b/packages/shared/src/components/post/composer/AudienceChip.tsx
index 2902e7cc1ad..8afc119cf37 100644
--- a/packages/shared/src/components/post/composer/AudienceChip.tsx
+++ b/packages/shared/src/components/post/composer/AudienceChip.tsx
@@ -64,13 +64,23 @@ export const AudienceChip = ({
   }
 
   const isMulti = selected.length > 1;
-  const showChevron = !disabled;
+  const canPickAudience = audiences.length > 1;
+  const showChevron = !disabled && canPickAudience;
   const triggerLabel = (() => {
     if (isMulti) {
       return `${selected.length} audiences`;
     }
     return isUserAudience(primary) ? 'Everyone' : primary.name;
   })();
+  const buildAriaLabel = (): string => {
+    if (!canPickAudience) {
+      return `Posting to ${triggerLabel}`;
+    }
+    if (isMulti) {
+      return `Posting to ${selected.length} audiences. Open audience menu.`;
+    }
+    return `Posting to ${triggerLabel}. Open audience menu.`;
+  };
   const showSinglePrimaryAvatar = !isMulti && !isUserAudience(primary);
 
   const isEveryoneSelected =
@@ -135,19 +145,15 @@ export const AudienceChip = ({
       <DropdownMenuTrigger asChild>
         <button
           type="button"
-          disabled={disabled}
-          aria-haspopup="menu"
-          aria-expanded={open}
-          aria-label={
-            isMulti
-              ? `Posting to ${selected.length} audiences. Open audience menu.`
-              : `Posting to ${triggerLabel}. Open audience menu.`
-          }
+          disabled={disabled || !canPickAudience}
+          aria-haspopup={canPickAudience ? 'menu' : undefined}
+          aria-expanded={canPickAudience ? open : undefined}
+          aria-label={buildAriaLabel()}
           className={classNames(
             'flex max-w-full shrink-0 items-center gap-1.5 rounded-12 px-2.5 py-1 text-text-primary transition-colors typo-callout',
-            !disabled && 'hover:bg-surface-float',
-            disabled && 'cursor-default',
-            open && !disabled && 'bg-surface-float',
+            showChevron && 'hover:bg-surface-float',
+            !showChevron && 'cursor-default',
+            open && showChevron && 'bg-surface-float',
           )}
         >
           {isMulti ? (
diff --git a/packages/shared/src/components/post/composer/KindModePicker.tsx b/packages/shared/src/components/post/composer/KindModePicker.tsx
index 9efa4dba093..9400ac3a593 100644
--- a/packages/shared/src/components/post/composer/KindModePicker.tsx
+++ b/packages/shared/src/components/post/composer/KindModePicker.tsx
@@ -18,8 +18,8 @@ interface KindOption {
 }
 
 const KIND_OPTIONS: KindOption[] = [
-  { kind: 'text', label: 'Text', icon: <EditIcon /> },
-  { kind: 'link', label: 'Link', icon: <LinkIcon /> },
+  { kind: 'text', label: 'Free form', icon: <EditIcon /> },
+  { kind: 'link', label: 'Share a link', icon: <LinkIcon /> },
   { kind: 'poll', label: 'Poll', icon: <PollIcon /> },
 ];
 
@@ -48,22 +48,22 @@ export const KindModePicker = ({
           disabled={disabled}
           aria-haspopup="menu"
           aria-expanded={open}
-          aria-label={`${active.label} mode — change post type`}
+          aria-label={`${active.label} — change post type`}
           className={classNames(
-            'inline-flex h-8 shrink-0 items-center gap-1.5 rounded-8 border border-border-subtlest-tertiary px-2 text-text-primary transition-colors',
-            'hover:border-border-subtlest-secondary',
+            'inline-flex h-8 shrink-0 items-center gap-1.5 rounded-8 border border-accent-cabbage-default px-2 text-text-primary transition-colors',
+            'hover:border-accent-cabbage-bolder',
             open ? 'bg-surface-float' : 'bg-transparent hover:bg-surface-float',
             disabled && 'opacity-60 cursor-default',
           )}
         >
           {cloneElement(active.icon, { size: IconSize.Size16 })}
           <span className="whitespace-nowrap typo-caption1">
-            {active.label} mode
+            {active.label}
           </span>
           <ArrowIcon
             size={IconSize.Size16}
             className={classNames(
-              'shrink-0 text-text-tertiary transition-transform',
+              'shrink-0 text-accent-cabbage-default transition-transform',
               open ? 'rotate-180' : 'rotate-0',
             )}
           />
@@ -73,7 +73,7 @@ export const KindModePicker = ({
         align="start"
         side="top"
         variant="action"
-        className="!min-w-36"
+        className="!min-w-48"
       >
         {KIND_OPTIONS.map((option) => {
           const isActive = option.kind === value;
diff --git a/packages/shared/src/components/post/composer/LinkForm.tsx b/packages/shared/src/components/post/composer/LinkForm.tsx
index 770d15350fe..54f604970be 100644
--- a/packages/shared/src/components/post/composer/LinkForm.tsx
+++ b/packages/shared/src/components/post/composer/LinkForm.tsx
@@ -1,8 +1,11 @@
 import type { FormEvent, ReactElement } from 'react';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useDebouncedUrl } from '../../../hooks/input';
 import { WriteLinkPreview } from '../write/WriteLinkPreview';
 import { WritePreviewSkeleton } from '../write/WritePreviewSkeleton';
+import { Button, ButtonSize, ButtonVariant } from '../../buttons/Button';
+import { MiniCloseIcon } from '../../icons';
+import { Tooltip } from '../../tooltip/Tooltip';
 import type { ExternalLinkPreview } from '../../../graphql/posts';
 import { TITLE_MAX_LENGTH, type LinkFormState } from './types';
 import { isPreviewForComposerUrl, normalizeComposerUrl } from './utils';
@@ -13,6 +16,7 @@ interface LinkFormProps {
   preview?: ExternalLinkPreview;
   isLoadingPreview?: boolean;
   fetchPreview: (url?: string) => void;
+  onDismissPreview?: () => void;
 }
 
 export const LinkForm = ({
@@ -21,8 +25,10 @@ export const LinkForm = ({
   preview,
   isLoadingPreview,
   fetchPreview,
+  onDismissPreview,
 }: LinkFormProps): ReactElement => {
   const urlRef = useRef<HTMLInputElement>(null);
+  const [dismissedUrl, setDismissedUrl] = useState<string | null>(null);
 
   useEffect(() => {
     urlRef.current?.focus();
@@ -36,14 +42,28 @@ export const LinkForm = ({
 
   const [checkUrl] = useDebouncedUrl(fetchPreview, hasPreviewForUrl);
 
+  const normalizedUrl = normalizeComposerUrl(value.url);
+  const isDismissedForCurrentUrl =
+    !!dismissedUrl && normalizedUrl === dismissedUrl;
+
   const onUrlChange = (event: FormEvent<HTMLInputElement>) => {
     const next = event.currentTarget.value;
     onChange({ ...value, url: next });
-    checkUrl(normalizeComposerUrl(next));
+    const nextNormalized = normalizeComposerUrl(next);
+    if (dismissedUrl && nextNormalized !== dismissedUrl) {
+      setDismissedUrl(null);
+    }
+    checkUrl(nextNormalized);
   };
 
-  const normalizedUrl = normalizeComposerUrl(value.url);
-  const showPreview = isPreviewForComposerUrl(preview, value.url);
+  const dismissPreview = () => {
+    setDismissedUrl(normalizedUrl || value.url || null);
+    onDismissPreview?.();
+  };
+
+  const showPreview =
+    isPreviewForComposerUrl(preview, value.url) && !isDismissedForCurrentUrl;
+  const showSkeleton = isLoadingPreview && !isDismissedForCurrentUrl;
 
   return (
     <div className="flex flex-1 flex-col gap-3">
@@ -77,19 +97,34 @@ export const LinkForm = ({
         aria-label="Post commentary"
         className="w-full resize-none overflow-hidden break-words bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary"
       />
-      {isLoadingPreview && (
-        <WritePreviewSkeleton
-          link={normalizedUrl || value.url}
-          className="flex-col-reverse"
-        />
-      )}
-      {!isLoadingPreview && preview && showPreview && (
-        <WriteLinkPreview
-          className="!w-auto flex-col-reverse"
-          preview={preview}
-          link={normalizedUrl}
-          showPreviewLink={false}
-        />
+      {(showSkeleton || (preview && showPreview)) && (
+        <div className="relative">
+          {showSkeleton && (
+            <WritePreviewSkeleton
+              link={normalizedUrl || value.url}
+              className="flex-col-reverse"
+            />
+          )}
+          {!showSkeleton && preview && showPreview && (
+            <WriteLinkPreview
+              className="!w-auto flex-col-reverse"
+              preview={preview}
+              link={normalizedUrl}
+              showPreviewLink={false}
+            />
+          )}
+          <Tooltip content="Remove link preview">
+            <Button
+              type="button"
+              size={ButtonSize.Small}
+              variant={ButtonVariant.Primary}
+              icon={<MiniCloseIcon />}
+              onClick={dismissPreview}
+              aria-label="Remove link preview"
+              className="absolute right-3 top-3 z-1 !rounded-full !bg-surface-invert !text-text-primary !shadow-3 hover:!bg-text-primary hover:!text-surface-invert"
+            />
+          </Tooltip>
+        </div>
       )}
     </div>
   );
diff --git a/packages/shared/src/components/post/composer/PollForm.tsx b/packages/shared/src/components/post/composer/PollForm.tsx
index 81730fc4611..099c26f1562 100644
--- a/packages/shared/src/components/post/composer/PollForm.tsx
+++ b/packages/shared/src/components/post/composer/PollForm.tsx
@@ -97,7 +97,7 @@ export const PollForm = ({ value, onChange }: PollFormProps): ReactElement => {
             <div
               // eslint-disable-next-line react/no-array-index-key
               key={index}
-              className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 focus-within:border-border-subtlest-primary"
+              className="flex items-center gap-2 rounded-12 border border-border-subtlest-tertiary bg-surface-float px-3 py-2 transition-colors focus-within:border-border-subtlest-primary"
             >
               <span className="text-text-tertiary typo-callout">
                 {index + 1}.
@@ -111,6 +111,9 @@ export const PollForm = ({ value, onChange }: PollFormProps): ReactElement => {
                 aria-label={`Poll option ${index + 1}`}
                 className="flex-1 bg-transparent text-text-primary outline-none typo-callout placeholder:text-text-quaternary"
               />
+              <span className="text-text-quaternary typo-caption2">
+                {POLL_OPTION_MAX_LENGTH - option.length}
+              </span>
               {canRemove && (
                 <Tooltip content="Remove option">
                   <Button
@@ -149,7 +152,7 @@ export const PollForm = ({ value, onChange }: PollFormProps): ReactElement => {
               type="button"
               size={ButtonSize.Small}
               variant={ButtonVariant.Tertiary}
-              className="!rounded-12 !border !border-border-subtlest-tertiary !px-3 !font-normal !typo-callout"
+              className="!justify-between !rounded-12 !border !border-border-subtlest-tertiary !px-3 !font-normal !typo-callout"
             >
               {findDurationLabel(value.durationDays)}
               <ArrowIcon
diff --git a/packages/shared/src/components/post/composer/TextForm.tsx b/packages/shared/src/components/post/composer/TextForm.tsx
index 68bf944a44c..1eba047233b 100644
--- a/packages/shared/src/components/post/composer/TextForm.tsx
+++ b/packages/shared/src/components/post/composer/TextForm.tsx
@@ -4,8 +4,10 @@ import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useRef,
 } from 'react';
+import classNames from 'classnames';
 import RichTextInput, {
   type RichTextInputRef,
 } from '../../fields/RichTextInput';
@@ -24,6 +26,7 @@ import { TITLE_MAX_LENGTH, type TextFormState } from './types';
 export interface TextFormCover {
   preview: string;
   file: File;
+  isUploading?: boolean;
 }
 
 interface TextFormProps {
@@ -71,6 +74,34 @@ export const TextForm = forwardRef<TextFormHandle, TextFormProps>(
       titleRef.current?.focus();
     }, []);
 
+    useLayoutEffect(() => {
+      const titleEl = titleRef.current;
+      if (!titleEl) {
+        return;
+      }
+      titleEl.style.height = 'auto';
+      titleEl.style.height = `${titleEl.scrollHeight}px`;
+    }, [value.title]);
+
+    const onTitleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (event.nativeEvent.isComposing) {
+          return;
+        }
+        const isCmd = event.ctrlKey || event.metaKey;
+        if (event.key === 'Enter' && isCmd) {
+          event.preventDefault();
+          event.currentTarget.form?.requestSubmit();
+          return;
+        }
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault();
+          editorRef.current?.focus();
+        }
+      },
+      [],
+    );
+
     const setCoverFile = useCallback(
       (file?: File) => {
         if (!file) {
@@ -118,15 +149,20 @@ export const TextForm = forwardRef<TextFormHandle, TextFormProps>(
                 title: e.currentTarget.value.replace(/\n/g, ''),
               })
             }
+            onKeyDown={onTitleKeyDown}
             aria-label="Post title"
             className="w-full resize-none overflow-hidden break-words bg-transparent font-bold leading-tight text-text-primary outline-none typo-title2 placeholder:text-text-quaternary"
           />
           {cover ? (
-            <div className="relative">
+            <div className="group relative">
               <img
                 src={cover.preview}
                 alt="Post cover"
-                className="block aspect-[2/1] w-full rounded-16 object-cover"
+                className={classNames(
+                  'block aspect-[2/1] w-full rounded-16 object-cover transition-opacity',
+                  'group-hover:brightness-95',
+                  cover.isUploading && 'opacity-50',
+                )}
               />
               <Tooltip content="Remove cover">
                 <Button
@@ -136,7 +172,7 @@ export const TextForm = forwardRef<TextFormHandle, TextFormProps>(
                   icon={<MiniCloseIcon />}
                   onClick={() => onCoverChange?.(null)}
                   aria-label="Remove cover"
-                  className="absolute right-3 top-3 !rounded-full !bg-surface-invert !text-text-primary !shadow-3"
+                  className="absolute right-3 top-3 z-1 !rounded-full !bg-surface-invert !text-text-primary !shadow-3 hover:!bg-text-primary hover:!text-surface-invert"
                 />
               </Tooltip>
             </div>
diff --git a/packages/shared/src/components/post/write/CreatePostButton.tsx b/packages/shared/src/components/post/write/CreatePostButton.tsx
index cb2a7f12194..91e4edbea6e 100644
--- a/packages/shared/src/components/post/write/CreatePostButton.tsx
+++ b/packages/shared/src/components/post/write/CreatePostButton.tsx
@@ -106,7 +106,7 @@ export function CreatePostButton<Tag extends AllowedTags>({
     });
   };
 
-  const shouldUseSmartComposer = isSmartComposerEnabled && !onClick;
+  const shouldUseSmartComposer = isSmartComposerEnabled && isLaptop && !onClick;
 
   const buttonProps: {
     tag?: AllowedTags;
diff --git a/packages/shared/src/components/squads/SharePostBar.tsx b/packages/shared/src/components/squads/SharePostBar.tsx
index 2cad395051c..a06762cac08 100644
--- a/packages/shared/src/components/squads/SharePostBar.tsx
+++ b/packages/shared/src/components/squads/SharePostBar.tsx
@@ -14,6 +14,7 @@ import { LazyModal } from '../modals/common/types';
 import type { Squad } from '../../graphql/sources';
 import type { ExternalLinkPreview } from '../../graphql/posts';
 import { Divider } from '../utilities';
+import { useSmartComposer } from '../../hooks/post/useSmartComposer';
 
 export interface SharePostBarProps {
   className?: string;
@@ -33,6 +34,9 @@ function SharePostBar({
   const { openModal } = useLazyModal();
   const [url, setUrl] = useState<string>('');
   const isMobile = useViewSize(ViewSize.MobileL);
+  const isLaptop = useViewSize(ViewSize.Laptop);
+  const isSmartComposerEnabled = useSmartComposer();
+  const shouldUseSmartComposer = isSmartComposerEnabled && isLaptop;
   const [urlFocused, toggleUrlFocus] = useState(false);
   const onSharedSuccessfully = () => {
     inputRef.current.value = '';
@@ -41,7 +45,18 @@ function SharePostBar({
 
   const shouldRenderReadingHistory = !urlFocused && url.length === 0;
 
-  const onOpenCreatePost = (preview: ExternalLinkPreview, link?: string) =>
+  const onOpenCreatePost = (preview: ExternalLinkPreview, link?: string) => {
+    if (shouldUseSmartComposer) {
+      openModal({
+        type: LazyModal.SmartComposer,
+        props: {
+          initialUrl: link,
+          initialSquadHandle: squad.handle,
+          preview: { ...preview, url: link },
+        },
+      });
+      return;
+    }
     openModal({
       type: LazyModal.CreateSharedPost,
       props: {
@@ -50,6 +65,7 @@ function SharePostBar({
         onSharedSuccessfully,
       },
     });
+  };
 
   const onOpenHistory = () =>
     openModal({
diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts
index 67409532ad4..4741e7a42d5 100644
--- a/packages/shared/src/lib/log.ts
+++ b/packages/shared/src/lib/log.ts
@@ -101,6 +101,15 @@ export enum Origin {
 }
 
 export enum LogEvent {
+  OpenSmartComposer = 'open smart composer',
+  CloseSmartComposer = 'close smart composer',
+  SubmitSmartComposer = 'submit smart composer',
+  SwitchComposerKind = 'switch composer kind',
+  ToggleComposerMarkdown = 'toggle composer markdown',
+  ToggleComposerExpand = 'toggle composer expand',
+  AddComposerCover = 'add composer cover',
+  RemoveComposerCover = 'remove composer cover',
+  DismissComposerPreview = 'dismiss composer preview',
   HidePost = 'hide post',
   ReportSquad = 'report squad',
   Click = 'click',

From 7ab6f61c7079a8b0339409007927d9eb3af72453 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Fri, 15 May 2026 14:53:46 +0200
Subject: [PATCH 4/5] fix: lint

---
 .../src/components/squads/SharePostBar.tsx     | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/shared/src/components/squads/SharePostBar.tsx b/packages/shared/src/components/squads/SharePostBar.tsx
index a06762cac08..60bbbc4f2a3 100644
--- a/packages/shared/src/components/squads/SharePostBar.tsx
+++ b/packages/shared/src/components/squads/SharePostBar.tsx
@@ -29,7 +29,7 @@ function SharePostBar({
   disabledText = 'Only admins and moderators can post',
   squad,
 }: SharePostBarProps): ReactElement {
-  const inputRef = useRef<HTMLInputElement>();
+  const inputRef = useRef<HTMLInputElement | null>(null);
   const { user } = useAuthContext();
   const { openModal } = useLazyModal();
   const [url, setUrl] = useState<string>('');
@@ -39,7 +39,9 @@ function SharePostBar({
   const shouldUseSmartComposer = isSmartComposerEnabled && isLaptop;
   const [urlFocused, toggleUrlFocus] = useState(false);
   const onSharedSuccessfully = () => {
-    inputRef.current.value = '';
+    if (inputRef.current) {
+      inputRef.current.value = '';
+    }
     setUrl('');
   };
 
@@ -110,11 +112,13 @@ function SharePostBar({
     >
       <span className="relative flex w-full flex-row items-center">
         <div className="flex flex-1 gap-4">
-          <ProfilePicture
-            user={user}
-            size={ProfileImageSize.Large}
-            nativeLazyLoading
-          />
+          {user && (
+            <ProfilePicture
+              user={user}
+              size={ProfileImageSize.Large}
+              nativeLazyLoading
+            />
+          )}
           <div className="flex flex-1">
             <input
               type="url"

From 15c15a12da9c4abebcf4cf2d3182626fb809eec7 Mon Sep 17 00:00:00 2001
From: Chris Bongers <chrisbongers@gmail.com>
Date: Mon, 18 May 2026 10:41:35 +0200
Subject: [PATCH 5/5] Restore split audience selection behavior

---
 .../post/composer/AudienceChip.spec.tsx       | 151 ++++++++++++++++++
 .../components/post/composer/AudienceChip.tsx |  49 ++++--
 2 files changed, 184 insertions(+), 16 deletions(-)
 create mode 100644 packages/shared/src/components/post/composer/AudienceChip.spec.tsx

diff --git a/packages/shared/src/components/post/composer/AudienceChip.spec.tsx b/packages/shared/src/components/post/composer/AudienceChip.spec.tsx
new file mode 100644
index 00000000000..939268ccce1
--- /dev/null
+++ b/packages/shared/src/components/post/composer/AudienceChip.spec.tsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { Squad } from '../../../graphql/sources';
+import { SourceMemberRole, SourceType } from '../../../graphql/sources';
+import { AudienceChip } from './AudienceChip';
+
+jest.mock('../../dropdown/DropdownMenu', () => ({
+  DropdownMenu: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuTrigger: ({ children }: { children: React.ReactNode }) =>
+    children,
+  DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuItem: ({
+    children,
+    onSelect,
+    ...props
+  }: {
+    children: React.ReactNode;
+    onSelect?: (event: Event) => void;
+  }) => (
+    <div
+      role="menuitem"
+      tabIndex={0}
+      onClick={(event) => onSelect?.(event.nativeEvent)}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          onSelect?.(event.nativeEvent);
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+}));
+
+const createAudience = (
+  id: string,
+  name: string,
+  type: SourceType = SourceType.Squad,
+): Squad =>
+  ({
+    id,
+    name,
+    type,
+    handle: id,
+    image: `https://daily.dev/${id}.jpg`,
+    active: true,
+    permalink: `/squads/${id}`,
+    public: true,
+    membersCount: 1,
+    description: '',
+    memberPostingRole: SourceMemberRole.Member,
+    memberInviteRole: SourceMemberRole.Member,
+    moderationRequired: false,
+    moderationPostCount: 0,
+  } as unknown as Squad);
+
+const userAudience = createAudience('user-1', 'Chris', SourceType.User);
+const frontendSquad = createAudience('squad-frontend', 'Frontend');
+const backendSquad = createAudience('squad-backend', 'Backend');
+const mobileSquad = createAudience('squad-mobile', 'Mobile');
+const designSquad = createAudience('squad-design', 'Design');
+
+const audiences = [
+  userAudience,
+  frontendSquad,
+  backendSquad,
+  mobileSquad,
+  designSquad,
+];
+
+const renderComponent = ({
+  selectedIds = ['user-1'],
+  onChange = jest.fn(),
+}: {
+  selectedIds?: string[];
+  onChange?: jest.Mock;
+} = {}) => {
+  render(
+    <AudienceChip
+      audiences={audiences}
+      selectedIds={selectedIds}
+      onChange={onChange}
+      userAudienceId="user-1"
+    />,
+  );
+
+  return { onChange };
+};
+
+describe('AudienceChip', () => {
+  it('renders checkbox controls for audience options', () => {
+    renderComponent();
+
+    expect(
+      screen.getByRole('checkbox', {
+        name: 'Toggle Everyone for multi-audience posting',
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('checkbox', {
+        name: 'Toggle Frontend for multi-audience posting',
+      }),
+    ).toBeInTheDocument();
+  });
+
+  it('single-selects an audience when clicking the row', async () => {
+    const { onChange } = renderComponent({
+      selectedIds: ['user-1', 'squad-backend'],
+    });
+
+    await userEvent.click(screen.getByText('Frontend'));
+
+    expect(onChange).toHaveBeenCalledWith(['squad-frontend']);
+  });
+
+  it('multi-selects an audience when clicking the checkbox', async () => {
+    const { onChange } = renderComponent();
+
+    await userEvent.click(
+      screen.getByRole('checkbox', {
+        name: 'Toggle Frontend for multi-audience posting',
+      }),
+    );
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(['user-1', 'squad-frontend']);
+  });
+
+  it('keeps row single-select available when the multi-select checkbox is disabled', async () => {
+    const { onChange } = renderComponent({
+      selectedIds: ['squad-frontend', 'squad-backend', 'squad-mobile'],
+    });
+    const designCheckbox = screen.getByRole('checkbox', {
+      name: 'Toggle Design for multi-audience posting',
+    });
+
+    expect(designCheckbox).toBeDisabled();
+
+    await userEvent.click(designCheckbox);
+    expect(onChange).not.toHaveBeenCalled();
+
+    await userEvent.click(screen.getByText('Design'));
+    expect(onChange).toHaveBeenCalledWith(['squad-design']);
+  });
+});
diff --git a/packages/shared/src/components/post/composer/AudienceChip.tsx b/packages/shared/src/components/post/composer/AudienceChip.tsx
index 8afc119cf37..5e823faf075 100644
--- a/packages/shared/src/components/post/composer/AudienceChip.tsx
+++ b/packages/shared/src/components/post/composer/AudienceChip.tsx
@@ -7,9 +7,10 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '../../dropdown/DropdownMenu';
+import { Checkbox } from '../../fields/Checkbox';
 import { SourceAvatar } from '../../profile/source';
 import { ProfileImageSize } from '../../ProfilePicture';
-import { ArrowIcon, InfoIcon, VIcon } from '../../icons';
+import { ArrowIcon, InfoIcon } from '../../icons';
 import { IconSize } from '../../Icon';
 import { TruncateText } from '../../utilities';
 import type { Squad } from '../../../graphql/sources';
@@ -132,6 +133,13 @@ export const AudienceChip = ({
     toggleSquad(option);
   };
 
+  const selectSingleOption = (option: Squad) => {
+    if (!option.id) {
+      return;
+    }
+    onChange([option.id]);
+  };
+
   const handleReset = () => {
     if (userAudienceId) {
       onChange([userAudienceId]);
@@ -215,14 +223,12 @@ export const AudienceChip = ({
                 <DropdownMenuItem
                   key={option.id}
                   onSelect={(event: Event) => {
-                    event.preventDefault();
-                    if (reachedLimit) {
+                    if (!option.id) {
+                      event.preventDefault();
                       return;
                     }
-                    toggleOption(option);
+                    selectSingleOption(option);
                   }}
-                  disabled={reachedLimit}
-                  aria-checked={isSelected}
                   className="!h-9 gap-2 !overflow-visible !px-2"
                 >
                   <SourceAvatar
@@ -234,22 +240,33 @@ export const AudienceChip = ({
                     className={classNames(
                       'min-w-0 flex-1 truncate text-left typo-callout',
                       isSelected && 'font-bold text-text-primary',
-                      reachedLimit && 'text-text-disabled',
                     )}
                   >
                     {optionLabel}
                   </span>
                   <span
-                    aria-hidden
-                    className="flex size-4 shrink-0 items-center justify-center"
+                    role="presentation"
+                    className="flex size-5 shrink-0 items-center justify-center"
+                    onClick={(event) => event.stopPropagation()}
+                    onKeyDown={(event) => event.stopPropagation()}
                   >
-                    {isSelected && (
-                      <VIcon
-                        secondary
-                        size={IconSize.Size16}
-                        className="text-accent-cabbage-default"
-                      />
-                    )}
+                    <Checkbox
+                      name="audiences[]"
+                      checked={isSelected}
+                      disabled={reachedLimit}
+                      className="!p-0 !pr-0"
+                      checkmarkClassName="!mr-0"
+                      onChange={() => {
+                        if (reachedLimit) {
+                          return;
+                        }
+                        toggleOption(option);
+                      }}
+                    >
+                      <span className="sr-only">
+                        Toggle {optionLabel} for multi-audience posting
+                      </span>
+                    </Checkbox>
                   </span>
                 </DropdownMenuItem>
               );