feat: support a new Welcome page

src/extensions/theme-defaults/themes/dark_defaults.json

@@ -36,6 +36,7 @@
         "minimapSlider.activeBackground": "#bfbfbf66",
         "minimapSlider.background": "#79797980",
         "minimapSlider.hoverBackground": "#64646480",
+        "molecule.welcomeBackground": "#393939",
         "panelTitle.activeForeground": "#E7E7E7",
         "panelTitle.inactiveForeground": "#e7e7e799",
         "problemsErrorIcon.foreground": "#F48771",

src/extensions/theme-defaults/themes/light_defaults.json

@@ -33,6 +33,7 @@
         "minimapSlider.activeBackground": "#00000099",
         "minimapSlider.background": "#64646480",
         "minimapSlider.hoverBackground": "#64646480",
+        "molecule.welcomeBackground": "#fff",
         "panelTitle.activeForeground": "#424242",
         "panelTitle.inactiveForeground": "#424242bf",
         "problemsErrorIcon.foreground": "#E51400",

src/workbench/__tests__/__snapshots__/workbench.test.tsx.snap

@@ -75,9 +75,47 @@ exports[`Test Workbench Component Match The WorkbenchView snapshot 1`] = `
                   <div
                     class="mo-welcome"
                   >
-                    <h1>
-                      Molecule.
+                    <span
+                      style="font-size: 0px;"
+                    >
+                      <svg
+                        class="logo"
+                        height="1em"
+                        viewBox="0 0 120 120"
+                        width="1em"
+                      >
+                        <g
+                          fill="none"
+                          fill-rule="evenodd"
+                          opacity="0.48"
+                          stroke="none"
+                          stroke-width="1"
+                        >
+                          <g
+                            fill="#A2A2A2"
+                            transform="translate(-660 -152)"
+                          >
+                            <g
+                              transform="translate(660 152)"
+                            >
+                              <path
+                                d="M59.3 96.335c4.87 0 8.817 3.954 8.817 8.832S64.169 114 59.3 114c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm-22.444-6.826a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 72.245c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 85.956 8 81.078s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zm-65.327-6.022a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 48.156c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 61.867 8 56.989s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zM80.942 35.31c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.832 8.817-8.832zm-43.284 0c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm64.525-11.242c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.948 8.832-8.817 8.832-4.87 0-8.817-3.954-8.817-8.832 0-4.879 3.947-8.833 8.817-8.833zm-85.366 0c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.947 8.832-8.817 8.832S8 37.778 8 32.9c0-4.879 3.948-8.833 8.817-8.833zm42.483 5.62a3.21 3.21 0 013.206 3.213 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212 3.21 3.21 0 013.207-3.212zm-19.238-13.65a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm38.475 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 6a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212A3.21 3.21 0 0159.3 6z"
+                              />
+                            </g>
+                          </g>
+                        </g>
+                      </svg>
+                    </span>
+                    <h1
+                      class="title"
+                    >
+                      Molecule
                     </h1>
+                    <div
+                      class="keybindings"
+                    >
+                      <ul />
+                    </div>
                   </div>
                 </div>
               </div>

src/workbench/editor/__tests__/__snapshots__/editor.test.tsx.snap

@@ -163,9 +163,51 @@ exports[`The Editor Component Match the welcome snapshot 1`] = `
   <div
     className="mo-welcome"
   >
-    <h1>
-      Molecule.
+    <span
+      style={
+        Object {
+          "fontSize": 0,
+        }
+      }
+    >
+      <svg
+        className="logo"
+        height="1em"
+        viewBox="0 0 120 120"
+        width="1em"
+      >
+        <g
+          fill="none"
+          fillRule="evenodd"
+          opacity="0.48"
+          stroke="none"
+          strokeWidth="1"
+        >
+          <g
+            fill="#A2A2A2"
+            transform="translate(-660 -152)"
+          >
+            <g
+              transform="translate(660 152)"
+            >
+              <path
+                d="M59.3 96.335c4.87 0 8.817 3.954 8.817 8.832S64.169 114 59.3 114c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm-22.444-6.826a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 72.245c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 85.956 8 81.078s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zm-65.327-6.022a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 48.156c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 61.867 8 56.989s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zM80.942 35.31c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.832 8.817-8.832zm-43.284 0c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm64.525-11.242c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.948 8.832-8.817 8.832-4.87 0-8.817-3.954-8.817-8.832 0-4.879 3.947-8.833 8.817-8.833zm-85.366 0c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.947 8.832-8.817 8.832S8 37.778 8 32.9c0-4.879 3.948-8.833 8.817-8.833zm42.483 5.62a3.21 3.21 0 013.206 3.213 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212 3.21 3.21 0 013.207-3.212zm-19.238-13.65a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm38.475 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 6a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212A3.21 3.21 0 0159.3 6z"
+              />
+            </g>
+          </g>
+        </g>
+      </svg>
+    </span>
+    <h1
+      className="title"
+    >
+      Molecule
     </h1>
+    <div
+      className="keybindings"
+    >
+      <ul />
+    </div>
   </div>
 </div>
 `;

src/workbench/editor/welcome/hooks.ts

@@ -0,0 +1,55 @@
+import { localize } from 'mo/i18n/localize';
+import { constants } from 'mo/services/builtinService/const';
+import { KeybindingHelper } from 'mo/services/keybinding';
+import { useEffect, useState } from 'react';
+
+const KEYBINDINGS = () => [
+    {
+        id: constants.ACTION_QUICK_COMMAND,
+        name: localize('menu.commandPalette', 'Command Palette'),
+    },
+    {
+        id: constants.ACTION_QUICK_ACCESS_SETTINGS,
+        name: localize('menu.settings', 'Settings'),
+    },
+    {
+        id: constants.ACTION_SELECT_THEME,
+        name: localize('menu.colorTheme', 'Color Theme'),
+    },
+];
+
+export const useGetKeys = () => {
+    const [keys, setKeys] = useState<
+        {
+            keybindings: string;
+            id: string;
+            name: any;
+        }[]
+    >([]);
+
+    useEffect(() => {
+        const res = KEYBINDINGS()
+            .map((acessCommand) => {
+                const simpleKeybindings = KeybindingHelper.queryGlobalKeybinding(
+                    acessCommand.id
+                );
+                if (simpleKeybindings?.length) {
+                    const keybindings = KeybindingHelper.convertSimpleKeybindingToString(
+                        simpleKeybindings
+                    );
+                    return { ...acessCommand, keybindings };
+                }
+                return null;
+            })
+            .filter(Boolean);
+        setKeys(
+            res as {
+                keybindings: string;
+                id: string;
+                name: any;
+            }[]
+        );
+    }, []);
+
+    return keys;
+};

src/workbench/editor/welcome/index.tsx

@@ -1,10 +1,29 @@
-import { prefixClaName } from 'mo/common/className';
 import React from 'react';
+import Logo from './logo';
+import { prefixClaName } from 'mo/common/className';
+import { useGetKeys } from './hooks';
 
 export default function Welcome() {
+    const keys = useGetKeys();
+
     return (
         <div className={prefixClaName('welcome')}>
-            <h1>Molecule.</h1>
+            <Logo className="logo" />
+            <h1 className="title">Molecule</h1>
+            <div className="keybindings">
+                <ul>
+                    {keys.map((item) => {
+                        return (
+                            <li className="keys" key={item.id}>
+                                <span>{item.name}</span>
+                                <span>
+                                    {item.keybindings.split('').join(' ')}
+                                </span>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
         </div>
     );
 }

src/workbench/editor/welcome/logo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export default function ({ className }) {
+    return (
+        <span style={{ fontSize: 0 }}>
+            <svg
+                width="1em"
+                height="1em"
+                viewBox="0 0 120 120"
+                className={className}
+            >
+                <g
+                    fill="none"
+                    fillRule="evenodd"
+                    stroke="none"
+                    strokeWidth="1"
+                    opacity="0.48"
+                >
+                    <g fill="#A2A2A2" transform="translate(-660 -152)">
+                        <g transform="translate(660 152)">
+                            <path d="M59.3 96.335c4.87 0 8.817 3.954 8.817 8.832S64.169 114 59.3 114c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm-22.444-6.826a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 72.245c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 85.956 8 81.078s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zm-65.327-6.022a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm44.887 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 48.156c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.833 8.818-8.833zm-42.483 0c4.87 0 8.817 3.955 8.817 8.833s-3.947 8.833-8.817 8.833S8 61.867 8 56.989s3.948-8.833 8.817-8.833zm85.366 0c4.87 0 8.817 3.955 8.817 8.833s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.833 8.817-8.833zM80.942 35.31c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.817-3.955-8.817-8.833s3.947-8.832 8.817-8.832zm-43.284 0c4.87 0 8.817 3.954 8.817 8.832s-3.948 8.833-8.817 8.833c-4.87 0-8.818-3.955-8.818-8.833s3.948-8.832 8.818-8.832zm64.525-11.242c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.948 8.832-8.817 8.832-4.87 0-8.817-3.954-8.817-8.832 0-4.879 3.947-8.833 8.817-8.833zm-85.366 0c4.87 0 8.817 3.954 8.817 8.833 0 4.878-3.947 8.832-8.817 8.832S8 37.778 8 32.9c0-4.879 3.948-8.833 8.817-8.833zm42.483 5.62a3.21 3.21 0 013.206 3.213 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212 3.21 3.21 0 013.207-3.212zm-19.238-13.65a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zm38.475 0a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.206-3.212 3.21 3.21 0 013.206-3.212zM59.3 6a3.21 3.21 0 013.206 3.212 3.21 3.21 0 01-3.206 3.212 3.21 3.21 0 01-3.207-3.212A3.21 3.21 0 0159.3 6z"></path>
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        </span>
+    );
+}

src/workbench/editor/welcome/name.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+export default function () {
+    return (
+        <span>
+            <svg width="132" height="24" viewBox="0 0 132 24">
+                <g
+                    fill="none"
+                    fillRule="evenodd"
+                    stroke="none"
+                    strokeWidth="1"
+                    fontFamily="GEETYPE-TakaLineGB-Flash-Heavy, GEETYPE-TakaLineGB-Flash"
+                    fontSize="24"
+                    fontWeight="800"
+                    letterSpacing="2.667"
+                    opacity="0.48"
+                >
+                    <g
+                        fill="#A2A2A2"
+                        fillRule="nonzero"
+                        transform="translate(-654 -304)"
+                    >
+                        <g transform="translate(654 304)">
+                            <text>
+                                <tspan x="1.097" y="21">
+                                    Molecule
+                                </tspan>
+                            </text>
+                        </g>
+                    </g>
+                </g>
+            </svg>
+        </span>
+    );
+}

src/workbench/editor/welcome/style.scss

@@ -1,15 +1,65 @@
 @import 'mo/style/common';
 
+$border-color: rgba(115, 115, 115, 0.4);
+
 #{prefix('welcome')} {
-    align-items: center;
-    background-color: var(--panel-background);
+    background-color: var(--editor-background);
     display: flex;
-    justify-content: center;
+    flex-flow: column wrap;
+    height: 100%;
+    overflow: hidden;
     text-align: center;
     width: 100%;
 
-    > h1 {
-        font-family: monospace;
-        opacity: 0.6;
+    > * {
+        width: 100%;
+    }
+
+    .logo {
+        font-size: 120px;
+        margin-top: 10vh;
+    }
+
+    .title {
+        color: #a2a2a2;
+        font-family: GEETYPE-TakaLineGB-Flash-Heavy, GEETYPE-TakaLineGB-Flash,
+            sans-serif;
+        font-weight: 800;
+        height: 24px;
+        letter-spacing: 2.667px;
+        line-height: 24px;
+        margin: 3vh auto 0;
+        opacity: 0.48;
+        user-select: none;
+        width: 132px;
+    }
+
+    .keybindings {
+        user-select: none;
+
+        > ul {
+            align-items: center;
+            background-color: rgba(162, 162, 162, 0.11);
+            border-top: 1px solid $border-color;
+            box-sizing: border-box;
+            color: #b6b6b6;
+            display: inline-grid;
+            font-size: 14px;
+            grid-template-rows: repeat(3, 1fr);
+            height: 148px;
+            line-height: 20px;
+            list-style: none;
+            margin: 8vh auto 0;
+            min-width: 183px;
+            opacity: 0.6;
+            padding: 24px;
+        }
+
+        .keys {
+            display: grid;
+            grid-gap: 32px;
+            grid-template-columns: 1fr minmax(47px, min-content);
+            text-align: left;
+        }
     }
 }