From 93946e49239b12c139bcf462eb95d9182cdf98c2 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli@live.cn>
Date: Sat, 13 Feb 2021 20:40:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20panel=20=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/app.tsx                     | 19 ++++++++++++++++---
 src/components/projects/project-panel.scss |  5 +++--
 src/components/projects/project-panel.tsx  |  4 ++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/app.tsx b/src/components/app.tsx
index d8b130b..cab5c69 100644
--- a/src/components/app.tsx
+++ b/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 Board: FunctionComponent = () => <ProjectPanel />;
+const Content = () => {
   return <Board />;
 };
+const Board = () => {
+  return useObserver(() => {
+    return (
+      <Fragment>
+        <aside>
+          <ProjectPanel />
+        </aside>
+        <main>{appStore.main}</main>
+      </Fragment>
+    );
+  });
+};
 
 export default App;
diff --git a/src/components/projects/project-panel.scss b/src/components/projects/project-panel.scss
index 7ddd8f8..84e337e 100644
--- a/src/components/projects/project-panel.scss
+++ b/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 {
   }
diff --git a/src/components/projects/project-panel.tsx b/src/components/projects/project-panel.tsx
index 604d19a..02ccbcb 100644
--- a/src/components/projects/project-panel.tsx
+++ b/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);