🎨 Style(gui): refine title bar layout, restore mini window button and fix related bugs (#1421)

src/main/apis/app/window/windowList.ts

@@ -167,8 +167,7 @@ windowList.set(IWindowList.MINI_WINDOW, {
       fullscreenable: false,
       skipTaskbar: true,
       resizable: false,
-      transparent: false,
-      backgroundColor: '#0f172a',
+      transparent: true,
       icon: getStaticPath('logo.png'),
       webPreferences: {
         ...defaultWebPreferences

src/renderer/adapters/window-controls.ts

@@ -19,5 +19,8 @@ export const windowControlsAdapter = {
   },
   minimizeWindow () {
     sendToMain(MINIMIZE_WINDOW)
+  },
+  openMiniWindow () {
+    sendToMain('openMiniWindow')
   }
 }

src/renderer/components/common/title-bar.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState, type CSSProperties } from 'react'
-import { Copy, Maximize2, Minus, Square, X } from 'lucide-react'
+import { Copy, Maximize2, Minus, Shrink, Square, X } from 'lucide-react'
 import { WINDOW_STATE_CHANGED } from '#/events/constants'
 import { windowControlsAdapter } from '@/adapters/window-controls'
 import { ipc } from '@/utils/bridge'
 import { cn } from '@/lib/utils'
-import pkg from 'root/package.json'
 
 interface TitleBarProps {
   isMac?: boolean
@@ -12,7 +11,6 @@ interface TitleBarProps {
 
 export function TitleBar ({ isMac = false }: TitleBarProps) {
   const [isMaximized, setIsMaximized] = useState(false)
-  const version = pkg.version
 
   useEffect(() => {
     async function syncWindowState () {
@@ -103,6 +101,16 @@ export function TitleBar ({ isMac = false }: TitleBarProps) {
       >
         <Minus className="size-4" />
       </button>
+      <button
+        type="button"
+        aria-label="Open mini window"
+        className="flex h-full w-12 cursor-pointer items-center justify-center transition-colors hover:bg-black/5 dark:hover:bg-white/10"
+        onClick={() => {
+          windowControlsAdapter.openMiniWindow()
+        }}
+      >
+        <Shrink className="size-4" />
+      </button>
       <button
         type="button"
         aria-label={isMaximized ? 'Restore window' : 'Maximize window'}
@@ -135,10 +143,6 @@ export function TitleBar ({ isMac = false }: TitleBarProps) {
         {isMac ? macWindowControls : null}
       </div>
 
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-medium opacity-50">
-        {`PicGo - ${version}`}
-      </div>
-
       <div className="flex h-full items-center">
         {!isMac ? desktopWindowControls : null}
       </div>

src/renderer/components/independent-window/mini/picgo-mini-page.tsx

@@ -41,6 +41,7 @@ export function PicGoMiniPage() {
   const { t } = useTranslation()
   const isLinuxPlatform = isLinux()
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const didDragRef = useRef(false)
   const [isDragOver, setIsDragOver] = useState(false)
   const [dragging, setDragging] = useState(false)
   const [mouseDownX, setMouseDownX] = useState(-1)
@@ -49,6 +50,11 @@ export function PicGoMiniPage() {
   const [mouseDownScreenY, setMouseDownScreenY] = useState(-1)
   const { showProgress, progress, hasError, uploadFiles } = useMiniUpload()
 
+  useEffect(() => {
+    document.body.style.background = 'transparent'
+    document.documentElement.style.background = 'transparent'
+  }, [])
+
   const handleOpenFilePicker = () => {
     fileInputRef.current?.click()
   }
@@ -56,6 +62,7 @@ export function PicGoMiniPage() {
   useEffect(() => {
     const handleMouseDown = (event: MouseEvent) => {
       setDragging(true)
+      didDragRef.current = false
       setMouseDownX(event.pageX)
       setMouseDownY(event.pageY)
       setMouseDownScreenX(event.screenX)
@@ -70,6 +77,7 @@ export function PicGoMiniPage() {
         return
       }
 
+      didDragRef.current = true
       miniPageAdapter.moveMiniWindow({
         x: event.screenX - mouseDownX,
         y: event.screenY - mouseDownY,
@@ -166,7 +174,7 @@ export function PicGoMiniPage() {
   }
 
   return (
-    <UtilityWindowLayout page="mini" shellClassName="flex">
+    <UtilityWindowLayout page="mini" shellClassName="flex" className="bg-transparent">
       <div
         id="mini-page"
         className={cn(
@@ -202,8 +210,6 @@ export function PicGoMiniPage() {
             tabIndex={0}
             aria-label={t("CLICK_TO_UPLOAD")}
             className="h-full w-full"
-            onClick={handleOpenFilePicker}
-            onDoubleClick={handleOpenFilePicker}
             onKeyDown={(event) => {
               if (event.key === "Enter" || event.key === " ") {
                 event.preventDefault()

src/renderer/components/main/dashboard/history-panel.tsx

@@ -98,7 +98,7 @@ function buildGroupKey (timestamp: number) {
   return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
 }
 
-function formatGroupLabel (timestamp: number, t: (key: string) => string) {
+function formatGroupLabel (timestamp: number, t: (key: string) => string, locale?: string) {
   const date = new Date(timestamp)
   const now = new Date()
   const yesterday = new Date(now)
@@ -112,7 +112,7 @@ function formatGroupLabel (timestamp: number, t: (key: string) => string) {
     return t('HISTORY_PANEL_YESTERDAY')
   }
 
-  return new Intl.DateTimeFormat(undefined, {
+  return new Intl.DateTimeFormat(locale, {
     year: 'numeric',
     month: 'short',
     day: 'numeric'
@@ -121,7 +121,8 @@ function formatGroupLabel (timestamp: number, t: (key: string) => string) {
 
 function buildHistoryGroups (
   items: DashboardHistoryItem[],
-  t: (key: string) => string
+  t: (key: string) => string,
+  locale?: string
 ): DashboardHistoryGroup[] {
   const groups: DashboardHistoryGroup[] = []
 
@@ -136,7 +137,7 @@ function buildHistoryGroups (
 
     groups.push({
       key,
-      label: formatGroupLabel(item.timestamp, t),
+      label: formatGroupLabel(item.timestamp, t, locale),
       items: [item]
     })
   })
@@ -198,7 +199,7 @@ export function HistoryPanel ({
   onStartImport?: () => Promise<void> | void
   onCloudRefresh?: () => Promise<void> | void
 }) {
-  const { t } = useTranslation()
+  const { t, i18n } = useTranslation()
   const albumSource = useAlbumStore.use.albumSource()
   const { userInfo: cloudUserInfo, isPaid: isCloudPaidUser } = usePicGoCloudUserInfo()
   const isCloud = albumSource === AlbumSource.CLOUD
@@ -223,7 +224,7 @@ export function HistoryPanel ({
     }
 
     return yesterdayLabel
-  })
+  }, i18n.language)
   const entries = buildHistoryEntries(groups)
   const virtuosoKey = buildVirtuosoResetKey(groups, keyword)
   const previewItems: AlbumPhoto[] = filteredItems

src/renderer/components/main/layout/picgo-app-sidebar.tsx

@@ -16,6 +16,7 @@ import {
 import { useMatchRoute, useNavigate } from "@tanstack/react-router"
 import { useTranslation } from "react-i18next"
 
+import pkg from 'root/package.json'
 import { Button } from "@/components/ui/button"
 import { Card, CardContent } from "@/components/ui/card"
 import { ScrollArea } from "@/components/ui/scroll-area"
@@ -95,11 +96,12 @@ export function PicGoAppSidebar({
               />
               <span
                 className={cn(
-                  'text-xl font-bold tracking-tight transition-all duration-300 whitespace-nowrap overflow-hidden origin-left',
+                  'inline-flex items-center text-xl font-bold tracking-tight transition-all duration-300 whitespace-nowrap overflow-hidden origin-left',
                   collapsed ? 'w-0 opacity-0 scale-90' : 'w-auto opacity-100 scale-100'
                 )}
               >
                 PicGo
+                <span className="ml-1.5 text-xs font-normal text-muted-foreground">v{pkg.version}</span>
               </span>
             </div>