Add Activities

This adds a new Activities tab list and view similar to VS code. The
Explorer and Settings are migrated to this view.

src/app/App.tsx

@@ -5,8 +5,10 @@ import { Classes } from '@blueprintjs/core';
 import React, { useEffect, useState } from 'react';
 import SplitterLayout from 'react-splitter-layout';
 import { useLocalStorage, useTernaryDarkMode } from 'usehooks-ts';
+import { Activity, useActivities } from '../activities/Activities';
 import Editor from '../editor/Editor';
 import Explorer from '../explorer/Explorer';
+import Settings from '../settings/Settings';
 import { useSettingIsShowDocsEnabled } from '../settings/hooks';
 import StatusBar from '../status-bar/StatusBar';
 import Terminal from '../terminal/Terminal';
@@ -155,16 +157,20 @@ const App: React.VFC = () => {
         return () => removeEventListener('keydown', listener);
     }, []);
 
+    const [selectedActivity, activitiesComponent] = useActivities();
+
     return (
         <div className="pb-app h-100 w-100 p-absolute">
-            <Toolbar />
-            <div
-                className="pb-app-body"
-                style={{ display: 'grid', gridTemplateColumns: '250px auto' }}
-            >
-                <Explorer />
+            <div className="pb-app-body">
+                {activitiesComponent}
+                {selectedActivity !== Activity.None && (
+                    <div className="pb-app-activity-view">
+                        {selectedActivity === Activity.Explorer && <Explorer />}
+                        {selectedActivity === Activity.Settings && <Settings />}
+                    </div>
+                )}
                 {/* need a container with position: relative; for SplitterLayout since it uses position: absolute; */}
-                <div style={{ position: 'relative' }}>
+                <div className="pb-app-main" style={{ position: 'relative' }}>
                     <SplitterLayout
                         customClassName={
                             isSettingShowDocsEnabled ? 'pb-show-docs' : 'pb-hide-docs'
@@ -181,7 +187,10 @@ const App: React.VFC = () => {
                             secondaryInitialSize={terminalSplit}
                             onSecondaryPaneSizeChange={setTerminalSplit}
                         >
-                            <Editor />
+                            <div className="pb-app-editor">
+                                <Toolbar />
+                                <Editor />
+                            </div>
                             <div className="pb-app-terminal-padding h-100">
                                 <Terminal />
                             </div>

src/app/app.scss

@@ -16,9 +16,60 @@
 
 .pb-app-body {
     // height makes everything fit without scrolling
-    height: calc(
-        var(--pb-vh, 100vh) - #{pb.$toolbar-height} - #{pb.$status-bar-height}
-    ) !important;
+    height: calc(var(--pb-vh, 100vh) - #{pb.$status-bar-height}) !important;
+    position: relative;
+    display: flex;
+    flex-direction: row;
+
+    $switcher-width: 50px;
+
+    .pb-activity-tablist {
+        width: $switcher-width;
+        $padding: bp.$pt-grid-size * 0.5;
+        padding: $padding;
+        gap: $padding;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        @include pb.background-contrast(6%);
+    }
+
+    .pb-app-activity-view {
+        width: 250px;
+        overflow: hidden;
+        padding: bp.$pt-grid-size;
+
+        // on small screens, make the activity view an overlay instead of inline
+        @media screen and (max-width: pb.$narrow-screen-limit) {
+            position: absolute;
+            top: 0px;
+            left: $switcher-width;
+            height: 100%;
+            z-index: bp.$pt-z-index-overlay;
+            background-color: bp.$pt-app-background-color;
+
+            .#{bp.$ns}-dark & {
+                background-color: bp.$pt-dark-app-background-color;
+            }
+        }
+    }
+
+    .pb-app-main {
+        min-width: 0;
+        flex: 1 1 auto;
+        @include pb.background-contrast(4%);
+    }
+}
+
+.pb-app-editor {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    & .pb-editor {
+        min-height: 0;
+        flex: 1 1 auto;
+    }
 }
 
 // make layout splitter match app color scheme