From b1e39ab4b36fb1732c265df2a9e39c6e514f41e6 Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Thu, 10 Oct 2024 20:36:23 +0800
Subject: [PATCH] fix select profile

#223
---
 .../src/components/override/override-item.tsx | 153 ++++++------
 .../src/components/profiles/profile-item.tsx  | 231 +++++++++---------
 .../src/components/sider/profile-card.tsx     |  24 +-
 3 files changed, 213 insertions(+), 195 deletions(-)

diff --git a/src/renderer/src/components/override/override-item.tsx b/src/renderer/src/components/override/override-item.tsx
index 8d4622b..b836a51 100644
--- a/src/renderer/src/components/override/override-item.tsx
+++ b/src/renderer/src/components/override/override-item.tsx
@@ -167,86 +167,85 @@ const OverrideItem: React.FC<Props> = (props) => {
           setOpenFileEditor(true)
         }}
       >
-        <CardBody>
-          <div className="flex justify-between h-[32px]">
-            <h3
-              ref={setNodeRef}
-              {...attributes}
-              {...listeners}
-              title={info?.name}
-              className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] text-foreground`}
-            >
-              {info?.name}
-            </h3>
-            <div className="flex">
-              {info.type === 'remote' && (
-                <Button
-                  isIconOnly
-                  size="sm"
-                  variant="light"
-                  color="default"
-                  disabled={updating}
-                  onPress={async () => {
-                    setUpdating(true)
-                    try {
-                      await addOverrideItem(info)
-                      await restartCore()
-                    } catch (e) {
-                      alert(e)
-                    } finally {
-                      setUpdating(false)
-                    }
-                  }}
-                >
-                  <IoMdRefresh
+        <div ref={setNodeRef} {...attributes} {...listeners} className="h-full w-full">
+          <CardBody>
+            <div className="flex justify-between h-[32px]">
+              <h3
+                title={info?.name}
+                className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] text-foreground`}
+              >
+                {info?.name}
+              </h3>
+              <div className="flex">
+                {info.type === 'remote' && (
+                  <Button
+                    isIconOnly
+                    size="sm"
+                    variant="light"
                     color="default"
-                    className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
-                  />
-                </Button>
-              )}
-
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button isIconOnly size="sm" variant="light" color="default">
-                    <IoMdMore color="default" className={`text-[24px]`} />
+                    disabled={updating}
+                    onPress={async () => {
+                      setUpdating(true)
+                      try {
+                        await addOverrideItem(info)
+                        await restartCore()
+                      } catch (e) {
+                        alert(e)
+                      } finally {
+                        setUpdating(false)
+                      }
+                    }}
+                  >
+                    <IoMdRefresh
+                      color="default"
+                      className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
+                    />
                   </Button>
-                </DropdownTrigger>
-                <DropdownMenu onAction={onMenuAction}>
-                  {menuItems.map((item) => (
-                    <DropdownItem
-                      showDivider={item.showDivider}
-                      key={item.key}
-                      color={item.color}
-                      className={item.className}
-                    >
-                      {item.label}
-                    </DropdownItem>
-                  ))}
-                </DropdownMenu>
-              </Dropdown>
-            </div>
-          </div>
-          <div className="flex justify-between">
-            <div className={`mt-2 flex justify-start`}>
-              {info.global && (
-                <Chip size="sm" variant="dot" color="primary" className="mr-2">
-                  全局
-                </Chip>
-              )}
-              <Chip size="sm" variant="bordered" className="mr-2">
-                {info.type === 'local' ? '本地' : '远程'}
-              </Chip>
-              <Chip size="sm" variant="bordered">
-                {info.ext === 'yaml' ? 'YAML' : 'JavaScript'}
-              </Chip>
-            </div>
-            {info.type === 'remote' && (
-              <div className={`mt-2 flex justify-end`}>
-                <small>{dayjs(info.updated).fromNow()}</small>
+                )}
+
+                <Dropdown>
+                  <DropdownTrigger>
+                    <Button isIconOnly size="sm" variant="light" color="default">
+                      <IoMdMore color="default" className={`text-[24px]`} />
+                    </Button>
+                  </DropdownTrigger>
+                  <DropdownMenu onAction={onMenuAction}>
+                    {menuItems.map((item) => (
+                      <DropdownItem
+                        showDivider={item.showDivider}
+                        key={item.key}
+                        color={item.color}
+                        className={item.className}
+                      >
+                        {item.label}
+                      </DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
               </div>
-            )}
-          </div>
-        </CardBody>
+            </div>
+            <div className="flex justify-between">
+              <div className={`mt-2 flex justify-start`}>
+                {info.global && (
+                  <Chip size="sm" variant="dot" color="primary" className="mr-2">
+                    全局
+                  </Chip>
+                )}
+                <Chip size="sm" variant="bordered" className="mr-2">
+                  {info.type === 'local' ? '本地' : '远程'}
+                </Chip>
+                <Chip size="sm" variant="bordered">
+                  {info.ext === 'yaml' ? 'YAML' : 'JavaScript'}
+                </Chip>
+              </div>
+              {info.type === 'remote' && (
+                <div className={`mt-2 flex justify-end`}>
+                  <small>{dayjs(info.updated).fromNow()}</small>
+                </div>
+              )}
+            </div>
+          </CardBody>
+        </div>
       </Card>
     </div>
   )
diff --git a/src/renderer/src/components/profiles/profile-item.tsx b/src/renderer/src/components/profiles/profile-item.tsx
index 36c66a7..1b69dcf 100644
--- a/src/renderer/src/components/profiles/profile-item.tsx
+++ b/src/renderer/src/components/profiles/profile-item.tsx
@@ -174,7 +174,7 @@ const ProfileItem: React.FC<Props> = (props) => {
       <Card
         fullWidth
         isPressable
-        onClick={() => {
+        onPress={() => {
           if (disableSelect) return
           setSelecting(true)
           onClick().finally(() => {
@@ -183,129 +183,132 @@ const ProfileItem: React.FC<Props> = (props) => {
         }}
         className={`${isCurrent ? 'bg-primary' : ''} ${selecting ? 'blur-sm' : ''}`}
       >
-        <CardBody className="pb-1">
-          <div className="flex justify-between h-[32px]">
-            <h3
-              ref={setNodeRef}
-              {...attributes}
-              {...listeners}
-              title={info?.name}
-              className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-            >
-              {info?.name}
-            </h3>
-            <div className="flex">
-              {info.type === 'remote' && (
-                <Tooltip placement="left" content={dayjs(info.updated).fromNow()}>
+        <div ref={setNodeRef} {...attributes} {...listeners} className="w-full h-full">
+          <CardBody className="pb-1">
+            <div className="flex justify-between h-[32px]">
+              <h3
+                title={info?.name}
+                className={`text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
+                {info?.name}
+              </h3>
+              <div className="flex">
+                {info.type === 'remote' && (
+                  <Tooltip placement="left" content={dayjs(info.updated).fromNow()}>
+                    <Button
+                      isIconOnly
+                      size="sm"
+                      variant="light"
+                      color="default"
+                      disabled={updating}
+                      onPress={async () => {
+                        setUpdating(true)
+                        await addProfileItem(info)
+                        setUpdating(false)
+                      }}
+                    >
+                      <IoMdRefresh
+                        color="default"
+                        className={`${isCurrent ? 'text-primary-foreground' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
+                      />
+                    </Button>
+                  </Tooltip>
+                )}
+
+                <Dropdown>
+                  <DropdownTrigger>
+                    <Button isIconOnly size="sm" variant="light" color="default">
+                      <IoMdMore
+                        color="default"
+                        className={`text-[24px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+                      />
+                    </Button>
+                  </DropdownTrigger>
+                  <DropdownMenu onAction={onMenuAction}>
+                    {menuItems.map((item) => (
+                      <DropdownItem
+                        showDivider={item.showDivider}
+                        key={item.key}
+                        color={item.color}
+                        className={item.className}
+                      >
+                        {item.label}
+                      </DropdownItem>
+                    ))}
+                  </DropdownMenu>
+                </Dropdown>
+              </div>
+            </div>
+            {info.type === 'remote' && extra && (
+              <div
+                className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
+              >
+                <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
+                {profileDisplayDate === 'expire' ? (
                   <Button
-                    isIconOnly
                     size="sm"
                     variant="light"
-                    color="default"
-                    disabled={updating}
+                    className="h-[20px] p-1 m-0"
                     onPress={async () => {
-                      setUpdating(true)
-                      await addProfileItem(info)
-                      setUpdating(false)
+                      await patchAppConfig({ profileDisplayDate: 'update' })
                     }}
                   >
-                    <IoMdRefresh
-                      color="default"
-                      className={`${isCurrent ? 'text-primary-foreground' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
-                    />
+                    {extra.expire ? dayjs.unix(extra.expire).format('YYYY-MM-DD') : '长期有效'}
                   </Button>
-                </Tooltip>
-              )}
-
-              <Dropdown>
-                <DropdownTrigger>
-                  <Button isIconOnly size="sm" variant="light" color="default">
-                    <IoMdMore
-                      color="default"
-                      className={`text-[24px] ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-                    />
+                ) : (
+                  <Button
+                    size="sm"
+                    variant="light"
+                    className="h-[20px] p-1 m-0"
+                    onPress={async () => {
+                      await patchAppConfig({ profileDisplayDate: 'expire' })
+                    }}
+                  >
+                    {dayjs(info.updated).fromNow()}
                   </Button>
-                </DropdownTrigger>
-                <DropdownMenu onAction={onMenuAction}>
-                  {menuItems.map((item) => (
-                    <DropdownItem
-                      showDivider={item.showDivider}
-                      key={item.key}
-                      color={item.color}
-                      className={item.className}
-                    >
-                      {item.label}
-                    </DropdownItem>
-                  ))}
-                </DropdownMenu>
-              </Dropdown>
-            </div>
-          </div>
-          {info.type === 'remote' && extra && (
-            <div
-              className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-            >
-              <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
-              {profileDisplayDate === 'expire' ? (
-                <small
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    patchAppConfig({ profileDisplayDate: 'update' })
-                  }}
-                >
-                  {extra.expire ? dayjs.unix(extra.expire).format('YYYY-MM-DD') : '长期有效'}
-                </small>
-              ) : (
-                <small
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    patchAppConfig({ profileDisplayDate: 'expire' })
-                  }}
-                >
-                  {dayjs(info.updated).fromNow()}
-                </small>
-              )}
-            </div>
-          )}
-        </CardBody>
-        <CardFooter className="pt-0">
-          {info.type === 'remote' && !extra && (
-            <div
-              className={`w-full mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-            >
-              <Chip
-                size="sm"
-                variant="bordered"
-                className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
+                )}
+              </div>
+            )}
+          </CardBody>
+          <CardFooter className="pt-0">
+            {info.type === 'remote' && !extra && (
+              <div
+                className={`w-full mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
               >
-                远程
-              </Chip>
-              <small>{dayjs(info.updated).fromNow()}</small>
-            </div>
-          )}
-          {info.type === 'local' && (
-            <div
-              className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
-            >
-              <Chip
-                size="sm"
-                variant="bordered"
-                className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
+                <Chip
+                  size="sm"
+                  variant="bordered"
+                  className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
+                >
+                  远程
+                </Chip>
+                <small>{dayjs(info.updated).fromNow()}</small>
+              </div>
+            )}
+            {info.type === 'local' && (
+              <div
+                className={`mt-2 flex justify-between ${isCurrent ? 'text-primary-foreground' : 'text-foreground'}`}
               >
-                本地
-              </Chip>
-            </div>
-          )}
-          {extra && (
-            <Progress
-              className="w-full"
-              classNames={{
-                indicator: isCurrent ? 'bg-primary-foreground' : 'bg-foreground'
-              }}
-              value={calcPercent(extra?.upload, extra?.download, extra?.total)}
-            />
-          )}
-        </CardFooter>
+                <Chip
+                  size="sm"
+                  variant="bordered"
+                  className={`${isCurrent ? 'text-primary-foreground border-primary-foreground' : 'border-primary text-primary'}`}
+                >
+                  本地
+                </Chip>
+              </div>
+            )}
+            {extra && (
+              <Progress
+                className="w-full"
+                classNames={{
+                  indicator: isCurrent ? 'bg-primary-foreground' : 'bg-foreground'
+                }}
+                value={calcPercent(extra?.upload, extra?.download, extra?.total)}
+              />
+            )}
+          </CardFooter>
+        </div>
       </Card>
     </div>
   )
diff --git a/src/renderer/src/components/sider/profile-card.tsx b/src/renderer/src/components/sider/profile-card.tsx
index b3369f4..94f3da9 100644
--- a/src/renderer/src/components/sider/profile-card.tsx
+++ b/src/renderer/src/components/sider/profile-card.tsx
@@ -18,7 +18,7 @@ dayjs.extend(relativeTime)
 dayjs.locale('zh-cn')
 
 const ProfileCard: React.FC = () => {
-  const { appConfig } = useAppConfig()
+  const { appConfig, patchAppConfig } = useAppConfig()
   const { profileCardStatus = 'col-span-2', profileDisplayDate = 'expire' } = appConfig || {}
   const location = useLocation()
   const match = location.pathname.includes('/profiles')
@@ -122,11 +122,27 @@ const ProfileCard: React.FC = () => {
               >
                 <small>{`${calcTraffic(usage)}/${calcTraffic(total)}`}</small>
                 {profileDisplayDate === 'expire' ? (
-                  <small>
+                  <Button
+                    size="sm"
+                    variant="light"
+                    className="h-[20px] p-1 m-0"
+                    onPress={async () => {
+                      await patchAppConfig({ profileDisplayDate: 'update' })
+                    }}
+                  >
                     {extra.expire ? dayjs.unix(extra.expire).format('YYYY-MM-DD') : '长期有效'}
-                  </small>
+                  </Button>
                 ) : (
-                  <small>{dayjs(info.updated).fromNow()}</small>
+                  <Button
+                    size="sm"
+                    variant="light"
+                    className="h-[20px] p-1 m-0"
+                    onPress={async () => {
+                      await patchAppConfig({ profileDisplayDate: 'expire' })
+                    }}
+                  >
+                    {dayjs(info.updated).fromNow()}
+                  </Button>
                 )}
               </div>
             )}