feat(new-nav): services list UI improvements

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/index.tsx

@@ -1,10 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { Suspense } from 'react'
 import { useEnvironment } from '@qovery/domains/environments/feature'
-import { ServiceList } from '@qovery/domains/services/feature'
-import { Section, Skeleton, TablePrimitives } from '@qovery/shared/ui'
-
-const { Table } = TablePrimitives
+import { ServiceList, ServiceListSkeleton } from '@qovery/domains/services/feature'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview/'
@@ -23,67 +20,6 @@ function Services() {
   return <ServiceList environment={environment} />
 }
 
-function ServiceListSkeleton() {
-  const columnSizes = ['40%', '15%', '15%', '20%', '10%']
-
-  return (
-    <div className="container mx-auto mt-6 pb-10">
-      <Section className="gap-8">
-        <div className="flex flex-col gap-6">
-          <div className="flex justify-between">
-            <div className="flex items-center gap-3">
-              <Skeleton height={32} width={32} />
-              <Skeleton height={32} width={100} />
-            </div>
-          </div>
-          <hr className="w-full border-neutral" />
-        </div>
-        <div className="flex flex-col gap-8">
-          <Section className="flex flex-col gap-3.5">
-            <div className="flex items-center justify-between">
-              <Skeleton height={28} width={90} />
-              <Skeleton height={28} width={140} />
-            </div>
-            <Table.Root className="w-full">
-              <Table.Header>
-                <Table.Row>
-                  {[...Array(5)].map((_, index) => (
-                    <Table.ColumnHeaderCell
-                      key={index}
-                      className="first:border-r"
-                      style={{ width: columnSizes[index] }}
-                    >
-                      <Skeleton height={16} width={100} />
-                    </Table.ColumnHeaderCell>
-                  ))}
-                </Table.Row>
-              </Table.Header>
-              <Table.Body>
-                {[...Array(3)].map((_, index) => (
-                  <Table.Row key={index}>
-                    {[...Array(5)].map((_, index) => (
-                      <Table.Cell key={index} className="h-14 first:border-r" style={{ width: columnSizes[index] }}>
-                        {index === 0 ? (
-                          <div className="flex items-center justify-between">
-                            <Skeleton height={16} width={300} />
-                            <Skeleton height={16} width={200} />
-                          </div>
-                        ) : (
-                          <Skeleton height={16} width={60} />
-                        )}
-                      </Table.Cell>
-                    ))}
-                  </Table.Row>
-                ))}
-              </Table.Body>
-            </Table.Root>
-          </Section>
-        </div>
-      </Section>
-    </div>
-  )
-}
-
 function RouteComponent() {
   return (
     <Suspense fallback={<ServiceListSkeleton />}>

libs/domains/environments/feature/src/lib/environment-last-deployment-section/environment-last-deployment-section.tsx

@@ -47,9 +47,9 @@ const EnvironmentLastDeploymentSkeleton = () => {
         <div className="flex items-center gap-6">
           <Skeleton width={83} height={20} />
           <div className="flex gap-1.5">
-            <Skeleton width={24} height={24} />
-            <Skeleton width={24} height={24} />
-            <Skeleton width={24} height={24} />
+            <Skeleton width={24} height={20} />
+            <Skeleton width={24} height={20} />
+            <Skeleton width={24} height={20} />
           </div>
           <Skeleton width={74} height={20} />
         </div>

libs/domains/services/feature/src/lib/last-version/__snapshots__/last-version.spec.tsx.snap

@@ -7,7 +7,7 @@ exports[`LastVersion should match snapshot 1`] = `
       class="flex"
     >
       <span
-        class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md min-w-7 max-w-[81px] rounded-r-none border-r-0"
+        class="text-neutral inline-flex items-center shrink-0 text-xs px-1.5 h-6 border-neutral border rounded-md min-w-7 max-w-[81px] rounded-r-none border-r-0 bg-surface-neutral"
       >
         <span
           class="flex h-full w-full items-center justify-center truncate"

libs/domains/services/feature/src/lib/last-version/last-version.tsx

@@ -117,7 +117,7 @@ export function LastVersion({ organizationId, projectId, service, version }: Las
 
   return (
     <span className="flex">
-      <Badge variant="outline" className="min-w-7 max-w-[81px] rounded-r-none border-r-0">
+      <Badge variant="outline" className="min-w-7 max-w-[81px] rounded-r-none border-r-0 bg-surface-neutral">
         <span className="flex h-full w-full items-center justify-center truncate">
           <Truncate text={version} truncateLimit={8} />
         </span>

libs/domains/services/feature/src/lib/service-actions/service-actions.tsx

@@ -916,7 +916,7 @@ export function ServiceActions({
   const { data: deploymentStatus } = useDeploymentStatus({ environmentId: environment.id, serviceId })
 
   if (!service || !deploymentStatus)
-    return <Skeleton height={variant === 'default' ? 36 : 28} width={variant === 'default' ? 184 : 67} />
+    return <Skeleton height={variant === 'default' ? 26 : 28} width={variant === 'default' ? 96 : 67} />
 
   return (
     <div className={twMerge('flex items-center gap-1.5', variant === 'header' && 'flex-row-reverse gap-2')}>

libs/domains/services/feature/src/lib/service-list/__snapshots__/service-list-action-bar.spec.tsx.snap

@@ -4,55 +4,53 @@ exports[`ServiceListActionBar should match snapshot 1`] = `
 <body>
   <div>
     <div
-      class="sticky bottom-4"
+      class="pointer-events-none fixed inset-x-0 bottom-4 z-overlay flex justify-center px-4"
     >
       <div
-        class="relative"
+        class="w-full max-w-[500px] pointer-events-auto"
       >
         <div
-          class="absolute bottom-4 left-1/2 w-[448px] -translate-x-1/2"
+          class="flex items-center justify-between rounded-md border border-neutral bg-surface-neutralInvert-component p-2 pl-4 text-sm font-medium text-neutralInvert shadow-xl animate-action-bar-fade-in"
         >
+          <span
+            class="truncate"
+          >
+            1
+             selected 
+            service
+          </span>
+          <button
+            class="h-8 px-3 underline"
+            type="button"
+          >
+            Deselect
+          </button>
           <div
-            class="flex h-[52px] items-center justify-between rounded bg-neutral-500 pl-5 pr-2 text-xs font-medium text-white shadow-xl animate-action-bar-fade-in"
+            class="flex gap-3"
           >
-            <span>
-              1
-               selected 
-              service
-            </span>
             <button
-              class="h-8 px-3 underline"
-              type="button"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center gap-2"
             >
-              Deselect
+              Deploy selected 
+              <i
+                aria-hidden="true"
+                class="fa-regular fa-play "
+              />
             </button>
-            <div
-              class="flex gap-3"
+            <button
+              aria-expanded="false"
+              aria-haspopup="menu"
+              class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center gap-2"
+              data-state="closed"
+              id="radix-:rf:"
+              type="button"
             >
-              <button
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-8 px-2.5 rounded-md bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert items-center gap-2"
-              >
-                Deploy selected 
-                <i
-                  aria-hidden="true"
-                  class="fa-regular fa-play "
-                />
-              </button>
-              <button
-                aria-expanded="false"
-                aria-haspopup="menu"
-                class="inline-flex shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-8 px-2.5 rounded-md bg-surface-neutral-component hover:bg-surface-neutral-componentHover text-neutral items-center gap-2"
-                data-state="closed"
-                id="radix-:rf:"
-                type="button"
-              >
-                More 
-                <i
-                  aria-hidden="true"
-                  class="fa-regular fa-angle-down "
-                />
-              </button>
-            </div>
+              More 
+              <i
+                aria-hidden="true"
+                class="fa-regular fa-angle-down "
+              />
+            </button>
           </div>
         </div>
       </div>