Changes for code review. Also reorganized some files and fixed some s…

…mall problems I found.

.vscode/settings.json

@@ -28,6 +28,16 @@
     "*.{css,sass,scss}.d.ts": true
   },
 
+  "cSpell.ignorePaths": [
+    "package-lock.json",
+    "node_modules",
+    "vscode-extension",
+    ".git/objects",
+    ".vscode",
+    ".vscode-insiders",
+    "package.json"
+  ],
+
   "cSpell.words": [
     "asyncs",
     "endregion",
@@ -37,6 +47,8 @@
     "unsub",
     "unsubs",
     "unsubscriber",
-    "unsubscribers"
+    "unsubscribers",
+    "dockbox",
+    "maximizable"
   ],
 }

src/renderer/App.css

@@ -15,25 +15,6 @@ body {
   margin: 0;
 }
 
-button {
-  background-color: white;
-  padding: 10px 20px;
-  border-radius: 10px;
-  border: none;
-  appearance: none;
-  font-size: 1.3rem;
-  box-shadow: 0px 8px 28px -6px rgba(24, 39, 75, 0.12),
-    0px 18px 88px -4px rgba(24, 39, 75, 0.14);
-  transition: all ease-in 0.1s;
-  cursor: pointer;
-  opacity: 0.9;
-}
-
-button:hover {
-  transform: scale(1.05);
-  opacity: 1;
-}
-
 li {
   list-style: none;
 }

src/renderer/App.tsx

@@ -1,73 +1,11 @@
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import './App.css';
-import { DockMode, TabData } from 'rc-dock';
-import ParanextDockLayout from './Components/docking/ParanextDockLayout';
+import ParanextDockLayout from './components/docking/ParanextDockLayout';
 
 const Hello = () => {
-  // This object is necessary for Typescript to not complain, but it isn't actually needed
-  // to be part of the tab saved data.
-  const tab: TabData = {
-    content: <> </>,
-    title: <> </>,
-  };
-
-  // NOTE: This structure represents what might be saved in a saved layout and
-  // thus looks different than a normal rc-dock layout. This is also why it's not
-  // typed to rc-dock.LayoutData.
-  const defaultLayout = {
-    dockbox: {
-      mode: 'horizontal' as DockMode,
-      children: [
-        {
-          mode: 'vertical' as DockMode,
-          size: 200,
-          children: [
-            {
-              tabs: [
-                {
-                  ...tab,
-                  type: 'tab',
-                  data: '{"title":"Bla","content":"Random content!"}',
-                  minWidth: 150,
-                  minHeight: 150,
-                },
-              ],
-            },
-            {
-              tabs: [
-                {
-                  ...tab,
-                  type: 'tab',
-                  data: '{"title":"two","content":"Content for tab two"}',
-                },
-                {
-                  ...tab,
-                  type: 'tab',
-                  data: '{"title":"one","content":"Content for tab one"}',
-                },
-              ],
-            },
-          ],
-        },
-        {
-          tabs: [
-            {
-              ...tab,
-              type: 'hello',
-            },
-            {
-              ...tab,
-              type: 'buttons',
-            },
-          ],
-        },
-      ],
-    },
-  };
-
   return (
     <div>
-      <ParanextDockLayout startingLayout={defaultLayout} />
+      <ParanextDockLayout />
     </div>
   );
 };

src/renderer/components/docking/ErrorTab.tsx

@@ -0,0 +1,25 @@
+import { TabInfo } from '@shared/data/WebviewTypes';
+
+const ErrorTab = ({ errorMessage }: { errorMessage: string }) => {
+  return (
+    <>
+      <div>
+        Content could not be loaded. Please make sure you have the correct
+        extension loaded.
+      </div>
+      <div>Message: {errorMessage}</div>
+    </>
+  );
+};
+
+const createErrorTab = (errorMessage: string): TabInfo => {
+  return {
+    type: 'error',
+    title: 'Error',
+    content: <ErrorTab errorMessage={errorMessage} />,
+    minWidth: 150,
+    minHeight: 150,
+  };
+};
+
+export default createErrorTab;

src/renderer/Components/docking/ParanextDockLayout.css → src/renderer/components/docking/ParanextDockLayout.css

@@ -57,8 +57,3 @@
 .dock-nav-operations {
   display: none;
 }
-
-/* Hide tab group buttons (maximize). Not sure why this is needed even when the group maximizable is set to false. */
-.dock-extra-content {
-  display: none;
-}

src/renderer/components/docking/ParanextDockLayout.tsx

@@ -0,0 +1,88 @@
+import 'rc-dock/dist/rc-dock.css';
+import './ParanextDockLayout.css';
+import { newGuid } from '@shared/util/Util';
+import { SavedTabInfo, TabCreator, TabInfo } from '@shared/data/WebviewTypes';
+import DockLayout, { TabBase, TabData, TabGroup } from 'rc-dock';
+import testLayout from '@renderer/testing/testLayout';
+import createHelloPanel from '@renderer/testing/HelloPanel';
+import createButtonsPanel from '@renderer/testing/TestButtonsPanel';
+import createTabPanel from '@renderer/testing/TestPanel';
+import createErrorTab from './ErrorTab';
+import ParanextPanel from './ParanextPanel';
+import ParanextTabTitle from './ParanextTabTitle';
+
+// NOTE: 'card' is a built-in style. We can likely remove it when we
+// create a full theme for Paranext.
+const TAB_GROUPS = 'card paranext';
+
+// TODO: Build this mapping from extensions so extensions can create their own panels
+const tabTypeCreationMap = new Map<string, TabCreator>([
+  ['hello', createHelloPanel],
+  ['buttons', createButtonsPanel],
+  ['tab', createTabPanel],
+]);
+
+/**
+ * Creates tab data from the specified saved tab information by calling back to the
+ * extension that registered the creation of the tab type
+ */
+const loadTab = (savedTabInfo: TabBase): TabData => {
+  let { id } = savedTabInfo;
+  if (!id) id = newGuid();
+
+  const tabInfo = savedTabInfo as SavedTabInfo;
+  let newTabData: TabInfo | undefined;
+  let error = '';
+
+  if (!tabInfo.type) {
+    error = `No handler for the tab type '${tabInfo.type}'`;
+  } else {
+    const tabCreator = tabTypeCreationMap.get(tabInfo.type);
+    if (!tabCreator) {
+      error = `No handler for the tab type '${tabInfo.type}'`;
+    } else {
+      // Call the creation method to let the extension method create the tab
+      newTabData = tabCreator(tabInfo);
+    }
+  }
+
+  // If the tab couldn't be created, replace it with an error tab
+  if (!newTabData) newTabData = createErrorTab(error);
+
+  // Translate the data from the extension to be in the form needed by rc-dock
+  return {
+    id,
+    title: <ParanextTabTitle text={newTabData.title} />,
+    content: <ParanextPanel>{newTabData.content}</ParanextPanel>,
+    minWidth: newTabData.minWidth,
+    minHeight: newTabData.minHeight,
+    group: TAB_GROUPS,
+    closable: true,
+  };
+};
+
+const groups: {
+  [key: string]: TabGroup;
+} = {
+  [TAB_GROUPS]: {
+    maximizable: false, // Don't allow groups of tabs to be maximized
+    floatable: true, // Allow tabs to be floated
+    newWindow: true, // Allow floating windows to show in a native window
+    animated: false, // Don't animate tab transitions
+    panelExtra: undefined, // Get rid of buttons on tab group panel (we only want buttons on each tab)
+  },
+};
+
+const ParanextDockLayout = () => {
+  return (
+    <DockLayout
+      groups={groups}
+      defaultLayout={testLayout}
+      dropMode="edge"
+      loadTab={loadTab}
+      style={{ position: 'absolute', left: 3, top: 3, right: 3, bottom: 3 }}
+    />
+  );
+};
+
+export default ParanextDockLayout;