fix(user): show expire time & improve renewal dialog on mobile (#22)

* 🐛 fix(admin): prioritize follow-up tickets by updated time

* ✨ feat(dashboard): show node/user traffic ranks side-by-side

* 🐛 fix(user): show expire time & improve renewal dialog on mobile

apps/user/public/assets/locales/en-US/dashboard.json

@@ -6,6 +6,7 @@
   "copySuccess": "Copy Success",
   "deducted": "Deducted",
   "download": "Download",
+  "expireAt": "Expires At",
   "expirationDays": "Expiration Days",
   "expired": "Expired",
   "finished": "Finished",

apps/user/public/assets/locales/zh-CN/dashboard.json

@@ -6,6 +6,7 @@
   "copySuccess": "复制成功",
   "deducted": "已扣除",
   "download": "下载",
+  "expireAt": "到期时间",
   "expirationDays": "过期天数",
   "expired": "已过期",
   "finished": "已完成",

apps/user/src/sections/subscribe/renewal.tsx

@@ -115,7 +115,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
       <DialogTrigger asChild>
         <Button size="sm">{t("renew", "Renew")}</Button>
       </DialogTrigger>
-      <DialogContent className="flex h-full flex-col overflow-hidden md:h-auto md:max-w-screen-lg">
+      <DialogContent className="flex h-full flex-col overflow-y-auto md:h-auto md:max-w-screen-lg">
         <DialogHeader>
           <DialogTitle>
             {t("renewSubscription", "Renew Subscription")}
@@ -164,7 +164,7 @@ export default function Renewal({ id, subscribe }: Readonly<RenewalProps>) {
               />
             </div>
             <Button
-              className="fixed bottom-0 left-0 w-full md:relative md:mt-6"
+              className="sticky bottom-0 left-0 w-full bg-background md:relative md:mt-6"
               disabled={loading}
               onClick={handleSubmit}
             >

apps/user/src/sections/user/dashboard/content.tsx

@@ -277,7 +277,10 @@ export default function Content() {
                   <CardTitle className="font-medium">
                     {item.subscribe.name}
                     <p className="mt-1 text-foreground/50 text-sm">
-                      {formatDate(item.start_time)}
+                      {t("expireAt", "Expires At")}:{" "}
+                      {item.expire_time
+                        ? formatDate(item.expire_time)
+                        : t("noLimit", "No Limit")}
                     </p>
                   </CardTitle>
                   {item.status !== 4 && (