fix(cells): minor glitches (#19170)

* feat(CellsNewMenu): remove file option from new item dropdown

* feat(PDFViewer): open sidebar by default

* feat(CellsNewNodeForm): add inputFocusEnabled prop for auto-focusing input field

* feat(CellsMoveNodeModal): prevent moving folder to its own

* refactor(CellsNewItemModal, CellsMoveNodeModal, CellsNewNodeForm): replace inputFocusEnabled prop with isOpen for input auto-focusing

Author: olafsulich

src/script/components/Conversation/ConversationCells/CellsHeader/CellsNewMenu/CellsNewItemModal/CellsNewItemModal.tsx

@@ -66,7 +66,14 @@ export const CellsNewItemModal = ({
       <p css={descriptionStyles}>
         {t(isFolder ? 'cells.newItemMenuModal.descriptionFolder' : 'cells.newItemMenuModal.descriptionFile')}
       </p>
-      <CellsNewNodeForm type={type} onSubmit={handleSubmit} inputValue={name} onChange={handleChange} error={error} />
+      <CellsNewNodeForm
+        type={type}
+        onSubmit={handleSubmit}
+        inputValue={name}
+        onChange={handleChange}
+        error={error}
+        isOpen={isOpen}
+      />
       <CellsModal.Actions>
         <CellsModal.SecondaryButton onClick={onClose}>
           {t('cells.newItemMenuModal.secondaryAction')}

src/script/components/Conversation/ConversationCells/CellsHeader/CellsNewMenu/CellsNewMenu.tsx

@@ -57,7 +57,6 @@ export const CellsNewMenu = ({cellsRepository, conversationQualifiedId, onRefres
           </Button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content>
-          <DropdownMenu.Item onClick={() => openModal('file')}>{t('cells.newItemMenu.file')}</DropdownMenu.Item>
           <DropdownMenu.Item onClick={() => openModal('folder')}>{t('cells.newItemMenu.folder')}</DropdownMenu.Item>
         </DropdownMenu.Content>
       </DropdownMenu>

src/script/components/Conversation/ConversationCells/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsMoveNodeModal/CellsFoldersListModalContent/CellsCreateNewFolderHint/CellsCreateNewFolderHint.styles.ts

@@ -34,19 +34,7 @@ export const textStyles: CSSObject = {
 };
 
 export const buttonStyles: CSSObject = {
-  background: 'none',
-  border: 'none',
-  padding: '0 8px',
-  cursor: 'pointer',
-  fontSize: 'var(--font-size-medium)',
-  color: 'var(--gray-70)',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-
-  '&:hover': {
-    color: 'var(--main-color)',
-  },
+  margin: '0',
 };
 
 export const activeItemStyles: CSSObject = {

src/script/components/Conversation/ConversationCells/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsMoveNodeModal/CellsFoldersListModalContent/CellsCreateNewFolderHint/CellsCreateNewFolderHint.tsx

@@ -21,7 +21,7 @@ import {Button, ButtonVariant, PlusIcon} from '@wireapp/react-ui-kit';
 
 import {t} from 'Util/LocalizerUtil';
 
-import {iconStyles, textStyles, wrapperStyles, buttonStyles} from './CellsCreateNewFolderHint.styles';
+import {buttonStyles, iconStyles, textStyles, wrapperStyles} from './CellsCreateNewFolderHint.styles';
 
 interface CellsCreateNewFolderHintProps {
   onCreate: () => void;

src/script/components/Conversation/ConversationCells/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsMoveNodeModal/CellsMoveNodeModal.tsx

@@ -54,6 +54,7 @@ export const CellsMoveNodeModal = ({
   const [activeModalContent, setActiveModalContent] = useState<'move' | 'create'>('move');
 
   const {folders, refresh, status, shouldShowLoadingSpinner} = useGetCellsFolders({
+    nodeToMove,
     cellsRepository,
     conversationQualifiedId,
     currentPath,
@@ -134,6 +135,7 @@ export const CellsMoveNodeModal = ({
             inputValue={name}
             onChange={handleChange}
             error={error}
+            isOpen={isOpen}
           />
           <CellsModal.Actions>
             <CellsModal.SecondaryButton onClick={() => setActiveModalContent('move')}>

src/script/components/Conversation/ConversationCells/CellsTable/CellsTableColumns/CellsTableRowOptions/CellsMoveNodeModal/useGetCellsFolders/useGetCellsFolders.ts

@@ -21,13 +21,15 @@ import {useCallback, useEffect, useState} from 'react';
 
 import {QualifiedId} from '@wireapp/api-client/lib/user/';
 
+import {CellNode} from 'Components/Conversation/ConversationCells/common/cellNode/cellNode';
 import {getCellsApiPath} from 'Components/Conversation/ConversationCells/common/getCellsApiPath/getCellsApiPath';
 import {CellsRepository} from 'src/script/cells/CellsRepository';
 
 import {transformNodesToCellsFolders} from './transformNodesToCellsFolders';
 
 interface UseGetCellsFoldersProps {
   currentPath: string;
+  nodeToMove: CellNode;
   cellsRepository: CellsRepository;
   conversationQualifiedId: QualifiedId;
 
@@ -44,6 +46,7 @@ interface Folder {
 const SHOW_LOADING_SPINNER_DELAY_MS = 1000;
 
 export const useGetCellsFolders = ({
+  nodeToMove,
   cellsRepository,
   conversationQualifiedId,
   currentPath,
@@ -73,7 +76,9 @@ export const useGetCellsFolders = ({
       }
 
       const transformedFolders = transformNodesToCellsFolders(result.Nodes);
-      setFolders(transformedFolders);
+      const filteredFolders = transformedFolders.filter(folder => folder.path !== nodeToMove.path);
+
+      setFolders(filteredFolders);
       setStatus('success');
     } catch (error) {
       setFolders([]);
@@ -82,7 +87,7 @@ export const useGetCellsFolders = ({
     }
     // cellsRepository is not a dependency because it's a singleton
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setFolders, setStatus, conversationQualifiedId, enabled, currentPath]);
+  }, [setFolders, setStatus, conversationQualifiedId, enabled, currentPath, nodeToMove]);
 
   useEffect(() => {
     void fetchFolders();

src/script/components/Conversation/ConversationCells/common/CellsNewNodeForm/CellsNewNodeForm.tsx

@@ -17,7 +17,7 @@
  *
  */
 
-import {ChangeEvent, FormEvent, useEffect, useRef} from 'react';
+import {ChangeEvent, FormEvent} from 'react';
 
 import {ErrorMessage, Input, Label} from '@wireapp/react-ui-kit';
 
@@ -26,21 +26,19 @@ import {t} from 'Util/LocalizerUtil';
 import {inputWrapperStyles} from './CellsNewNodeForm.styles';
 
 import {CellNode} from '../cellNode/cellNode';
+import {useInputAutoFocus} from '../useInputAutoFocus/useInputAutoFocus';
 
 interface CellsNewNodeFormProps {
   type: CellNode['type'];
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   inputValue: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   error: string | null;
+  isOpen: boolean;
 }
 
-export const CellsNewNodeForm = ({type, onSubmit, inputValue, onChange, error}: CellsNewNodeFormProps) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
+export const CellsNewNodeForm = ({type, onSubmit, inputValue, onChange, error, isOpen}: CellsNewNodeFormProps) => {
+  const {inputRef} = useInputAutoFocus({enabled: isOpen});
 
   return (
     <form onSubmit={onSubmit}>

src/script/components/Conversation/ConversationCells/common/useInputAutoFocus/useInputAutoFocus.ts

@@ -19,7 +19,7 @@
 
 import {useEffect, useRef} from 'react';
 
-export const useInputAutoFocus = ({enabled}: {enabled: boolean}) => {
+export const useInputAutoFocus = ({enabled = true, delayMs = 1}: {enabled?: boolean; delayMs?: number}) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -30,12 +30,12 @@ export const useInputAutoFocus = ({enabled}: {enabled: boolean}) => {
     // Ensure the input is fully rendered
     const timeoutId = setTimeout(() => {
       inputRef.current?.focus();
-    });
+    }, delayMs);
 
     return () => {
       clearTimeout(timeoutId);
     };
-  }, [enabled]);
+  }, [enabled, delayMs]);
 
   return {
     inputRef,

src/script/components/FileFullscreenModal/PdfViewer/PdfViewer.tsx

@@ -35,7 +35,7 @@ interface PDFViewerProps {
 
 export const PDFViewer = ({src}: PDFViewerProps) => {
   const [pagesCount, setPagesCount] = useState(0);
-  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
 
   const {scale, zoomIn, zoomOut} = useZoomControls();