feat(project): panel 样式完善.

src/components/app.tsx

@@ -1,8 +1,10 @@
 import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
-import { FunctionalComponent, FunctionComponent, h } from 'preact';
+import { Fragment, FunctionalComponent, h } from 'preact';
 import { ProjectPanel } from './projects/project-panel';
 import styles from './app.scss';
 import { OverlayContainer } from './commons/overlay/overlay';
+import { useObserver } from 'mobx-react';
+import { appStore } from '../app.store';
 
 const client = new ApolloClient({
   uri: '/api/graphql',
@@ -20,9 +22,20 @@ const App: FunctionalComponent = () => {
   );
 };
 
-const Content: FunctionComponent = () => {
+const Content = () => {
-  const Board: FunctionComponent = () => <ProjectPanel />;
   return <Board />;
 };
+const Board = () => {
+  return useObserver(() => {
+    return (
+      <Fragment>
+        <aside>
+          <ProjectPanel />
+        </aside>
+        <main>{appStore.main}</main>
+      </Fragment>
+    );
+  });
+};
 
 export default App;

src/components/projects/project-panel.scss

@@ -1,16 +1,17 @@
 .panel {
-  @apply h-full overflow-auto;
+  @apply h-full overflow-auto flex flex-col;
 
   h1 {
     @apply bg-red-400 text-white text-lg text-center p-2;
   }
 }
 .list {
-  @apply bg-red-200;
+  @apply bg-red-200 flex-grow;
 }
 .item {
   @apply block bg-gray-50 text-red-400 py-2 px-4 my-px cursor-pointer transition-colors;
   @apply hover:bg-red-50;
+  min-width: 10em;
 
   h3 {
   }

src/components/projects/project-panel.tsx

@@ -7,7 +7,7 @@ import { appStore } from '../../app.store';
 import { Project } from '../../generated/graphql';
 import { createOverlay } from '../commons/overlay/overlay';
 import { ProjectEditor } from './project-editor';
-import * as styles from './project-panel.scss';
+import styles from './project-panel.scss';
 
 const FIND_PROJECTS = gql`
   query FindProjects {
@@ -52,7 +52,7 @@ export function ProjectPanel() {
   );
 }
 
-const List = forwardRef<ListRef, void>((_, ref) => {
+const List = forwardRef<ListRef>((_, ref) => {
   const { data, refetch } = useQuery<{
     projects: Project[];
   }>(FIND_PROJECTS);