native style titlebar

- replace header with a fixed, native app style titlebar
- move search, toolbar into titlebar
- remove local emotion dependency; replace with tailwind where used (2 places)
- abstract various small things like FrontMatter and scroll container
- replace a few usages of evergreen-ui with tailwind classes

package.json

@@ -55,7 +55,6 @@
     "class-variance-authority": "^0.7.0",
     "date-fns": "^3.3.1",
     "electron": "^28.2.0",
-    "emotion": "^10.0.27",
     "esbuild": "^0.20.0",
     "evergreen-ui": "^7.1.9",
     "klaw": "^3.0.0",

src/components/Sidesheet.tsx

@@ -21,6 +21,7 @@ const SheetOverlay = React.forwardRef<
       // Initial use case is for side bar (journal selection) -- imo looks better when backgroud is not faded / covered w/ animation; may want to re-enable
       // for other use cases
       // "fixed inset-0 z-50 bg-slate-400 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "drag-none",
       className,
     )}
     {...props}
@@ -30,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300",
+  "drag-none fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-300",
   {
     variants: {
       side: {

src/components/icons.tsx

@@ -25,6 +25,7 @@ import {
   ExternalLink,
   Eye,
   FileCode,
+  FilePenLineIcon,
   Folder,
   FolderArchive,
   FolderCheck,
@@ -203,7 +204,7 @@ export const Icons = {
   commentAdd: MessageSquarePlus,
   delete: Trash2,
   dragHandle: GripVertical,
-  editing: Edit2,
+  editing: FilePenLineIcon,
   emoji: Smile,
   externalLink: ExternalLink,
   folder: Folder,

src/electron/index.js

@@ -193,6 +193,12 @@ function createWindow() {
   mainWindow = new BrowserWindow({
     width,
     height: 600,
+
+    // Hides the default (empty) window title
+    //
+    titleBarStyle: "hidden",
+
+    trafficLightPosition: { x: 10, y: 16 },
     webPreferences: {
       nodeIntegration: false,
       sandbox: false,

src/index.css

@@ -26,6 +26,7 @@
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
+    /* --accent: 255, 89%, 62%; */
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
 

src/layout.tsx

@@ -1,34 +1,12 @@
 import React, { PropsWithChildren } from "react";
 import { Pane, Tablist, Tab } from "evergreen-ui";
 import ErrorBoundary from "./error";
-import { NavLink, useLocation } from "react-router-dom";
 
 interface Props2 {
   children: any;
 }
 
-function classnameFunc({ isActive }: any) {
-  return isActive ? "link-active" : "link-inactive";
-}
-
 export default function Layout(props: Props2) {
-  // I was too lazy to have each top-level route wrap itself in the right
-  // layout, since only the edit view(s) don't use the normal layout
-  // hence we have this hack here. What could go wrong?
-  const location = useLocation();
-  if (location.pathname.startsWith("/edit")) {
-    return (
-      <Pane
-        padding={50}
-        display="flex"
-        flexDirection="column"
-        minHeight="100vh"
-      >
-        {props.children}
-      </Pane>
-    );
-  }
-
   return (
     <ErrorBoundary>
       <Pane
@@ -37,24 +15,7 @@ export default function Layout(props: Props2) {
         display="flex"
         flexDirection="column"
       >
-        <Pane borderBottom="default" elevation={1} padding={15} display="flex">
-          <Pane marginRight={25}>
-            <span className="mono" style={{ color: "#6E62B6" }}>
-              chronicles
-            </span>
-          </Pane>
-          <Pane flexGrow={1} marginRight={24}>
-            <NavLink to="documents" className={classnameFunc}>
-              documents
-            </NavLink>
-            <NavLink to="preferences" className={classnameFunc}>
-              preferences
-            </NavLink>
-          </Pane>
-        </Pane>
-        <Pane padding={50} flexGrow={1} display="flex">
-          {props.children}
-        </Pane>
+        {props.children}
       </Pane>
     </ErrorBoundary>
   );

src/titlebar/macos.tsx

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from "react";
+import { cn } from "@udecode/cn";
+
+interface Props extends PropsWithChildren {
+  className?: string;
+}
+
+export default function Titlebar({ children, className }: Props) {
+  return (
+    <div
+      style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
+      className={cn(
+        "bg-secondary border-b border-accent text-accent-foreground border-accent flex justify-between items-center py-3 px-2.5 pl-20 fixed w-full h-12 z-10 shadow",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

src/typography.css

@@ -235,7 +235,7 @@ html {
     "Segoe UI Emoji",
     "Segoe UI Symbol";
   box-sizing: border-box;
-  overflow-y: scroll;
+  overflow: hidden;
   line-height: 1.6;
 }
 

src/views/documents/Layout.tsx

@@ -1,10 +1,19 @@
 import React from "react";
-import { Pane, IconButton, FolderOpenIcon } from "evergreen-ui";
+import {
+  Pane,
+  IconButton,
+  FolderOpenIcon,
+  EditIcon,
+  SettingsIcon,
+  PanelStatsIcon,
+} from "evergreen-ui";
 import SearchDocuments from "./search";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { SearchStore } from "./SearchStore";
 import JournalSelectionSidebar from "./sidebar/Sidebar";
 import { SheetTrigger } from "../../components/Sidesheet";
+import Titlebar from "../../titlebar/macos";
+import * as Base from "../layout";
 
 interface Props {
   store: SearchStore;
@@ -14,33 +23,54 @@ interface Props {
 
 export function Layout(props: Props) {
   const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+  const navigate = useNavigate();
 
   return (
-    <Pane>
-      <Pane marginBottom={8}>
+    <Base.Container>
+      <Titlebar className="pr-16">
         <JournalSelectionSidebar
           isShown={isSidebarOpen}
           setIsShown={setIsSidebarOpen}
           search={props.store}
         >
           <SheetTrigger asChild>
-            <IconButton icon={FolderOpenIcon} marginRight={8}>
+            <IconButton
+              backgroundColor="transparent"
+              border="none"
+              icon={PanelStatsIcon}
+              marginRight={8}
+              className="drag-none"
+            >
               Select Journals
             </IconButton>
           </SheetTrigger>
         </JournalSelectionSidebar>
+
+        <IconButton
+          backgroundColor="transparent"
+          border="none"
+          icon={EditIcon}
+          className="drag-none"
+          onClick={() => navigate("/documents/edit/new")}
+          marginRight={8}
+        >
+          Create new note
+        </IconButton>
+
         <SearchDocuments store={props.store} />
-      </Pane>
-      <Pane>
-        <Link to="/documents/edit/new">Create new</Link>
-      </Pane>
-      <Pane marginTop={24}>{props.children}</Pane>
-    </Pane>
+        <IconButton
+          backgroundColor="transparent"
+          border="none"
+          icon={SettingsIcon}
+          className="drag-none"
+          onClick={() => navigate("/preferences")}
+          marginLeft={8}
+        >
+          Preferences
+        </IconButton>
+      </Titlebar>
+      <Base.TitlebarSpacer />
+      <Base.ScrollContainer>{props.children}</Base.ScrollContainer>
+    </Base.Container>
   );
 }
-
-export type SidebarProps = React.PropsWithChildren<{
-  isShown: boolean;
-  setIsShown: (isShown: boolean) => void;
-  search: SearchStore;
-}>;

src/views/documents/search/index.tsx

@@ -35,6 +35,7 @@ const SearchDocuments = (props: Props) => {
 
   return (
     <TagInput
+      className="drag-none"
       flexGrow={1}
       inputProps={{ placeholder: "Search journals" }}
       values={props.store.searchTokens}

src/views/documents/sidebar/Sidebar.tsx

@@ -10,13 +10,20 @@ import {
   SheetHeader,
   SheetTitle,
 } from "../../../components/Sidesheet";
-import { SidebarProps } from "../Layout";
-import "./sidebar-styles.css";
 import { observer } from "mobx-react-lite";
 import { useSidebarStore } from "./store";
 import { SidebarStore } from "./store";
 import { JournalCreateForm, JournalItem, Collapse } from "./JournalItem";
 import { TagsList } from "./TagsList";
+import { SearchStore } from "../SearchStore";
+
+import "./sidebar-styles.css";
+
+type SidebarProps = React.PropsWithChildren<{
+  isShown: boolean;
+  setIsShown: (isShown: boolean) => void;
+  search: SearchStore;
+}>;
 
 /**
  * Sidebar for selecting journals or tags to search by.
@@ -29,7 +36,7 @@ export default observer(function JournalSelectionSidebar(props: SidebarProps) {
     <Sheet open={isShown} onOpenChange={store.onOpenChanged}>
       {props.children}
       <SheetContent
-        side="left"
+        side="right"
         className="overflow-auto"
         onEscapeKeyDown={(event) => {
           if (!store.shouldEscapeClose) {

src/views/documents/sidebar/sidebar-styles.css

@@ -2,6 +2,8 @@
 @import "@radix-ui/colors/mauve.css";
 @import "@radix-ui/colors/violet.css";
 
+/* todo: move ContextMenu stuffs to their own stylesheet */
+
 .ContextMenuTrigger {
   /* display: block;
   border: 2px white dashed;