Fixing stuff on community

packages/apps/chat-app/src/components/Chat/Conversations/Item/ConversationItem.tsx

@@ -13,9 +13,13 @@ import {
   ErrorNotification,
 } from '@homebase-id/common-app';
 import { ChevronDown, Persons } from '@homebase-id/common-app/icons';
-import { ReactNode, useEffect, useMemo } from 'react';
+import { memo, ReactNode, useEffect, useMemo } from 'react';
 import { useChatMessages } from '../../../../hooks/chat/useChatMessages';
-import { ChatDeletedArchivalStaus, ChatMessage } from '../../../../providers/ChatProvider';
+import {
+  CHAT_LINKS_PAYLOAD_KEY,
+  ChatDeletedArchivalStaus,
+  ChatMessage,
+} from '../../../../providers/ChatProvider';
 import { ChatDeliveryIndicator } from '../../Detail/ChatDeliveryIndicator';
 import { MessageDeletedInnerBody } from '../../Detail/ChatMessageItem';
 import { ChatSentTimeIndicator } from '../../Detail/ChatSentTimeIndicator';
@@ -156,8 +160,6 @@ const ConversationBody = ({
         )?.length
       : 0;
 
-  const lastMessageContent = lastMessage?.fileMetadata.appData.content;
-  const plainLastMessageContent = getPlainTextFromRichText(lastMessageContent?.message);
   const hasNoContextMenu = stringGuidsEqual(conversationId, ConversationWithYourselfId);
 
   return (
@@ -187,16 +189,8 @@ const ConversationBody = ({
           {lastMessage ? <ChatDeliveryIndicator msg={lastMessage} /> : null}
 
           <div className="w-20 flex-grow leading-tight text-foreground/80">
-            {lastMessage && lastMessageContent ? (
-              lastMessage.fileMetadata.appData.archivalStatus === ChatDeletedArchivalStaus ? (
-                <MessageDeletedInnerBody />
-              ) : lastMessageContent.message ? (
-                <p className="overflow-hidden text-ellipsis whitespace-nowrap">
-                  {plainLastMessageContent}
-                </p>
-              ) : (
-                <p>📷 {t('Media')}</p>
-              )
+            {lastMessage ? (
+              <MessageContent {...lastMessage} />
             ) : !fetchedMessages && conversationId ? (
               <LoadingBlock className="h-5 w-full flex-grow bg-slate-300 dark:bg-slate-200" />
             ) : null}
@@ -214,6 +208,42 @@ const ConversationBody = ({
   );
 };
 
+export const MessageContent = memo((message: HomebaseFile<ChatMessage>) => {
+  const lastMessageContent = message.fileMetadata.appData.content;
+  const plainLastMessageContent = getPlainTextFromRichText(lastMessageContent?.message);
+
+  const textMessage = message.fileMetadata.appData.content.message;
+  const { payloads } = message.fileMetadata;
+  if (message.fileMetadata.appData.archivalStatus === ChatDeletedArchivalStaus) {
+    return <MessageDeletedInnerBody />;
+  }
+  if (textMessage?.length > 0) {
+    return (
+      <p className="overflow-hidden text-ellipsis whitespace-nowrap">{plainLastMessageContent}</p>
+    );
+  } else if (payloads && payloads?.length > 1) {
+    return <p>📸 {t('Medias')}</p>;
+  } else {
+    const payload = payloads?.[0];
+    if (!payload) return null;
+    if (payload.contentType.startsWith('image')) {
+      return <p>📷 {t('Image')}</p>;
+    } else if (
+      payload.contentType.startsWith('video') ||
+      payload.contentType === 'application/vnd.apple.mpegurl'
+    ) {
+      return <p>🎥 {t('Video')}</p>;
+    } else if (payload.contentType.startsWith('audio')) {
+      return <p>🎵 {t('Audio')}</p>;
+    } else if (payload.key === CHAT_LINKS_PAYLOAD_KEY) {
+      return <p>🔗 {t('Link')}</p>;
+    } else {
+      return <p>📄 {t('File')}</p>;
+    }
+  }
+});
+MessageContent.displayName = 'MessageContent';
+
 export const ConversationContextMenu = ({
   conversation,
 }: {

packages/apps/community-app/src/components/Community/Message/composer/MessageComposer.tsx

@@ -148,10 +148,10 @@ export const MessageComposer = ({
                 : undefined));
 
           return {
-            key: `${content.odinId} (${name})`,
+            key: `${content.odinId}`,
             value: content.odinId,
             text: content.odinId,
-            label: `${content.odinId} (${name})`,
+            label: `${content.odinId} - ${name}`,
           };
         })
         .filter(Boolean) as Mentionable[]) || [];
@@ -229,6 +229,9 @@ export const MessageComposer = ({
               disableHeadings={true}
               mentionables={mentionables}
               plugins={plugins}
+              uniqueId={
+                thread?.fileMetadata.globalTransitId || channel?.fileMetadata.appData.uniqueId
+              }
             >
               <div className="max-h-[30vh] overflow-auto">
                 <FileOverview files={files} setFiles={setFiles} cols={8} />

packages/apps/community-app/src/components/Community/Message/detail/CommunityMediaGallery.tsx

@@ -178,13 +178,14 @@ export const CommunityMediaGallery = ({
 
 const CustomOdinImage = ({
   className,
+  previewThumbnail,
   ...props
 }: { className?: string; previewThumbnail?: EmbeddedThumb } & ImageSource) => {
   const dotYouClient = useDotYouClientContext();
   const [tinyLoaded, setTinyLoaded] = useState(false);
   const [finalLoaded, setFinalLoaded] = useState(false);
 
-  const [naturalSize, setNaturalSize] = useState<ImageSize | undefined>(props.previewThumbnail);
+  const [naturalSize, setNaturalSize] = useState<ImageSize | undefined>(previewThumbnail);
 
   return (
     <div
@@ -202,6 +203,7 @@ const CustomOdinImage = ({
         className={`absolute inset-0 h-full w-full max-w-none object-contain object-center transition-opacity delay-500 ${finalLoaded ? 'opacity-0' : 'opacity-100'}`}
         dotYouClient={dotYouClient}
         {...props}
+        previewThumbnail={previewThumbnail}
         blur="auto"
         onLoad={(naturalSize: ImageSize | undefined) => {
           setTinyLoaded(true);

packages/apps/community-app/src/components/Community/Message/item/CommunityMedia.tsx

@@ -30,17 +30,19 @@ export const CommunityMedia = ({
   odinId,
   communityId,
   msg,
+  originId,
 }: {
   odinId: string;
   communityId: string;
   msg: HomebaseFile<CommunityMessage> | NewHomebaseFile<CommunityMessage>;
+  originId?: string;
 }) => {
   const payloads = msg.fileMetadata.payloads?.filter(
     (pyld) => pyld.key !== DEFAULT_PAYLOAD_KEY && pyld.key !== BACKEDUP_PAYLOAD_KEY
   );
   const isGallery = payloads && payloads.length >= 2;
   const navigate = useNavigate();
-  const { odinKey, communityKey, channelKey } = useParams();
+  const { odinKey, communityKey, channelKey, threadKey } = useParams();
 
   if (!payloads?.length) return null;
   if (isGallery) return <MediaGallery odinId={odinId} communityId={communityId} msg={msg} />;
@@ -54,11 +56,15 @@ export const CommunityMedia = ({
       fileLastModified={msg.fileMetadata.updated}
       payload={payloads[0]}
       fit={'contain'}
-      onClick={() =>
+      onClick={() => {
+        const threadPathPart = originId || threadKey || undefined;
+        const rootPath = `${COMMUNITY_ROOT_PATH}/${odinKey}/${communityKey}/${channelKey || msg.fileMetadata.appData.content.channelId}`;
         navigate(
-          `${COMMUNITY_ROOT_PATH}/${odinKey}/${communityKey}/${channelKey || msg.fileMetadata.appData.content.channelId}/${msg.fileMetadata.appData.uniqueId}/${payloads[0].key}`
-        )
-      }
+          threadPathPart
+            ? `${rootPath}/${threadPathPart}/thread/${msg.fileMetadata.appData.uniqueId}/${payloads[0].key}`
+            : `${rootPath}/${msg.fileMetadata.appData.uniqueId}/${payloads[0].key}`
+        );
+      }}
       previewThumbnail={isGallery ? undefined : msg.fileMetadata.appData.previewThumbnail}
       className={`my-1 max-h-[35rem] max-w-xs overflow-hidden rounded-lg`}
     />

packages/apps/community-app/src/components/Community/Message/item/CommunityMessageItem.tsx

@@ -48,6 +48,7 @@ export const CommunityMessageItem = memo(
     communityActions?: CommunityActions;
     hideDetails?: boolean;
     hideThreads?: boolean;
+    originId?: string;
     showChannelName?: boolean;
     className?: string;
     scrollRef?: React.RefObject<HTMLDivElement>;
@@ -58,6 +59,7 @@ export const CommunityMessageItem = memo(
       communityActions,
       hideDetails,
       hideThreads,
+      originId,
       showChannelName,
       className,
       scrollRef,
@@ -214,6 +216,7 @@ export const CommunityMessageItem = memo(
                       msg={msg}
                       community={community}
                       scrollRef={scrollRef}
+                      originId={originId}
                     />
                   ) : (
                     <CommunityTextMessageBody
@@ -394,10 +397,12 @@ const MessageTextRenderer = ({
 const CommunityMediaMessageBody = ({
   msg,
   community,
+  originId,
   scrollRef,
 }: {
   msg: HomebaseFile<CommunityMessage>;
   community?: HomebaseFile<CommunityDefinition>;
+  originId?: string;
   scrollRef?: React.RefObject<HTMLDivElement>;
 }) => {
   const content = msg.fileMetadata.appData.content;
@@ -447,6 +452,7 @@ const CommunityMediaMessageBody = ({
         msg={msg}
         communityId={community?.fileMetadata.appData.uniqueId as string}
         odinId={community?.fileMetadata.senderOdinId as string}
+        originId={originId}
       />
       <CommunityReactions msg={msg} community={community} scrollRef={scrollRef} />
     </div>

packages/apps/community-app/src/components/Community/catchup/CommunityChannelCatchup.tsx

@@ -2,7 +2,7 @@ import { HomebaseFile } from '@homebase-id/js-lib/core';
 import { CommunityDefinition } from '../../../providers/CommunityDefinitionProvider';
 import { ChannelWithRecentMessage } from '../../../hooks/community/channels/useCommunityChannelsWithRecentMessages';
 import { CommunityHistory } from '../channel/CommunityHistory';
-import { ActionLink, COMMUNITY_ROOT_PATH, t } from '@homebase-id/common-app';
+import { ActionLink, COMMUNITY_ROOT_PATH } from '@homebase-id/common-app';
 import { ExternalLink } from '@homebase-id/common-app/icons';
 
 export const CommunityChannelCatchup = ({
@@ -18,21 +18,16 @@ export const CommunityChannelCatchup = ({
   return (
     <div className="pb-3 last-of-type:pb-0">
       <div className="overflow-hidden rounded-md border bg-background">
-        <div className="flex flex-row justify-between bg-slate-200 px-2 py-2 dark:bg-slate-800">
-          <ActionLink
-            type="mute"
-            size="none"
-            className="text-lg hover:underline"
-            href={channelLink}
-          >
-            # {channel.fileMetadata.appData.content.title}
-          </ActionLink>
+        <ActionLink
+          type="mute"
+          size="none"
+          className="flex flex-col justify-between rounded-b-none bg-slate-200 px-2 py-2 text-lg hover:underline dark:bg-slate-800 md:flex-row"
+          href={channelLink}
+        >
+          # {channel.fileMetadata.appData.content.title}
+          <ExternalLink className="ml-auto h-3 w-3" />
+        </ActionLink>
 
-          <ActionLink href={channelLink} type="secondary" size="none" className="px-2 py-1 text-sm">
-            {t('Open channel')}
-            <ExternalLink className="ml-2 h-3 w-3" />
-          </ActionLink>
-        </div>
         <div className="relative">
           <CommunityHistory
             community={community}

packages/apps/community-app/src/components/Community/catchup/CommunityThreadCatchup.tsx

@@ -11,7 +11,7 @@ import {
 import { useCommunityMessage } from '../../../hooks/community/messages/useCommunityMessage';
 import { useCommunityChannel } from '../../../hooks/community/channels/useCommunityChannel';
 import { ThreadMeta } from '../../../hooks/community/threads/useCommunityThreads';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { MessageComposer } from '../Message/composer/MessageComposer';
 import { ExternalLink } from '@homebase-id/common-app/icons';
 
@@ -39,6 +39,15 @@ export const CommunityThreadCatchup = ({
     fileSystemType: 'Standard',
   }).get;
 
+  const showOptions = useMemo(() => {
+    return {
+      count: 10,
+      targetLink: channel
+        ? `${COMMUNITY_ROOT_PATH}/${community.fileMetadata.senderOdinId}/${communityId}/${channel.fileMetadata.appData.uniqueId}/${threadMeta.threadId}/thread`
+        : '',
+    };
+  }, [community, channel]);
+
   if (!channel || !originMessage) return null;
 
   return (
@@ -82,10 +91,7 @@ export const CommunityThreadCatchup = ({
         origin={originMessage}
         setParticipants={setParticipants}
         alignTop={true}
-        maxShowOptions={{
-          count: 10,
-          targetLink: `${COMMUNITY_ROOT_PATH}/${community.fileMetadata.senderOdinId}/${communityId}/${channel.fileMetadata.appData.uniqueId}/${threadMeta.threadId}/thread`,
-        }}
+        maxShowOptions={showOptions}
       />
       <ErrorBoundary>
         {originMessage ? (

packages/apps/community-app/src/components/Community/channel/CommunityHistory.tsx

@@ -321,6 +321,7 @@ export const CommunityHistory = memo(
                       hideThreads={inAThread}
                       className="px-2 py-1 md:px-3"
                       showChannelName={!channel && !inAThread}
+                      originId={origin?.fileMetadata.appData.uniqueId}
                     />
                   </div>
                 );