In-message failed

apps/spa/components/pane-channel/ChatItemMessage.tsx

@@ -35,6 +35,8 @@ export const ChatItemMessage: FC<{
   continuous?: boolean;
   overlay?: boolean;
 }> = ({ message, continuous = false, overlay = false, isLast }) => {
+  // TODO: Delete this line
+  message = { ...message, failTo: { type: 'SEND' } };
   const member = useMember();
   const sendBySelf = member?.user.id === message.senderId;
   const iAmMaster = member?.channel.isMaster || false;
@@ -152,7 +154,7 @@ const MessageBox: FC<{
   const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
     id: message.id,
     data: { message },
-    disabled: !draggable || isScrolling,
+    disabled: !draggable || isScrolling || failTo != null,
   });
 
   const setRef = (node: HTMLDivElement | null) => {
@@ -168,12 +170,15 @@ const MessageBox: FC<{
     [transform, transition],
   );
   const handle = useMemo(
-    () =>
-      draggable ? (
-        <MessageReorderHandle ref={setActivatorNodeRef} attributes={attributes} listeners={listeners} failTo={failTo} />
-      ) : (
-        <div className="text-message-time-text col-span-1 row-span-full h-full text-right"></div>
-      ),
+    () => (
+      <MessageReorderHandle
+        draggable={draggable}
+        ref={setActivatorNodeRef}
+        attributes={attributes}
+        listeners={listeners}
+        failTo={failTo}
+      />
+    ),
     [attributes, draggable, failTo, listeners, setActivatorNodeRef],
   );
   const toolbar = useMemo(() => {

apps/spa/components/pane-channel/ChatItemMessageFail.tsx

@@ -0,0 +1,17 @@
+import { type FC } from 'react';
+import { type FailTo } from '../../state/channel.types';
+import { Delay } from '../Delay';
+import { FallbackIcon } from '@boluo/ui/FallbackIcon';
+import { TriangleAlert } from '@boluo/icons';
+
+export const ChatItemMessageFail: FC<{ failTo: FailTo }> = ({}) => {
+  return (
+    <div className="relative">
+      <Delay fallback={<FallbackIcon />}>
+        <TriangleAlert className="text-text-danger inline text-xs" />
+      </Delay>
+      {/* TODO: Style */}
+      <div className="bg-lowest absolute bottom-full left-0 z-10 rounded-lg border px-2 py-1 shadow">Fail</div>
+    </div>
+  );
+};

apps/spa/components/pane-channel/MessageReorderHandle.tsx

@@ -1,52 +1,56 @@
 import type { useSortable } from '@dnd-kit/sortable';
 import clsx from 'clsx';
-import { MoveVertical, TriangleAlert } from '@boluo/icons';
+import { MoveVertical } from '@boluo/icons';
 import { forwardRef, type ReactNode } from 'react';
 import { Spinner } from '@boluo/ui/Spinner';
 import { Delay } from '../Delay';
 import { type FailTo } from '../../state/channel.types';
 import { useIsOptimistic } from '../../hooks/useIsOptimistic';
+import { ChatItemMessageFail } from './ChatItemMessageFail';
+import { FallbackIcon } from '@boluo/ui/FallbackIcon';
 
 type UseSortableReturn = ReturnType<typeof useSortable>;
 
 interface Props {
+  draggable: boolean;
   listeners?: UseSortableReturn['listeners'];
   attributes?: UseSortableReturn['attributes'];
   children?: React.ReactNode;
   failTo: FailTo | null | undefined;
 }
 
-export const MessageReorderHandle = forwardRef<HTMLDivElement, Props>(({ listeners, attributes, failTo }, ref) => {
-  const loading = useIsOptimistic();
-  if (loading) {
-    listeners = undefined;
-    attributes = undefined;
-  }
-  let icon: ReactNode;
-  if (failTo) {
-    icon = <TriangleAlert className="text-text-danger inline text-xs" />;
-  } else if (loading) {
-    icon = <Spinner className="inline text-xs" />;
-  } else {
-    icon = <MoveVertical className="inline text-xs" />;
-  }
-  return (
-    <div className="col-span-1 row-span-full h-full">
-      <div
-        ref={ref}
-        {...listeners}
-        {...attributes}
-        className={clsx(
-          'text-message-handle-text rounded-sm pl-2 text-right',
-          !loading && 'hover:text-message-handle-hover-text cursor-move',
-          loading && 'cursor-not-allowed',
-        )}
-      >
-        <Delay>
-          <div>{icon}</div>
-        </Delay>
+export const MessageReorderHandle = forwardRef<HTMLDivElement, Props>(
+  ({ draggable, listeners, attributes, failTo }, ref) => {
+    const loading = useIsOptimistic();
+    if (loading || !draggable) {
+      listeners = undefined;
+      attributes = undefined;
+    }
+    let icon: ReactNode = null;
+    if (failTo) {
+      icon = <ChatItemMessageFail failTo={failTo} />;
+    } else if (loading) {
+      icon = <Spinner className="inline text-xs" />;
+    } else if (draggable) {
+      icon = <MoveVertical className="inline text-xs" />;
+    }
+    return (
+      <div className="col-span-1 row-span-full h-full">
+        <div
+          ref={ref}
+          {...listeners}
+          {...attributes}
+          className={clsx(
+            'text-message-handle-text rounded-sm pl-2 text-right',
+            draggable && !loading && failTo == null && 'hover:text-message-handle-hover-text cursor-move',
+            failTo != null && 'cursor-not-allowed',
+            loading && 'cursor-wait',
+          )}
+        >
+          <Delay fallback={<FallbackIcon />}>{icon}</Delay>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 MessageReorderHandle.displayName = 'MessageReorderHandle';