update layout

client-electron/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

client-electron/package.json

@@ -21,6 +21,9 @@
   },
   "dependencies": {
     "@postman/node-keytar": "^7.9.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@yume-chan/adb": "^0.0.22",
     "@yume-chan/adb-credential-web": "^0.0.22",
     "@yume-chan/adb-daemon-webusb": "^0.0.22",
@@ -29,9 +32,13 @@
     "@yume-chan/scrcpy-decoder-webcodecs": "^0.0.22",
     "@yume-chan/stream-extra": "^0.0.22",
     "axios": "^1.6.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.1",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7",
     "usb": "^2.11.0",
     "zustand": "^4.4.7"
   },
@@ -46,7 +53,6 @@
     "autoprefixer": "^10.4.16",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "daisyui": "^4.6.0",
     "electron": "^26.1.0",
     "electron-builder": "^24.6.4",
     "eslint": "^8.56.0",

client-electron/src/components/Header.tsx

@@ -1,9 +1,112 @@
-const Header: React.FC = () => {
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSubContent
+} from '@/components/ui/dropdown-menu'
+import { Link } from 'react-router-dom'
+import { DropdownMenuShortcut } from './ui/dropdown-menu'
+import userAuthStore from '@/hooks/userAuth'
+import { Button } from './ui/button'
+
+const DropdownMenuUser: React.FC = () => {
   return (
-    <header className="fixed bg-black w-full z-40 px-4 shadow-sm shadow-slate-500/40 pl-[20rem]">
-      <h2>Header</h2>
-    </header>
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <div className="flex rounded-full cursor-pointer focus:ring-4 focus:ring-gray-300 text-sm">
+          <img
+            className="w-10 h-10 rounded-full"
+            src="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            alt="user photo"
+          />
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56 me-4">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>
+            Profile
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Billing
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Settings
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            Keyboard shortcuts
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem>Team</DropdownMenuItem>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent>
+                <DropdownMenuItem>Email</DropdownMenuItem>
+                <DropdownMenuItem>Message</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>More...</DropdownMenuItem>
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            New Team
+            <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>GitHub</DropdownMenuItem>
+        <DropdownMenuItem>Support</DropdownMenuItem>
+        <DropdownMenuItem disabled>API</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          Log out
+          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }
 
-export default Header
+const Navbar: React.FC = () => {
+  const userInfo = userAuthStore(state => state.userInfo)
+
+  return (
+    <nav className="flex justify-center items-center fixed top-0 z-50 w-full py-5 bg-zinc-700">
+      <div className="flex justify-between items-center mx-auto w-full max-w-screen-2xl px-6 xs:px-8 sm:px-16">
+        <Link to="/">
+          <img src="/vite.svg" alt="logo" width={40} height={40} />
+        </Link>
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center ms-3">
+            {userInfo ? (
+              <DropdownMenuUser />
+            ) : (
+              <Button asChild variant={'outline'}>
+                <Link to={'/login?redirect_to=' + window.location.pathname}>
+                  Login
+                </Link>
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

client-electron/src/components/Sidebar.tsx

@@ -1,7 +1,31 @@
+import { DashboardIcon, RocketIcon } from '@radix-ui/react-icons'
+import { Link } from 'react-router-dom'
+
 const Sidebar: React.FC = () => {
   return (
-    <aside className="fixed bg-black text-gray-500 z-50 h-full shadow-lg shadow-gray-900/20 transition duration-300 ease-in-out w-[20rem]">
-      <h2>Sidebar</h2>
+    <aside className="fixed top-0 left-0 z-40 w-64 pt-20 h-screen">
+      <div className="h-full px-3 pb-4 overflow-y-auto bg-zinc-700">
+        <ul className="space-y-2 font-medium">
+          <li>
+            <Link
+              to="/"
+              className="flex items-center px-3 py-2 text-sm text-white rounded-md hover:bg-zinc-500"
+            >
+              <DashboardIcon className="inline-block w-6 h-6 mr-3" />
+              Dashboard
+            </Link>
+          </li>
+          <li>
+            <Link
+              to="/android"
+              className="flex items-center px-3 py-2 text-sm text-white rounded-md hover:bg-zinc-500"
+            >
+              <RocketIcon className="inline-block w-6 h-6 mr-3" />
+              Android
+            </Link>
+          </li>
+        </ul>
+      </div>
     </aside>
   )
 }

client-electron/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

client-electron/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,203 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

client-electron/src/index.css

@@ -1,9 +1,61 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+ 
 
-* {
-    min-width: 0px;
-    top: 0px;
-    left: 0px;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24.6 95% 53.1%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 24.6 95% 53.1%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 20.5 90.2% 48.2%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 20.5 90.2% 48.2%;
+  }
+}
+
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

client-electron/src/layouts/MainLayout.tsx

@@ -1,5 +1,5 @@
 import { Outlet, useNavigate } from 'react-router-dom'
-import Header from '../components/Header'
+import Navbar from '../components/Header'
 import Sidebar from '../components/Sidebar'
 import userAuthStore from '../hooks/userAuth'
 import { useShallow } from 'zustand/react/shallow'
@@ -30,13 +30,13 @@ const MainLayout = () => {
   }, [userInfo, getUserInfo, navigate, currentPath])
 
   return (
-    <div>
+    <>
+      <Navbar />
       <Sidebar />
-      <Header />
-      <main className="absolute top-[5rem] left-[21rem]">
+      <main className="p-8 sm:ml-64 mt-20">
         <Outlet />
       </main>
-    </div>
+    </>
   )
 }
 

client-electron/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

client-electron/src/pages/Android.tsx

@@ -166,8 +166,7 @@ const AndroidPage: React.FC = () => {
     const scrcpyOption = new ScrcpyOptions1_25({
       maxFps: 60,
       control: true,
-      logLevel: ScrcpyLogLevel1_18.Debug,
-      stayAwake: true
+      logLevel: ScrcpyLogLevel1_18.Debug
     })
     const _client = await AdbScrcpyClient.start(
       adb!,
@@ -182,7 +181,7 @@ const AndroidPage: React.FC = () => {
     if (videoStream) {
       const _decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
 
-      _decoder.renderer.style.maxHeight = 'inherit'
+      _decoder.renderer.style.maxHeight = '900px'
       screenRef.current?.appendChild(_decoder.renderer)
       videoStream?.stream.pipeTo(_decoder.writable)
       setDecoder(_decoder)
@@ -192,6 +191,7 @@ const AndroidPage: React.FC = () => {
           const react = _decoder.renderer.getBoundingClientRect()
           const x = e.clientX - react.left
           const y = e.clientY - react.top
+          console.log('mouse down at ' + x + ' ' + y)
           _client.controlMessageWriter?.injectTouch({
             action: AndroidMotionEventAction.Down,
             pointerId: ScrcpyPointerId.Mouse,
@@ -209,6 +209,7 @@ const AndroidPage: React.FC = () => {
           const react = _decoder.renderer.getBoundingClientRect()
           const x = e.clientX - react.left
           const y = e.clientY - react.top
+          console.log('mouse move at ' + x + ' ' + y)
           _client.controlMessageWriter?.injectTouch({
             action: AndroidMotionEventAction.Move,
             pointerId: ScrcpyPointerId.Mouse,
@@ -226,6 +227,7 @@ const AndroidPage: React.FC = () => {
           const react = _decoder.renderer.getBoundingClientRect()
           const x = e.clientX - react.left
           const y = e.clientY - react.top
+          console.log('mouse up at ' + x + ' ' + y)
           _client.controlMessageWriter?.injectTouch({
             action: AndroidMotionEventAction.Up,
             pointerId: ScrcpyPointerId.Mouse,
@@ -264,8 +266,22 @@ const AndroidPage: React.FC = () => {
     setDecoder(undefined)
   }
 
-  function rebootDevice() {
-    adb?.power.reboot()
+  async function rebootDevice() {
+    const res = await adb?.power.reboot()
+    console.log('[rebootDevice] res: ', res)
+  }
+
+  async function killScrcpyServer() {
+    const res = await adb?.subprocess.spawn(
+      'kill -9 $(pidof -s com.genymobile.scrcpy.Server)'
+    )
+    res?.stdout.pipeThrough(new DecodeUtf8Stream()).pipeTo(
+      new WritableStream({
+        write(chunk) {
+          console.log(chunk)
+        }
+      })
+    )
   }
 
   return (
@@ -286,6 +302,7 @@ const AndroidPage: React.FC = () => {
             {client ? 'Disconnect' : 'Connect'}
           </button>
           {adb ? <button onClick={rebootDevice}>Reboot</button> : ''}
+          {adb ? <button onClick={killScrcpyServer}>Kill Scrcpy</button> : ''}
         </div>
         <div className="bg-white">{adb && device ? device.name : ''}</div>
       </div>

client-electron/src/pages/Home.tsx

@@ -1,3 +1,5 @@
+import { Button } from '@/components/ui/button'
+import { RocketIcon } from '@radix-ui/react-icons'
 import React from 'react'
 import { Link } from 'react-router-dom'
 
@@ -5,9 +7,12 @@ const HomePage: React.FC = () => {
   return (
     <div>
       <h1>This is Home Page!!!!!!!</h1>
-      <button className="btn btn-primary">
-        <Link to="/android">Go to Android Page</Link>
-      </button>
+      <Button asChild>
+        <Link to="/android">
+          <RocketIcon className="mr-2 h-5 w-5" />
+          Go to Android Page
+        </Link>
+      </Button>
     </div>
   )
 }

client-electron/src/pages/Login.tsx

@@ -7,7 +7,7 @@ const LoginPage: React.FC = () => {
   const navigate = useNavigate()
 
   const redirectUrl =
-    new URLSearchParams(window.location.search).get('redirect') ?? '/'
+    new URLSearchParams(window.location.search).get('redirect_to') ?? '/'
 
   const loginWithGoogle = () => {
     // if is web mode then use window.open
@@ -41,7 +41,6 @@ const LoginPage: React.FC = () => {
       window.addEventListener('message', event => {
         if (event.data.payload === 'loginSuccess') {
           //   const { access_token, max_age, refresh_token } = event.data.data
-
           //   setPassword(
           //     import.meta.env.TAOBIN_RECIPE_MANAGER_KEY_CHAIN_SERVICE_NAME,
           //     import.meta.env

client-electron/tailwind.config.js

@@ -1,15 +1,83 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["class"],
   content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
   ],
+  prefix: "",
   theme: {
-    extend: {},
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        xs: "400px",
+        sm: "640px",
+        md: "768px",
+        lg: "1024px",
+        xl: "1220px",
+        "2xl": "1440px",
+        "3xl": "1700px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
   },
-  corePlugins: {
-    preflight: false,
-  },
-  plugins: [require('daisyui')],
-}
-
+  plugins: [require("tailwindcss-animate")],
+}

client-electron/tsconfig.json

@@ -20,7 +20,13 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+    }
   },
   "include": [
     "src",

client-electron/vite.config.electron.ts

@@ -30,6 +30,11 @@ export default defineConfig({
       renderer: {}
     })
   ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
   build: {
     outDir: 'dist-renderer'
   }

client-electron/vite.config.web.ts

@@ -1,3 +1,4 @@
+import path from 'node:path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -5,6 +6,11 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   envPrefix: 'TAOBIN_RECIPE_MANAGER_',
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
   build: {
     outDir: 'dist-web'
   },