wip: more incremental titlebar refactoring

working in 30-60 minute increments in the early AM / late PM. Nearly done, then a bunch of clean-up
cloverich · Aug 6, 2024 · 0f4043f · 0f4043f
1 parent 6e08010
commit 0f4043f
Show file tree

Hide file tree

Showing 21 changed files with 241 additions and 310 deletions.
diff --git a/src/components/Sidesheet.tsx b/src/components/Sidesheet.tsx
@@ -21,7 +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",
-      "no-drag",
+      "drag-none",
       className,
     )}
     {...props}
@@ -31,7 +31,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "no-drag 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: {

diff --git a/src/electron/index.js b/src/electron/index.js
@@ -198,7 +198,7 @@ function createWindow() {
     //
     titleBarStyle: "hidden",
 
-    trafficLightPosition: { x: 10, y: 18 },
+    trafficLightPosition: { x: 10, y: 16 },
     webPreferences: {
       nodeIntegration: false,
       sandbox: false,

diff --git a/src/index.css b/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%;
 

diff --git a/src/layout.tsx b/src/layout.tsx
@@ -1,8 +1,6 @@
 import React, { PropsWithChildren } from "react";
 import { Pane, Tablist, Tab } from "evergreen-ui";
 import ErrorBoundary from "./error";
-import { NavLink, useLocation } from "react-router-dom";
-import Titlebar from "./titlebar/macos";
 
 interface Props2 {
   children: any;

diff --git a/src/titlebar/macos.tsx b/src/titlebar/macos.tsx
@@ -1,24 +1,20 @@
 import React, { PropsWithChildren } from "react";
-import { Pane } from "evergreen-ui";
-import { NavLink, useLocation } from "react-router-dom";
-import "./styles.css";
+import { cn } from "@udecode/cn";
 
-interface Props2 extends PropsWithChildren {}
-
-export default function Titlebar({ children }: Props2) {
-  const location = useLocation();
+interface Props extends PropsWithChildren {
+  className?: string;
+}
 
+export default function Titlebar({ children, className }: Props) {
   return (
-    <div className="TitleBar-macos">
+    <div
+      style={{ "-webkit-app-region": "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",
+        className,
+      )}
+    >
       {children}
-      {/* <Pane marginRight={25}>
-        <span className="mono" style={{ color: "#6E62B6" }}>
-          chronicles
-        </span>
-      </Pane>
-      <Pane flexGrow={1} marginRight={24}>
-
-      </Pane> */}
     </div>
   );
 }
diff --git a/src/titlebar/styles.css b/src/titlebar/styles.css
diff --git a/src/views/documents/Layout.tsx b/src/views/documents/Layout.tsx
@@ -25,7 +25,7 @@ export function Layout(props: Props) {
 
   return (
     <>
-      <Titlebar>
+      <Titlebar className="pr-16">
         <JournalSelectionSidebar
           isShown={isSidebarOpen}
           setIsShown={setIsSidebarOpen}
@@ -37,7 +37,7 @@ export function Layout(props: Props) {
               border="none"
               icon={PanelStatsIcon}
               marginRight={8}
-              className="no-drag"
+              className="drag-none"
             >
               Select Journals
             </IconButton>
@@ -48,7 +48,7 @@ export function Layout(props: Props) {
           backgroundColor="transparent"
           border="none"
           icon={EditIcon}
-          className="no-drag"
+          className="drag-none"
           onClick={() => navigate("/documents/edit/new")}
           marginRight={8}
         >

diff --git a/src/views/documents/search/index.tsx b/src/views/documents/search/index.tsx
@@ -35,7 +35,7 @@ const SearchDocuments = (props: Props) => {
 
   return (
     <TagInput
-      className="no-drag"
+      className="drag-none"
       flexGrow={1}
       inputProps={{ placeholder: "Search journals" }}
       values={props.store.searchTokens}

diff --git a/src/views/edit/FrontMatter.tsx b/src/views/edit/FrontMatter.tsx
@@ -17,9 +17,6 @@ const FrontMatter = observer(
     document: EditableDocument;
     journals: JournalResponse[];
   }) => {
-    const navigate = useNavigate();
-    const searchStore = useSearchStore()!;
-
     function onAddTag(tokens: string[]) {
       if (tokens.length > 1) {
         // https://evergreen.segment.com/components/tag-input
@@ -152,34 +149,8 @@ const FrontMatter = observer(
       );
     }
 
-    function goBack() {
-      if (
-        !document.dirty ||
-        confirm(
-          "Document is unsaved, exiting will discard document. Stop editing anyways?",
-        )
-      ) {
-        // This handles the edit case but hmm... if its new... it should be added to the search...
-        // but in what order? Well... if we aren't paginated... it should be at the top.
-        searchStore.updateSearch(document);
-        navigate(-1);
-      }
-    }
-
     return (
       <>
-        {/* back button */}
-        <div style={{ marginBottom: "24px" }}>
-          <a
-            onClick={goBack}
-            className={css`
-              cursor: pointer;
-            `}
-          >
-            Back
-          </a>
-        </div>
-
         {/* Document title */}
         <div>
           <input

diff --git a/src/views/edit/PlateContainer.tsx b/src/views/edit/PlateContainer.tsx
@@ -111,7 +111,6 @@ import { EditorToolbar } from "./editor/toolbar/EditorToolbar";
 import { EditorMode } from "./EditorMode";
 import FrontMatter from "./FrontMatter";
 import { Pane } from "evergreen-ui";
-import { SaveActions } from "./SaveActions";
 import { EditableDocument } from "./EditableDocument";
 import { JournalResponse } from "../../hooks/useClient";
 

diff --git a/src/views/edit/SaveActions.tsx b/src/views/edit/SaveActions.tsx
diff --git a/src/views/edit/editor/components/Toolbar.tsx b/src/views/edit/editor/components/Toolbar.tsx
@@ -10,7 +10,7 @@ import { withTooltip } from "./Tooltip";
 
 export const Toolbar = withCn(
   ToolbarPrimitive.Root,
-  "relative flex select-none items-center gap-1 bg-background",
+  "relative flex select-none items-center gap-1",
 );
 
 export const ToolbarToggleGroup = withCn(
@@ -30,21 +30,24 @@ export const ToolbarSeparator = withCn(
 
 const toolbarButtonVariants = cva(
   cn(
-    "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+    "inline-flex items-center justify-center text-xs ring-offset-background transition-colors disabled:pointer-events-none disabled:opacity-50",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "[&_svg:not([data-icon])]:h-5 [&_svg:not([data-icon])]:w-5",
+    "rounded-sm border border-transparent",
   ),
   {
     variants: {
       variant: {
         default:
-          "bg-transparent hover:bg-muted hover:text-muted-foreground aria-checked:bg-accent aria-checked:text-accent-foreground",
+          "hover:bg-slate-50 hover:border-slate-400 hover:border hover:text-accent-foreground aria-checked:text-accent-foreground ", //border-1  border-transparent bg-transparent
         outline:
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2",
-        lg: "h-11 px-5",
+        default: "h-7 p-1.5",
+        xs: "h-5 p-1.5",
+        sm: "h-7 p-1.5",
+        lg: "h-9 p-1.5",
       },
     },
     defaultVariants: {
@@ -54,8 +57,10 @@ const toolbarButtonVariants = cva(
   },
 );
 
-// todo: fix any
-const ToolbarButton: any = withTooltip(
+/**
+ * A styled button for the toolbar.
+ */
+const ToolbarButton = withTooltip(
   // eslint-disable-next-line react/display-name
   React.forwardRef<
     React.ElementRef<typeof ToolbarToggleItem>,
@@ -85,22 +90,12 @@ const ToolbarButton: any = withTooltip(
                 variant,
                 size,
               }),
-              isDropdown && "my-1 justify-between pr-1",
               className,
             )}
             value={pressed ? "single" : ""}
             {...props}
           >
-            {isDropdown ? (
-              <>
-                <div className="flex flex-1">{children}</div>
-                <div>
-                  <Icons.arrowDown className="ml-0.5 h-4 w-4" data-icon />
-                </div>
-              </>
-            ) : (
-              children
-            )}
+            {children}
           </ToolbarToggleItem>
         </ToolbarToggleGroup>
       ) : (
@@ -122,7 +117,9 @@ const ToolbarButton: any = withTooltip(
     },
   ),
 );
+
 ToolbarButton.displayName = "ToolbarButton";
+
 export { ToolbarButton };
 
 export const ToolbarToggleItem = withVariants(
@@ -148,13 +145,7 @@ export const ToolbarGroup = withRef<
         </div>
       )}
 
-      <div className="mx-1 flex items-center gap-1">{children}</div>
+      <div className="mx-1 flex items-center">{children}</div>
     </div>
   );
 });
-
-// Also https://platejs.org/docs/components/toolbar
-export const FixedToolbar = withCn(
-  Toolbar,
-  "supports-backdrop-blur:bg-background/60 sticky left-0 top-[57px] z-50 w-full overflow-x-auto rounded-t-lg border-b border-b-border bg-background/95 backdrop-blur",
-);
diff --git a/src/views/edit/editor/read-only-editor/ReadonlyToolbar.tsx b/src/views/edit/editor/read-only-editor/ReadonlyToolbar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { ToolbarGroup, FixedToolbar } from "../components/Toolbar";
+import { ToolbarGroup, Toolbar } from "../components/Toolbar";
 import { TooltipProvider } from "../components/Tooltip";
 import DebugDropdown from "../toolbar/components/DebugDropdown";
 import { EditorMode } from "../../EditorMode";
@@ -36,14 +36,15 @@ export function ReadonlyToolbar({
         >
           <div className="grow" />
           <>
-            <FixedToolbar>
+            <Toolbar>
               <ToolbarGroup>
                 <DebugDropdown
                   selectedEditorMode={selectedEditorMode}
                   setSelectedEditorMode={setSelectedEditorMode}
+                  deleteDocument={() => {}}
                 />
               </ToolbarGroup>
-            </FixedToolbar>
+            </Toolbar>
           </>
         </div>
       </div>