feat: 🎸 windows topbar

src-tauri/capabilities/migrated.json

@@ -7,6 +7,7 @@
     "path:default",
     "event:default",
     "window:default",
+    "window:allow-start-dragging",
     "webview:allow-print",
     "app:default",
     "image:default",
@@ -35,6 +36,9 @@
     "os:allow-hostname",
     "window:allow-start-dragging",
     "window:allow-set-fullscreen",
+    "window:allow-minimize",
+    "window:allow-close",
+    "window:allow-maximize",
     "updater:default",
     "process:default",
     "clipboard-manager:default",

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","webview:allow-print","app:default","image:default","resources:default","menu:default","tray:default","shell:allow-open","fs:default","fs:write-all",{"identifier":"fs:scope","allow":[{"path":"**"}]},"shell:default","dialog:allow-save","dialog:allow-message","dialog:allow-open","dialog:allow-confirm","os:allow-platform","os:allow-version","os:allow-os-type","os:allow-family","os:allow-arch","os:allow-exe-extension","os:allow-locale","os:allow-hostname","window:allow-start-dragging","window:allow-set-fullscreen","updater:default","process:default","clipboard-manager:default","clipboard-manager:allow-write-text"]}}
+{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["path:default","event:default","window:default","window:allow-start-dragging","webview:allow-print","app:default","image:default","resources:default","menu:default","tray:default","shell:allow-open","fs:default","fs:write-all",{"identifier":"fs:scope","allow":[{"path":"**"}]},"shell:default","dialog:allow-save","dialog:allow-message","dialog:allow-open","dialog:allow-confirm","os:allow-platform","os:allow-version","os:allow-os-type","os:allow-family","os:allow-arch","os:allow-exe-extension","os:allow-locale","os:allow-hostname","window:allow-start-dragging","window:allow-set-fullscreen","window:allow-minimize","window:allow-close","window:allow-maximize","updater:default","process:default","clipboard-manager:default","clipboard-manager:allow-write-text"]}}

src-tauri/tauri.conf.json

@@ -65,7 +65,8 @@
         "hiddenTitle": true,
         "width": 1200,
         "titleBarStyle": "Overlay",
-        "dragDropEnabled": true
+        "dragDropEnabled": true,
+        "decorations": false
       }
     ],
     "security": {

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,17 @@
+{
+  "app": {
+    "windows": [
+      {
+        "fullscreen": false,
+        "height": 780,
+        "resizable": true,
+        "title": "MDX Editor",
+        "hiddenTitle": true,
+        "width": 1200,
+        "titleBarStyle": "Overlay",
+        "dragDropEnabled": true,
+        "decorations": true
+      }
+    ]
+  }
+}

src/components/FileTree.tsx

@@ -7,7 +7,6 @@ import React, {
   useRef,
   memo,
   useMemo,
-  useContext,
 } from 'react'
 import {
   isMdFile,
@@ -16,6 +15,7 @@ import {
   renamePath,
   getCurrentFolderName,
   findPathInTree,
+  isMacOS,
 } from './utils/file-tree-util'
 
 import { useToast } from '@/components/ui/use-toast'
@@ -49,7 +49,6 @@ import {
 } from 'lucide-react'
 import dayjs from 'dayjs'
 import { useLocalStorage } from 'react-use'
-import { Context } from './Layout'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useConfirm } from './ui/confirm'
 
@@ -97,7 +96,6 @@ const FileTree = forwardRef<TreeRef, Props>(
   ) => {
     const { toast } = useToast()
     const { confirm } = useConfirm()
-    const { isMacOS } = useContext(Context)
     const { t } = useTranslation()
     const [scrollLine, setScrollLine] = useState(1)
     const [toc, setToc] = useState<string[]>([])
@@ -564,11 +562,15 @@ title: ${file}
 
     return (
       <div className="relative w-full overflow-auto h-screen flex flex-col">
+        {isMacOS ? (
+          <div data-tauri-drag-region className="h-6" />
+        ) : (
+          <div data-tauri-drag-region className="h-[30px]" />
+        )}
         <div
           data-tauri-drag-region
           className={clsx(
-            'px-4 pb-3 bg-white dark:bg-gray-900 sticky top-0 left-0 z-10 border-b flex-none dark:shadow-highlight/4',
-            isMacOS ? 'pt-6' : 'pt-4'
+            'pb-3 px-3 bg-white dark:bg-gray-900 sticky top-0 left-0 z-10 border-b flex-none dark:shadow-highlight/4'
           )}
         >
           <div className="h-9 flex items-center">

src/components/Header.js

@@ -1,32 +1,33 @@
 import { Logo } from './Logo'
 import clsx from 'clsx'
 import { toggleTheme } from '../utils/theme'
-import React, { useContext } from 'react'
+import React from 'react'
 import { Sun, MoonStar } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { Context } from './Layout'
+import TopBar from './TopBar'
 
 export default function Header({ children, logo }) {
-  const { isMacOS } = useContext(Context)
   return (
-    <div
-      data-tauri-drag-region
-      className={clsx(
-        'sticky top-0 z-20 flex-none pb-3 px-5 flex items-center justify-between antialiased select-none border-b dark:shadow-lg',
-        isMacOS ? 'pt-6' : 'pt-4'
-      )}
-      style={{ fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"' }}
-    >
-      <div className="flex items-center min-w-0 space-x-2">
-        {logo || <Logo className="flex-none text-black dark:text-white" />}
-      </div>
-      <div className="flex items-center space-x-2">
-        {children}
-        <div className="block mx-2 w-px h-6 bg-gray-200 dark:bg-gray-700" />
-        <Button size="icon" onClick={toggleTheme} variant="outline">
-          <Sun className="w-5 h-5 stroke-primary fill-sky-100 dark:fill-sky-400/50 hidden dark:block" />
-          <MoonStar className="w-5 h-5 stroke-primary fill-sky-100 dark:fill-sky-400/50 dark:hidden" />
-        </Button>
+    <div>
+      <TopBar />
+      <div
+        data-tauri-drag-region
+        className={clsx(
+          'relative top-0 z-20 flex-none pb-3 px-5 flex items-center justify-between antialiased select-none border-b dark:shadow-lg'
+        )}
+        style={{ fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"' }}
+      >
+        <div className="flex items-center min-w-0 space-x-2">
+          {logo || <Logo className="flex-none text-black dark:text-white" />}
+        </div>
+        <div className="flex items-center space-x-2">
+          {children}
+          <div className="block mx-2 w-px h-6 bg-gray-200 dark:bg-gray-700" />
+          <Button size="icon" onClick={toggleTheme} variant="outline">
+            <Sun className="w-5 h-5 stroke-primary fill-sky-100 dark:fill-sky-400/50 hidden dark:block" />
+            <MoonStar className="w-5 h-5 stroke-primary fill-sky-100 dark:fill-sky-400/50 dark:hidden" />
+          </Button>
+        </div>
       </div>
     </div>
   )

src/components/Layout.tsx

@@ -17,13 +17,11 @@ interface Config {
 }
 
 export const Context = React.createContext<{
-  isMacOS: boolean
   config: Config
   open: boolean
   setConfig: React.Dispatch<React.SetStateAction<Config>>
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
 }>({
-  isMacOS: false,
   config: {
     journalDir: '',
     journalTemplateDir: '',
@@ -36,7 +34,6 @@ export const Context = React.createContext<{
 })
 
 export default function Layout({ children }: Props) {
-  const [isMacOS, setIsMacOS] = useState(false)
   let [config, setConfig] = useLocalStorage<Config>('config', {
     journalDir: '',
     journalTemplateDir: '',
@@ -45,16 +42,10 @@ export default function Layout({ children }: Props) {
   })
 
   let [open, setOpen] = useState(false)
-  useLayoutEffect(() => {
-    getMacOS().then((res: boolean) => {
-      setIsMacOS(res)
-    })
-  }, [])
 
   return (
     <Context.Provider
       value={{
-        isMacOS,
         config: config!,
         setConfig,
         open,

src/components/TopBar.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { getCurrent } from '@tauri-apps/api/window'
+import type { SVGProps } from 'react'
+
+import { isMacOS } from './utils/file-tree-util'
+
+export function MdiWindowMinimize(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path fill="currentColor" d="M20 14H4v-4h16"></path>
+    </svg>
+  )
+}
+
+export function MdiWindowMaximize(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z"></path>
+    </svg>
+  )
+}
+
+export function MdiClose(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1em"
+      height="1em"
+      viewBox="0 0 22 22"
+      {...props}
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2.5}
+        d="m7 7l10 10M7 17L17 7"
+      ></path>
+    </svg>
+  )
+}
+export default function TitleBar() {
+  if (isMacOS) {
+    return <div data-tauri-drag-region className="h-6" />
+  }
+  return (
+    <div
+      data-tauri-drag-region
+      className="h-[30px] flex justify-end select-none"
+    >
+      <div
+        onClick={() => getCurrent().minimize()}
+        className="w-[30px] h-[30px] inline-flex justify-center items-center cursor-pointer"
+      >
+        <MdiWindowMinimize />
+      </div>
+      <div
+        onClick={() => getCurrent().maximize()}
+        className="w-[30px] h-[30px] inline-flex justify-center items-center cursor-pointer"
+      >
+        <MdiWindowMaximize />
+      </div>
+      <div
+        onClick={() => getCurrent().close()}
+        className="w-[30px] h-[30px] inline-flex justify-center items-center cursor-pointer"
+      >
+        <MdiClose />
+      </div>
+    </div>
+  )
+}

src/components/utils/file-tree-util.js

@@ -121,3 +121,5 @@ export function getCurrentFolderName(filePath) {
   const lastPart = parts[parts.length - 1] // 获取路径中的最后一个部分
   return lastPart
 }
+
+export const isMacOS = navigator.userAgent.includes('Mac OS X')