From 91174e075855c89077ff2bd26a6a70ef2fcb216d Mon Sep 17 00:00:00 2001
From: senke <okin.tcs@gmail.com>
Date: Sat, 7 Feb 2026 15:20:44 +0100
Subject: [PATCH] style(studio): elevate CloudFileBrowser to SaaS Premium

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../CloudFileBrowserSkeleton.tsx              | 48 +++++++++----------
 .../cloud-file-browser/FileGrid.tsx           |  2 +-
 .../cloud-file-browser/FileGridCard.tsx       | 20 ++++----
 .../cloud-file-browser/FileTable.tsx          | 14 +++---
 .../cloud-file-browser/FileTableRow.tsx       | 38 +++++++--------
 .../cloud-file-browser/FileToolbar.tsx        | 22 ++++-----
 6 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/apps/web/src/features/studio/components/cloud-file-browser/CloudFileBrowserSkeleton.tsx b/apps/web/src/features/studio/components/cloud-file-browser/CloudFileBrowserSkeleton.tsx
index 17ad296e5..75f50cb5e 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/CloudFileBrowserSkeleton.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/CloudFileBrowserSkeleton.tsx
@@ -19,22 +19,22 @@ export function CloudFileBrowserSkeleton({
   return (
     <div className={cn('space-y-8 h-full flex flex-col', className)}>
       {/* Toolbar skeleton */}
-      <div className="flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 animate-pulse">
+      <div className="flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-card/50 p-4 rounded-xl border border-border animate-pulse">
         <div className="flex flex-col sm:flex-row gap-4 w-full xl:w-auto">
-          <div className="h-10 w-full sm:w-64 rounded-lg bg-kodo-steel/50" />
+          <div className="h-10 w-full sm:w-64 rounded-lg bg-muted" />
           <div className="flex items-center gap-2">
-            <div className="h-4 w-4 rounded bg-kodo-steel/50 shrink-0" />
+            <div className="h-4 w-4 rounded bg-muted shrink-0" />
             <div className="flex gap-2">
               {[1, 2, 3, 4, 5].map((i) => (
-                <div key={i} className="h-6 w-16 rounded bg-kodo-steel/50" />
+                <div key={i} className="h-6 w-16 rounded bg-muted" />
               ))}
             </div>
           </div>
         </div>
         <div className="flex gap-2 w-full xl:w-auto justify-end">
-          <div className="h-10 w-24 rounded-lg bg-kodo-steel/50" />
-          <div className="h-10 w-32 rounded-lg bg-kodo-steel/50" />
-          <div className="h-10 w-20 rounded-lg bg-kodo-steel/50" />
+          <div className="h-10 w-24 rounded-lg bg-muted" />
+          <div className="h-10 w-32 rounded-lg bg-muted" />
+          <div className="h-10 w-20 rounded-lg bg-muted" />
         </div>
       </div>
 
@@ -42,24 +42,24 @@ export function CloudFileBrowserSkeleton({
       <div className="flex-1 overflow-hidden min-h-layout-page-sm">
         {viewMode === 'list' ? (
           <div className="bg-kodo-graphite border border-kodo-steel rounded-xl overflow-hidden">
-            <div className="border-b border-kodo-steel/30 p-4 flex gap-4">
-              <div className="h-4 w-10 rounded bg-kodo-steel/50" />
-              <div className="h-4 flex-1 rounded bg-kodo-steel/50" />
-              <div className="h-4 w-16 rounded bg-kodo-steel/50" />
-              <div className="h-4 w-12 rounded bg-kodo-steel/50" />
-              <div className="h-4 w-20 rounded bg-kodo-steel/50" />
+            <div className="border-b border-border p-4 flex gap-4">
+              <div className="h-4 w-10 rounded bg-muted" />
+              <div className="h-4 flex-1 rounded bg-muted" />
+              <div className="h-4 w-16 rounded bg-muted" />
+              <div className="h-4 w-12 rounded bg-muted" />
+              <div className="h-4 w-20 rounded bg-muted" />
             </div>
             <div className="divide-y divide-kodo-steel/30">
               {Array.from({ length: ROW_COUNT }).map((_, i) => (
                 <div key={i} className="p-4 flex gap-4 items-center">
-                  <div className="h-4 w-4 rounded bg-kodo-steel/50 shrink-0" />
+                  <div className="h-4 w-4 rounded bg-muted shrink-0" />
                   <div className="flex items-center gap-4 flex-1 min-w-0">
-                    <div className="h-5 w-5 rounded bg-kodo-steel/50 shrink-0" />
-                    <div className="h-4 w-40 rounded bg-kodo-steel/50" />
+                    <div className="h-5 w-5 rounded bg-muted shrink-0" />
+                    <div className="h-4 w-40 rounded bg-muted" />
                   </div>
-                  <div className="h-4 w-24 rounded bg-kodo-steel/50" />
-                  <div className="h-4 w-12 rounded bg-kodo-steel/50" />
-                  <div className="h-4 w-20 rounded bg-kodo-steel/50" />
+                  <div className="h-4 w-24 rounded bg-muted" />
+                  <div className="h-4 w-12 rounded bg-muted" />
+                  <div className="h-4 w-20 rounded bg-muted" />
                 </div>
               ))}
             </div>
@@ -69,14 +69,14 @@ export function CloudFileBrowserSkeleton({
             {Array.from({ length: 8 }).map((_, i) => (
               <div
                 key={i}
-                className="p-4 flex flex-col items-center gap-4 rounded-xl border border-kodo-steel bg-kodo-graphite animate-pulse"
+                className="p-4 flex flex-col items-center gap-4 rounded-xl border border-border bg-card animate-pulse"
               >
-                <div className="w-16 h-16 rounded-2xl bg-kodo-steel/50" />
+                <div className="w-16 h-16 rounded-2xl bg-muted" />
                 <div className="w-full space-y-2">
-                  <div className="h-4 w-full rounded bg-kodo-steel/50" />
+                  <div className="h-4 w-full rounded bg-muted" />
                   <div className="flex justify-center gap-1">
-                    <div className="h-3 w-12 rounded bg-kodo-steel/50" />
-                    <div className="h-3 w-10 rounded bg-kodo-steel/50" />
+                    <div className="h-3 w-12 rounded bg-muted" />
+                    <div className="h-3 w-10 rounded bg-muted" />
                   </div>
                 </div>
               </div>
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileGrid.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileGrid.tsx
index 146dc099c..650f5e6e8 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileGrid.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileGrid.tsx
@@ -48,7 +48,7 @@ export function FileGrid({
     return (
       <div
         className={cn(
-          'min-h-layout-page-sm flex items-center justify-center text-kodo-content-dim text-sm',
+          'min-h-layout-page-sm flex items-center justify-center text-muted-foreground text-sm',
           className
         )}
       >
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
index 96de5b991..b0d2cbc69 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileGridCard.tsx
@@ -15,9 +15,9 @@ export interface FileGridCardProps {
 
 function FileTypeIcon({ type, size = 'md' }: { type: CloudFileNode['type']; size?: 'md' | 'lg' }) {
   const cl = size === 'lg' ? 'w-8 h-8' : 'w-5 h-5';
-  if (type === 'folder') return <Folder className={cn(cl, 'text-kodo-gold')} />;
+  if (type === 'folder') return <Folder className={cn(cl, 'text-warning')} />;
   if (type === 'audio') return <Music className={cn(cl, 'text-kodo-steel')} />;
-  if (type === 'image') return <ImageIcon className={cn(cl, 'text-kodo-magenta')} />;
+  if (type === 'image') return <ImageIcon className={cn(cl, 'text-primary')} />;
   if (['document', 'archive', 'project'].includes(type)) {
     return <File className={cn(cl, 'text-kodo-content-dim')} />;
   }
@@ -41,12 +41,12 @@ export function FileGridCard({
           className
         )}
       >
-        <div className="w-16 h-16 rounded-2xl bg-kodo-steel/50" />
+        <div className="w-16 h-16 rounded-2xl bg-muted" />
         <div className="w-full space-y-2">
-          <div className="h-4 w-full rounded bg-kodo-steel/50" />
+          <div className="h-4 w-full rounded bg-muted" />
           <div className="flex justify-center gap-1">
-            <div className="h-3 w-12 rounded bg-kodo-steel/50" />
-            <div className="h-3 w-10 rounded bg-kodo-steel/50" />
+            <div className="h-3 w-12 rounded bg-muted" />
+            <div className="h-3 w-10 rounded bg-muted" />
           </div>
         </div>
       </Card>
@@ -57,8 +57,8 @@ export function FileGridCard({
     <Card
       variant="default"
       className={cn(
-        'p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-kodo-steel/50 transition-all group relative',
-        selected && 'border-kodo-cyan bg-kodo-cyan/5',
+        'p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-primary/50 transition-all duration-[var(--duration-normal)] group relative',
+        selected && 'border-primary bg-primary/5',
         className
       )}
       onClick={() => onClick(file)}
@@ -73,9 +73,9 @@ export function FileGridCard({
         aria-label={selected ? 'Désélectionner' : 'Sélectionner'}
       >
         {selected ? (
-          <CheckSquare className="w-4 h-4 text-kodo-cyan" />
+          <CheckSquare className="w-4 h-4 text-primary" />
         ) : (
-          <Square className="w-4 h-4 text-kodo-content-dim hover:text-white" />
+          <Square className="w-4 h-4 text-muted-foreground hover:text-foreground" />
         )}
       </button>
 
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
index f25ca2993..2d0f34410 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileTable.tsx
@@ -34,7 +34,7 @@ export function FileTable({
   return (
     <div
       className={cn(
-        'bg-kodo-graphite border border-kodo-steel rounded-xl overflow-hidden',
+        'bg-card border border-border rounded-xl overflow-hidden',
         className
       )}
     >
@@ -45,31 +45,31 @@ export function FileTable({
               <button
                 type="button"
                 onClick={onSelectAll}
-                className="cursor-pointer hover:text-white"
+                className="cursor-pointer hover:text-foreground"
                 aria-label={allSelected ? 'Désélectionner tout' : 'Tout sélectionner'}
               >
                 {allSelected ? (
-                  <CheckSquare className="w-4 h-4 text-kodo-cyan" />
+                  <CheckSquare className="w-4 h-4 text-primary" />
                 ) : (
                   <Square className="w-4 h-4" />
                 )}
               </button>
             </th>
             <th
-              className="p-4 cursor-pointer hover:text-white"
+              className="p-4 cursor-pointer hover:text-foreground"
               onClick={() => onSort('name')}
             >
               Name
             </th>
             <th className="p-4">Tags</th>
             <th
-              className="p-4 cursor-pointer hover:text-white"
+              className="p-4 cursor-pointer hover:text-foreground"
               onClick={() => onSort('size')}
             >
               Size
             </th>
             <th
-              className="p-4 cursor-pointer hover:text-white"
+              className="p-4 cursor-pointer hover:text-foreground"
               onClick={() => onSort('modified')}
             >
               Modified
@@ -94,7 +94,7 @@ export function FileTable({
                   <tr>
                     <td
                       colSpan={6}
-                      className="p-8 text-center text-kodo-content-dim text-sm"
+                      className="p-8 text-center text-muted-foreground text-sm"
                     >
                       No files match your filters.
                     </td>
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
index c60217bbf..713ce5550 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileTableRow.tsx
@@ -24,13 +24,13 @@ export interface FileTableRowProps {
 }
 
 function FileTypeIcon({ type }: { type: CloudFileNode['type'] }) {
-  if (type === 'folder') return <Folder className="w-5 h-5 text-kodo-gold" />;
-  if (type === 'audio') return <Music className="w-5 h-5 text-kodo-steel" />;
-  if (type === 'image') return <ImageIcon className="w-5 h-5 text-kodo-magenta" />;
+  if (type === 'folder') return <Folder className="w-5 h-5 text-warning" />;
+  if (type === 'audio') return <Music className="w-5 h-5 text-muted-foreground" />;
+  if (type === 'image') return <ImageIcon className="w-5 h-5 text-primary" />;
   if (['document', 'archive', 'project'].includes(type)) {
-    return <File className="w-5 h-5 text-kodo-content-dim" />;
+    return <File className="w-5 h-5 text-muted-foreground" />;
   }
-  return <File className="w-5 h-5 text-kodo-content-dim" />;
+  return <File className="w-5 h-5 text-muted-foreground" />;
 }
 
 export function FileTableRow({
@@ -45,28 +45,28 @@ export function FileTableRow({
     return (
       <tr className="animate-pulse">
         <td className="p-4 w-10">
-          <div className="h-4 w-4 rounded bg-kodo-steel/50" />
+          <div className="h-4 w-4 rounded bg-muted" />
         </td>
         <td className="p-4">
           <div className="flex items-center gap-4">
-            <div className="h-5 w-5 rounded bg-kodo-steel/50 shrink-0" />
-            <div className="h-4 w-32 rounded bg-kodo-steel/50" />
+            <div className="h-5 w-5 rounded bg-muted shrink-0" />
+            <div className="h-4 w-32 rounded bg-muted" />
           </div>
         </td>
         <td className="p-4">
           <div className="flex gap-1">
-            <div className="h-4 w-12 rounded bg-kodo-steel/50" />
-            <div className="h-4 w-10 rounded bg-kodo-steel/50" />
+            <div className="h-4 w-12 rounded bg-muted" />
+            <div className="h-4 w-10 rounded bg-muted" />
           </div>
         </td>
         <td className="p-4">
-          <div className="h-4 w-12 rounded bg-kodo-steel/50 font-mono text-xs" />
+          <div className="h-4 w-12 rounded bg-muted font-mono text-xs" />
         </td>
         <td className="p-4">
-          <div className="h-4 w-20 rounded bg-kodo-steel/50 text-xs" />
+          <div className="h-4 w-20 rounded bg-muted text-xs" />
         </td>
         <td className="p-4 text-right">
-          <div className="h-8 w-8 rounded bg-kodo-steel/50 ml-auto" />
+          <div className="h-8 w-8 rounded bg-muted ml-auto" />
         </td>
       </tr>
     );
@@ -76,18 +76,18 @@ export function FileTableRow({
     <tr
       className={cn(
         'group hover:bg-white/5 transition-colors',
-        selected && 'bg-kodo-cyan/5'
+        selected && 'bg-primary/5'
       )}
     >
       <td className="p-4">
         <button
           type="button"
           onClick={() => onToggleSelect(file.id)}
-          className="cursor-pointer text-kodo-content-dim hover:text-white"
+          className="cursor-pointer text-muted-foreground hover:text-foreground"
           aria-label={selected ? 'Désélectionner' : 'Sélectionner'}
         >
           {selected ? (
-            <CheckSquare className="w-4 h-4 text-kodo-cyan" />
+            <CheckSquare className="w-4 h-4 text-primary" />
           ) : (
             <Square className="w-4 h-4" />
           )}
@@ -100,7 +100,7 @@ export function FileTableRow({
           onClick={() => onFileClick(file)}
         >
           <FileTypeIcon type={file.type} />
-          <span className="font-medium text-kodo-text-main group-hover:text-white transition-colors">
+          <span className="font-medium text-foreground group-hover:text-foreground transition-colors">
             {file.name}
           </span>
         </button>
@@ -110,7 +110,7 @@ export function FileTableRow({
           {file.tags?.map((t) => (
             <span
               key={t}
-              className="text-xs bg-kodo-slate px-1.5 py-0.5 rounded text-kodo-content-dim border border-kodo-steel"
+              className="text-xs bg-muted px-1.5 py-0.5 rounded text-muted-foreground border border-border"
             >
               {t}
             </span>
@@ -125,7 +125,7 @@ export function FileTableRow({
             <Button
               variant="ghost"
               size="icon"
-              className="p-1.5 text-kodo-steel"
+              className="p-1.5 text-muted-foreground"
               title="Process with AI"
               onClick={() => onAction?.('ai', file)}
             >
diff --git a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
index ba41c86e6..d4eca0059 100644
--- a/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
+++ b/apps/web/src/features/studio/components/cloud-file-browser/FileToolbar.tsx
@@ -68,7 +68,7 @@ export function FileToolbar({
     return (
       <div
         className={cn(
-          'flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50 animate-pulse',
+          'flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-card/50 p-4 rounded-xl border border-border animate-pulse',
           className
         )}
       >
@@ -95,7 +95,7 @@ export function FileToolbar({
   return (
     <div
       className={cn(
-        'flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-kodo-ink/50 p-4 rounded-xl border border-kodo-steel/50',
+        'flex flex-col xl:flex-row gap-4 justify-between items-start xl:items-center bg-card/50 p-4 rounded-xl border border-border',
         className
       )}
     >
@@ -108,7 +108,7 @@ export function FileToolbar({
           />
         </div>
         <div className="flex items-center gap-2 overflow-x-auto no-scrollbar pb-2 sm:pb-0">
-          <Filter className="w-4 h-4 text-kodo-content-dim shrink-0" />
+          <Filter className="w-4 h-4 text-muted-foreground shrink-0" />
           {tagsToShow.map((tag) => (
             <button
               key={tag}
@@ -152,7 +152,7 @@ export function FileToolbar({
               variant="ghost"
               size="icon"
               onClick={onBulkDelete}
-              className="text-kodo-red hover:bg-kodo-red/10"
+              className="text-destructive hover:bg-destructive/10"
               aria-label="Supprimer"
             >
               <Trash2 className="w-4 h-4" />
@@ -182,7 +182,7 @@ export function FileToolbar({
               Sort:
             </span>
             <select
-              className="bg-transparent text-xs text-white outline-none"
+              className="bg-transparent text-xs text-foreground outline-none"
               value={sortField}
               onChange={(e) => onSortFieldChange(e.target.value as SortField)}
               aria-label="Sort by"
@@ -195,7 +195,7 @@ export function FileToolbar({
             <button
               type="button"
               onClick={onSortOrderToggle}
-              className="ml-2 p-1 hover:text-white text-kodo-content-dim"
+              className="ml-2 p-1 hover:text-foreground text-muted-foreground"
               aria-label="Toggle sort order"
             >
               {sortOrder === 'asc' ? (
@@ -206,13 +206,13 @@ export function FileToolbar({
             </button>
           </div>
 
-          <div className="bg-kodo-void p-1 rounded-lg border border-kodo-steel flex">
+          <div className="bg-muted p-1 rounded-xl border border-border flex">
             <button
               type="button"
               onClick={() => onViewModeChange('list')}
               className={cn(
-                'p-2 rounded',
-                viewMode === 'list' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'
+                'p-2 rounded-lg transition-colors duration-[var(--duration-normal)]',
+                viewMode === 'list' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
               )}
               aria-label="List view"
             >
@@ -222,8 +222,8 @@ export function FileToolbar({
               type="button"
               onClick={() => onViewModeChange('grid')}
               className={cn(
-                'p-2 rounded',
-                viewMode === 'grid' ? 'bg-kodo-slate text-white' : 'text-kodo-content-dim hover:text-white'
+                'p-2 rounded-lg transition-colors duration-[var(--duration-normal)]',
+                viewMode === 'grid' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:text-foreground'
               )}
               aria-label="Grid view"
             >