create-tauri-ui 0.2.1 → 0.3.0

package/templates/next/src/components/menu.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { useCallback } from "react"
+import { useCallback, useEffect, useState } from "react"
 import Image from "next/image"
 import { usePathname } from "next/navigation"
 import logo from "@/assets/logo.png"
-import { Globe, Maximize, Mic, Music2, Sailboat, X, Zap } from "lucide-react"
+import { Globe, Mic, Sailboat } from "lucide-react"
+import { WindowControls, WindowTitlebar } from "tauri-controls"
 
-import { Button } from "@/components/ui/button"
 import {
   Menubar,
   MenubarCheckboxItem,
@@ -24,236 +24,200 @@ import {
   MenubarTrigger,
 } from "@/components/ui/menubar"
 
+import { AboutDialog } from "./about-dialog"
 import { ExamplesNav } from "./examples-nav"
-import { Icons } from "./icons"
 import { MenuModeToggle } from "./menu-mode-toggle"
-import { ModeToggle } from "./mode-toggle"
+import { Dialog, DialogTrigger } from "./ui/dialog"
 
 export function Menu() {
-  const minimizeWindow = useCallback(async () => {
-    const { appWindow } = await import("@tauri-apps/plugin-window")
-
-    appWindow?.minimize()
-  }, [])
-
-  const maximizeWindow = useCallback(async () => {
-    const { appWindow } = await import("@tauri-apps/plugin-window")
-    const isMaximized = await appWindow?.isMaximized()
-
-    if (isMaximized) {
-      appWindow?.unmaximize()
-    } else {
-      appWindow?.maximize()
-    }
-  }, [])
-
   const closeWindow = useCallback(async () => {
     const { appWindow } = await import("@tauri-apps/plugin-window")
-
     appWindow.close()
   }, [])
 
   return (
-    <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
-      {/* App Logo */}
-      <MenubarMenu>
-        <div className="inline-flex h-fit w-fit items-center text-cyan-500">
-          {usePathname() === "/" || usePathname() === "/examples/music" ? (
-            <Image src={logo} alt="logo" width={40} />
-          ) : (
-            <Sailboat className="h-5 w-5" />
-          )}
-        </div>
-      </MenubarMenu>
+    <WindowTitlebar
+    // controlsOrder="system"
+    // windowControlsProps={{ platform: "macos" }}
+    >
+      <Menubar className="rounded-none border-b border-none pl-2 lg:pl-3">
+        <MenubarMenu>
+          {/* App Logo */}
+          <div className="inline-flex h-fit w-fit items-center text-cyan-500">
+            {usePathname() === "/" || usePathname() === "/examples/music" ? (
+              <Image src={logo} alt="logo" width={20} height={20} />
+            ) : (
+              <Sailboat className="h-5 w-5" />
+            )}
+          </div>
+        </MenubarMenu>
 
-      <MenubarMenu>
-        <MenubarTrigger className="font-bold">App</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>About App</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
-          </MenubarItem>
-          <MenubarShortcut />
-          <MenubarItem onClick={closeWindow}>
-            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger className="relative">File</MenubarTrigger>
-        <MenubarContent>
-          <MenubarSub>
-            <MenubarSubTrigger>New</MenubarSubTrigger>
-            <MenubarSubContent className="w-[230px]">
+        <MenubarMenu>
+          <MenubarTrigger className="font-bold">App</MenubarTrigger>
+          <Dialog modal={false}>
+            <MenubarContent>
+              <DialogTrigger asChild>
+                <MenubarItem>About App</MenubarItem>
+              </DialogTrigger>
+
+              <MenubarSeparator />
               <MenubarItem>
-                Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+                Preferences... <MenubarShortcut>⌘,</MenubarShortcut>
               </MenubarItem>
-              <MenubarItem disabled>
-                Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+              <MenubarSeparator />
+              <MenubarItem>
+                Hide Music... <MenubarShortcut>⌘H</MenubarShortcut>
               </MenubarItem>
               <MenubarItem>
-                Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
+                Hide Others... <MenubarShortcut>⇧⌘H</MenubarShortcut>
               </MenubarItem>
-              <MenubarItem>Playlist Folder</MenubarItem>
-              <MenubarItem disabled>Genius Playlist</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>
-            Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>Library</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>Update Cloud Library</MenubarItem>
-              <MenubarItem>Update Genius</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Organize Library...</MenubarItem>
-              <MenubarItem>Export Library...</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Import Playlist...</MenubarItem>
-              <MenubarItem disabled>Export Playlist...</MenubarItem>
-              <MenubarItem>Show Duplicate Items</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>Get Album Artwork</MenubarItem>
-              <MenubarItem disabled>Get Track Names</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarItem>
-            Import... <MenubarShortcut>⌘O</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
-          </MenubarItem>
-          <MenubarItem>Convert</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Page Setup...</MenubarItem>
-          <MenubarItem disabled>
-            Print... <MenubarShortcut>⌘P</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Edit</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem disabled>
-            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem disabled>
-            Cut <MenubarShortcut>⌘X</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Copy <MenubarShortcut>⌘C</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Paste <MenubarShortcut>⌘V</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Select All <MenubarShortcut>⌘A</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem disabled>
-            Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            Smart Dictation...{" "}
-            <MenubarShortcut>
-              <Mic className="h-4 w-4" />
-            </MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            Emoji & Symbols{" "}
-            <MenubarShortcut>
-              <Globe className="h-4 w-4" />
-            </MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>View</MenubarTrigger>
-        <MenubarContent>
-          <MenubarCheckboxItem>Show Playing Next</MenubarCheckboxItem>
-          <MenubarCheckboxItem checked>Show Lyrics</MenubarCheckboxItem>
-          <MenubarSeparator />
-          <MenubarItem inset disabled>
-            Show Status Bar
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Hide Sidebar</MenubarItem>
-          <MenubarItem disabled inset>
-            Enter Full Screen
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>Account</MenubarTrigger>
-        <MenubarContent forceMount>
-          <MenubarLabel inset>Switch Account</MenubarLabel>
-          <MenubarSeparator />
-          <MenubarRadioGroup value="benoit">
-            <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-            <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-            <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-          </MenubarRadioGroup>
-          <MenubarSeparator />
-          <MenubarItem inset>Manage Famliy...</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem inset>Add Account...</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
+              <MenubarShortcut />
+              <MenubarItem onClick={closeWindow}>
+                Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
 
-      <MenuModeToggle />
+            <AboutDialog />
+          </Dialog>
+        </MenubarMenu>
 
-      <ExamplesNav />
+        <MenubarMenu>
+          <MenubarTrigger className="relative">File</MenubarTrigger>
+          <MenubarContent>
+            <MenubarSub>
+              <MenubarSubTrigger>New</MenubarSubTrigger>
+              <MenubarSubContent className="w-[230px]">
+                <MenubarItem>
+                  Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem disabled>
+                  Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>
+                  Smart Playlist... <MenubarShortcut>⌥⌘N</MenubarShortcut>
+                </MenubarItem>
+                <MenubarItem>Playlist Folder</MenubarItem>
+                <MenubarItem disabled>Genius Playlist</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarItem>
+              Open Stream URL... <MenubarShortcut>⌘U</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Close Window <MenubarShortcut>⌘W</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarSub>
+              <MenubarSubTrigger>Library</MenubarSubTrigger>
+              <MenubarSubContent>
+                <MenubarItem>Update Cloud Library</MenubarItem>
+                <MenubarItem>Update Genius</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Organize Library...</MenubarItem>
+                <MenubarItem>Export Library...</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Import Playlist...</MenubarItem>
+                <MenubarItem disabled>Export Playlist...</MenubarItem>
+                <MenubarItem>Show Duplicate Items</MenubarItem>
+                <MenubarSeparator />
+                <MenubarItem>Get Album Artwork</MenubarItem>
+                <MenubarItem disabled>Get Track Names</MenubarItem>
+              </MenubarSubContent>
+            </MenubarSub>
+            <MenubarItem>
+              Import... <MenubarShortcut>⌘O</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>Burn Playlist to Disc...</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
+            </MenubarItem>
+            <MenubarItem>Convert</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>Page Setup...</MenubarItem>
+            <MenubarItem disabled>
+              Print... <MenubarShortcut>⌘P</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Edit</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem disabled>
+              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem disabled>
+              Cut <MenubarShortcut>⌘X</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Copy <MenubarShortcut>⌘C</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Paste <MenubarShortcut>⌘V</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Select All <MenubarShortcut>⌘A</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem disabled>
+              Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>
+              Smart Dictation...{" "}
+              <MenubarShortcut>
+                <Mic className="h-4 w-4" />
+              </MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>
+              Emoji & Symbols{" "}
+              <MenubarShortcut>
+                <Globe className="h-4 w-4" />
+              </MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>View</MenubarTrigger>
+          <MenubarContent>
+            <MenubarCheckboxItem>Show Playing Next</MenubarCheckboxItem>
+            <MenubarCheckboxItem checked>Show Lyrics</MenubarCheckboxItem>
+            <MenubarSeparator />
+            <MenubarItem inset disabled>
+              Show Status Bar
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Hide Sidebar</MenubarItem>
+            <MenubarItem disabled inset>
+              Enter Full Screen
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger>Account</MenubarTrigger>
+          <MenubarContent forceMount>
+            <MenubarLabel inset>Switch Account</MenubarLabel>
+            <MenubarSeparator />
+            <MenubarRadioGroup value="benoit">
+              <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
+              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
+              <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
+            </MenubarRadioGroup>
+            <MenubarSeparator />
+            <MenubarItem inset>Manage Famliy...</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem inset>Add Account...</MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
 
-      <div
-        data-tauri-drag-region
-        className="inline-flex h-full w-full justify-end"
-      >
-        {/* <div className="pr-3">
-          <ModeToggle />
-        </div> */}
+        <MenuModeToggle />
 
-        <Button
-          onClick={minimizeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <Icons.minimize className="h-3 w-3" />
-        </Button>
-        <Button
-          onClick={maximizeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <Maximize className="h-4 w-4" />
-        </Button>
-        <Button
-          onClick={closeWindow}
-          variant="ghost"
-          className="h-8 focus:outline-none"
-        >
-          <X className="h-4 w-4" />
-        </Button>
-      </div>
-    </Menubar>
+        <ExamplesNav />
+      </Menubar>
+    </WindowTitlebar>
   )
 }

package/templates/next/src/components/page-header.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import Balance from "react-wrap-balancer"
 
 import { cn } from "@/lib/utils"

package/templates/next/src/components/ui/accordion.tsx

@@ -1,60 +1,60 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      className
-    )}
-    {...props}
-  >
-    <div className="pb-4 pt-0">{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className={cn(
+      "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      className
+    )}
+    {...props}
+  >
+    <div className="pb-4 pt-0">{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }