dropdown wip

web/renderer/components/ConnectionsAndDatabases/Popup.tsx

@@ -6,11 +6,12 @@ import { FaChevronRight } from "@react-icons/all-files/fa/FaChevronRight";
 import { Button, ErrorMsg, SmallLoader } from "@dolthub/react-components";
 import CreateDatabase from "@components/CreateDatabase";
 import { excerpt } from "@dolthub/web-utils";
-import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus";
+import { AiOutlinePlusCircle } from "@react-icons/all-files/ai/AiOutlinePlusCircle";
 import { StateType } from "./useSelectedConnection";
 import DatabaseItem from "./DatabaseItem";
 import css from "./index.module.css";
-
+import { DatabaseTypeLabel } from "@components/pageComponents/ConnectionsPage/ExistingConnections/Item";
+
 type Props = {
   params: DatabaseParams;
   currentConnection: DatabaseConnection;
@@ -32,7 +33,7 @@ export default function Popup({
         <div className={cx(css.header, css.left)}>
           <span>CONNECTIONS</span>
           <Link href="/connections">
-            <AiOutlinePlus />
+            <AiOutlinePlusCircle />
           </Link>
         </div>
         <div className={cx(css.header, css.right)}>
@@ -53,6 +54,7 @@ export default function Popup({
               onClick={async () => onSelected(conn)}
             >
               <span className={css.alignLeft}>{excerpt(conn.name, 16)}</span>
+              <DatabaseTypeLabel conn={conn} />
               <FaChevronRight />
             </Button.Link>
           ))}

web/renderer/components/ConnectionsAndDatabases/index.module.css

@@ -19,7 +19,7 @@
 }
 
 .container {
-  @apply flex w-[32rem] flex-col;
+  @apply flex w-[36rem] flex-col;
 }
 
 .top,
@@ -28,29 +28,31 @@
   @apply flex;
 }
 
-.left {
-  @apply w-1/3;
-}
+
 .middle {
   @apply min-h-32;
 }
 
 .left {
-  @apply w-2/5 border-r border-stone-100 pt-2;
+  @apply w-3/5 border-r border-stone-100;
+  svg{
+    @apply text-sky-400;
+  }
 }
 
 .right {
-  @apply w-3/5 pt-2;
+  @apply w-2/5;
+  svg{
+    @apply text-sky-400;
+  }
 }
 
 .header {
   @apply flex items-center  border-b border-stone-100 py-2 px-4 justify-between;
   span {
-    @apply font-semibold text-sm text-storm-500;
-  }
-  svg {
-    @apply text-[#000];
+    @apply font-semibold text-sm text-storm-200;
   }
+
 }
 
 .item {

web/renderer/components/CreateDatabase/index.module.css

@@ -2,6 +2,6 @@
   @apply text-sm flex items-center;
 
   svg {
-    @apply mr-1;
+    @apply h-4 w-4;
   }
 }

web/renderer/components/CreateDatabase/index.tsx

@@ -7,7 +7,7 @@ import {
 } from "@gen/graphql-types";
 import useMutation from "@hooks/useMutation";
 import { database } from "@lib/urls";
-import { AiOutlinePlus } from "@react-icons/all-files/ai/AiOutlinePlus";
+import { AiOutlinePlusCircle } from "@react-icons/all-files/ai/AiOutlinePlusCircle";
 import cx from "classnames";
 import { useRouter } from "next/router";
 import { SyntheticEvent, useState } from "react";
@@ -55,7 +55,7 @@ export default function CreateDatabase(props: Props) {
         onClick={() => setIsOpen(true)}
         className={cx(css.createDB, props.buttonClassName)}
       >
-        <AiOutlinePlus />
+        <AiOutlinePlusCircle />
         {props.showText && "Create database"}
       </Button.Link>
       <ModalOuter

web/renderer/components/Navbar/index.tsx

@@ -1,10 +1,93 @@
 import { DatabaseParams } from "@lib/params";
-import DesktopAppNavbar from "./DesktopAppNavbar";
+import ConnectionsAndDatabases from "@components/ConnectionsAndDatabases";
+import Link from "@components/links/Link";
+import { useState } from "react";
+import cx from "classnames";
+import { dockerHubRepo, workbenchGithubRepo } from "@lib/constants";
+import { ExternalLink } from "@dolthub/react-components";
+import { FaGithub } from "@react-icons/all-files/fa/FaGithub";
+import { FaDocker } from "@react-icons/all-files/fa/FaDocker";
+import DocsLink from "@components/links/DocsLink";
+import css from "./index.module.css";
+
+// TODO: Support desktop app nav bar on windows
+const forMacNav = process.env.NEXT_PUBLIC_FOR_MAC_NAV === "true";
+
+const handleDoubleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+  if (e.currentTarget === e.target) {
+    window.ipc.macTitlebarClicked();
+  }
+};
 
 type Props = {
   params?: DatabaseParams;
 };
 
-export default function Nav({ params }: Props) {
-  return <DesktopAppNavbar params={params} />;
+export default function DesktopAppNavbar({ params }: Props) {
+  const [noDrag, setNoDrag] = useState(false);
+
+  return (
+    <div
+      className={cx(css.titlebar, {
+        [css.drag]: !noDrag,
+        [css.noDrag]: noDrag,
+      })}
+      onDoubleClick={handleDoubleClick}
+    >
+      {params ? (
+        <Inner params={params} setNoDrag={setNoDrag} />
+      ) : (
+        <Logo imgSrc="/images/dolt-workbench.png" />
+      )}
+    </div>
+  );
+}
+
+type InnerProps = {
+  params: DatabaseParams;
+  setNoDrag: (noDrag: boolean) => void;
+};
+
+function Inner({ params, setNoDrag }: InnerProps) {
+  if (forMacNav) {
+    return (
+      <div className={css.outer}>
+        <ConnectionsAndDatabases params={params} setNoDrag={setNoDrag} />
+        <Logo imgSrc="/images/dolt-workbench-grey.png" />
+      </div>
+    );
+  }
+  return (
+    <div className={css.desktopOuter}>
+      <Logo imgSrc="/images/dolt-workbench.png" className={css.left} />
+      <ConnectionsAndDatabases params={params} className={css.middle} />
+      <RightLinks />
+    </div>
+  );
+}
+
+type LogoProps = {
+  imgSrc: string;
+  className?: string;
+};
+
+export function Logo({ imgSrc, className }: LogoProps) {
+  return (
+    <Link href="/" className={cx(className)}>
+      <img src={imgSrc} alt="Dolt Workbench" className={css.logo} />
+    </Link>
+  );
+}
+function RightLinks() {
+  return (
+    <div className={css.right}>
+      <DocsLink>Documentation</DocsLink>
+      <ExternalLink href={workbenchGithubRepo}>
+        <FaGithub /> GitHub
+      </ExternalLink>
+      <ExternalLink href={dockerHubRepo}>
+        <FaDocker /> Docker Hub
+      </ExternalLink>
+    </div>
+  );
 }

web/renderer/components/pageComponents/ConnectionsPage/ExistingConnections/Item.tsx

@@ -37,7 +37,7 @@ type LabelProps = {
   conn: DatabaseConnectionFragment;
 };
 
-function DatabaseTypeLabel({ conn }: LabelProps) {
+export function DatabaseTypeLabel({ conn }: LabelProps) {
   const type = getDatabaseType(conn.type ?? undefined, !!conn.isDolt);
   return <span className={cx(css.label, css[type.toLowerCase()])}>{type}</span>;
 }