fix: replace font, and remove sorting secrets table (#498)

Author: peppescg

renderer/src/common/components/empty-state.tsx

@@ -33,9 +33,7 @@ export function EmptyState({
         text-center text-balance"
     >
       <Illustration className="mb-4 size-32" />
-      <h4 className="text-foreground font-display mb-2 text-3xl font-bold">
-        {title}
-      </h4>
+      <h4 className="text-foreground mb-2 text-3xl font-bold">{title}</h4>
       <p className="text-muted-foreground">{body}</p>
       {actions ? <Actions actions={actions} /> : null}
     </div>

renderer/src/common/components/title-page.tsx

@@ -0,0 +1,14 @@
+export function TitlePage({
+  title,
+  children,
+}: {
+  title: string
+  children?: React.ReactNode
+}) {
+  return (
+    <div className="mb-6 flex items-center justify-between">
+      <h1 className="text-3xl font-bold">{title}</h1>
+      {children}
+    </div>
+  )
+}

renderer/src/features/secrets/components/secrets-table.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@/common/components/ui/button'
 import {
   Table,
   TableBody,
@@ -9,7 +8,6 @@ import {
 } from '@/common/components/ui/table'
 import { SecretDropdown } from './secret-dropdown'
 import { useFilterSort } from '@/common/hooks/use-filter-sort'
-import { ArrowUpDown } from 'lucide-react'
 import type { V1SecretKeyResponse } from '@/common/api/generated'
 import { InputSearch } from '@/common/components/ui/input-search'
 interface SecretsTableProps {
@@ -27,7 +25,6 @@ export function SecretsTable({
     filter,
     setFilter,
     filteredData: filteredSecrets,
-    toggleSortOrder,
   } = useFilterSort({
     data: secrets,
     filterFields: (secret) => [secret.key ?? ''],
@@ -47,14 +44,6 @@ export function SecretsTable({
             <TableRow>
               <TableHead className="text-muted-foreground flex items-center px-5 text-xs">
                 Secrets
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="ml-2 h-auto cursor-pointer p-1"
-                  onClick={toggleSortOrder}
-                >
-                  <ArrowUpDown className="size-4" />
-                </Button>
               </TableHead>
               <TableHead className="px-5 text-right"></TableHead>
             </TableRow>

renderer/src/routes/(registry)/registry.tsx

@@ -24,7 +24,7 @@ export function Registry() {
   return (
     <>
       <div className="mb-6 flex items-center">
-        <h1 className="font-display text-3xl font-bold">Registry</h1>
+        <h1 className="text-3xl font-bold">Registry</h1>
       </div>
       {serversList.length === 0 ? (
         <EmptyState

renderer/src/routes/clients.tsx

@@ -6,6 +6,7 @@ import { Button } from '@/common/components/ui/button'
 import { ExternalLinkIcon } from 'lucide-react'
 import { EmptyState } from '@/common/components/empty-state'
 import { IllustrationNoConnection } from '@/common/components/illustrations/illustration-no-connection'
+import { TitlePage } from '@/common/components/title-page'
 
 export const Route = createFileRoute('/clients')({
   component: Clients,
@@ -20,9 +21,7 @@ export function Clients() {
 
   return (
     <>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="font-display text-3xl font-bold">Clients</h1>
-      </div>
+      <TitlePage title="Clients" />
       {clients.length === 0 ? (
         <EmptyState
           title="No clients detected"

renderer/src/routes/index.tsx

@@ -15,6 +15,7 @@ import { GridCardsMcpServers } from '@/features/mcp-servers/components/grid-card
 import { DropdownMenuRunMcpServer } from '@/features/mcp-servers/components/menu-run-mcp-server'
 import { useRunCustomServer } from '@/features/mcp-servers/hooks/use-run-custom-server'
 import { useMutationRestartServerAtStartup } from '@/features/mcp-servers/hooks/use-mutation-restart-server'
+import { TitlePage } from '@/common/components/title-page'
 
 export const Route = createFileRoute('/')({
   loader: ({ context: { queryClient } }) =>
@@ -57,8 +58,7 @@ export function Index() {
 
   return (
     <>
-      <div className="mb-6 flex items-center">
-        <h1 className="font-display text-3xl font-bold">Installed</h1>
+      <TitlePage title="Installed">
         {workloads.length > 0 && (
           <div className="ml-auto flex gap-2">
             <RefreshButton refresh={refetch} />
@@ -72,7 +72,7 @@ export function Index() {
           onOpenChange={setIsRunWithCommandOpen}
           onSubmit={handleSubmit}
         />
-      </div>
+      </TitlePage>
       {!isPending && !workloads.length ? (
         <EmptyState
           title="Add your first MCP server"

renderer/src/routes/secrets.tsx

@@ -10,6 +10,7 @@ import { useMutationUpdateSecret } from '@/features/secrets/hooks/use-mutation-u
 import { PlusIcon } from 'lucide-react'
 import { IllustrationNoConnection } from '@/common/components/illustrations/illustration-no-connection'
 import { EmptyState } from '@/common/components/empty-state'
+import { TitlePage } from '@/common/components/title-page'
 
 export const Route = createFileRoute('/secrets')({
   component: Secrets,
@@ -48,8 +49,7 @@ export function Secrets() {
 
   return (
     <>
-      <div className="mb-6 flex items-center justify-between">
-        <h1 className="font-display text-3xl font-bold">Secrets</h1>
+      <TitlePage title="Secrets">
         {keys.length > 0 && (
           <Button
             variant="default"
@@ -61,7 +61,7 @@ export function Secrets() {
             <PlusIcon /> Add secret
           </Button>
         )}
-      </div>
+      </TitlePage>
 
       {keys.length === 0 ? (
         <EmptyState