redesign based on review

src/components/Chat/PublishAttachment.tsx

@@ -43,7 +43,7 @@ import DownloadRenderer from '../Files/Download';
 interface Props {
   file: DialFile;
   isRenaming: boolean;
-  onRename: (file: DialFile, newName: string, cancel?: boolean) => void;
+  onRename: (newName: string, cancel?: boolean) => void;
   onStartRename: (file: DialFile) => void;
 }
 
@@ -87,7 +87,7 @@ export const PublishAttachment = ({
   const handleCancel: MouseEventHandler<HTMLButtonElement> = useCallback(
     (e) => {
       e.stopPropagation();
-      onRename(file, file.name, true);
+      onRename(file.name, true);
       setName(getFileNameWithoutExtension(file.name));
     },
     [file, onRename],
@@ -98,18 +98,18 @@ export const PublishAttachment = ({
       e.stopPropagation();
       if (e.key === 'Enter') {
         e.preventDefault();
-        onRename(file, fileName);
+        onRename(fileName);
       }
     },
-    [file, fileName, onRename],
+    [fileName, onRename],
   );
 
   const handleConfirm: MouseEventHandler<HTMLButtonElement> = useCallback(
     (e) => {
       e.stopPropagation();
-      onRename(file, fileName);
+      onRename(fileName);
     },
-    [file, fileName, onRename],
+    [fileName, onRename],
   );
 
   const menuItems: DisplayMenuItemProps[] = useMemo(
@@ -150,8 +150,8 @@ export const PublishAttachment = ({
   return (
     <div
       className={classNames(
-        'group relative flex w-full max-w-full items-center rounded p-2 hover:bg-accent-primary-alpha',
-        !isRenaming ? 'hover:pr-6' : 'bg-accent-primary-alpha',
+        'group relative flex h-[56px] w-full max-w-full items-center rounded px-3 py-2 hover:bg-accent-primary-alpha',
+        !isRenaming ? 'hover:pr-10' : 'bg-accent-primary-alpha',
       )}
       onContextMenu={handleContextMenuOpen}
     >
@@ -210,7 +210,7 @@ export const PublishAttachment = ({
         <div
           ref={refs.setFloating}
           {...getFloatingProps()}
-          className="invisible absolute right-1 group-hover:visible"
+          className="invisible absolute right-4 h-[18px] group-hover:visible"
         >
           <ContextMenu
             menuItems={menuItems}

src/components/Chat/PublishModal.tsx

@@ -109,26 +109,32 @@ export default function PublishModal({
   }, []);
 
   const handleFileRename = useCallback(
-    (file: DialFile, name: string) => {
-      const error = validatePublishingFileRenaming(files, name, file);
+    (name: string, cancel?: boolean) => {
+      if (cancel || !renamingFile) {
+        setErrorMessage('');
+        setRenamingFile(undefined);
+        return;
+      }
+
+      const error = validatePublishingFileRenaming(files, name, renamingFile);
       if (error) {
         setErrorMessage(t(error) as string);
         return;
       } else setErrorMessage('');
 
       const nameMap = newFileNames.current;
-      let oldPath = constructPath(file.relativePath, file.name);
-      const newPath = constructPath(file.relativePath, name);
+      let oldPath = constructPath(renamingFile.relativePath, renamingFile.name);
+      const newPath = constructPath(renamingFile.relativePath, name);
       if (nameMap.has(oldPath)) {
         const originalPath = nameMap.get(oldPath);
         nameMap.delete(oldPath);
         oldPath = originalPath;
       }
       newFileNames.current.set(newPath, oldPath);
-      file.name = name;
+      renamingFile.name = name;
       setRenamingFile(undefined);
     },
-    [files, t],
+    [files, renamingFile, t],
   );
 
   const handleFolderChange = useCallback(() => {
@@ -182,7 +188,7 @@ export default function PublishModal({
     setSubmitted(true);
   }, []);
 
-  const inputClassName = classNames('input-form py-2', 'peer', {
+  const inputClassName = classNames('input-form mx-0 py-2', 'peer', {
     'input-invalid submitted': submitted,
   });
 
@@ -206,7 +212,7 @@ export default function PublishModal({
         </h4>
         <div className="flex min-h-0 grow flex-col divide-y divide-tertiary overflow-y-auto md:flex-row md:divide-x md:divide-y-0">
           <div className="flex w-full shrink grow flex-col divide-y divide-tertiary md:max-w-[550px] md:overflow-y-auto">
-            <section className="flex flex-col gap-3 p-4">
+            <section className="flex flex-col gap-3 px-5 py-4">
               <h2>{t('General Info')}</h2>
               <p className="text-secondary">
                 {t(
@@ -246,7 +252,7 @@ export default function PublishModal({
                   <span className="ml-1 inline text-accent-primary">*</span>
                 </label>
                 <button
-                  className="input-form flex grow items-center justify-between rounded border border-primary bg-transparent px-3 py-2 placeholder:text-secondary hover:border-accent-primary focus:border-accent-primary focus:outline-none"
+                  className="input-form mx-0 flex grow items-center justify-between rounded border border-primary bg-transparent px-3 py-2 placeholder:text-secondary hover:border-accent-primary focus:border-accent-primary focus:outline-none"
                   onClick={handleFolderChange}
                 >
                   <span className="truncate">
@@ -290,7 +296,7 @@ export default function PublishModal({
               </div>
             </section>
 
-            <section className="flex flex-col p-4">
+            <section className="flex flex-col px-5 py-4">
               <h2>{t('Target Audience Filters')}</h2>
 
               {[
@@ -315,7 +321,7 @@ export default function PublishModal({
           </div>
           {(type === SharingType.Conversation ||
             type === SharingType.ConversationFolder) && (
-            <div className="flex w-full flex-col gap-[2px] p-4 md:max-w-[550px]">
+            <div className="flex w-full flex-col gap-[2px] px-5 py-4 md:max-w-[550px]">
               <h2 className="mb-2">
                 {t(`Files contained in the ${getPrefix(entity).toLowerCase()}`)}
               </h2>

src/store/conversations/conversations.selectors.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
+import { constructPath } from '@/src/utils/app/file';
 import {
   getChildAndCurrentFoldersIdsById,
   getConversationAttachmentWithPath,
@@ -17,6 +18,7 @@ import { isEntityExternal } from '@/src/utils/app/share';
 
 import { Conversation, Role } from '@/src/types/chat';
 import { EntityType } from '@/src/types/common';
+import { DialFile } from '@/src/types/files';
 import { EntityFilters, SearchFilters } from '@/src/types/search';
 
 import { RootState } from '../index';
@@ -456,13 +458,23 @@ export const selectNewAddedFolderId = createSelector(
   },
 );
 
+const getUniqueAttachments = (attachments: DialFile[]): DialFile[] => {
+  const map = new Map<string, DialFile>();
+  attachments.forEach((file) =>
+    map.set(constructPath(file.relativePath, file.name), file),
+  );
+  return Array.from(map.values());
+};
+
 export const getAttachments = createSelector(
   [(state) => state, (_state: RootState, entityId: string) => entityId],
   (state, entityId) => {
     const folders = selectFolders(state);
     const conversation = selectConversation(state, entityId);
     if (conversation) {
-      return getConversationAttachmentWithPath(conversation, folders);
+      return getUniqueAttachments(
+        getConversationAttachmentWithPath(conversation, folders),
+      );
     } else {
       const folderIds = new Set(
         getChildAndCurrentFoldersIdsById(entityId, folders),
@@ -474,8 +486,10 @@ export const getAttachments = createSelector(
         (conv) => conv.folderId && folderIds.has(conv.folderId),
       );
 
-      return conversations.flatMap((conv) =>
-        getConversationAttachmentWithPath(conv, folders),
+      return getUniqueAttachments(
+        conversations.flatMap((conv) =>
+          getConversationAttachmentWithPath(conv, folders),
+        ),
       );
     }
   },

src/utils/app/file.ts

@@ -199,7 +199,7 @@ export const validatePublishingFileRenaming = (
     (file) =>
       file.name === newName.trim() &&
       file !== renamingFile &&
-      file.relativePath === renamingFile?.relativePath,
+      file.relativePath === renamingFile.relativePath,
   );
 
   if (fileWithSameName) {