✨(frontend) hide search and create doc button if not logged

- Added visibility checks for 'search' and 'New doc' buttons in the
document visibility tests.
- Updated LeftPanelHeader to conditionally render 'search' and 'New doc'
buttons based on user authentication status, improving user experience
and access control.

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to
 ## Fixed
 
 - 🐛(backend) fix create document via s2s if sub unknown but email found #543
+- 🐛(frontend) hide search and create doc button if not authenticated #555
 
 ## [1.10.0] - 2024-12-17
 

src/frontend/apps/e2e/__tests__/app-impress/doc-visibility.spec.ts

@@ -232,6 +232,9 @@ test.describe('Doc Visibility: Public', () => {
       cardContainer.getByText('Public document', { exact: true }),
     ).toBeVisible();
 
+    await expect(page.getByRole('button', { name: 'search' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'New doc' })).toBeVisible();
+
     const urlDoc = page.url();
 
     await page
@@ -245,6 +248,8 @@ test.describe('Doc Visibility: Public', () => {
     await page.goto(urlDoc);
 
     await expect(page.locator('h2').getByText(docTitle)).toBeVisible();
+    await expect(page.getByRole('button', { name: 'search' })).toBeHidden();
+    await expect(page.getByRole('button', { name: 'New doc' })).toBeHidden();
     await expect(page.getByRole('button', { name: 'Share' })).toBeHidden();
     const card = page.getByLabel('It is the card information');
     await expect(card).toBeVisible();

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGrid.tsx

@@ -89,7 +89,7 @@ export const DocsGrid = ({
           {title}
         </Text>
 
-        {!hasDocs && (
+        {!hasDocs && !loading && (
           <Box $padding={{ vertical: 'sm' }} $align="center" $justify="center">
             <Text $size="sm" $variation="600" $weight="700">
               {t('No documents found')}

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelHeader.tsx

@@ -4,6 +4,7 @@ import { useRouter } from 'next/navigation';
 import { PropsWithChildren } from 'react';
 
 import { Box, Icon, SeparatedSection } from '@/components';
+import { useAuthStore } from '@/core';
 import { useCreateDoc } from '@/features/docs/doc-management';
 import { DocSearchModal } from '@/features/docs/doc-search';
 import { useCmdK } from '@/hook/useCmdK';
@@ -13,6 +14,7 @@ import { useLeftPanelStore } from '../stores';
 export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
   const router = useRouter();
   const searchModal = useModal();
+  const auth = useAuthStore();
   useCmdK(searchModal.open);
   const { togglePanel } = useLeftPanelStore();
 
@@ -52,16 +54,20 @@ export const LeftPanelHeader = ({ children }: PropsWithChildren) => {
                   <Icon $variation="800" $theme="primary" iconName="house" />
                 }
               />
-              <Button
+              {auth.authenticated && (
-                onClick={searchModal.open}
+                <Button
-                size="medium"
+                  onClick={searchModal.open}
-                color="tertiary-text"
+                  size="medium"
-                icon={
+                  color="tertiary-text"
-                  <Icon $variation="800" $theme="primary" iconName="search" />
+                  icon={
-                }
+                    <Icon $variation="800" $theme="primary" iconName="search" />
-              />
+                  }
+                />
+              )}
             </Box>
-            <Button onClick={createNewDoc}>{t('New doc')}</Button>
+            {auth.authenticated && (
+              <Button onClick={createNewDoc}>{t('New doc')}</Button>
+            )}
           </Box>
         </SeparatedSection>
         {children}