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,28 @@
+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>
+    </>
+  );
+};
+
+/**
+ * Creates a new error message tab with the specified error message
+ */
+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

@@ -27,11 +27,11 @@
 }
 
 /* tab buttons take all the space , and only apply it when it's not in float panel */
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-paranext .dock-nav-list {
+.dock-layout .dock-panel.dock-style-paranext .dock-nav-list {
   flex-grow: 1;
 }
 
-.dock-layout > :not(.dock-fbox) .dock-panel.dock-style-paranext .dock-tab {
+.dock-layout .dock-panel.dock-style-paranext .dock-tab {
   flex: 1 0 auto;
 }
 
@@ -42,23 +42,13 @@
   background: #a6c9ff;
 }
 
-.dock-nav-more {
-  padding: 0;
-}
-
 .dock-content-holder {
   border-bottom: 1px solid #5c5c5c;
   border-left: 1px solid #5c5c5c;
   border-right: 1px solid #5c5c5c;
 }
 
-/* Hide tab group overflow button space (button is hidden, but the space is still taken up).
-  TODO: Make this appear only when needed. */
-.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 {
+/* Hide tab group overflow button when the button is not needed */
+.dock-nav-operations-hidden {
   display: none;
 }