Hide dot files by default (#368)

Author: platypii

src/components/Folder/Folder.module.css

@@ -66,17 +66,36 @@
   }
 }
 
+/* settings dropdown */
+.settings {
+  margin-left: 8px;
+
+  & button::before {
+    /* hide caret */
+    display: none;
+  }
+
+  & svg {
+    opacity: 0.8;
+    transition: opacity 0.2s;
+  }
+
+  &:hover svg {
+    opacity: 1;
+  }
+}
+
 /* search */
 .search {
   background: #fff url("../../assets/search.svg") no-repeat center right 8px;
   border: 1px solid transparent;
-  border-radius: 12px;
+  border-radius: 8px;
   flex-shrink: 1;
   font-size: 12px;
   height: 24px;
   min-width: 0;
   outline: none;
-  padding: 4px 20px 2px 8px;
+  padding: 5px 20px 5px 10px;
   width: 100px;
   transition-duration: 0.3s;
   transition-property: border, width;

src/components/Folder/Folder.tsx

@@ -4,10 +4,15 @@ import type { DirSource, FileMetadata } from '../../lib/sources/types.js'
 import { cn, formatFileSize, getFileDate, getFileDateShort } from '../../lib/utils.js'
 import Breadcrumb from '../Breadcrumb/Breadcrumb.js'
 import Center from '../Center/Center.js'
+import Dropdown from '../Dropdown/Dropdown.js'
 import Layout from '../Layout/Layout.js'
 import Spinner from '../Spinner/Spinner.js'
 import styles from './Folder.module.css'
 
+const gearIcon = <svg fill='white' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'>
+  <path d='M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z' />
+</svg>
+
 interface FolderProps {
   source: DirSource
 }
@@ -20,6 +25,7 @@ export default function Folder({ source }: FolderProps) {
   const [files, setFiles] = useState<FileMetadata[]>()
   const [error, setError] = useState<Error>()
   const [searchQuery, setSearchQuery] = useState('')
+  const [showHiddenFiles, setShowHiddenFiles] = useState(false)
   const searchRef = useRef<HTMLInputElement>(null)
   const listRef = useRef<HTMLUListElement>(null)
   const { routes, customClass } = useConfig()
@@ -34,10 +40,14 @@ export default function Folder({ source }: FolderProps) {
       })
   }, [source])
 
-  // File search
+  // File search and hidden files filtering
   const filtered = useMemo(() => {
-    return files?.filter(file => file.name.toLowerCase().includes(searchQuery.toLowerCase()))
-  }, [files, searchQuery])
+    return files?.filter(file => {
+      const matchesSearch = file.name.toLowerCase().includes(searchQuery.toLowerCase())
+      const isHidden = file.name.startsWith('.')
+      return matchesSearch && (showHiddenFiles || !isHidden)
+    })
+  }, [files, searchQuery, showHiddenFiles])
 
   useEffect(() => {
     const searchElement = searchRef.current
@@ -90,6 +100,11 @@ export default function Folder({ source }: FolderProps) {
   return <Layout error={error} title={source.prefix}>
     <Breadcrumb source={source}>
       <input autoFocus className={cn(styles.search, customClass?.search)} placeholder='Search...' ref={searchRef} />
+      <Dropdown className={styles.settings} label={gearIcon} align='right'>
+        <button onClick={() => { setShowHiddenFiles(!showHiddenFiles) }}>
+          {showHiddenFiles ? 'Hide hidden files' : 'Show hidden files'}
+        </button>
+      </Dropdown>
     </Breadcrumb>
 
     {filtered === undefined ?