chore(studio): file explorer rows (#43845)

## What kind of change does this PR introduce?

UI touch-up

## What is the current behavior?

Explorer rows in file storage is a bit rough around the edges.

## What is the new behavior?

- Consistent loaders
- Consistent icons

Also includes:

- Fix to `stroke-width` on files-bucket.svg as documented in icons.mdx

| Before | After |
| --- | --- |
| <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/055518b2-6d93-4c9d-879b-6e7dd51e0620"
/> | <img width="1024" height="563" alt="Buckets Storage AWS Healthy
Toolshed Supabase"
src="https://github.com/user-attachments/assets/fae05446-95d9-4ca1-b441-7cd39d1c6036"
/> |

Author: dnywh

apps/design-system/content/docs/icons.mdx

@@ -45,7 +45,7 @@ function app() {
 }
 ```
 
-**Default props**: All icons default to `size={24}`. Stroke and fill defaults come from the source SVG's root attributes (e.g. `stroke-width="1"` in the source becomes the component's default `strokeWidth`). Override these props as needed for your use case.
+**Default props**: All icons default to `size={24}`. Stroke and fill defaults come from the source SVG's root attributes (e.g. `stroke-width="1"` on the root `<svg>` becomes the component's default `strokeWidth`). You can override those defaults at the call site, but any `stroke`, `fill`, or `stroke-width` set on individual child paths will still win.
 
 ### Adding new custom icons
 
@@ -63,7 +63,7 @@ Follow these steps to add a new custom icon to the Supabase icon library.
 
    For **fill-only icons** (e.g. logos that use shapes instead of strokes), add `stroke="none"` to the root `<svg>` element. The build will propagate this so the component never renders an unwanted stroke.
 
-Leave attributes like `stroke-width` as they are. The root SVG's `fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin` attributes are automatically propagated as the component's defaults by the build process. The conversion to camel-case for React compatibility (e.g. `strokeWidth`) is also handled automatically.
+Prefer putting shared styling like `fill`, `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin` on the root `<svg>`. The build propagates those root attributes as the component's defaults, and also converts them to camel-case for React compatibility (e.g. `strokeWidth`). If you put those attributes on individual child paths instead, they become fixed path-level styling and will override props passed to the component.
 
 2. **Build the component**: Run `npm run build:icons` from inside the `packages/icons` directory
 
@@ -133,4 +133,4 @@ Note `stroke="none"` on the root to prevent unwanted strokes, and `fill="current
 
 ### Troubleshooting
 
-If your SVG specifies `stroke-width` attributes, they will override the component's `strokeWidth` prop. Remove stroke attributes from individual paths to let the component control them.
+If your SVG specifies `stroke-width` attributes on individual child paths, they will override the component's `strokeWidth` prop. Keep shared stroke attributes on the root `<svg>` and remove them from individual paths if you want consumers to control stroke weight.

apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerHeader.tsx

@@ -12,7 +12,7 @@ import {
   Edit2,
   FolderPlus,
   List,
-  Loader,
+  LoaderCircle,
   RefreshCw,
   Search,
   Upload,
@@ -61,7 +61,7 @@ const HeaderPathEdit = ({ loading, isSearching, breadcrumbs, togglePathEdit }: a
     >
       {loading.isLoading ? (
         <div className="ml-2 flex items-center gap-x-3">
-          <Loader size={14} strokeWidth={2} className="animate-spin" />
+          <LoaderCircle size={14} strokeWidth={2} className="animate-spin" />
           <p className="text-sm text-foreground-light">{loading.message}</p>
         </div>
       ) : (
@@ -113,7 +113,7 @@ const HeaderBreadcrumbs = ({
 
   return loading.isLoading ? (
     <div className="ml-2 flex items-center">
-      <Loader size={16} strokeWidth={2} className="animate-spin" />
+      <LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
       <p className="ml-3 text-sm">{loading.message}</p>
     </div>
   ) : (

apps/studio/components/interfaces/Storage/StorageExplorer/FileExplorerRow.tsx

@@ -1,4 +1,7 @@
 import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
+import { FilesBucket as FilesBucketIcon } from 'icons'
+import { formatBytes } from 'lib/helpers'
 import { find, isEmpty, isEqual } from 'lodash'
 import {
   AlertCircle,
@@ -7,20 +10,16 @@ import {
   Edit,
   File,
   Film,
+  FolderOpen,
   Image,
-  Loader,
+  LoaderCircle,
   MoreVertical,
   Move,
   Music,
   Trash2,
 } from 'lucide-react'
-import { useContextMenu } from 'react-contexify'
-import SVG from 'react-inlinesvg'
-
-import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { BASE_PATH } from 'lib/constants'
-import { formatBytes } from 'lib/helpers'
 import type { CSSProperties } from 'react'
+import { useContextMenu } from 'react-contexify'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Checkbox,
@@ -38,6 +37,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from 'ui'
+
 import {
   CONTEXT_MENU_KEYS,
   STORAGE_ROW_STATUS,
@@ -54,47 +54,42 @@ export const RowIcon = ({
   view,
   status,
   fileType,
+  isOpened = false,
   mimeType,
 }: {
   view: STORAGE_VIEWS
   status: STORAGE_ROW_STATUS
   fileType: string
+  isOpened?: boolean
   mimeType: string | undefined
 }) => {
   if (view === STORAGE_VIEWS.LIST && status === STORAGE_ROW_STATUS.LOADING) {
-    return <Loader size={16} strokeWidth={2} className="animate-spin" />
+    return (
+      <LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
+    )
   }
 
-  if (fileType === STORAGE_ROW_TYPES.BUCKET || fileType === STORAGE_ROW_TYPES.FOLDER) {
-    const iconSrc =
-      fileType === STORAGE_ROW_TYPES.BUCKET
-        ? `${BASE_PATH}/img/bucket-filled.svg`
-        : fileType === STORAGE_ROW_TYPES.FOLDER
-          ? `${BASE_PATH}/img/folder-filled.svg`
-          : `${BASE_PATH}/img/file-filled.svg`
-    return (
-      <SVG
-        src={iconSrc}
-        preProcessor={(code) =>
-          code.replace(/svg/, 'svg class="w-4 h-4 text-color-inherit opacity-75"')
-        }
-      />
+  if (fileType === STORAGE_ROW_TYPES.FOLDER) {
+    return isOpened ? (
+      <FolderOpen size={16} strokeWidth={2} className="text-foreground-lighter" />
+    ) : (
+      <FilesBucketIcon size={16} strokeWidth={2} className="text-foreground-lighter" />
     )
   }
 
   if (mimeType?.includes('image')) {
-    return <Image size={16} strokeWidth={2} />
+    return <Image size={16} className="text-foreground-lighter" />
   }
 
   if (mimeType?.includes('audio')) {
-    return <Music size={16} strokeWidth={2} />
+    return <Music size={16} strokeWidth={2} className="text-foreground-lighter" />
   }
 
   if (mimeType?.includes('video')) {
-    return <Film size={16} strokeWidth={2} />
+    return <Film size={16} strokeWidth={2} className="text-foreground-lighter" />
   }
 
-  return <File size={16} strokeWidth={2} />
+  return <File size={16} strokeWidth={2} className="text-foreground-lighter" />
 }
 
 interface FileExplorerRowProps {
@@ -173,27 +168,27 @@ export const FileExplorerRow = ({
             ? [
                 {
                   name: 'Rename',
-                  icon: <Edit size={14} strokeWidth={1} />,
+                  icon: <Edit size={12} className="text-foreground-light" />,
                   onClick: () => setSelectedItemToRename(itemWithColumnIndex),
                 },
               ]
             : []),
           {
             name: 'Download',
-            icon: <Download size={14} strokeWidth={1} />,
+            icon: <Download size={12} className="text-foreground-light" />,
             onClick: () => downloadFolder(itemWithColumnIndex),
           },
           {
             name: 'Copy path to folder',
-            icon: <Copy size={14} strokeWidth={1} />,
+            icon: <Copy size={12} className="text-foreground-light" />,
             onClick: () => copyPathToFolder(openedFolders, itemWithColumnIndex),
           },
           ...(canUpdateFiles
             ? [
                 { name: 'Separator', icon: undefined, onClick: undefined },
                 {
                   name: 'Delete',
-                  icon: <Trash2 size={14} strokeWidth={1} />,
+                  icon: <Trash2 size={12} className="text-foreground-light" />,
                   onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]),
                 },
               ]
@@ -206,14 +201,14 @@ export const FileExplorerRow = ({
                   ? [
                       {
                         name: 'Get URL',
-                        icon: <Copy size={14} strokeWidth={1} />,
+                        icon: <Copy size={12} className="text-foreground-light" />,
                         onClick: () => onCopyUrl(itemWithColumnIndex.name),
                       },
                     ]
                   : [
                       {
                         name: 'Get URL',
-                        icon: <Copy size={14} strokeWidth={1} />,
+                        icon: <Copy size={12} className="text-foreground-light" />,
                         children: [
                           {
                             name: 'Expire in 1 week',
@@ -239,19 +234,19 @@ export const FileExplorerRow = ({
                     ]),
                 {
                   name: 'Download',
-                  icon: <Download size={14} strokeWidth={1} />,
+                  icon: <Download size={12} className="text-foreground-light" />,
                   onClick: () => downloadFile(itemWithColumnIndex),
                 },
                 ...(canUpdateFiles
                   ? [
                       {
                         name: 'Rename',
-                        icon: <Edit size={14} strokeWidth={1} />,
+                        icon: <Edit size={12} className="text-foreground-light" />,
                         onClick: () => setSelectedItemToRename(itemWithColumnIndex),
                       },
                       {
                         name: 'Move',
-                        icon: <Move size={14} strokeWidth={1} />,
+                        icon: <Move size={12} className="text-foreground-light" />,
                         onClick: () => setSelectedItemsToMove([itemWithColumnIndex]),
                       },
                       { name: 'Separator', icon: undefined, onClick: undefined },
@@ -263,7 +258,7 @@ export const FileExplorerRow = ({
             ? [
                 {
                   name: 'Delete',
-                  icon: <Trash2 size={14} strokeWidth={1} />,
+                  icon: <Trash2 size={12} className="text-foreground-light" />,
                   onClick: () => setSelectedItemsToDelete([itemWithColumnIndex]),
                 },
               ]
@@ -324,7 +319,7 @@ export const FileExplorerRow = ({
           event.stopPropagation()
           event.preventDefault()
           if (item.status !== STORAGE_ROW_STATUS.LOADING && !isOpened && !isPreviewed) {
-            item.type === STORAGE_ROW_TYPES.FOLDER || item.type === STORAGE_ROW_TYPES.BUCKET
+            item.type === STORAGE_ROW_TYPES.FOLDER
               ? openFolder(columnIndex, item)
               : onSelectFile(columnIndex)
           }
@@ -348,6 +343,7 @@ export const FileExplorerRow = ({
                   view={view}
                   status={item.status}
                   fileType={item.type}
+                  isOpened={isOpened}
                   mimeType={item.metadata?.mimetype}
                 />
               </div>
@@ -398,9 +394,9 @@ export const FileExplorerRow = ({
           }
         >
           {item.status === STORAGE_ROW_STATUS.LOADING ? (
-            <Loader
-              className={`animate-spin ${view === STORAGE_VIEWS.LIST ? 'invisible' : ''}`}
-              size={16}
+            <LoaderCircle
+              className={`animate-spin text-foreground-lighter ${view === STORAGE_VIEWS.LIST ? 'invisible' : ''}`}
+              size={14}
               strokeWidth={2}
             />
           ) : (

apps/studio/components/interfaces/Storage/StorageExplorer/PreviewPane.tsx

@@ -1,13 +1,12 @@
 import { Transition } from '@headlessui/react'
 import { PermissionAction } from '@supabase/shared-types/out/constants'
-import { isEmpty } from 'lodash'
-import { AlertCircle, ChevronDown, Copy, Download, Loader, Trash2, X } from 'lucide-react'
-import SVG from 'react-inlinesvg'
-
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
 import { BASE_PATH } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
+import { isEmpty } from 'lodash'
+import { AlertCircle, ChevronDown, Copy, Download, LoaderCircle, Trash2, X } from 'lucide-react'
+import SVG from 'react-inlinesvg'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
 import {
   Button,
@@ -16,6 +15,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from 'ui'
+
 import { URL_EXPIRY_DURATION } from '../Storage.constants'
 import { StorageItem } from '../Storage.types'
 import { useCopyUrl } from './useCopyUrl'
@@ -41,7 +41,7 @@ const PreviewFile = ({ item }: { item: StorageItem }) => {
   if (isLoading) {
     return (
       <div className="flex h-full w-full items-center justify-center text-foreground-lighter">
-        <Loader size={14} strokeWidth={2} className="animate-spin" />
+        <LoaderCircle size={14} strokeWidth={2} className="animate-spin text-foreground-lighter" />
       </div>
     )
   }