🎨 Style: improve tray & rename dialog layout and add GitHub Sponsors button (#1416)

src/__tests__/renderer/adapters/plugins.spec.ts

@@ -1,10 +1,11 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { SHOW_PLUGIN_PAGE_MENU, OPEN_URL } from '#/events/constants'
+import { SHOW_PLUGIN_PAGE_MENU } from '#/events/constants'
 import { IRPCActionType } from '~/universal/types/enum'
 
 vi.mock('@/utils/dataSender', () => ({
   getConfig: vi.fn(),
   invokeRPC: vi.fn(),
+  openURL: vi.fn(),
   saveConfig: vi.fn(),
   sendRPC: vi.fn(),
   sendToMain: vi.fn()
@@ -14,6 +15,7 @@ import { pluginsAdapter } from '@/adapters/plugins'
 import {
   getConfig,
   invokeRPC,
+  openURL,
   saveConfig,
   sendRPC,
   sendToMain
@@ -152,15 +154,13 @@ describe('renderer/adapters plugins', () => {
     expect(sendRPCMock).toHaveBeenCalledWith(IRPCActionType.RELOAD_APP)
   })
 
-  it('opens homepage and awesome list through main events', () => {
+  it('opens homepage and awesome list through openURL', () => {
+    const openURLMock = vi.mocked(openURL)
+
     pluginsAdapter.openPluginHomepage('https://example.com')
     pluginsAdapter.openAwesomeList()
 
-    expect(sendToMainMock).toHaveBeenNthCalledWith(1, OPEN_URL, 'https://example.com')
-    expect(sendToMainMock).toHaveBeenNthCalledWith(
-      2,
-      OPEN_URL,
-      'https://github.com/PicGo/Awesome-PicGo'
-    )
+    expect(openURLMock).toHaveBeenNthCalledWith(1, 'https://example.com')
+    expect(openURLMock).toHaveBeenNthCalledWith(2, 'https://github.com/PicGo/Awesome-PicGo')
   })
 })

src/renderer/adapters/plugins.ts

@@ -1,7 +1,7 @@
 import axios from 'axios'
-import { OPEN_URL, SHOW_PLUGIN_PAGE_MENU } from '#/events/constants'
+import { SHOW_PLUGIN_PAGE_MENU } from '#/events/constants'
 import { IRPCActionType } from '~/universal/types/enum'
-import { getConfig, invokeRPC, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
+import { getConfig, invokeRPC, openURL, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
 import { ipc } from '@/utils/bridge'
 import type { ProviderPluginConfig } from '@/components/main/providers/types'
 import { normalizePluginConfigSchema } from '@/components/common/normalize-plugin-schema'
@@ -222,9 +222,9 @@ export const pluginsAdapter = {
     if (!url) {
       return
     }
-    sendToMain(OPEN_URL, url)
+    openURL(url)
   },
   openAwesomeList () {
-    sendToMain(OPEN_URL, 'https://github.com/PicGo/Awesome-PicGo')
+    openURL('https://github.com/PicGo/Awesome-PicGo')
   }
 }

src/renderer/adapters/settings.ts

@@ -1,7 +1,7 @@
-import { GET_PICBEDS, OPEN_URL, PICGO_OPEN_FILE, TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
+import { GET_PICBEDS, PICGO_OPEN_FILE, TOGGLE_SHORTKEY_MODIFIED_MODE } from '#/events/constants'
 import { IRPCActionType } from '~/universal/types/enum'
 import { appConfigAdapter } from './app-config'
-import { getConfig, invokeRPC, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
+import { getConfig, invokeRPC, openURL, saveConfig, sendRPC, sendToMain } from '@/utils/dataSender'
 import { ipc } from '@/utils/bridge'
 
 export const settingsAdapter = {
@@ -27,7 +27,7 @@ export const settingsAdapter = {
     sendToMain(PICGO_OPEN_FILE, 'picgo.log')
   },
   openExternalUrl (url: string) {
-    sendToMain(OPEN_URL, url)
+    openURL(url)
   },
   updateServer () {
     sendToMain('updateServer')

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

@@ -86,13 +86,13 @@ export function PicGoRenamePage() {
 
   return (
     <UtilityWindowLayout page="rename">
-      <AppMainCard className="h-(--app-utility-shell-height) w-full flex-none rounded-xl border-(--app-panel-border) bg-(--app-panel-bg) px-4 py-4">
-        <form className="flex h-full flex-col" onSubmit={handleConfirm}>
+      <AppMainCard className="h-(--app-utility-shell-height) w-full flex-none rounded-xl border-(--app-panel-border) bg-(--app-panel-bg) px-4 py-2">
+        <form className="flex h-full flex-col gap-2" onSubmit={handleConfirm}>
           <Label htmlFor="rename-file-name" className="text-sm font-semibold">
             {t("FILE_RENAME")}
           </Label>
 
-          <div className="flex flex-1 items-center">
+          <div>
             <div className="relative w-full">
               <Input
                 id="rename-file-name"
@@ -127,7 +127,7 @@ export function PicGoRenamePage() {
             </div>
           </div>
 
-          <div className="flex justify-end gap-1.5">
+          <div className="flex justify-end gap-1.5 pt-3">
             <Button
               type="button"
               variant="outline"

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

@@ -124,13 +124,15 @@ export function PicGoTrayPage () {
   return (
     <UtilityWindowLayout page='tray'>
       <AppMainCard className='h-(--app-utility-shell-height) w-full gap-0 overflow-hidden rounded-xl border-(--app-panel-border) bg-(--app-panel-bg) py-0'>
-        <button
-          type='button'
-          className='h-8 w-full cursor-pointer bg-primary/80 px-3 text-center text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary dark:bg-primary/75 dark:hover:bg-primary'
-          onClick={handleOpenMainWindow}
-        >
-          {t('OPEN_MAIN_WINDOW')}
-        </button>
+        <div className='px-2 pt-2 pb-2'>
+          <button
+            type='button'
+            className='h-7 w-full cursor-pointer rounded-full border-none bg-primary/80 text-center text-xs font-semibold text-primary-foreground transition-colors hover:bg-primary dark:bg-primary/75 dark:hover:bg-primary'
+            onClick={handleOpenMainWindow}
+          >
+            {t('OPEN_MAIN_WINDOW')}
+          </button>
+        </div>
 
         <ScrollArea className='min-h-0 flex-1'>
           <div className='space-y-2 p-2'>

src/renderer/components/main/layout/main-more-dialog.tsx

@@ -13,7 +13,7 @@ import {
   DialogHeader,
   DialogTitle
 } from '@/components/ui/dialog'
-import { getConfig, getPicBeds } from '@/utils/dataSender'
+import { getConfig, getPicBeds, openURL } from '@/utils/dataSender'
 import { clipboard, ipc } from '@/utils/bridge'
 import { toast } from 'sonner'
 import { mainMoreAdapter } from '@/adapters/main-more'
@@ -182,6 +182,18 @@ export function MainMoreDialog ({ open, onOpenChange }: MainMoreDialogProps) {
             <DialogDescription>{t('PICGO_SPONSOR_TEXT')}</DialogDescription>
           </DialogHeader>
 
+          <div className='flex justify-center'>
+            <Button
+              type='button'
+              variant='outline'
+              className='gap-2'
+              onClick={() => openURL('https://github.com/sponsors/Molunerfinn')}
+            >
+              <HeartHandshakeIcon className='size-4' />
+              GitHub Sponsors
+            </Button>
+          </div>
+
           <div className='grid gap-4 sm:grid-cols-2'>
             <div className='space-y-3 rounded-xl border border-border p-4 text-center'>
               <img