clean code

apps/app/src/components/PageHeader/PageHeader.tsx

@@ -16,13 +16,13 @@ export const PageHeader: FC = () => {
   }
 
   return (
-    <nav className={`${styles['page-header']}`}>
+    <div className={`${styles['page-header']}`}>
       <PagePathHeader
         currentPage={currentPage}
       />
       <PageTitleHeader
         currentPage={currentPage}
       />
-    </nav>
+    </div>
   );
 };

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -19,6 +19,7 @@ export type Props = {
 }
 
 export const PagePathHeader: FC<Props> = (props) => {
+  const { t } = useTranslation();
   const { currentPage } = props;
 
   const currentPagePath = currentPage.path;
@@ -29,11 +30,10 @@ export const PagePathHeader: FC<Props> = (props) => {
   const [editedPagePath, setEditedPagePath] = useState(currentPagePath);
 
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
+  const isOpened = PageSelectModalData?.isOpened ?? false;
 
   const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
-  const { t } = useTranslation();
-
   const onRenameFinish = useCallback(() => {
     setRenameInputShown(false);
   }, []);
@@ -65,8 +65,6 @@ export const PagePathHeader: FC<Props> = (props) => {
     }
   }, [currentPagePath, editedPagePath, isRenameInputShown, onRenameFailure, onRenameFinish, pagePathRenameHandler]);
 
-  const isOpened = PageSelectModalData?.isOpened ?? false;
-
   const clickOutSideHandler = useCallback((e) => {
     const container = document.getElementById('page-path-header');
 
@@ -87,7 +85,7 @@ export const PagePathHeader: FC<Props> = (props) => {
   return (
     <div
       id="page-path-header"
-      className="d-flex align-items-center"
+      className="d-flex"
       onMouseLeave={() => setButtonShown(false)}
       onMouseEnter={() => setButtonShown(true)}
     >

apps/app/src/components/PageHeader/PageTitleHeader.tsx

@@ -15,6 +15,7 @@ import { usePagePathRenameHandler } from './page-header-utils';
 
 
 export const PageTitleHeader: FC<Props> = (props) => {
+  const { t } = useTranslation();
   const { currentPage } = props;
 
   const currentPagePath = currentPage.path;
@@ -26,8 +27,6 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
   const pagePathRenameHandler = usePagePathRenameHandler(currentPage);
 
-  const { t } = useTranslation();
-
   const editedPageTitle = nodePath.basename(editedPagePath);
 
   const onRenameFinish = useCallback(() => {
@@ -68,6 +67,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
             <ClosableTextInput
               useAutosizeInput
               value={editedPageTitle}
+              placeholder={t('Input page name')}
               onPressEnter={onPressEnter}
               onPressEscape={onPressEscape}
               onChange={onInputChange}