feat: show subscription usage in a progress bar

Author: kunish

src/components/SubscriptionInfo.tsx

@@ -34,9 +34,12 @@ export default (props: { subscriptionInfo: SubscriptionInfo }) => {
 
   return (
     <>
+      <progress class="progress" value={info.percentage} max="100" />
+
       <div class="text-sm text-slate-500">
         {`${info.used}`} / {`${info.total}`} ( {info.percentage}% )
       </div>
+
       <div class="text-sm text-slate-500">Expire: {info.expireStr()} </div>
     </>
   )

src/pages/Proxies.tsx

@@ -124,7 +124,7 @@ export default () => {
             {(proxyProvider) => {
               const title = (
                 <div class="flex items-center justify-between">
-                  <div class="flex flex-col">
+                  <div class="flex flex-col gap-1">
                     <span>{proxyProvider.name}</span>
                     <SubscriptionInfo
                       subscriptionInfo={proxyProvider.subscriptionInfo}
@@ -135,7 +135,7 @@ export default () => {
                     </div>
                   </div>
 
-                  <div>
+                  <div class="flex flex-nowrap">
                     <button
                       class="btn btn-circle btn-sm mr-2"
                       onClick={(e) =>