Initial UI work

package.json

@@ -109,6 +109,7 @@
     "promisfy": "^1.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-resizable-panels": "^2.0.20",
     "react-router-dom": "^6.16.0",
     "sqlite3": "^5.1.7",
     "tailwind-merge": "^2.4.0",

src/renderer/App.css

@@ -6,60 +6,12 @@ body {
   position: relative;
   color: white;
   height: 100vh;
-  background: linear-gradient(
-    200.96deg,
-    #fedc2a -29.09%,
-    #dd5789 51.77%,
-    #7a2c9e 129.35%
-  );
   font-family: sans-serif;
   overflow-y: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
-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;
-}
-
-a {
-  text-decoration: none;
-  height: fit-content;
-  width: fit-content;
-  margin: 10px;
-}
-
-a:hover {
-  opacity: 1;
-  text-decoration: none;
-}
-
-.Hello {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 20px 0;
+#root {
+  height: 100%;
 }
 
 @tailwind base;

src/renderer/App.tsx

@@ -3,39 +3,15 @@ import 'tailwindcss/tailwind.css';
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 
 // Relative Dependencies
-import icon from '../../assets/icon.svg';
 import './App.css';
 import 'tailwindcss/tailwind.css';
-import { Button } from './components/ui/button';
-
-function Hello() {
-  const onClick = async () => {
-    try {
-      const programs = window.electron.ipcRenderer.invoke(
-        'get-running-programs',
-      );
-      console.log(programs);
-    } catch (error) {
-      console.log('there was an error');
-    }
-  };
-
-  return (
-    <div>
-      <div className="Hello">
-        <img width="200" alt="icon" src={icon} />
-      </div>
-      <h1 className="text-3xl">electron-react-boilerplate</h1>
-      <Button onClick={onClick}>Test</Button>
-    </div>
-  );
-}
+import Main from './Main';
 
 export default function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Hello />} />
+        <Route path="/" element={<Main />} />
       </Routes>
     </Router>
   );

src/renderer/Main.tsx

@@ -0,0 +1,74 @@
+// External Dependencies
+import { Plus } from 'lucide-react';
+
+// Relative Dependencies
+import Workspaces from './components/workspaces';
+import ActivePrograms from './components/active-programs';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from './components/ui/resizeable-panel';
+import { Button } from './components/ui/button';
+
+type Props = {};
+
+const Main = (props: Props) => {
+  const onClick = async () => {
+    try {
+      const programs = window.electron.ipcRenderer.invoke(
+        'get-running-programs',
+      );
+      console.log(programs);
+    } catch (error) {
+      console.log('there was an error');
+    }
+  };
+
+  return (
+    <ResizablePanelGroup className="w-full h-full" direction="horizontal">
+      <ResizablePanel defaultSize={33.3} className="h-full" minSize={20}>
+        <div className="border-r bg-background h-full">
+          <div className="space-y-2">
+            <div className="flex flex-row items-center w-full border-b">
+              <h3 className="text-lg font-medium p-2 border-gray-200">
+                My Workspaces
+              </h3>
+              <Button onClick={onClick} size="sm" className="ml-auto mr-2">
+                <Plus className="mr-2 h-4 w-4" /> New Workspace
+              </Button>
+            </div>
+
+            <Workspaces />
+
+            <h3 className="text-lg font-medium p-2">Active Programs</h3>
+            <ActivePrograms />
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={33.3} minSize={20}>
+        <div className="border-r bg-background ">
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium p-2 border-gray-200 border-b">
+              Programs
+            </h3>
+          </div>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle />
+      <ResizablePanel defaultSize={33.3} minSize={20}>
+        <div className="flex flex-col bg-background">
+          <div className="space-y-2">
+            <h3 className="text-lg font-medium p-2 border-gray-200 border-b">
+              Tabs
+            </h3>
+          </div>
+        </div>
+      </ResizablePanel>
+      {/* </div> */}
+    </ResizablePanelGroup>
+  );
+};
+
+export default Main;

src/renderer/components/active-programs.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type Props = {};
+
+const ActivePrograms = (props: Props) => {
+  const activePrograms = ['Personal Programming', 'Shopping', 'Travel', 'Work'];
+
+  return (
+    <div className="flex flex-col flex-1 overflow-y-auto">
+      <ul className="">
+        {activePrograms.map((program, index) => (
+          <li
+            className="flex items-center space-x-2 hover:bg-slate-200 hover:cursor-pointer p-2"
+            key={program}
+          >
+            {/* <FolderIcon className="w-5 h-5 text-blue-500" /> */}
+            <span>{program}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default ActivePrograms;

src/renderer/components/ui/resizeable-panel.tsx

@@ -0,0 +1,43 @@
+import { GripVertical } from 'lucide-react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+
+import { cn } from '~/lib/utils';
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+      className,
+    )}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

src/renderer/components/workspaces.tsx

@@ -0,0 +1,34 @@
+// External Dependencies
+import { useState } from 'react';
+
+// Relative Dependencies
+import { Button } from './ui/button';
+
+type Props = {};
+
+const Workspaces = (props: Props) => {
+  const workspaces = [
+    'Personal Programming super long name',
+    'Shopping',
+    'Travel',
+    'Work',
+  ];
+
+  return (
+    <div className="flex flex-col flex-1 overflow-y-auto">
+      <ul className="">
+        {workspaces.map((workspace, index) => (
+          <li
+            className="flex items-center space-x-2 hover:bg-slate-200 hover:cursor-pointer p-2"
+            key={workspace}
+          >
+            {/* <FolderIcon className="w-5 h-5 text-blue-500" /> */}
+            <span>{workspace}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Workspaces;