use CSS module for Folder styles

Author: severo

src/components/Folder.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useConfig } from '../hooks/useConfig.js'
 import type { DirSource, FileMetadata } from '../lib/sources/types.js'
 import { cn, formatFileSize, getFileDate, getFileDateShort } from '../lib/utils.js'
+import styles from '../styles/Folder.module.css'
 import Breadcrumb from './Breadcrumb.js'
 import Center from './Center.js'
 import Layout from './Layout.js'
@@ -21,8 +22,7 @@ export default function Folder({ source }: FolderProps) {
   const [searchQuery, setSearchQuery] = useState('')
   const searchRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
-
-  const { routes } = useConfig()
+  const { routes, customClass } = useConfig()
 
   // Fetch files on component mount
   useEffect(() => {
@@ -98,18 +98,18 @@ export default function Folder({ source }: FolderProps) {
       <Center><Spinner /></Center> :
       filtered.length === 0 ?
         <Center>No files</Center> :
-        <ul className='file-list' ref={listRef}>
+        <ul className={cn(styles.fileList, customClass?.fileList)} ref={listRef}>
           {filtered.map((file, index) =>
             <li key={index}>
               <a href={routes?.getSourceRouteUrl?.({ sourceId: file.sourceId }) ?? location.href}>
-                <span className={cn('file-name', 'file', file.kind === 'directory' && 'folder')}>
+                <span data-file-kind={file.kind}>
                   {file.name}
                 </span>
                 {file.kind === 'file' && <>
-                  {file.size !== undefined && <span className='file-size' title={file.size.toLocaleString() + ' bytes'}>
+                  {file.size !== undefined && <span data-file-size title={file.size.toLocaleString() + ' bytes'}>
                     {formatFileSize(file.size)}
                   </span>}
-                  <span className='file-date' title={getFileDate(file)}>
+                  <span data-file-date title={getFileDate(file)}>
                     {getFileDateShort(file)}
                   </span>
                 </>}

src/hooks/useConfig.ts

@@ -14,6 +14,7 @@ export interface Config {
     center?: string
     contentWrapper?: string
     errorBar?: string
+    fileList?: string
     highTable?: string
     imageView?: string
     layout?: string

src/styles/Folder.module.css

@@ -0,0 +1,67 @@
+.fileList {
+  /* file list */
+  flex: 1;
+  list-style: none;
+  overflow-y: auto;
+  padding-left: 0;
+  /* browsers like to cover the bottom row */
+  padding-bottom: 24px;
+
+  & > li {
+    margin: 0;
+
+    &:first-child > a {
+      border-top: none;
+    }
+
+    & > a {
+      border-top: 1px solid #ddd;
+      color: #444;
+      display: flex;
+      padding: 8px 16px 8px 20px;
+      text-decoration: none;
+
+      &:hover {
+        background-color: #e2e2ee;
+      }
+
+      & > span {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &[data-file-kind] {
+          /* file name + icon */
+          flex: 1;
+          min-width: 80px;
+
+          background-position: left center;
+          background-repeat: no-repeat;
+          background-size: 12px;
+          padding-left: 22px;
+
+          &[data-file-kind="directory"] {
+            background-image: url("../assets/folder.svg");
+          }
+
+          &[data-file-kind="file"] {
+            background-image: url("../assets/file.svg");
+          }
+        }
+
+        &[data-file-size] {
+          /* file size */
+          color: #666;
+          margin: 0 16px;
+          text-align: right;
+        }
+
+        &[data-file-date] {
+          /* file date */
+          min-width: 90px;
+          text-align: right;
+        }
+      }
+    }
+  }
+}

src/styles/app.css

@@ -91,61 +91,3 @@ input.search:focus {
   padding-left: 8px;
   width: 180px;
 }
-
-/* file list */
-.file-list {
-  flex: 1;
-  list-style: none;
-  overflow-y: auto;
-  padding-left: 0;
-  /* browsers like to cover the bottom row */
-  padding-bottom: 24px;
-}
-.file-list li {
-  margin: 0;
-}
-.file-list li:first-child a {
-  border-top: none;
-}
-.file-list a {
-  border-top: 1px solid #ddd;
-  color: #444;
-  display: flex;
-  padding: 8px 16px 8px 20px;
-  text-decoration: none;
-}
-.file-list a:hover {
-  background-color: #e2e2ee;
-}
-
-.file-list a > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.file-name {
-  flex: 1;
-  min-width: 80px;
-}
-.file-size {
-  color: #666;
-  margin: 0 16px;
-  text-align: right;
-}
-.file-date {
-  min-width: 90px;
-  text-align: right;
-}
-
-/* file icons */
-.file {
-  background-image: url("../assets/file.svg");
-  background-position: left center;
-  background-repeat: no-repeat;
-  background-size: 12px;
-  padding-left: 22px;
-}
-.folder {
-  background-image: url("../assets/folder.svg");
-}