Add archive filter

src/components/Files/FileFilters.tsx

@@ -6,27 +6,19 @@ import { Check } from "lucide-react";
 type Props = {
   files: CodexDataContent[];
   onFilterToggle: (filter: string) => void;
+  selected: string[];
 };
 
-const archiveMimetypes = [
+export function FilterFilters({ selected, files, onFilterToggle }: Props) {
-  "application/zip",
-  "application/x-rar-compressed",
-  "application/x-tar",
-  "application/gzip",
-  "application/x-7z-compressed",
-  "application/gzip", // for .tar.gz
-  "application/x-bzip2",
-  "application/x-xz",
-];
-
-export function FilterFilters({ files, onFilterToggle }: Props) {
   const filters = Array.from(
     new Set(
-      files.map((file) =>
+      files
-        archiveMimetypes.includes(file.manifest.mimetype)
+        .filter((f) => f.manifest.mimetype !== "")
-          ? "archive"
+        .map((file) =>
-          : Files.type(file.manifest.mimetype)
+          Files.isArchive(file.manifest.mimetype)
-      )
+            ? "archive"
+            : Files.type(file.manifest.mimetype)
+        )
     )
   );
 
@@ -35,7 +27,7 @@ export function FilterFilters({ files, onFilterToggle }: Props) {
       key={type}
       className={classnames(
         ["files-filter"],
-        ["files-filter--active", filters.includes(type)]
+        ["files-filter--active", !!filters.find((f) => selected.includes(f))]
       )}
       onClick={() => onFilterToggle(type)}>
       <span>{type}</span> <Check size={"1rem"}></Check>

src/components/Files/Files.css

@@ -13,6 +13,12 @@
 }
 
 .files-fileMeta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.files-fileMeta-cid {
   word-break: break-all;
 }
 

src/components/Files/Files.tsx

@@ -33,7 +33,7 @@ export function Files() {
   const [error, setError] = useState("");
   const [details, setDetails] = useState<CodexDataContent | null>(null);
   const [sortFn, setSortFn] = useState<SortFn | null>(null);
-  const [filters, setFilters] = useState<string[]>([]);
+  const [selectedFilters, setSelectedFilters] = useState<string[]>([]);
 
   useEffect(() => {
     WebStorage.folders.list().then((items) => setFolders(items));
@@ -191,9 +191,9 @@ export function Files() {
   };
 
   const onToggleFilter = (filter: string) =>
-    filters.includes(filter)
+    selectedFilters.includes(filter)
-      ? setFilters(filters.filter((f) => f !== filter))
+      ? setSelectedFilters(selectedFilters.filter((f) => f !== filter))
-      : setFilters([...filters, filter]);
+      : setSelectedFilters([...selectedFilters, filter]);
 
   tabs.unshift({
     label: "All files",
@@ -214,7 +214,10 @@ export function Files() {
 
   const filtered = items.filter(
     (item) =>
-      filters.length === 0 || filters.includes(F.type(item.manifest.mimetype))
+      selectedFilters.length === 0 ||
+      selectedFilters.includes(F.type(item.manifest.mimetype)) ||
+      (selectedFilters.includes("archive") &&
+        F.isArchive(item.manifest.mimetype))
   );
 
   const sorted = sortFn ? [...filtered].sort(sortFn) : filtered;
@@ -264,11 +267,15 @@ export function Files() {
       <Tabs onTabChange={onTabChange} tabIndex={index} tabs={tabs}></Tabs>
 
       <div className="files-filters">
-        <FilterFilters files={files} onFilterToggle={onToggleFilter} />
+        <FilterFilters
+          files={files}
+          onFilterToggle={onToggleFilter}
+          selected={selectedFilters}
+        />
       </div>
 
       <div className="files-fileBody">
-        <Table headers={headers} rows={rows} defaultSortIndex={3} />
+        <Table headers={headers} rows={rows} defaultSortIndex={2} />
       </div>
 
       <FileDetails onClose={onClose} details={details} />

src/utils/files.ts

@@ -1,3 +1,14 @@
+const archiveMimetypes = [
+  "application/zip",
+  "application/x-rar-compressed",
+  "application/x-tar",
+  "application/gzip",
+  "application/x-7z-compressed",
+  "application/gzip", // for .tar.gz
+  "application/x-bzip2",
+  "application/x-xz",
+];
+
 export const Files = {
   isImage(type: string) {
     return type.startsWith("image");
@@ -5,6 +16,9 @@ export const Files = {
   type(mimetype: string) {
     const [type] = mimetype.split("/")
     return type
+  },
+  isArchive(mimetype: string) {
+    return archiveMimetypes.includes(mimetype)
   }
 };