fix(ux): little improvements here and there

desktop-app/renderer/api/key/key.ts

@@ -1,3 +1,4 @@
+import { getServer } from '@/lib/localStorage'
 import { request } from 'api/request'
 import axios, { AxiosResponse } from 'axios'
 import { useSearchParams } from 'next/navigation'
@@ -103,3 +104,15 @@ export async function connectKey(serverUrl: string, token: string) {
   })
   return response as AxiosResponse<null>
 }
+
+export async function getCurrentKey(
+  searchParams: ReturnType<typeof useSearchParams>,
+  space: string | null = null
+): Promise<Key> {
+  const serverID = searchParams.get('server')
+  if (!serverID) {
+    throw new Error('No server selected')
+  }
+  const server = getServer(serverID)
+  return (await getKey(searchParams, server.token.split('.')[0], space)).data
+}

desktop-app/renderer/api/request.ts

@@ -10,6 +10,7 @@ export function request(
   headers: AxiosHeaders | null = null
 ) {
   const serverID = searchParams.get('server')
+
   if (!serverID) {
     throw new Error('No server selected')
   }

desktop-app/renderer/components/custom/headerPopover.tsx

@@ -20,12 +20,39 @@ import { Server, addServer, getServers, removeServer } from '@/lib/localStorage'
 import { standardUrlPartial } from '@/lib/queryParams'
 import { DialogClose } from '@radix-ui/react-dialog'
 import { PlusIcon } from '@radix-ui/react-icons'
+import { Close } from '@radix-ui/react-popover'
 import { Settings } from 'lucide-react'
 import { useSearchParams } from 'next/navigation'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import AllInputs from './selectedObject/inputs'
 
+async function tryConnection(
+  server: Server,
+  toast: ReturnType<typeof useToast>['toast']
+) {
+  try {
+    await connectKey(server.url, server.token)
+    return true
+  } catch (error) {
+    toast({
+      title: `Unable to connect to server: ${server.name}`,
+      description: (
+        <>
+          You werent able to connect to {server.url}.
+          <br />
+          <br />
+          Please check the URL and the API token and try again.
+          <br />
+          <br />
+          If the problem persists, check if the server is running.
+        </>
+      )
+    })
+    return false
+  }
+}
+
 export default function ServerPopover(): JSX.Element {
   const { toast } = useToast()
   const defaultServer: Omit<Server, 'id'> = {
@@ -53,7 +80,8 @@ export default function ServerPopover(): JSX.Element {
             return (
               <div key={index + 1} className="flex flex-row space-x-1">
                 <Button
-                  onClick={() => {
+                  onClick={async () => {
+                    if (!(await tryConnection(server, toast))) return
                     if (currentURL === '/') {
                       router
                         .push(
@@ -92,6 +120,29 @@ export default function ServerPopover(): JSX.Element {
                         .catch((err) => {
                           console.error(err)
                         })
+                    } else if (currentURL.startsWith('/keys/')) {
+                      if (searchParams.get('server') === server.id) {
+                        document.getElementById('close-popover')?.click()
+                        return
+                      }
+                      router
+                        .push(
+                          standardUrlPartial(
+                            `/servers/`,
+                            server.id,
+                            {
+                              server: server.id,
+                              exchangeAccount: '',
+                              space: '',
+                              fleet: '',
+                              bot: ''
+                            },
+                            searchParams
+                          )
+                        )
+                        .catch((err) => {
+                          console.error(err)
+                        })
                     } else {
                       router
                         .push(
@@ -119,7 +170,8 @@ export default function ServerPopover(): JSX.Element {
                   {server.name}
                 </Button>
                 <Button
-                  onClick={() => {
+                  onClick={async () => {
+                    if (!(await tryConnection(server, toast))) return
                     router
                       .push(
                         standardUrlPartial(
@@ -188,29 +240,9 @@ export default function ServerPopover(): JSX.Element {
                 <Button
                   type="submit"
                   onClick={async () => {
-                    try {
-                      await connectKey(server.url, server.token)
-                    } catch (err) {
-                      console.error(err)
-                      toast({
-                        title: `Unable Added new server: ${server.name}`,
-                        description: (
-                          <>
-                            You werent able to connect to {server.url} with the
-                            API token {server.token}.
-                            <br />
-                            <br />
-                            Please check the URL and the API token and try
-                            again.
-                            <br />
-                            <br />
-                            If the problem persists, check if the server is
-                            running.
-                          </>
-                        )
-                      })
+                    if (!(await tryConnection({ ...server, id: '' }, toast)))
                       return
-                    }
+
                     const id = addServer(server.name, server.url, server.token)
                     if (!id && id !== 0) {
                       console.log('Unable to add server')
@@ -284,6 +316,7 @@ export default function ServerPopover(): JSX.Element {
           </Dialog>
         </div>
       </PopoverContent>
+      <Close id="close-popover" />
     </Popover>
   )
 }

desktop-app/renderer/components/custom/panel/infoPanelCard.tsx

@@ -1,18 +1,20 @@
-import PanelCard from '@/components/custom/panel/panelCard'
+import PanelCard, { CardType } from '@/components/custom/panel/panelCard'
 import { ReactNode } from 'react'
 
 function InfoPanelCard({
   title = '',
   badge = '',
   textContent = '',
   description = '',
+  cardType = 'button',
   tooltip = '',
   onClick = () => {}
 }: {
   title?: ReactNode
-  badge?: ReactNode
+  badge?: string
   textContent: ReactNode
-  description?: ReactNode
+  description?: string
+  cardType?: CardType
   tooltip?: ReactNode
   onClick?: () => void
 }): JSX.Element {
@@ -22,10 +24,18 @@ function InfoPanelCard({
       title={title}
       badge={badge}
       description={description}
+      cardType={cardType}
       tooltip={tooltip}
       onClick={onClick}
     >
-      <div className="text-2xl font-bold">{textContent}</div>
+      <div
+        className={
+          'text-center text-2xl font-bold' +
+          (cardType === 'disabledButton' ? ' cursor-not-allowed' : '')
+        }
+      >
+        {textContent}
+      </div>
     </PanelCard>
   )
 }

desktop-app/renderer/components/custom/panel/panelCard.tsx

@@ -16,30 +16,49 @@ import {
 } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 
+export type CardType = 'button' | 'disabledButton'
+
 interface CardComponentProps {
   children: React.ReactNode
   className?: string
-  title?: string | React.ReactNode
-  badge?: string | React.ReactNode
-  description?: string | React.ReactNode
+  title?: ReactNode
+  badge?: string
+  description?: string
+  descriptionClassName?: string
   tooltip?: string
   onClick?: () => void
+  cardType?: CardType
 }
 
 const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
-  ({ children, className, title, badge, description, onClick }, ref) => {
+  (
+    {
+      children,
+      className,
+      title,
+      badge,
+      description,
+      descriptionClassName,
+      cardType,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
     return (
       <Card
         className={cn(
-          'hover:bg-secondary flex flex-col justify-center space-y-2',
+          (cardType === 'button' ? 'hover:bg-secondary cursor-pointer ' : '') +
+            'flex flex-col justify-center space-y-2',
           className
         )}
         onClick={onClick}
         ref={ref}
+        {...props}
       >
         {(title || badge) && (
-          <CardHeader className="flex flex-row items-end justify-between space-y-0">
-            <CardTitle className="px-3 text-sm font-normal">{title}</CardTitle>
+          <CardHeader className="flex flex-row items-end justify-between px-6">
+            <CardTitle className="px-1 text-sm font-normal">{title}</CardTitle>
             {badge && (
               <Badge className="hover:bg-foreground text-xs italic">
                 {badge}
@@ -49,11 +68,16 @@ const CardComponent = React.forwardRef<HTMLDivElement, CardComponentProps>(
         )}
         <CardContent
           className={
-            'flex flex-col items-center' + (title || badge ? '' : ' pt-6')
+            'flex flex-col items-stretch px-0 ' +
+            (title || badge ? '' : ' pt-6')
           }
         >
           {children}
-          {description && <CardDescription>{description}</CardDescription>}
+          {description && (
+            <CardDescription className={descriptionClassName}>
+              {description}
+            </CardDescription>
+          )}
         </CardContent>
       </Card>
     )
@@ -67,27 +91,33 @@ export default function PanelCard({
   title = '',
   badge = '',
   description = '',
+  descriptionClassName = '',
+  cardType = 'button',
   tooltip = '',
   onClick = () => {}
 }: {
   children: ReactNode
   className?: string
   title?: ReactNode
-  badge?: ReactNode
-  description?: ReactNode
+  badge?: string
+  description?: string
+  descriptionClassName?: string
+  cardType?: CardType
   tooltip?: ReactNode
   onClick?: () => void
 }): JSX.Element {
   return tooltip ? (
     <TooltipProvider>
       <Tooltip>
-        <TooltipTrigger>
+        <TooltipTrigger className="w-80" asChild>
           <CardComponent
             className={className}
             title={title}
             badge={badge}
             onClick={onClick}
             description={description}
+            descriptionClassName={descriptionClassName}
+            cardType={cardType}
           >
             {children}
           </CardComponent>
@@ -102,6 +132,8 @@ export default function PanelCard({
       badge={badge}
       onClick={onClick}
       description={description}
+      descriptionClassName={descriptionClassName}
+      cardType={cardType}
     >
       {children}
     </CardComponent>

desktop-app/renderer/components/custom/panel/valuePanelCard.tsx

@@ -33,7 +33,7 @@ function ValuePanelCard({
   onClick = () => {}
 }: {
   title: string | React.ReactNode
-  badge?: string | React.ReactNode
+  badge?: string
   value: number
   delta?: number
   tooltip?: string
@@ -43,11 +43,8 @@ function ValuePanelCard({
     <PanelCard
       title={title}
       badge={badge}
-      description={
-        <p className={`text-sm ${changeValueColor(delta)}`}>
-          {formatChangeValue(delta)}
-        </p>
-      }
+      description={formatChangeValue(delta)}
+      descriptionClassName={`text-sm ${changeValueColor(delta)}`}
       tooltip={tooltip}
       onClick={onClick}
     >

desktop-app/renderer/components/ui/dialog.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
@@ -108,12 +108,12 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription
+  DialogTrigger
 }

desktop-app/renderer/components/ui/use-toast.ts

@@ -135,7 +135,7 @@ function dispatch(action: Action) {
   })
 }
 
-type Toast = Omit<ToasterToast, 'id'>
+export type Toast = Omit<ToasterToast, 'id'>
 
 function toast({ ...props }: Toast) {
   const id = genId()