chore: board title and show icons on design page

frontend/appflowy_tauri/src/appflowy_app/components/TestColors/TestColors.tsx

@@ -1,6 +1,166 @@
+import AddSvg from '$app/components/_shared/svg/AddSvg';
+import { ChecklistTypeSvg } from '$app/components/_shared/svg/ChecklistTypeSvg';
+import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
+import { ArrowLeftSvg } from '$app/components/_shared/svg/ArrowLeftSvg';
+import { ArrowRightSvg } from '$app/components/_shared/svg/ArrowRightSvg';
+import { BoardSvg } from '$app/components/_shared/svg/BoardSvg';
+import { CheckboxSvg } from '$app/components/_shared/svg/CheckboxSvg';
+import { ClockSvg } from '$app/components/_shared/svg/ClockSvg';
+import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
+import { CopySvg } from '$app/components/_shared/svg/CopySvg';
+import { DateTypeSvg } from '$app/components/_shared/svg/DateTypeSvg';
+import { Details2Svg } from '$app/components/_shared/svg/Details2Svg';
+import { DocumentSvg } from '$app/components/_shared/svg/DocumentSvg';
+import { DropDownShowSvg } from '$app/components/_shared/svg/DropDownShowSvg';
+import { EarthSvg } from '$app/components/_shared/svg/EarthSvg';
+import { EditorCheckSvg } from '$app/components/_shared/svg/EditorCheckSvg';
+import { EditorUncheckSvg } from '$app/components/_shared/svg/EditorUncheckSvg';
+import { EditSvg } from '$app/components/_shared/svg/EditSvg';
+import { EyeClosedSvg } from '$app/components/_shared/svg/EyeClosedSvg';
+import { EyeOpenSvg } from '$app/components/_shared/svg/EyeOpenSvg';
+import { FilterSvg } from '$app/components/_shared/svg/FilterSvg';
+import { GridSvg } from '$app/components/_shared/svg/GridSvg';
+import { HideMenuSvg } from '$app/components/_shared/svg/HideMenuSvg';
+import { InformationSvg } from '$app/components/_shared/svg/InformationSvg';
+import { LogoutSvg } from '$app/components/_shared/svg/LogoutSvg';
+import { MoreSvg } from '$app/components/_shared/svg/MoreSvg';
+import { MultiSelectTypeSvg } from '$app/components/_shared/svg/MultiSelectTypeSvg';
+import { NumberTypeSvg } from '$app/components/_shared/svg/NumberTypeSvg';
+import { PropertiesSvg } from '$app/components/_shared/svg/PropertiesSvg';
+import { SearchSvg } from '$app/components/_shared/svg/SearchSvg';
+import { ShowMenuSvg } from '$app/components/_shared/svg/ShowMenuSvg';
+import { SingleSelectTypeSvg } from '$app/components/_shared/svg/SingleSelectTypeSvg';
+import { SkipLeftSvg } from '$app/components/_shared/svg/SkipLeftSvg';
+import { SkipRightSvg } from '$app/components/_shared/svg/SkipRightSvg';
+import { SortSharp } from '@mui/icons-material';
+import { SortSvg } from '$app/components/_shared/svg/SortSvg';
+import { TextTypeSvg } from '$app/components/_shared/svg/TextTypeSvg';
+import { TrashSvg } from '$app/components/_shared/svg/TrashSvg';
+import { UrlTypeSvg } from '$app/components/_shared/svg/UrlTypeSvg';
+
 export const TestColors = () => {
   return (
-    <div>
+    <div className={'p-8'}>
+      <h1 className={'mb-4 text-2xl'}>Icons</h1>
+      <div className={'mb-8'}>
+        <div className={'flex flex-wrap items-center gap-4'}>
+          <i className={'h-5 w-5'}>
+            <AddSvg></AddSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <ArrowLeftSvg></ArrowLeftSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <ArrowRightSvg></ArrowRightSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <BoardSvg></BoardSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <CheckboxSvg></CheckboxSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <ChecklistTypeSvg></ChecklistTypeSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <CheckmarkSvg></CheckmarkSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <ClockSvg></ClockSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <CloseSvg></CloseSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <CopySvg></CopySvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <DateTypeSvg></DateTypeSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <Details2Svg></Details2Svg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <DocumentSvg></DocumentSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <DropDownShowSvg></DropDownShowSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <EarthSvg></EarthSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <EditorCheckSvg></EditorCheckSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <EditorUncheckSvg></EditorUncheckSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <EditSvg></EditSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <EyeClosedSvg></EyeClosedSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <EyeOpenSvg></EyeOpenSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <FilterSvg></FilterSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <GridSvg></GridSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <HideMenuSvg></HideMenuSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <InformationSvg></InformationSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <LogoutSvg></LogoutSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <MoreSvg></MoreSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <MultiSelectTypeSvg></MultiSelectTypeSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <NumberTypeSvg></NumberTypeSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <PropertiesSvg></PropertiesSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <SearchSvg></SearchSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <ShowMenuSvg></ShowMenuSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <SingleSelectTypeSvg></SingleSelectTypeSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <SkipLeftSvg></SkipLeftSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <SkipRightSvg></SkipRightSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <SortSvg></SortSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <TextTypeSvg></TextTypeSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <TrashSvg></TrashSvg>
+          </i>
+          <i className={'h-5 w-5'}>
+            <UrlTypeSvg></UrlTypeSvg>
+          </i>
+        </div>
+      </div>
+      <h1 className={'mb-4 text-2xl'}>Colors</h1>
       <h2 className={'mb-4'}>Main</h2>
       <div className={'mb-8 flex flex-wrap items-center'}>
         <div className={'m-2 h-[100px] w-[100px] bg-main-accent'}></div>

frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeClosedSvg.tsx

@@ -1,4 +1,4 @@
-export const EyeClosed = () => {
+export const EyeClosedSvg = () => {
   return (
     <svg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path

frontend/appflowy_tauri/src/appflowy_app/components/_shared/svg/EyeOpenSvg.tsx

@@ -1,4 +1,4 @@
-export const EyeOpened = () => {
+export const EyeOpenSvg = () => {
   return (
     <svg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path

frontend/appflowy_tauri/src/appflowy_app/components/auth/Login/Login.tsx

@@ -1,6 +1,6 @@
 import { AppflowyLogo } from '../../_shared/svg/AppflowyLogo';
-import { EyeClosed } from '../../_shared/svg/EyeClosedSvg';
+import { EyeClosedSvg } from '../../_shared/svg/EyeClosedSvg';
-import { EyeOpened } from '../../_shared/svg/EyeOpenSvg';
+import { EyeOpenSvg } from '../../_shared/svg/EyeOpenSvg';
 import { useLogin } from './Login.hooks';
 import { Link } from 'react-router-dom';
 import { Button } from '../../_shared/Button';
@@ -55,7 +55,7 @@ export const Login = () => {
                 className='absolute right-0 top-0 flex h-full w-12 items-center justify-center '
                 onClick={onTogglePassword}
               >
-                <span className='h-6 w-6'>{showPassword ? <EyeClosed /> : <EyeOpened />}</span>
+                <span className='h-6 w-6'>{showPassword ? <EyeClosedSvg /> : <EyeOpenSvg />}</span>
               </button>
             </div>
 

frontend/appflowy_tauri/src/appflowy_app/components/auth/SignUp/SignUp.tsx

@@ -1,6 +1,6 @@
 import { AppflowyLogo } from '../../_shared/svg/AppflowyLogo';
-import { EyeClosed } from '../../_shared/svg/EyeClosedSvg';
+import { EyeClosedSvg } from '../../_shared/svg/EyeClosedSvg';
-import { EyeOpened } from '../../_shared/svg/EyeOpenSvg';
+import { EyeOpenSvg } from '../../_shared/svg/EyeOpenSvg';
 
 import { useSignUp } from './SignUp.hooks';
 import { Link } from 'react-router-dom';
@@ -71,7 +71,7 @@ export const SignUp = () => {
               onClick={onTogglePassword}
               type='button'
             >
-              <span className='h-6 w-6'>{showPassword ? <EyeClosed /> : <EyeOpened />}</span>
+              <span className='h-6 w-6'>{showPassword ? <EyeClosedSvg /> : <EyeOpenSvg />}</span>
             </button>
           </div>
 
@@ -89,7 +89,7 @@ export const SignUp = () => {
               onClick={onToggleConfirmPassword}
               type='button'
             >
-              <span className='h-6 w-6'>{showConfirmPassword ? <EyeClosed /> : <EyeOpened />}</span>
+              <span className='h-6 w-6'>{showConfirmPassword ? <EyeClosedSvg /> : <EyeOpenSvg />}</span>
             </button>
           </div>
         </div>

frontend/appflowy_tauri/src/appflowy_app/components/board/Board.tsx

@@ -9,7 +9,7 @@ import { useState } from 'react';
 import { RowInfo } from '$app/stores/effects/database/row/row_cache';
 import { EditRow } from '$app/components/_shared/EditRow/EditRow';
 
-export const Board = ({ viewId }: { viewId: string }) => {
+export const Board = ({ viewId, title }: { viewId: string; title: string }) => {
   const { controller, rows, groups, groupByFieldId, onNewRowClick, onDragEnd } = useDatabase(viewId, ViewLayoutPB.Board);
   const [showBoardRow, setShowBoardRow] = useState(false);
   const [boardRowInfo, setBoardRowInfo] = useState<RowInfo>();
@@ -23,7 +23,7 @@ export const Board = ({ viewId }: { viewId: string }) => {
     <>
       <div className='flex w-full items-center justify-between'>
         <div className={'flex items-center text-xl font-semibold'}>
-          <div>{'Kanban'}</div>
+          <div>{title}</div>
           <button className={'ml-2 h-5 w-5'}>
             <SettingsSvg></SettingsSvg>
           </button>

frontend/appflowy_tauri/src/appflowy_app/views/BoardPage.tsx

@@ -1,22 +1,24 @@
 import { useParams } from 'react-router-dom';
 import { useEffect, useState } from 'react';
 import { Board } from '../components/board/Board';
+import { useAppSelector } from '$app/stores/store';
 
 export const BoardPage = () => {
   const params = useParams();
   const [viewId, setViewId] = useState('');
+  const pagesStore = useAppSelector((state) => state.pages);
+  const [title, setTitle] = useState('');
 
   useEffect(() => {
     if (params?.id?.length) {
       setViewId(params.id);
-      // setDatabaseId('testDb');
+      setTitle(pagesStore.find((page) => page.id === params.id)?.title || '');
     }
-  }, [params]);
+  }, [params, pagesStore]);
 
   return (
     <div className='flex h-full flex-col gap-8 px-8 pt-8'>
-      <h1 className='text-4xl font-bold'>Board: {viewId}</h1>
+      {viewId?.length && <Board viewId={viewId} title={title} />}
-      {viewId?.length && <Board viewId={viewId} />}
     </div>
   );
 };