feat: redesign deleted message

.cursor/skills/ralph-protocol/reference.md

@@ -48,6 +48,6 @@ Each task must include:
 
 ```md
 - [ ] <Task description>
-                                          - Status: in-progress | pending | done | blocked
-                                          - Owner: <agent-name> | unassigned
+- Status: in-progress | pending | done | blocked
+- Owner: <agent-name> | unassigned
 ```

src/components/DragAndDrop/styling/index.scss

@@ -1 +1 @@
-@use "DragAndDropContainer";
+@use 'DragAndDropContainer';

src/components/Gallery/decisions.md

@@ -49,14 +49,14 @@ Following the project's established pattern of static imports with `propComponen
 The old `Gallery.tsx` contained a thumbnail grid + modal component (with `images` and `innerRefs` props). The new architecture separates this into a Gallery provider (carousel state) and ModalGallery (thumbnail grid + modal).
 
 **Decision:**
-Replace the old Gallery.tsx content entirely with the new Gallery provider. The old Gallery functionality will be reimplemented as ModalGallery in Task 4. Downstream type errors in `AttachmentContainer.tsx` and `FixedHeightMessage.tsx` are expected and will be resolved in Tasks 4 and 8.
+Replace the old Gallery.tsx content entirely with the new Gallery provider. The old Gallery functionality will be reimplemented as ModalGallery in Task 4. Downstream type errors in `AttachmentContainer.tsx` are expected and will be resolved in Tasks 4 and 8.
 
 **Reasoning:**
 The plan explicitly says "replace existing content" for Gallery.tsx. The old GalleryProps type (with `images`/`innerRefs`) is incompatible with the new GalleryProps (with `items`/`initialIndex`/`onIndexChange`/`GalleryUI`). A clean replacement is necessary.
 
 **Tradeoffs / Consequences:**
 
-- Temporary TypeScript errors in downstream consumers (`AttachmentContainer.tsx`, `FixedHeightMessage.tsx`) until Tasks 4 and 8 update them.
+- Temporary TypeScript errors in downstream consumers (`AttachmentContainer.tsx`) until Tasks 4 and 8 update them.
 
 ## Decision: GalleryUI defers loading/error states to BaseImage and native elements
 
@@ -122,15 +122,15 @@ The new ModalGallery is a composition component: thumbnail grid + Modal + Galler
 
 - Downstream consumers (`Image.tsx`, `AttachmentPreviewRoot.tsx`, `ComponentContext.tsx`) that use the old `ModalGalleryProps` shape will need updates in Task 8 (Exports & Public API).
 
-## Decision: GalleryContainer and FixedHeightMessage use ModalGallery instead of Gallery
+## Decision: GalleryContainer use ModalGallery instead of Gallery
 
 **Date:** 2026-02-09
 
 **Context:**
-The old `Gallery` component was a thumbnail grid that accepted `images: Attachment[]` and `innerRefs`. The new `Gallery` is a carousel provider accepting `items: GalleryItem[]`. The `GalleryContainer` (in `AttachmentContainer.tsx`) and `FixedHeightMessage` used the old `Gallery` API.
+The old `Gallery` component was a thumbnail grid that accepted `images: Attachment[]` and `innerRefs`. The new `Gallery` is a carousel provider accepting `items: GalleryItem[]`. The `GalleryContainer` (in `AttachmentContainer.tsx`) used the old `Gallery` API.
 
 **Decision:**
-Replace `Gallery` usage with `ModalGallery` in both `GalleryContainer` and `FixedHeightMessage`. Pass `attachment.images` cast to `GalleryItem[]` via `as unknown as GalleryItem[]`. The `AttachmentProps.Gallery` prop was renamed to `AttachmentProps.ModalGallery` with `ModalGalleryProps` type.
+Replace `Gallery` usage with `ModalGallery` in both `GalleryContainer`. Pass `attachment.images` cast to `GalleryItem[]` via `as unknown as GalleryItem[]`. The `AttachmentProps.Gallery` prop was renamed to `AttachmentProps.ModalGallery` with `ModalGalleryProps` type.
 
 **Reasoning:**
 The old `Gallery` rendered a thumbnail grid, which is now `ModalGallery`'s responsibility. The `GalleryContainer`'s `imageAttachmentSizeHandler` and `innerRefs` logic was removed since `ModalGallery` handles its own thumbnail rendering. The type cast is necessary because `Attachment[]` (from stream-chat) is structurally compatible with `GalleryItem` for the properties used by the Gallery UI (image_url, thumb_url, fallback).

src/components/Icons/icons.tsx

@@ -233,7 +233,10 @@ export const IconChart5 = createIcon(
 
 export const IconCheckmark1Small = createIcon(
   'IconCheckmark1Small',
-  <path d='M10.3249 4.84832C10.5006 4.56771 10.8702 4.48252 11.151 4.65789C11.432 4.83352 11.5181 5.20404 11.3424 5.48504L7.80045 11.1511C7.70363 11.306 7.54151 11.4086 7.36002 11.4294C7.17843 11.4501 6.99712 11.3867 6.86784 11.2575L4.74284 9.1325C4.50852 8.89818 4.50852 8.51818 4.74284 8.28387C4.97707 8.04999 5.35626 8.04999 5.59049 8.28387L7.18229 9.87566L10.3249 4.84832Z' />,
+  <path
+    d='M11.7412 3.43164C11.9169 3.15085 12.2874 3.06564 12.5684 3.24121C12.8492 3.41691 12.9344 3.78745 12.7588 4.06836L7.44629 12.5684C7.34945 12.7231 7.18722 12.8249 7.00586 12.8457C6.82419 12.8664 6.64297 12.8031 6.51367 12.6738L3.32617 9.48633C3.09186 9.25202 3.09186 8.87299 3.32617 8.63867C3.56049 8.40436 3.93951 8.40436 4.17383 8.63867L6.82715 11.292L11.7412 3.43164Z'
+    fill='currentColoer'
+  />,
 );
 
 export const IconCheckmark2 = createIcon(
@@ -408,7 +411,10 @@ export const IconDotsGrid1x3Vertical = createIcon(
 
 export const IconDoubleCheckmark1Small = createIcon(
   'IconDoubleCheckmark1Small',
-  <path d='M8.99154 4.84831C9.16723 4.5677 9.53687 4.48251 9.81771 4.65788C10.0987 4.83351 10.1847 5.20403 10.0091 5.48503L6.46713 11.151C6.3703 11.306 6.20818 11.4086 6.0267 11.4294C5.8451 11.45 5.66379 11.3867 5.53451 11.2575L3.40951 9.13249C3.17519 8.89818 3.17519 8.51817 3.40951 8.28386C3.64374 8.04998 4.02293 8.04998 4.25716 8.28386L5.84896 9.87566L8.99154 4.84831ZM11.6576 4.84831C11.8332 4.5674 12.2037 4.48228 12.4847 4.65788C12.7657 4.83352 12.8508 5.20404 12.6751 5.48503L9.13412 11.151C8.95852 11.432 8.58796 11.518 8.30697 11.3425C8.02597 11.1668 7.94091 10.7963 8.11654 10.5153L11.6576 4.84831Z' />,
+  <path
+    d='M9.74121 3.43164C9.9169 3.15085 10.2874 3.06564 10.5684 3.24121C10.8492 3.41691 10.9344 3.78745 10.7588 4.06836L5.44629 12.5684C5.34945 12.7231 5.18722 12.8249 5.00586 12.8457C4.82419 12.8664 4.64297 12.8031 4.51367 12.6738L1.32617 9.48633C1.09186 9.25202 1.09186 8.87299 1.32617 8.63868C1.56049 8.40436 1.93951 8.40436 2.17383 8.63868L4.82715 11.292L9.74121 3.43164ZM13.7412 3.43164C13.9169 3.15085 14.2874 3.06564 14.5684 3.24121C14.8492 3.41691 14.9344 3.78745 14.7588 4.06836L9.44629 12.5684C9.2706 12.8492 8.90006 12.9344 8.61914 12.7588C8.33835 12.5831 8.25314 12.2126 8.42871 11.9316L13.7412 3.43164Z'
+    fill='currentColor'
+  />,
 );
 
 export const IconEditBig = createIcon(
@@ -581,6 +587,20 @@ export const IconLayersBehind = createIcon(
   <path d='M13.5667 5.83301C13.5666 5.42814 13.2383 5.09961 12.8333 5.09961H3.16635C2.7616 5.09979 2.43313 5.42826 2.43295 5.83301V11.5C2.43295 11.9049 2.76149 12.2332 3.16635 12.2334H12.8333C13.2384 12.2334 13.5667 11.905 13.5667 11.5V5.83301ZM12.8333 1.90039C13.1647 1.90039 13.433 2.16863 13.433 2.5C13.433 2.83137 13.1647 3.09961 12.8333 3.09961H3.16635C2.83513 3.09943 2.56674 2.83126 2.56674 2.5C2.56674 2.16874 2.83513 1.90057 3.16635 1.90039H12.8333ZM14.7669 11.5C14.7669 12.5678 13.9011 13.4336 12.8333 13.4336H3.16635C2.09876 13.4334 1.23373 12.5677 1.23373 11.5V5.83301C1.23391 4.76552 2.09886 3.90057 3.16635 3.90039H12.8333C13.901 3.90039 14.7668 4.76541 14.7669 5.83301V11.5Z' />,
 );
 
+export const IconLayoutAlignLeft = createIcon(
+  'IconLayoutAlignLeft',
+  <>
+    <path
+      d='M13 4.63333V11.3667H14V4.63333H13ZM11.3667 13H4.63333V14H11.3667V13ZM3 11.3667V4.63333H2V11.3667H3ZM4.63333 3H11.3667V2H4.63333V3ZM4.63333 13C4.25171 13 3.99557 12.9996 3.79832 12.9835C3.6069 12.9679 3.51538 12.9399 3.45501 12.9092L3.00102 13.8002C3.22586 13.9147 3.46363 13.9595 3.71689 13.9802C3.96431 14.0004 4.26821 14 4.63333 14V13ZM2 11.3667C2 11.7318 1.99961 12.0357 2.01983 12.2831C2.04052 12.5364 2.08526 12.7741 2.19982 12.999L3.09083 12.545C3.06007 12.4846 3.03215 12.3931 3.01651 12.2017C3.00039 12.0044 3 11.7483 3 11.3667H2ZM3.45501 12.9092C3.29821 12.8293 3.17072 12.7018 3.09083 12.545L2.19982 12.999C2.37559 13.3439 2.65605 13.6244 3.00102 13.8002L3.45501 12.9092ZM13 11.3667C13 11.7483 12.9996 12.0044 12.9835 12.2017C12.9679 12.3931 12.9399 12.4846 12.9092 12.545L13.8002 12.999C13.9147 12.7741 13.9595 12.5364 13.9802 12.2831C14.0004 12.0357 14 11.7318 14 11.3667H13ZM11.3667 14C11.7318 14 12.0357 14.0004 12.2831 13.9802C12.5364 13.9595 12.7741 13.9147 12.999 13.8002L12.545 12.9092C12.4846 12.9399 12.3931 12.9679 12.2017 12.9835C12.0044 12.9996 11.7483 13 11.3667 13V14ZM12.9092 12.545C12.8293 12.7018 12.7018 12.8293 12.545 12.9092L12.999 13.8002C13.3439 13.6244 13.6244 13.3439 13.8002 12.999L12.9092 12.545ZM14 4.63333C14 4.26821 14.0004 3.96431 13.9802 3.71689C13.9595 3.46363 13.9147 3.22586 13.8002 3.00102L12.9092 3.45501C12.9399 3.51538 12.9679 3.6069 12.9835 3.79832C12.9996 3.99557 13 4.25171 13 4.63333H14ZM11.3667 3C11.7483 3 12.0044 3.00039 12.2017 3.01651C12.3931 3.03215 12.4846 3.06007 12.545 3.09083L12.999 2.19982C12.7741 2.08526 12.5364 2.04052 12.2831 2.01983C12.0357 1.99961 11.7318 2 11.3667 2V3ZM13.8002 3.00102C13.6244 2.65605 13.3439 2.37559 12.999 2.19982L12.545 3.09083C12.7018 3.17072 12.8293 3.29821 12.9092 3.45501L13.8002 3.00102ZM3 4.63333C3 4.25171 3.00039 3.99557 3.01651 3.79832C3.03215 3.6069 3.06007 3.51538 3.09083 3.45501L2.19982 3.00102C2.08526 3.22586 2.04052 3.46363 2.01983 3.71689C1.99961 3.96431 2 4.26821 2 4.63333H3ZM4.63333 2C4.26821 2 3.96431 1.99961 3.71689 2.01983C3.46363 2.04052 3.22586 2.08526 3.00102 2.19982L3.45501 3.09083C3.51538 3.06007 3.6069 3.03215 3.79832 3.01651C3.99557 3.00039 4.25171 3 4.63333 3V2ZM3.09083 3.45501C3.17072 3.29821 3.29821 3.17072 3.45501 3.09083L3.00102 2.19982C2.65605 2.37559 2.37559 2.65605 2.19982 3.00102L3.09083 3.45501Z'
+      fill='currentColor'
+    />
+    <path
+      d='M6 13.5V14H7V13.5H6ZM7 2.5V2H6V2.5H7ZM7 13.5V2.5H6V13.5H7Z'
+      fill='currentColor'
+    />
+  </>,
+);
+
 export const IconLayoutGrid1 = createIcon(
   'IconLayoutGrid1',
   <path d='M6.83302 7.23341C7.16428 7.23341 7.43343 7.5018 7.4336 7.83302V13.5C7.4336 13.8314 7.16439 14.0996 6.83302 14.0996H4.6338C4.27046 14.0996 3.96138 14.1007 3.70899 14.0801C3.44973 14.0589 3.1972 14.0124 2.95606 13.8897C2.59221 13.7043 2.2957 13.4077 2.11036 13.044C1.98761 12.8028 1.94111 12.5503 1.91993 12.291C1.89933 12.0386 1.9004 11.7296 1.9004 11.3662V7.83302C1.90058 7.5018 2.16875 7.23341 2.50001 7.23341H6.83302ZM12.9004 11.0996H9.76661V12.9004H11.3662C11.7494 12.9004 12.0012 12.8995 12.1934 12.8838C12.3786 12.8687 12.4561 12.8427 12.5 12.8203C12.6378 12.7501 12.7501 12.6378 12.8203 12.5C12.8427 12.4561 12.8687 12.3786 12.8838 12.1934C12.8995 12.0012 12.9004 11.7494 12.9004 11.3662V11.0996ZM12.9004 4.6338C12.9004 4.25064 12.8995 3.99886 12.8838 3.80665C12.8687 3.62142 12.8427 3.54393 12.8203 3.50001C12.7501 3.36224 12.6379 3.24999 12.5 3.1797C12.4561 3.15732 12.3786 3.13136 12.1934 3.11622C12.0012 3.10053 11.7494 3.09962 11.3662 3.09962H9.76661V7.56642H12.9004V4.6338ZM6.83302 1.9004C7.16439 1.9004 7.4336 2.16864 7.4336 2.50001V5.50001C7.4336 5.83138 7.16439 6.09962 6.83302 6.09962H2.50001C2.16864 6.09962 1.9004 5.83138 1.9004 5.50001V4.6338C1.9004 4.27046 1.89933 3.96138 1.91993 3.70899C1.94111 3.44973 1.98761 3.1972 2.11036 2.95606C2.29571 2.59227 2.59227 2.29571 2.95606 2.11036C3.1972 1.98761 3.44973 1.94111 3.70899 1.91993C3.96138 1.89933 4.27046 1.9004 4.6338 1.9004H6.83302ZM3.09962 11.3662C3.09962 11.7494 3.10053 12.0012 3.11622 12.1934C3.13136 12.3786 3.15732 12.4561 3.1797 12.5C3.24999 12.6379 3.36224 12.7501 3.50001 12.8203C3.54393 12.8427 3.62142 12.8687 3.80665 12.8838C3.99886 12.8995 4.25064 12.9004 4.6338 12.9004H6.23341V8.4336H3.09962V11.3662ZM14.0996 11.3662C14.0996 11.7296 14.1007 12.0386 14.0801 12.291C14.0589 12.5503 14.0124 12.8028 13.8897 13.044C13.7043 13.4077 13.4077 13.7043 13.044 13.8897C12.8028 14.0124 12.5503 14.0589 12.291 14.0801C12.0386 14.1007 11.7296 14.0996 11.3662 14.0996H9.167C8.83563 14.0996 8.56642 13.8314 8.56642 13.5V10.5C8.56642 10.1686 8.83563 9.9004 9.167 9.9004H13.5C13.8314 9.9004 14.0996 10.1686 14.0996 10.5V11.3662ZM3.09962 4.9004H6.23341V3.09962H4.6338C4.25065 3.09962 3.99886 3.10053 3.80665 3.11622C3.62142 3.13135 3.54393 3.15732 3.50001 3.1797C3.3622 3.24997 3.24997 3.3622 3.1797 3.50001C3.15732 3.54393 3.13135 3.62142 3.11622 3.80665C3.10053 3.99886 3.09962 4.25065 3.09962 4.6338V4.9004ZM14.0996 8.167C14.0994 8.49822 13.8313 8.76661 13.5 8.76661H9.167C8.83574 8.76661 8.56659 8.49822 8.56642 8.167V2.50001C8.56642 2.16864 8.83563 1.9004 9.167 1.9004H11.3662C11.7296 1.9004 12.0386 1.89933 12.291 1.91993C12.5503 1.94111 12.8028 1.98761 13.044 2.11036C13.4077 2.2957 13.7043 2.59221 13.8897 2.95606C14.0124 3.1972 14.0589 3.44973 14.0801 3.70899C14.1007 3.96138 14.0996 4.27046 14.0996 4.6338V8.167Z' />,

src/components/Message/MessageBubble.tsx

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+import clsx from 'clsx';
+
+export const MessageBubble = ({ className, ...props }: ComponentProps<'div'>) => (
+  <div {...props} className={clsx('str-chat__message-bubble', className)} />
+);

src/components/Message/MessageDeletedBubble.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { IconCircleBanSign } from '../Icons';
+import { useTranslationContext } from '../../context/TranslationContext';
+
+import type { LocalMessage } from 'stream-chat';
+import { MessageBubble } from './MessageBubble';
+
+export type MessageDeletedProps = {
+  message: LocalMessage;
+};
+
+export const MessageDeletedBubble = () => {
+  const { t } = useTranslationContext();
+
+  return (
+    <MessageBubble data-testid={'message-deleted-bubble'}>
+      <div className='str-chat__message-text'>
+        <IconCircleBanSign />
+        <span>{t('Message deleted')}</span>
+      </div>
+    </MessageBubble>
+  );
+};