feat: improve welcome screen ux

Author: afarago

src/editor/Welcome.tsx

@@ -1,12 +1,16 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022-2023 The Pybricks Authors
+// Copyright (c) 2022-2024 The Pybricks Authors
 
 // welcome screen that is shown when no editor is open.
 
-import { Colors } from '@blueprintjs/core';
-import React, { useEffect, useRef } from 'react';
+import { Button, Colors } from '@blueprintjs/core';
+import { Document, Plus } from '@blueprintjs/icons';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 import Two from 'two.js';
 import { useTernaryDarkMode } from 'usehooks-ts';
+import { Activity, useActivitiesSelectedActivity } from '../activities/hooks';
+import { explorerCreateNewFile } from '../explorer/actions';
 import logoSvg from './logo.svg';
 
 const defaultRotation = -Math.PI / 9; // radians
@@ -61,6 +65,7 @@ type WelcomeProps = {
 };
 
 const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
+    const dispatch = useDispatch();
     const stateRef = useRef<State>({
         rotation: defaultRotation,
         rotationSpeed: 0,
@@ -104,7 +109,7 @@ const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
             });
 
             logo.fill = fillColorRef.current;
-            logo.scale = Math.min(two.width, two.height) / 80;
+            logo.scale = Math.min(two.width, two.height) / 90;
             logo.rotation = stateRef.current.rotation;
 
             two.scene.position.x = two.width / 2;
@@ -156,15 +161,40 @@ const Welcome: React.FunctionComponent<WelcomeProps> = ({ isVisible }) => {
         };
     }, [isVisible]);
 
+    const [, setSelectedActivity] = useActivitiesSelectedActivity();
+    const handleOpenNewProject = useCallback(() => {
+        setSelectedActivity(Activity.Explorer);
+        dispatch(explorerCreateNewFile());
+    }, [dispatch, setSelectedActivity]);
+
+    const handleOpenExplorer = useCallback(() => {
+        setSelectedActivity(Activity.Explorer);
+    }, [setSelectedActivity]);
+
     return (
         <div
             className="pb-editor-welcome"
-            ref={elementRef}
             onContextMenuCapture={(e) => {
                 e.stopPropagation();
                 e.preventDefault();
             }}
-        />
+        >
+            <div className="logo" ref={elementRef}></div>
+            <div className="shortcuts">
+                <dl>
+                    <dt>Open existing project</dt>
+                    <dd>
+                        <Button icon={<Document />} onClick={handleOpenExplorer} />
+                    </dd>
+                </dl>
+                <dl>
+                    <dt>Open a new project</dt>
+                    <dd>
+                        <Button icon={<Plus />} onClick={handleOpenNewProject} />
+                    </dd>
+                </dl>
+            </div>
+        </div>
     );
 };
 

src/editor/editor.scss

@@ -63,13 +63,56 @@
         flex: 1 1 auto;
     }
 
+    .pb-editor-tabpanel.pb-empty {
+        display: flex;
+        justify-content: space-around;
+    }
+
     &-welcome {
         display: none;
-
         .pb-editor-tabpanel.pb-empty > & {
-            display: block;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            // display: block;
             width: 100%;
             height: 100%;
+            // max-width: 290px;
+
+            .logo {
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: -2%;
+
+                svg {
+                    overflow: visible !important;
+                }
+            }
+            .shortcuts {
+                position: relative;
+                top: +6%;
+
+                border-collapse: separate;
+                border-spacing: 11px 17px;
+                dl {
+                    display: table-row;
+                    opacity: 0.8;
+                }
+                dt,
+                dd {
+                    display: table-cell;
+                    vertical-align: middle;
+                }
+                dd {
+                    text-align: left;
+                }
+                dt {
+                    text-align: right;
+                }
+            }
         }
     }