feat(Launcher): Add support for "Recent Projects", add initial styles

chore(Deps): Update dependencies

desktop/package.json

@@ -35,23 +35,23 @@
     "@electron-forge/plugin-webpack": "6.0.0-beta.54",
     "@electron-forge/publisher-github": "6.0.0-beta.54",
     "@marshallofsound/webpack-asset-relocator-loader": "0.5.0",
-    "@msgpack/msgpack": "2.6.3",
+    "@msgpack/msgpack": "2.7.0",
     "@stencil/core": "2.5.2",
     "@stencil/postcss": "2.0.0",
     "@stencil/router": "2.0.0-2",
     "@stencil/store": "1.4.1",
-    "@stencila/dev-config": "2.0.11",
+    "@stencila/dev-config": "2.0.12",
     "@types/jest": "26.0.23",
     "@types/puppeteer": "5.4.3",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "4.24.0",
+    "@typescript-eslint/parser": "4.24.0",
     "copy-webpack-plugin": "6.4.1",
     "csp-html-webpack-plugin": "5.1.0",
-    "css-loader": "5.2.4",
-    "electron": "12.0.7",
+    "css-loader": "5.2.5",
+    "electron": "12.0.9",
     "eslint": "7.26.0",
     "eslint-plugin-import": "2.23.2",
-    "fork-ts-checker-webpack-plugin": "6.2.9",
+    "fork-ts-checker-webpack-plugin": "6.2.10",
     "html-insert-tag-webpack-plugin": "0.0.1",
     "jest": "26.6.3",
     "jest-cli": "26.6.3",
@@ -67,12 +67,13 @@
     "typescript": "4.2.4"
   },
   "dependencies": {
-    "@reduxjs/toolkit": "^1.5.1",
+    "@reduxjs/toolkit": "1.5.1",
+    "@stencila/brand": "0.6.10",
     "@stencila/components": "0.31.5",
     "electron-squirrel-startup": "1.0.0",
-    "i18next": "20.2.2",
-    "normalizr": "^3.6.1",
-    "redux-thunk": "^2.3.0",
+    "i18next": "20.2.4",
+    "normalizr": "3.6.1",
+    "redux-thunk": "2.3.0",
     "stencila": "file:../node"
   },
   "config": {

desktop/src/app/window.ts

@@ -12,8 +12,12 @@ export const createWindow = (
   options: Omit<BrowserWindowConstructorOptions, 'webPreferences'> = {}
 ): BrowserWindow => {
   const win = new BrowserWindow({
-    height: 860,
-    width: 1024,
+    height: 430,
+    width: 860,
+    maxHeight: 860,
+    maxWidth: 1200,
+    minHeight: 350,
+    minWidth: 600,
     title: i18n.t('core.title'),
     ...options,
     webPreferences: {

desktop/src/main/project/channels.ts

@@ -1,5 +1,6 @@
 export const PROJECT_CHANNEL = {
   SHOW_PROJECT_WINDOW: 'SHOW_PROJECT_WINDOW',
+  OPEN_PROJECT: 'OPEN_PROJECT',
   SELECT_PROJECT_DIR: 'SELECT_PROJECT_DIR',
   GET_PROJECT_FILES: 'GET_PROJECT_FILES',
   GET_DOCUMENT_CONTENTS: 'GET_DOCUMENT_CONTENTS',

desktop/src/main/project/index.ts

@@ -23,6 +23,13 @@ export const registerProjectHandlers = () => {
     }
   })
 
+  ipcMain.handle(
+    CHANNEL.OPEN_PROJECT,
+    async (_event, directoryPath: string) => {
+      return openProjectWindow(directoryPath)
+    }
+  )
+
   ipcMain.handle(
     CHANNEL.GET_PROJECT_FILES,
     async (_event, directoryPath: string) => {

desktop/src/renderer/components/app-launcher/app-launcher.css

@@ -2,7 +2,58 @@
   @apply text-center;
 }
 
+main {
+  @apply px-4 flex justify-center;
+}
+
+.launcherActions {
+  @apply flex flex-col items-stretch;
+  flex-basis: 30%;
+}
+
+.recentProjects {
+  @apply border-0 border-l border-solid ml-4 text-left  px-4;
+  border-color: var(--color-neutral-300);
+  flex-basis: 70%;
+
+  ul {
+    @apply list-none p-0 m-0;
+  }
+
+  li {
+    @apply overflow-ellipsis overflow-hidden max-w-full -ml-2;
+
+    a {
+      &,
+      &:link,
+      &:visited {
+        @apply block px-2 text-sm whitespace-nowrap rounded no-underline align-bottom leading-none max-w-full overflow-hidden overflow-ellipsis cursor-pointer;
+        color: var(--color-neutral-800);
+        padding-bottom: 0.375rem;
+        padding-top: 0.375rem;
+      }
+
+      &:hover {
+        background: var(--color-neutral-300);
+      }
+
+      stencila-icon {
+        @apply pr-1;
+      }
+    }
+  }
+}
+
+.logo {
+  width: 200px;
+  @apply my-8;
+}
+
 stencila-button {
-  display: block;
   @apply block mb-4;
 }
+
+h2 {
+  @apply mt-0 mb-1 text-sm;
+  color: var(--color-neutral-600);
+}

desktop/src/renderer/components/app-launcher/app-launcher.tsx

@@ -1,38 +1,65 @@
-import { Component, h } from '@stencil/core'
+import { Component, h, State } from '@stencil/core'
+import Logo from '@stencila/brand/dist/logos/stencilaLogo.svg'
 import { CHANNEL } from '../../../preload/index'
+import { fetchRecentProjects } from '../../store/project/projectActions'
 
 @Component({
   tag: 'app-launcher',
   styleUrl: 'app-launcher.css',
   scoped: true,
 })
 export class AppLauncher {
+  @State() recentProjects: string[] = []
+
   private selectFiles = () => {
     window.api.invoke(CHANNEL.SELECT_PROJECT_DIR)
   }
 
+  private openProject = (path: string) => (e: Event) => {
+    e.preventDefault()
+    window.api.invoke(CHANNEL.OPEN_PROJECT, path)
+  }
+
+  componentWillLoad() {
+    this.recentProjects = fetchRecentProjects()
+  }
+
   render() {
     return (
       <div class="app-home">
-        <h1>Stencila</h1>
+        <img src={Logo} class="logo" />
 
         <main>
-          <div>
-            <stencila-button>New document</stencila-button>
-            <stencila-button>New project</stencila-button>
-
-            <hr />
-
-            <stencila-button onClick={this.selectFiles}>
+          <div class="launcherActions">
+            <stencila-button size="small" fill={true} onClick={this.selectFiles}>
               Open folder…
             </stencila-button>
-          </div>
 
-          <hr />
+            <stencila-button size="small" fill={true} disabled={true}>
+              New document
+            </stencila-button>
 
-          <h2>Recent projects</h2>
+            <stencila-button size="small" fill={true} disabled={true}>
+              New project
+            </stencila-button>
+          </div>
 
-          <hr />
+          <div class="recentProjects">
+            <h2>Recent projects</h2>
+            <ul>
+              {this.recentProjects.map((projectPath) => (
+                <li>
+                  <a
+                    onClick={this.openProject(projectPath)}
+                    class="recentProjectItem"
+                  >
+                    <stencila-icon icon="folder"></stencila-icon>
+                    {projectPath}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
         </main>
       </div>
     )

desktop/src/renderer/store/project/projectActions.ts

@@ -4,11 +4,40 @@ import { CHANNEL } from '../../../preload'
 import { projectEntity } from './entities'
 import { ProjectStoreEntities } from './projectStore'
 
+const StoreKeys = {
+  recentProjects: 'recentProjects',
+}
+
+export const fetchRecentProjects = (): string[] => {
+  const paths = window.localStorage.getItem(StoreKeys.recentProjects) ?? '[]'
+  try {
+    const parsedPaths = JSON.parse(paths)
+    if (Array.isArray(parsedPaths)) {
+      return parsedPaths.slice(0, 9)
+    } else {
+      return []
+    }
+  } catch {
+    return []
+  }
+}
+
+const saveRecentProjects = (path: string) => {
+  const existingPaths = fetchRecentProjects()
+  const dedupedPaths = new Set([...existingPaths, path])
+  window.localStorage.setItem(
+    StoreKeys.recentProjects,
+    JSON.stringify([...dedupedPaths])
+  )
+}
+
 export const fetchProject = createAsyncThunk(
   'projects/fetchProject',
   async (path: string) => {
     const data = await window.api.invoke(CHANNEL.GET_PROJECT_FILES, path)
 
+    saveRecentProjects(path)
+
     const normalized = normalize<any, ProjectStoreEntities>(data, projectEntity)
 
     return normalized