feat: use _t translations in server summary

packages/web/src/tabs/ServerSummaryTab.svelte

@@ -77,7 +77,10 @@
 
 <ToolStripContainer>
   {#await apiCall('server-connections/server-summary', { conid, refreshToken })}
-    <LoadingInfo message="Loading server details" wrapper />
+    <LoadingInfo
+      message={_t('serverSummaryTab.loadingMessage', { defaultMessage: 'Loading server details' })}
+      wrapper
+    />
   {:then summary}
     <div class="wrapper">
       <TabControl
@@ -86,20 +89,20 @@
         containerMaxWidth="100%"
         flex1={true}
         value={$serverSummarySelectedTab}
-        onUserChange={(index) => serverSummarySelectedTab.set(index)}
+        onUserChange={index => serverSummarySelectedTab.set(index)}
         tabs={[
           {
-            label: 'Variables',
+            label: _t('serverSummaryTab.variables', { defaultMessage: 'Variables' }),
             component: SummaryVariables,
             props: { variables: summary.variables || [] },
           },
           {
-            label: 'Processes',
+            label: _t('serverSummaryTab.processes', { defaultMessage: 'Processes' }),
             component: SummaryProcesses,
             props: { processes: summary.processes || [], conid },
           },
           {
-            label: 'Databases',
+            label: _t('serverSummaryTab.databases', { defaultMessage: 'Databases' }),
             component: SummaryDatabases,
             props: { rows: summary.databases?.rows ?? [], columns: summary.databases?.columns ?? [] },
           },

packages/web/src/widgets/SummaryProcesses.svelte

@@ -44,16 +44,24 @@
   <TableControl
     rows={internalProcesses}
     columns={[
-      { header: 'Process ID', fieldName: 'processId', slot: 1 },
-      { header: 'Connection ID', fieldName: 'connectionId' },
-      { header: 'Client', fieldName: 'client' },
-      { header: 'Operation', fieldName: 'operation' },
-      { header: 'Namespace', fieldName: 'namespace' },
-      { header: 'Running Time', fieldName: 'runningTime', slot: 2 },
-      { header: 'State', fieldName: 'state' },
-      { header: 'Waiting For', fieldName: 'waitingFor', slot: 3 },
+      { header: _t('summaryProcesses.processId', { defaultMessage: 'Process ID' }), fieldName: 'processId', slot: 1 },
+      { header: _t('summaryProcesses.connectionId', { defaultMessage: 'Connection ID' }), fieldName: 'connectionId' },
+      { header: _t('summaryProcesses.client', { defaultMessage: 'Client' }), fieldName: 'client' },
+      { header: _t('summaryProcesses.operation', { defaultMessage: 'Operation' }), fieldName: 'operation' },
+      { header: _t('summaryProcesses.namespace', { defaultMessage: 'Namespace' }), fieldName: 'namespace' },
       {
-        header: 'Actions',
+        header: _t('summaryProcesses.runningTime', { defaultMessage: 'Running Time' }),
+        fieldName: 'runningTime',
+        slot: 2,
+      },
+      { header: _t('summaryProcesses.state', { defaultMessage: 'State' }), fieldName: 'state' },
+      {
+        header: _t('summaryProcesses.waitingFor', { defaultMessage: 'Waiting For' }),
+        fieldName: 'waitingFor',
+        slot: 3,
+      },
+      {
+        header: _t('summaryProcesses.actions', { defaultMessage: 'Actions' }),
         fieldName: 'processId',
         slot: 0,
       },

packages/web/src/widgets/SummaryVariables.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import TableControl from '../elements/TableControl.svelte';
   import JSONTree from '../jsontree/JSONTree.svelte';
+  import { _t } from '../translations';
   export let variables: { variable: string; value: any }[] = [];
 </script>
 
@@ -8,9 +9,9 @@
   <TableControl
     rows={variables}
     columns={[
-      { header: 'Variable', fieldName: 'variable' },
+      { header: _t('summaryVariables.variable', { defaultMessage: 'Variable' }), fieldName: 'variable' },
       {
-        header: 'Value',
+        header: _t('summaryVariables.value', { defaultMessage: 'Value' }),
         fieldName: 'value',
         slot: 0,
       },