From fa5e55a3768349846485d8b3e5a1248231663a9b Mon Sep 17 00:00:00 2001
From: LSD <lsd2015y@outlook.com>
Date: Mon, 6 Jul 2026 17:17:33 +0800
Subject: [PATCH] feat(mongodb): improve GridFS manager filtering and sorting

* docs: add GridFS manager filter and sort design

* feat: improve GridFS manager filtering and sorting
---
 .../document/MongoBucketBrowser.vue           | 307 +++++++++++++++++-
 .../document/MongoGridFsBrowser.vue           | 143 +++++++-
 .../src/components/sidebar/TreeItem.vue       |   4 +-
 apps/desktop/src/lib/backend/http.ts          |   8 +-
 apps/desktop/src/lib/backend/tauri.ts         |   8 +-
 .../desktop/src/lib/document/gridFsBrowser.ts | 139 ++++++++
 apps/desktop/src/lib/sidebar/treeNodeIcon.ts  | 104 ++++++
 crates/dbx-core/src/db/mongo_driver.rs        |  37 ++-
 crates/dbx-core/src/document_ops.rs           | 130 +++++++-
 crates/dbx-web/src/routes/document_store.rs   |  49 ++-
 ...07-06-gridfs-manager-filter-sort-design.md | 247 ++++++++++++++
 packages/app-tests/gridFsBrowser.test.ts      | 116 +++++++
 packages/app-tests/treeNodeIcon.test.ts       |  19 ++
 src-tauri/src/commands/document_cmd.rs        |  23 +-
 14 files changed, 1294 insertions(+), 40 deletions(-)
 create mode 100644 apps/desktop/src/lib/document/gridFsBrowser.ts
 create mode 100644 apps/desktop/src/lib/sidebar/treeNodeIcon.ts
 create mode 100644 docs/superpowers/specs/2026-07-06-gridfs-manager-filter-sort-design.md
 create mode 100644 packages/app-tests/gridFsBrowser.test.ts
 create mode 100644 packages/app-tests/treeNodeIcon.test.ts

diff --git a/apps/desktop/src/components/document/MongoBucketBrowser.vue b/apps/desktop/src/components/document/MongoBucketBrowser.vue
index 130fab801..72c2df37d 100644
--- a/apps/desktop/src/components/document/MongoBucketBrowser.vue
+++ b/apps/desktop/src/components/document/MongoBucketBrowser.vue
@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { Download, RefreshCcw, Trash2, Upload } from "@lucide/vue";
+import { ArrowDown, ArrowUp, ArrowUpDown, Download, Filter, Plus, RefreshCcw, Trash2, Upload, X } from "@lucide/vue";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { useToast } from "@/composables/useToast";
+import { buildDocumentFilterCondition, currentDocumentFilterJson, currentDocumentSortJson, documentFilterModeNeedsValue, documentFilterModeOptions, documentStoreProviderFor, type DocumentFilterMode, type DocumentFilterRule } from "@/lib/app/documentStoreProvider";
 import { downloadBinaryCellPayload, type BinaryCellDownloadPayload } from "@/lib/dataGrid/binaryCellDownload";
 import { isTauriRuntime } from "@/lib/backend/tauriRuntime";
 import * as api from "@/lib/backend/api";
+import { uuid } from "@/lib/common/utils";
+import { buildGridFsFilesStructuredFilter, createGridFsFileFilterRule, gridFsFileFieldDisplayOption, gridFsFileFieldDisplayOptions, currentGridFsFileSortDirection, gridFsFilesQueryPreview } from "@/lib/document/gridFsBrowser";
 import { useConnectionStore } from "@/stores/connectionStore";
 
 const props = defineProps<{
@@ -27,11 +33,38 @@ const error = ref("");
 const files = ref<Awaited<ReturnType<typeof api.documentListGridFsFiles>>>([]);
 const selectedFileId = ref("");
 const showDeleteConfirm = ref(false);
+const filterInput = ref("");
+const sortInput = ref("");
+const filterBuilderOpen = ref(false);
+const filterRules = ref<DocumentFilterRule[]>([createGridFsFileFilterRule(uuid())]);
+const appliedStructuredFilter = ref<Record<string, unknown> | null>(null);
 
 const totalBytes = computed(() => files.value.reduce((sum, file) => sum + (file.length || 0), 0));
 const selectedFile = computed(() => files.value.find((file) => file.id === selectedFileId.value) || null);
 const selectedMetadata = computed(() => (selectedFile.value?.metadata ? JSON.stringify(selectedFile.value.metadata, null, 2) : ""));
 const isReadonly = computed(() => connectionStore.getConfig(props.connectionId)?.read_only ?? false);
+const mongoProvider = documentStoreProviderFor("mongodb");
+const activeStructuredRuleCount = computed(() => {
+  if (!appliedStructuredFilter.value) return 0;
+  return filterRules.value.filter((rule) => !!buildDocumentFilterCondition(rule, { kind: "mongodb" })).length;
+});
+const filterBuilderActive = computed(() => !!appliedStructuredFilter.value);
+const filesQueryPreview = computed(() => {
+  let filter = "{}";
+  let sort: string | undefined;
+  try {
+    filter = currentFilesFilter() || "{}";
+    sort = currentDocumentSortJson(sortInput.value);
+  } catch {
+    filter = filterInput.value.trim() || "{}";
+    sort = sortInput.value.trim() || undefined;
+  }
+  return gridFsFilesQueryPreview({
+    bucket: props.bucket,
+    filterJson: filter,
+    sortJson: sort,
+  });
+});
 
 function formatBytes(bytes: number): string {
   if (bytes < 1024) return `${bytes} B`;
@@ -44,11 +77,55 @@ function displayName(file: (typeof files.value)[number]): string {
   return file.filename || file.id;
 }
 
+function gridFsFileFieldLabel(fieldName: string): string {
+  const option = gridFsFileFieldDisplayOption(fieldName);
+  if (!option) return fieldName;
+  if (option.label !== undefined) return option.label;
+  if (option.labelKey !== undefined) return t(option.labelKey);
+  return fieldName;
+}
+
+function currentFilesFilter(): string | undefined {
+  return currentDocumentFilterJson(filterInput.value, appliedStructuredFilter.value, "mongodb");
+}
+
+function ensureFilterRule() {
+  if (filterRules.value.length === 0) {
+    filterRules.value = [createGridFsFileFilterRule(uuid())];
+  }
+}
+
+function addFilterRule() {
+  ensureFilterRule();
+  filterRules.value = [...filterRules.value, createGridFsFileFilterRule(uuid())];
+}
+
+function removeFilterRule(ruleId: string) {
+  filterRules.value = filterRules.value.filter((rule) => rule.id !== ruleId);
+  if (filterRules.value.length === 0) {
+    appliedStructuredFilter.value = null;
+  }
+}
+
+function updateFilterRule(ruleId: string, patch: Partial<DocumentFilterRule>) {
+  filterRules.value = filterRules.value.map((rule) => {
+    if (rule.id !== ruleId) return rule;
+    const next = { ...rule, ...patch };
+    if (!documentFilterModeNeedsValue(next.mode)) next.rawValue = "";
+    return next;
+  });
+}
+
+function resetFilterBuilder() {
+  appliedStructuredFilter.value = null;
+  filterRules.value = [createGridFsFileFilterRule(uuid())];
+}
+
 async function loadFiles() {
   loading.value = true;
   error.value = "";
   try {
-    const nextFiles = await api.documentListGridFsFiles(props.connectionId, props.database, props.bucket);
+    const nextFiles = await api.documentListGridFsFiles(props.connectionId, props.database, props.bucket, currentFilesFilter(), currentDocumentSortJson(sortInput.value));
     files.value = nextFiles;
     if (selectedFileId.value && !nextFiles.some((file) => file.id === selectedFileId.value)) {
       selectedFileId.value = "";
@@ -60,6 +137,46 @@ async function loadFiles() {
   }
 }
 
+function applyQuery() {
+  void loadFiles();
+}
+
+type SortDirection = "asc" | "desc" | null;
+
+function currentSortDirection(column: string): SortDirection {
+  const direction = currentGridFsFileSortDirection(sortInput.value, column);
+  return direction === "none" ? null : direction;
+}
+
+function toggleSortForColumn(column: string) {
+  const current = currentSortDirection(column);
+  const nextDirection: SortDirection = current === "asc" ? "desc" : current === "desc" ? null : "asc";
+  sortInput.value = mongoProvider.sortInputForColumn(column, nextDirection);
+  void loadFiles();
+}
+
+function sortIconForColumn(column: string) {
+  const direction = currentSortDirection(column);
+  return direction === "asc" ? ArrowUp : direction === "desc" ? ArrowDown : ArrowUpDown;
+}
+
+function sortIconClass(column: string): string {
+  return currentSortDirection(column) ? "text-foreground" : "text-muted-foreground/60";
+}
+
+function applyStructuredFilters() {
+  appliedStructuredFilter.value = buildGridFsFilesStructuredFilter(filterRules.value);
+  filterBuilderOpen.value = false;
+  void loadFiles();
+}
+
+function clearAllFilters() {
+  filterInput.value = "";
+  appliedStructuredFilter.value = null;
+  filterRules.value = [createGridFsFileFilterRule(uuid())];
+  void loadFiles();
+}
+
 async function downloadFile(file: (typeof files.value)[number]) {
   try {
     const bytes = await api.documentDownloadGridFsFile(props.connectionId, props.database, props.bucket, file.id);
@@ -174,6 +291,143 @@ onMounted(() => {
           </Button>
         </div>
       </div>
+      <div class="mt-3 overflow-hidden rounded-xl border border-border/70 bg-background/80 shadow-xs">
+        <div class="flex flex-col md:flex-row">
+          <div class="flex min-w-0 flex-1 items-center gap-1 px-2 py-1.5">
+            <Popover v-model:open="filterBuilderOpen">
+              <PopoverTrigger as-child>
+                <button
+                  type="button"
+                  class="relative flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-[11px] transition-colors"
+                  :class="filterBuilderActive || filterInput.trim() ? 'border-primary/40 bg-primary/10 text-primary hover:bg-primary/15' : 'border-border/70 text-muted-foreground hover:bg-accent hover:text-foreground'"
+                  @click="ensureFilterRule"
+                >
+                  <Filter class="h-3.5 w-3.5" />
+                  <span v-if="activeStructuredRuleCount" class="absolute -right-1 -top-1 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-1 text-[9px] leading-none text-primary-foreground">
+                    {{ activeStructuredRuleCount }}
+                  </span>
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="start" class="w-[420px] max-w-[calc(100vw-24px)] gap-3 p-3" @click.stop @keydown.stop>
+                <div class="flex items-center justify-between gap-3">
+                  <div class="text-xs font-medium text-foreground">{{ t("grid.filter") }}</div>
+                  <Button variant="ghost" size="sm" class="h-7 px-2 text-xs" @click="addFilterRule">
+                    <Plus class="mr-1 h-3.5 w-3.5" />
+                    {{ t("grid.filterBuilderAddRule") }}
+                  </Button>
+                </div>
+
+                <div v-if="filterRules.length" class="space-y-2">
+                  <template v-for="(rule, index) in filterRules" :key="rule.id">
+                    <div v-if="index > 0" class="flex justify-center">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        class="h-6 px-2 text-[11px] font-medium text-muted-foreground hover:text-foreground"
+                        @click="
+                          updateFilterRule(rule.id, {
+                            conjunction: rule.conjunction === 'AND' ? 'OR' : 'AND',
+                          })
+                        "
+                      >
+                        {{ rule.conjunction }}
+                      </Button>
+                    </div>
+                    <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,0.95fr)_minmax(0,1fr)_auto] items-center gap-1.5">
+                      <Select :model-value="rule.fieldName" @update:model-value="(value: any) => updateFilterRule(rule.id, { fieldName: String(value) })">
+                        <SelectTrigger class="h-8 w-full min-w-0 overflow-hidden text-xs [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate">
+                          <SelectValue :placeholder="t('grid.filterBuilderColumn')" />
+                        </SelectTrigger>
+                        <SelectContent position="popper">
+                          <SelectItem v-for="option in gridFsFileFieldDisplayOptions" :key="option.fieldName" :value="option.fieldName">
+                            {{ gridFsFileFieldLabel(option.fieldName) }}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+
+                      <Select :model-value="rule.mode" @update:model-value="(value: any) => updateFilterRule(rule.id, { mode: value as DocumentFilterMode })">
+                        <SelectTrigger class="h-8 w-full min-w-0 overflow-hidden text-xs [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:truncate">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent position="popper">
+                          <SelectItem v-for="option in documentFilterModeOptions" :key="option.value" :value="option.value">
+                            {{ t(option.labelKey) }}
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+
+                      <Input
+                        v-if="documentFilterModeNeedsValue(rule.mode)"
+                        :model-value="rule.rawValue"
+                        class="h-8 min-w-0 text-xs"
+                        :placeholder="t('grid.filterBuilderValue')"
+                        @update:model-value="(value) => updateFilterRule(rule.id, { rawValue: String(value ?? '') })"
+                        @keydown.enter.prevent="applyStructuredFilters"
+                      />
+                      <div v-else class="flex h-8 min-w-0 items-center overflow-hidden rounded-md border border-dashed px-2 text-xs text-muted-foreground">
+                        <span class="truncate">{{ t("grid.filterBuilderNoValue") }}</span>
+                      </div>
+
+                      <Button variant="ghost" size="icon" class="h-8 w-8 shrink-0 text-muted-foreground hover:text-destructive" :disabled="filterRules.length === 1" @click="removeFilterRule(rule.id)">
+                        <Trash2 class="h-3.5 w-3.5" />
+                      </Button>
+                    </div>
+                  </template>
+                </div>
+                <div v-else class="rounded-md border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
+                  {{ t("grid.filterBuilderEmpty") }}
+                </div>
+
+                <div class="flex items-center justify-between gap-2 pt-1">
+                  <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="clearAllFilters">
+                    {{ t("grid.clearFilter") }}
+                  </Button>
+                  <div class="flex items-center gap-2">
+                    <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="resetFilterBuilder">
+                      {{ t("grid.resetFilterBuilder") }}
+                    </Button>
+                    <Button size="sm" class="h-8 px-3 text-xs" @click="applyStructuredFilters">
+                      {{ t("grid.applyFilter") }}
+                    </Button>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <span class="shrink-0 text-xs font-medium text-blue-600 dark:text-blue-400">{{ mongoProvider.filterInputLabel }}</span>
+            <input v-model="filterInput" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-7 min-w-0 flex-1 bg-transparent font-mono text-xs outline-none placeholder:text-muted-foreground/60" placeholder="{}" @keydown.enter="applyQuery" />
+            <button
+              v-if="filterInput.trim()"
+              class="shrink-0 text-muted-foreground hover:text-foreground"
+              @click="
+                filterInput = '';
+                applyQuery();
+              "
+            >
+              <X class="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <div class="h-px bg-border/70 md:h-auto md:w-px" />
+          <div class="flex min-w-0 flex-1 items-center gap-1 px-2 py-1.5">
+            <span class="shrink-0 text-xs font-medium text-orange-600 dark:text-orange-400">{{ mongoProvider.sortInputLabel }}</span>
+            <input v-model="sortInput" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-7 min-w-0 flex-1 bg-transparent font-mono text-xs outline-none placeholder:text-muted-foreground/60" placeholder='{"uploadDate":-1}' @keydown.enter="applyQuery" />
+            <button
+              v-if="sortInput.trim()"
+              class="shrink-0 text-muted-foreground hover:text-foreground"
+              @click="
+                sortInput = '';
+                applyQuery();
+              "
+            >
+              <X class="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+        <div class="border-t border-border/60 px-3 py-1.5">
+          <div class="truncate font-mono text-[11px] text-muted-foreground" :title="filesQueryPreview">
+            {{ filesQueryPreview }}
+          </div>
+        </div>
+      </div>
     </div>
 
     <div v-if="error" class="px-4 py-3 text-sm text-destructive">
@@ -193,13 +447,48 @@ onMounted(() => {
         <table class="min-w-full border-collapse text-sm">
           <thead class="sticky top-0 z-10 bg-background">
             <tr class="border-b border-border text-left text-xs text-muted-foreground">
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.name") }}</th>
-              <th class="px-4 py-2 font-medium">ID</th>
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.totalSize") }}</th>
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.chunkSize") }}</th>
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.uploadDate") }}</th>
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.contentType") }}</th>
-              <th class="px-4 py-2 font-medium">MD5</th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('filename')">
+                  <span>{{ gridFsFileFieldLabel("filename") }}</span>
+                  <component :is="sortIconForColumn('filename')" class="h-3.5 w-3.5" :class="sortIconClass('filename')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('_id')">
+                  <span>{{ gridFsFileFieldLabel("_id") }}</span>
+                  <component :is="sortIconForColumn('_id')" class="h-3.5 w-3.5" :class="sortIconClass('_id')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('length')">
+                  <span>{{ gridFsFileFieldLabel("length") }}</span>
+                  <component :is="sortIconForColumn('length')" class="h-3.5 w-3.5" :class="sortIconClass('length')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('chunkSize')">
+                  <span>{{ gridFsFileFieldLabel("chunkSize") }}</span>
+                  <component :is="sortIconForColumn('chunkSize')" class="h-3.5 w-3.5" :class="sortIconClass('chunkSize')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('uploadDate')">
+                  <span>{{ gridFsFileFieldLabel("uploadDate") }}</span>
+                  <component :is="sortIconForColumn('uploadDate')" class="h-3.5 w-3.5" :class="sortIconClass('uploadDate')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('contentType')">
+                  <span>{{ gridFsFileFieldLabel("contentType") }}</span>
+                  <component :is="sortIconForColumn('contentType')" class="h-3.5 w-3.5" :class="sortIconClass('contentType')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('md5')">
+                  <span>{{ gridFsFileFieldLabel("md5") }}</span>
+                  <component :is="sortIconForColumn('md5')" class="h-3.5 w-3.5" :class="sortIconClass('md5')" />
+                </button>
+              </th>
             </tr>
           </thead>
           <tbody>
diff --git a/apps/desktop/src/components/document/MongoGridFsBrowser.vue b/apps/desktop/src/components/document/MongoGridFsBrowser.vue
index ea5ff73c3..7b38df9c6 100644
--- a/apps/desktop/src/components/document/MongoGridFsBrowser.vue
+++ b/apps/desktop/src/components/document/MongoGridFsBrowser.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { FolderOpen, Plus, RefreshCcw, Trash2 } from "@lucide/vue";
+import { ArrowDown, ArrowUp, ArrowUpDown, Filter, FolderOpen, Plus, RefreshCcw, Trash2, X } from "@lucide/vue";
 import DangerConfirmDialog from "@/components/editor/DangerConfirmDialog.vue";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { useToast } from "@/composables/useToast";
 import * as api from "@/lib/backend/api";
+import { currentGridFsBucketFilter, currentGridFsBucketSort, currentGridFsBucketSortDirection, gridFsBucketSortInputForColumn } from "@/lib/document/gridFsBrowser";
 import { useConnectionStore } from "@/stores/connectionStore";
 import { useQueryStore } from "@/stores/queryStore";
 
@@ -30,6 +32,9 @@ const selectedBucketName = ref("");
 const showCreateDialog = ref(false);
 const showDeleteConfirm = ref(false);
 const newBucketName = ref("");
+const filterInput = ref("");
+const sortInput = ref("");
+const filterBuilderOpen = ref(false);
 
 const selectedBucket = computed(() => buckets.value.find((bucket) => bucket.name === selectedBucketName.value) || null);
 const totalFiles = computed(() => buckets.value.reduce((sum, bucket) => sum + bucket.fileCount, 0));
@@ -47,7 +52,7 @@ async function loadBuckets() {
   loading.value = true;
   error.value = "";
   try {
-    const nextBuckets = await api.documentListGridFsBuckets(props.connectionId, props.database);
+    const nextBuckets = await api.documentListGridFsBuckets(props.connectionId, props.database, currentGridFsBucketFilter(filterInput.value), currentGridFsBucketSort(sortInput.value));
     buckets.value = nextBuckets;
     if (selectedBucketName.value && !nextBuckets.some((bucket) => bucket.name === selectedBucketName.value)) {
       selectedBucketName.value = "";
@@ -59,6 +64,48 @@ async function loadBuckets() {
   }
 }
 
+function applyQuery() {
+  void loadBuckets();
+}
+
+type SortDirection = "asc" | "desc" | null;
+
+function currentSortDirection(column: "name" | "fileCount" | "totalBytes"): SortDirection {
+  const direction = currentGridFsBucketSortDirection(sortInput.value, column);
+  return direction === "none" ? null : direction;
+}
+
+function toggleSortForColumn(column: "name" | "fileCount" | "totalBytes") {
+  const current = currentSortDirection(column);
+  const nextDirection: SortDirection = current === "asc" ? "desc" : current === "desc" ? null : "asc";
+  sortInput.value = gridFsBucketSortInputForColumn(column, nextDirection);
+  void loadBuckets();
+}
+
+function sortIconForColumn(column: "name" | "fileCount" | "totalBytes") {
+  const direction = currentSortDirection(column);
+  return direction === "asc" ? ArrowUp : direction === "desc" ? ArrowDown : ArrowUpDown;
+}
+
+function sortIconClass(column: "name" | "fileCount" | "totalBytes"): string {
+  return currentSortDirection(column) ? "text-foreground" : "text-muted-foreground/60";
+}
+
+function applyBucketNameFilter() {
+  filterBuilderOpen.value = false;
+  void loadBuckets();
+}
+
+function resetBucketNameFilter() {
+  filterInput.value = "";
+}
+
+function clearBucketNameFilter() {
+  filterInput.value = "";
+  filterBuilderOpen.value = false;
+  void loadBuckets();
+}
+
 function openBucket(bucketName = selectedBucketName.value) {
   if (!bucketName) return;
   queryStore.openMongoBucket(props.connectionId, props.database, bucketName);
@@ -131,6 +178,77 @@ onMounted(() => {
           </Button>
         </div>
       </div>
+      <div class="mt-3 overflow-hidden rounded-xl border border-border/70 bg-background/80 shadow-xs">
+        <div class="flex flex-col md:flex-row">
+          <div class="flex min-w-0 flex-1 items-center gap-1 px-2 py-1.5">
+            <Popover v-model:open="filterBuilderOpen">
+              <PopoverTrigger as-child>
+                <button
+                  type="button"
+                  class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md border text-[11px] transition-colors"
+                  :class="filterInput.trim() ? 'border-primary/40 bg-primary/10 text-primary hover:bg-primary/15' : 'border-border/70 text-muted-foreground hover:bg-accent hover:text-foreground'"
+                >
+                  <Filter class="h-3.5 w-3.5" />
+                </button>
+              </PopoverTrigger>
+              <PopoverContent align="start" class="w-[420px] max-w-[calc(100vw-24px)] gap-3 p-3" @click.stop @keydown.stop>
+                <div class="flex items-center justify-between gap-3">
+                  <div class="text-xs font-medium text-foreground">{{ t("grid.filter") }}</div>
+                </div>
+                <div class="grid grid-cols-[minmax(0,1fr)_minmax(0,0.95fr)_minmax(0,1fr)] items-center gap-1.5">
+                  <div class="flex h-8 min-w-0 items-center overflow-hidden rounded-md border px-2 text-xs font-medium text-foreground">
+                    <span class="truncate">{{ t("gridfsBrowser.name") }}</span>
+                  </div>
+                  <div class="flex h-8 min-w-0 items-center overflow-hidden rounded-md border px-2 text-xs text-muted-foreground">
+                    <span class="truncate">{{ t("grid.filterBuilderContains") }}</span>
+                  </div>
+                  <Input v-model="filterInput" class="h-8 min-w-0 text-xs" :placeholder="t('gridfsBrowser.bucketNamePlaceholder')" @keydown.enter.prevent="applyBucketNameFilter" />
+                </div>
+                <div class="flex items-center justify-between gap-2 pt-1">
+                  <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="clearBucketNameFilter">
+                    {{ t("grid.clearFilter") }}
+                  </Button>
+                  <div class="flex items-center gap-2">
+                    <Button variant="ghost" size="sm" class="h-8 px-2 text-xs" @click="resetBucketNameFilter">
+                      {{ t("grid.resetFilterBuilder") }}
+                    </Button>
+                    <Button size="sm" class="h-8 px-3 text-xs" @click="applyBucketNameFilter">
+                      {{ t("grid.applyFilter") }}
+                    </Button>
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+            <span class="shrink-0 text-xs font-medium text-blue-600 dark:text-blue-400">{{ t("grid.filter") }}</span>
+            <input v-model="filterInput" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-7 min-w-0 flex-1 bg-transparent text-xs outline-none placeholder:text-muted-foreground/60" :placeholder="t('gridfsBrowser.bucketNamePlaceholder')" @keydown.enter="applyQuery" />
+            <button
+              v-if="filterInput.trim()"
+              class="shrink-0 text-muted-foreground hover:text-foreground"
+              @click="
+                filterInput = '';
+                applyQuery();
+              "
+            >
+              <X class="h-3.5 w-3.5" />
+            </button>
+          </div>
+          <div class="h-px bg-border/70 md:h-auto md:w-px" />
+          <div class="flex min-w-0 flex-1 items-center gap-1 px-2 py-1.5">
+            <span class="shrink-0 text-xs font-medium text-orange-600 dark:text-orange-400">{{ t("grid.sort") }}</span>
+            <input v-model="sortInput" autocapitalize="off" autocorrect="off" spellcheck="false" class="h-7 min-w-0 flex-1 bg-transparent font-mono text-xs outline-none placeholder:text-muted-foreground/60" placeholder='{"name":1}' @keydown.enter="applyQuery" />
+            <button
+              v-if="sortInput.trim()"
+              class="shrink-0 text-muted-foreground hover:text-foreground"
+              @click="
+                sortInput = '';
+                applyQuery();
+              "
+            >
+              <X class="h-3.5 w-3.5" />
+            </button>
+          </div>
+        </div>
+      </div>
     </div>
 
     <div v-if="error" class="px-4 py-3 text-sm text-destructive">
@@ -150,9 +268,24 @@ onMounted(() => {
         <table class="min-w-full border-collapse text-sm">
           <thead class="sticky top-0 z-10 bg-background">
             <tr class="border-b border-border text-left text-xs text-muted-foreground">
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.name") }}</th>
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.fileCount") }}</th>
-              <th class="px-4 py-2 font-medium">{{ t("gridfsBrowser.totalSize") }}</th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('name')">
+                  <span>{{ t("gridfsBrowser.name") }}</span>
+                  <component :is="sortIconForColumn('name')" class="h-3.5 w-3.5" :class="sortIconClass('name')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('fileCount')">
+                  <span>{{ t("gridfsBrowser.fileCount") }}</span>
+                  <component :is="sortIconForColumn('fileCount')" class="h-3.5 w-3.5" :class="sortIconClass('fileCount')" />
+                </button>
+              </th>
+              <th class="px-4 py-2 font-medium">
+                <button type="button" class="inline-flex items-center gap-1 hover:text-foreground" @click="toggleSortForColumn('totalBytes')">
+                  <span>{{ t("gridfsBrowser.totalSize") }}</span>
+                  <component :is="sortIconForColumn('totalBytes')" class="h-3.5 w-3.5" :class="sortIconClass('totalBytes')" />
+                </button>
+              </th>
             </tr>
           </thead>
           <tbody>
diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue
index c803eb980..63558f803 100644
--- a/apps/desktop/src/components/sidebar/TreeItem.vue
+++ b/apps/desktop/src/components/sidebar/TreeItem.vue
@@ -354,9 +354,9 @@ function getIconInfo(node: TreeNode): { icon: any; colorClass: string } | null {
       return { icon: Database, colorClass: "text-yellow-500" };
     case "mongo-gridfs":
     case "mongo-buckets":
-      return { icon: Archive, colorClass: "text-amber-500" };
+      return { icon: Archive, colorClass: "text-cyan-500" };
     case "mongo-bucket":
-      return { icon: Archive, colorClass: "text-amber-400" };
+      return { icon: Archive, colorClass: "text-cyan-400" };
     case "mongo-collection":
       return { icon: Table, colorClass: "text-green-400" };
     case "vector-collection":
diff --git a/apps/desktop/src/lib/backend/http.ts b/apps/desktop/src/lib/backend/http.ts
index 6d0cd013b..a164f65ba 100644
--- a/apps/desktop/src/lib/backend/http.ts
+++ b/apps/desktop/src/lib/backend/http.ts
@@ -1893,12 +1893,12 @@ export async function documentFindDocuments(connectionId: string, database: stri
   return post("/api/document-store/find-documents", { connectionId, database, collection, skip, limit, filter, projection, sort, executionId });
 }
 
-export async function documentListGridFsFiles(connectionId: string, database: string, bucket: string): Promise<MongoGridFsFileInfo[]> {
-  return post("/api/document-store/list-gridfs-files", { connectionId, database, bucket });
+export async function documentListGridFsFiles(connectionId: string, database: string, bucket: string, filter?: string, sort?: string): Promise<MongoGridFsFileInfo[]> {
+  return post("/api/document-store/list-gridfs-files", { connectionId, database, bucket, filter, sort });
 }
 
-export async function documentListGridFsBuckets(connectionId: string, database: string): Promise<MongoGridFsBucketInfo[]> {
-  return post("/api/document-store/list-gridfs-buckets", { connectionId, database });
+export async function documentListGridFsBuckets(connectionId: string, database: string, filter?: string, sort?: string): Promise<MongoGridFsBucketInfo[]> {
+  return post("/api/document-store/list-gridfs-buckets", { connectionId, database, filter, sort });
 }
 
 export async function documentCreateGridFsBucket(connectionId: string, database: string, bucket: string): Promise<void> {
diff --git a/apps/desktop/src/lib/backend/tauri.ts b/apps/desktop/src/lib/backend/tauri.ts
index 35a83c1f5..b17d58564 100644
--- a/apps/desktop/src/lib/backend/tauri.ts
+++ b/apps/desktop/src/lib/backend/tauri.ts
@@ -1626,12 +1626,12 @@ export async function documentFindDocuments(connectionId: string, database: stri
   return invoke("document_find_documents", { connectionId, database, collection, skip, limit, filter, projection, sort, executionId });
 }
 
-export async function documentListGridFsFiles(connectionId: string, database: string, bucket: string): Promise<MongoGridFsFileInfo[]> {
-  return invoke("document_list_gridfs_files", { connectionId, database, bucket });
+export async function documentListGridFsFiles(connectionId: string, database: string, bucket: string, filter?: string, sort?: string): Promise<MongoGridFsFileInfo[]> {
+  return invoke("document_list_gridfs_files", { connectionId, database, bucket, filter, sort });
 }
 
-export async function documentListGridFsBuckets(connectionId: string, database: string): Promise<MongoGridFsBucketInfo[]> {
-  return invoke("document_list_gridfs_buckets", { connectionId, database });
+export async function documentListGridFsBuckets(connectionId: string, database: string, filter?: string, sort?: string): Promise<MongoGridFsBucketInfo[]> {
+  return invoke("document_list_gridfs_buckets", { connectionId, database, filter, sort });
 }
 
 export async function documentCreateGridFsBucket(connectionId: string, database: string, bucket: string): Promise<void> {
diff --git a/apps/desktop/src/lib/document/gridFsBrowser.ts b/apps/desktop/src/lib/document/gridFsBrowser.ts
new file mode 100644
index 000000000..08a5583c9
--- /dev/null
+++ b/apps/desktop/src/lib/document/gridFsBrowser.ts
@@ -0,0 +1,139 @@
+import { buildDocumentFilterCondition, combineDocumentFilterConditions, defaultDocumentFilterRule, type DocumentFilterRule } from "@/lib/app/documentStoreProvider";
+import { formatMongoShellLiteral } from "@/lib/mongo/mongoDocumentValues";
+import { quoteUnquotedObjectKeys } from "@/lib/mongo/mongoShellCommand";
+
+export type GridFsBucketSortField = "name" | "fileCount" | "totalBytes";
+export type GridFsBucketSortDirection = "asc" | "desc";
+export type GridFsSortDirectionState = "none" | "asc" | "desc";
+export type GridFsFileField = "_id" | "filename" | "contentType" | "length" | "chunkSize" | "uploadDate" | "md5";
+export type GridFsFileFieldDisplayOption = { fieldName: GridFsFileField; label: string; labelKey?: never } | { fieldName: GridFsFileField; labelKey: string; label?: never };
+export type GridFsBucketSort = {
+  field: GridFsBucketSortField;
+  direction: GridFsBucketSortDirection;
+};
+
+export const gridFsFileFilterFieldOptions = ["_id", "filename", "contentType", "length", "chunkSize", "uploadDate", "md5"] as const satisfies readonly GridFsFileField[];
+export const gridFsFileFieldDisplayOptions = [
+  { fieldName: "_id", label: "ID" },
+  { fieldName: "filename", labelKey: "gridfsBrowser.name" },
+  { fieldName: "contentType", labelKey: "gridfsBrowser.contentType" },
+  { fieldName: "length", labelKey: "gridfsBrowser.totalSize" },
+  { fieldName: "chunkSize", labelKey: "gridfsBrowser.chunkSize" },
+  { fieldName: "uploadDate", labelKey: "gridfsBrowser.uploadDate" },
+  { fieldName: "md5", label: "MD5" },
+] as const satisfies readonly GridFsFileFieldDisplayOption[];
+
+export function gridFsFilesQueryPreview(options: { bucket: string; filterJson?: string; sortJson?: string }): string {
+  const parts = [`db.getCollection(${JSON.stringify(`${options.bucket}.files`)}).find(${mongoShellPreviewLiteral(options.filterJson || "{}")})`];
+  if (options.sortJson?.trim()) parts.push(`.sort(${mongoShellPreviewLiteral(options.sortJson)})`);
+  return parts.join("");
+}
+
+export function currentGridFsBucketFilter(input: string): string | undefined {
+  const trimmed = input.trim();
+  return trimmed || undefined;
+}
+
+export function createGridFsFileFilterRule(id: string): DocumentFilterRule {
+  return defaultDocumentFilterRule(id, gridFsFileFilterFieldOptions[0] ?? "");
+}
+
+export function gridFsFileFieldDisplayOption(fieldName: string): GridFsFileFieldDisplayOption | null {
+  return gridFsFileFieldDisplayOptions.find((option) => option.fieldName === fieldName) ?? null;
+}
+
+export function buildGridFsFilesStructuredFilter(rules: DocumentFilterRule[]): Record<string, unknown> | null {
+  const items = rules
+    .map((rule) => ({
+      rule,
+      condition: buildDocumentFilterCondition(rule, { kind: "mongodb" }),
+    }))
+    .filter((item): item is { rule: DocumentFilterRule; condition: Record<string, unknown> } => !!item.condition);
+  return combineDocumentFilterConditions(
+    items.map((item) => item.condition),
+    items.map((item) => item.rule),
+  );
+}
+
+export function parseGridFsBucketSort(input?: string): GridFsBucketSort | null {
+  const trimmed = input?.trim();
+  if (!trimmed) return null;
+  const parsed = JSON.parse(quoteUnquotedObjectKeys(trimmed)) as unknown;
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("GridFS bucket sort must be a JSON object");
+  }
+  const entries = Object.entries(parsed);
+  if (entries.length !== 1) {
+    throw new Error("GridFS bucket sort must contain exactly one field");
+  }
+  const [field, rawDirection] = entries[0]!;
+  if (field !== "name" && field !== "fileCount" && field !== "totalBytes") {
+    throw new Error("Unsupported GridFS bucket sort field");
+  }
+  const direction = normalizeGridFsBucketSortDirection(rawDirection);
+  if (!direction) {
+    throw new Error("GridFS bucket sort direction must be 1, -1, 'asc', or 'desc'");
+  }
+  return { field, direction };
+}
+
+export function currentGridFsBucketSort(input: string): string | undefined {
+  const sort = parseGridFsBucketSort(input);
+  if (!sort) return undefined;
+  return JSON.stringify({ [sort.field]: sort.direction === "desc" ? -1 : 1 });
+}
+
+export function currentGridFsFileSortDirection(input: string, column: string): GridFsSortDirectionState {
+  const sort = parseSingleFieldSort(input);
+  if (!sort || sort.field !== column) return "none";
+  return sort.direction;
+}
+
+export function currentGridFsBucketSortDirection(input: string, column: GridFsBucketSortField): GridFsSortDirectionState {
+  try {
+    const sort = parseGridFsBucketSort(input);
+    if (!sort || sort.field !== column) return "none";
+    return sort.direction;
+  } catch {
+    return "none";
+  }
+}
+
+export function gridFsBucketSortInputForColumn(column: string, direction: GridFsBucketSortDirection | null): string {
+  if (!direction) return "";
+  if (column !== "name" && column !== "fileCount" && column !== "totalBytes") return "";
+  return JSON.stringify({ [column]: direction === "desc" ? -1 : 1 });
+}
+
+function normalizeGridFsBucketSortDirection(value: unknown): GridFsBucketSortDirection | null {
+  if (value === -1 || value === "-1" || value === "desc") return "desc";
+  if (value === 1 || value === "1" || value === "asc") return "asc";
+  return null;
+}
+
+function parseSingleFieldSort(input?: string): { field: string; direction: GridFsBucketSortDirection } | null {
+  const trimmed = input?.trim();
+  if (!trimmed) return null;
+  try {
+    const parsed = JSON.parse(quoteUnquotedObjectKeys(trimmed)) as unknown;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+    const entries = Object.entries(parsed);
+    if (entries.length !== 1) return null;
+    const [field, rawDirection] = entries[0]!;
+    const direction = normalizeGridFsBucketSortDirection(rawDirection);
+    if (!direction) return null;
+    return { field, direction };
+  } catch {
+    return null;
+  }
+}
+
+function mongoShellPreviewLiteral(json: string): string {
+  const trimmed = json.trim();
+  if (!trimmed) return "{}";
+  try {
+    return formatMongoShellLiteral(JSON.parse(quoteUnquotedObjectKeys(trimmed)));
+  } catch {
+    return trimmed;
+  }
+}
diff --git a/apps/desktop/src/lib/sidebar/treeNodeIcon.ts b/apps/desktop/src/lib/sidebar/treeNodeIcon.ts
new file mode 100644
index 000000000..13aa26e53
--- /dev/null
+++ b/apps/desktop/src/lib/sidebar/treeNodeIcon.ts
@@ -0,0 +1,104 @@
+import type { Component } from "vue";
+import { Archive, Braces, Columns3, Database, Eye, FileCode, FolderClosed, FolderOpen, Key, Link, ListTree, Network, Package, Plus, ScrollText, Server, Table, TableProperties, UsersRound, Zap } from "@lucide/vue";
+import type { ColumnInfo, TreeNode } from "@/types/database";
+
+export type TreeNodeIconInfo = {
+  icon: Component;
+  colorClass: string;
+};
+
+export function getTreeNodeIconInfo(node: TreeNode): TreeNodeIconInfo | null {
+  switch (node.type) {
+    case "schema":
+      return { icon: node.isExpanded ? FolderOpen : FolderClosed, colorClass: "text-amber-500" };
+    case "connection":
+    case "database":
+    case "mongo-db":
+      return { icon: Database, colorClass: "text-yellow-500" };
+    case "linked-server-root":
+      return { icon: Network, colorClass: "text-blue-500" };
+    case "linked-server":
+      return { icon: Server, colorClass: "text-blue-400" };
+    case "linked-server-catalog":
+    case "linked-server-schema":
+    case "mq-tenant":
+      return { icon: FolderOpen, colorClass: "text-sky-400" };
+    case "nacos-namespace":
+    case "etcd-root":
+      return { icon: FolderOpen, colorClass: "text-sky-500" };
+    case "zookeeper-root":
+      return { icon: Database, colorClass: "text-blue-500" };
+    case "table":
+      return { icon: Table, colorClass: "text-green-500" };
+    case "view":
+      return { icon: Eye, colorClass: "text-purple-500" };
+    case "materialized_view":
+      return { icon: Eye, colorClass: "text-indigo-500" };
+    case "column":
+      return { icon: Columns3, colorClass: (node.meta as ColumnInfo | undefined)?.is_primary_key ? "text-orange-400" : "text-muted-foreground" };
+    case "group-columns":
+      return { icon: ListTree, colorClass: "text-green-400" };
+    case "group-indexes":
+    case "index":
+      return { icon: Key, colorClass: "text-amber-500" };
+    case "group-fkeys":
+      return { icon: Link, colorClass: "text-blue-400" };
+    case "fkey":
+      return { icon: Link, colorClass: "text-blue-300" };
+    case "group-triggers":
+      return { icon: Zap, colorClass: "text-orange-400" };
+    case "trigger":
+      return { icon: Zap, colorClass: "text-orange-300" };
+    case "object-browser":
+      return { icon: TableProperties, colorClass: "text-primary" };
+    case "user-admin":
+      return { icon: UsersRound, colorClass: "text-primary" };
+    case "redis-db":
+      return { icon: Database, colorClass: "text-red-400" };
+    case "mongo-gridfs":
+    case "mongo-buckets":
+      return { icon: Archive, colorClass: "text-cyan-500" };
+    case "mongo-bucket":
+      return { icon: Archive, colorClass: "text-cyan-400" };
+    case "mongo-collection":
+      return { icon: Table, colorClass: "text-green-400" };
+    case "vector-collection":
+      return { icon: TableProperties, colorClass: "text-cyan-400" };
+    case "elasticsearch-index":
+      return { icon: Table, colorClass: "text-emerald-400" };
+    case "procedure":
+      return { icon: ScrollText, colorClass: "text-blue-500" };
+    case "function":
+      return { icon: Braces, colorClass: "text-amber-500" };
+    case "sequence":
+      return { icon: ListTree, colorClass: "text-emerald-500" };
+    case "package":
+      return { icon: Package, colorClass: "text-cyan-500" };
+    case "package-body":
+      return { icon: FileCode, colorClass: "text-cyan-400" };
+    case "group-tables":
+      return { icon: Table, colorClass: "text-green-500" };
+    case "group-views":
+      return { icon: Eye, colorClass: "text-purple-500" };
+    case "group-materialized-views":
+      return { icon: Eye, colorClass: "text-indigo-500" };
+    case "group-procedures":
+      return { icon: ScrollText, colorClass: "text-blue-500" };
+    case "group-functions":
+      return { icon: Braces, colorClass: "text-amber-500" };
+    case "group-sequences":
+      return { icon: ListTree, colorClass: "text-emerald-500" };
+    case "group-packages":
+      return { icon: Package, colorClass: "text-cyan-500" };
+    case "group-partitions":
+      return { icon: node.isExpanded ? FolderOpen : FolderClosed, colorClass: "text-green-400" };
+    case "group-extensions":
+      return { icon: Package, colorClass: "text-violet-500" };
+    case "extension":
+      return { icon: Package, colorClass: "text-violet-400" };
+    case "load-more":
+      return { icon: Plus, colorClass: "text-primary" };
+    default:
+      return { icon: Database, colorClass: "text-muted-foreground" };
+  }
+}
diff --git a/crates/dbx-core/src/db/mongo_driver.rs b/crates/dbx-core/src/db/mongo_driver.rs
index 9b1bccc12..6cf079c85 100644
--- a/crates/dbx-core/src/db/mongo_driver.rs
+++ b/crates/dbx-core/src/db/mongo_driver.rs
@@ -207,12 +207,15 @@ pub async fn list_gridfs_files(
     client: &Client,
     database: &str,
     bucket: &str,
+    filter: Option<&str>,
+    sort: Option<&str>,
 ) -> Result<Vec<MongoGridFsFileInfo>, String> {
     let bucket = normalized_gridfs_bucket_name(bucket)?;
     let collection_name = format!("{bucket}.files");
     let collection = client.database(database).collection::<Document>(&collection_name);
-    let mut cursor =
-        collection.find(doc! {}).sort(doc! { "uploadDate": -1_i32, "_id": -1_i32 }).await.map_err(|e| e.to_string())?;
+    let filter_doc = gridfs_file_filter_document(filter)?;
+    let sort_doc = gridfs_file_sort_document(sort)?;
+    let mut cursor = collection.find(filter_doc).sort(sort_doc).await.map_err(|e| e.to_string())?;
     let mut files = Vec::new();
     while cursor.advance().await.map_err(|e| e.to_string())? {
         let doc = cursor.deserialize_current().map_err(|e| e.to_string())?;
@@ -221,6 +224,26 @@ pub async fn list_gridfs_files(
     Ok(files)
 }
 
+fn gridfs_file_filter_document(filter: Option<&str>) -> Result<Document, String> {
+    match filter {
+        Some(raw) if !raw.trim().is_empty() => {
+            let json: serde_json::Value = serde_json::from_str(raw).map_err(|e| format!("Invalid filter JSON: {e}"))?;
+            json_filter_to_document(&json)
+        }
+        _ => Ok(doc! {}),
+    }
+}
+
+fn gridfs_file_sort_document(sort: Option<&str>) -> Result<Document, String> {
+    match sort {
+        Some(raw) if !raw.trim().is_empty() => {
+            let json: serde_json::Value = serde_json::from_str(raw).map_err(|e| format!("Invalid sort JSON: {e}"))?;
+            json_object_to_document(&json).map_err(|e| format!("Invalid sort: {e}"))
+        }
+        _ => Ok(doc! { "uploadDate": -1_i32, "_id": -1_i32 }),
+    }
+}
+
 pub async fn gridfs_bucket_summary(
     client: &Client,
     database: &str,
@@ -1583,6 +1606,16 @@ mod tests {
         assert_eq!(info.aliases, Some(vec!["archive".to_string(), "nightly".to_string()]));
     }
 
+    #[test]
+    fn gridfs_file_sort_uses_upload_date_desc_by_default() {
+        assert_eq!(gridfs_file_sort_document(None).unwrap(), doc! { "uploadDate": -1_i32, "_id": -1_i32 });
+    }
+
+    #[test]
+    fn gridfs_file_sort_parses_explicit_sort_json() {
+        assert_eq!(gridfs_file_sort_document(Some(r#"{"filename":1}"#)).unwrap(), doc! { "filename": 1_i64 });
+    }
+
     #[test]
     fn json_object_to_document_parses_find_projection() {
         let value = serde_json::json!({
diff --git a/crates/dbx-core/src/document_ops.rs b/crates/dbx-core/src/document_ops.rs
index 79ad9b218..8a1ac98b4 100644
--- a/crates/dbx-core/src/document_ops.rs
+++ b/crates/dbx-core/src/document_ops.rs
@@ -122,6 +122,78 @@ fn mongo_bucket_infos(names: &[String]) -> Vec<CollectionInfo> {
         .collect()
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum GridFsBucketSortField {
+    Name,
+    FileCount,
+    TotalBytes,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+struct GridFsBucketSort {
+    field: GridFsBucketSortField,
+    descending: bool,
+}
+
+fn parse_gridfs_bucket_sort(sort: Option<&str>) -> Result<GridFsBucketSort, String> {
+    let Some(raw) = sort.map(str::trim).filter(|value| !value.is_empty()) else {
+        return Ok(GridFsBucketSort { field: GridFsBucketSortField::Name, descending: false });
+    };
+
+    let value: serde_json::Value =
+        serde_json::from_str(raw).map_err(|e| format!("Invalid GridFS bucket sort JSON: {e}"))?;
+    let object = value.as_object().ok_or_else(|| "GridFS bucket sort must be a JSON object".to_string())?;
+    if object.len() != 1 {
+        return Err("GridFS bucket sort must contain exactly one field".to_string());
+    }
+
+    let (field_name, direction) = object.iter().next().expect("checked len");
+    let field = match field_name.as_str() {
+        "name" => GridFsBucketSortField::Name,
+        "fileCount" => GridFsBucketSortField::FileCount,
+        "totalBytes" => GridFsBucketSortField::TotalBytes,
+        _ => return Err(format!("Unsupported GridFS bucket sort field: {field_name}")),
+    };
+    let descending = match direction {
+        serde_json::Value::Number(value) if value.as_i64() == Some(-1) => true,
+        serde_json::Value::Number(value) if value.as_i64() == Some(1) => false,
+        serde_json::Value::String(value) if value.eq_ignore_ascii_case("desc") || value == "-1" => true,
+        serde_json::Value::String(value) if value.eq_ignore_ascii_case("asc") || value == "1" => false,
+        _ => return Err("GridFS bucket sort direction must be 1, -1, 'asc', or 'desc'".to_string()),
+    };
+
+    Ok(GridFsBucketSort { field, descending })
+}
+
+fn filter_and_sort_gridfs_bucket_infos(
+    mut buckets: Vec<MongoGridFsBucketInfo>,
+    filter: Option<&str>,
+    sort: Option<&str>,
+) -> Result<Vec<MongoGridFsBucketInfo>, String> {
+    if let Some(filter_text) = filter.map(str::trim).filter(|value| !value.is_empty()) {
+        let needle = filter_text.to_lowercase();
+        buckets.retain(|bucket| bucket.name.to_lowercase().contains(&needle));
+    }
+
+    let sort = parse_gridfs_bucket_sort(sort)?;
+    buckets.sort_by(|left, right| {
+        let name_cmp =
+            left.name.to_lowercase().cmp(&right.name.to_lowercase()).then_with(|| left.name.cmp(&right.name));
+        let ordering = match sort.field {
+            GridFsBucketSortField::Name => name_cmp,
+            GridFsBucketSortField::FileCount => left.file_count.cmp(&right.file_count).then_with(|| name_cmp),
+            GridFsBucketSortField::TotalBytes => left.total_bytes.cmp(&right.total_bytes).then_with(|| name_cmp),
+        };
+        if sort.descending {
+            ordering.reverse()
+        } else {
+            ordering
+        }
+    });
+
+    Ok(buckets)
+}
+
 pub async fn list_collections_core(
     state: &AppState,
     connection_id: &str,
@@ -160,11 +232,13 @@ pub async fn list_gridfs_files_core(
     connection_id: &str,
     database: &str,
     bucket: &str,
+    filter: Option<&str>,
+    sort: Option<&str>,
 ) -> Result<Vec<MongoGridFsFileInfo>, String> {
     ensure_document_pool(state, connection_id).await?;
     let connections = state.connections.read().await;
     match connections.get(connection_id).ok_or("Not found")? {
-        PoolKind::MongoDb(client) => mongo_driver::list_gridfs_files(client, database, bucket).await,
+        PoolKind::MongoDb(client) => mongo_driver::list_gridfs_files(client, database, bucket, filter, sort).await,
         PoolKind::Agent(_) => Err("MongoDB legacy agent does not support GridFS file browsing".to_string()),
         _ => Err("Not a MongoDB connection".to_string()),
     }
@@ -174,6 +248,8 @@ pub async fn list_gridfs_buckets_core(
     state: &AppState,
     connection_id: &str,
     database: &str,
+    filter: Option<&str>,
+    sort: Option<&str>,
 ) -> Result<Vec<MongoGridFsBucketInfo>, String> {
     ensure_document_pool(state, connection_id).await?;
     let connections = state.connections.read().await;
@@ -185,7 +261,7 @@ pub async fn list_gridfs_buckets_core(
             for bucket_name in bucket_names {
                 buckets.push(mongo_driver::gridfs_bucket_summary(client, database, &bucket_name).await?);
             }
-            Ok(buckets)
+            filter_and_sort_gridfs_bucket_infos(buckets, filter, sort)
         }
         PoolKind::Agent(_) => Err("MongoDB legacy agent does not support GridFS bucket browsing".to_string()),
         _ => Err("Not a MongoDB connection".to_string()),
@@ -420,7 +496,10 @@ pub async fn delete_document_core(
 
 #[cfg(test)]
 mod tests {
-    use super::{fallback_mongo_database, mongo_gridfs_bucket_names, mongo_list_databases_unauthorized, sort_names};
+    use super::{
+        fallback_mongo_database, filter_and_sort_gridfs_bucket_infos, mongo_gridfs_bucket_names,
+        mongo_list_databases_unauthorized, parse_gridfs_bucket_sort, sort_names, MongoGridFsBucketInfo,
+    };
 
     #[test]
     fn sorts_names_case_insensitively() {
@@ -464,4 +543,49 @@ mod tests {
 
         assert_eq!(buckets, vec!["orders".to_string(), "reports".to_string()]);
     }
+
+    #[test]
+    fn filters_gridfs_buckets_by_case_insensitive_name_match() {
+        let buckets = filter_and_sort_gridfs_bucket_infos(
+            vec![
+                MongoGridFsBucketInfo { name: "images".to_string(), file_count: 4, total_bytes: 512 },
+                MongoGridFsBucketInfo { name: "nightly-reports".to_string(), file_count: 9, total_bytes: 4096 },
+                MongoGridFsBucketInfo { name: "videos".to_string(), file_count: 2, total_bytes: 8192 },
+            ],
+            Some("REPORT"),
+            None,
+        )
+        .unwrap();
+
+        assert_eq!(
+            buckets.into_iter().map(|bucket| bucket.name).collect::<Vec<_>>(),
+            vec!["nightly-reports".to_string()]
+        );
+    }
+
+    #[test]
+    fn sorts_gridfs_buckets_by_total_bytes_descending() {
+        let buckets = filter_and_sort_gridfs_bucket_infos(
+            vec![
+                MongoGridFsBucketInfo { name: "images".to_string(), file_count: 4, total_bytes: 512 },
+                MongoGridFsBucketInfo { name: "nightly-reports".to_string(), file_count: 9, total_bytes: 4096 },
+                MongoGridFsBucketInfo { name: "videos".to_string(), file_count: 2, total_bytes: 8192 },
+            ],
+            None,
+            Some(r#"{"totalBytes":-1}"#),
+        )
+        .unwrap();
+
+        assert_eq!(
+            buckets.into_iter().map(|bucket| bucket.name).collect::<Vec<_>>(),
+            vec!["videos".to_string(), "nightly-reports".to_string(), "images".to_string()]
+        );
+    }
+
+    #[test]
+    fn gridfs_bucket_sort_rejects_unknown_fields() {
+        let error = parse_gridfs_bucket_sort(Some(r#"{"createdAt":-1}"#)).unwrap_err();
+
+        assert!(error.contains("Unsupported GridFS bucket sort field"));
+    }
 }
diff --git a/crates/dbx-web/src/routes/document_store.rs b/crates/dbx-web/src/routes/document_store.rs
index c5428dae8..45228e3dd 100644
--- a/crates/dbx-web/src/routes/document_store.rs
+++ b/crates/dbx-web/src/routes/document_store.rs
@@ -107,6 +107,25 @@ pub struct GridFsBucketRequest {
     pub bucket: String,
 }
 
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GridFsFileListRequest {
+    pub connection_id: String,
+    pub database: String,
+    pub bucket: String,
+    pub filter: Option<String>,
+    pub sort: Option<String>,
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct GridFsBucketListRequest {
+    pub connection_id: String,
+    pub database: String,
+    pub filter: Option<String>,
+    pub sort: Option<String>,
+}
+
 #[derive(Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct GridFsDownloadRequest {
@@ -222,22 +241,34 @@ pub async fn delete_document(
 
 pub async fn list_gridfs_files(
     State(state): State<Arc<WebState>>,
-    Json(req): Json<GridFsBucketRequest>,
+    Json(req): Json<GridFsFileListRequest>,
 ) -> Result<Json<Vec<dbx_core::document_ops::MongoGridFsFileInfo>>, AppError> {
-    let result =
-        dbx_core::document_ops::list_gridfs_files_core(&state.app, &req.connection_id, &req.database, &req.bucket)
-            .await
-            .map_err(AppError)?;
+    let result = dbx_core::document_ops::list_gridfs_files_core(
+        &state.app,
+        &req.connection_id,
+        &req.database,
+        &req.bucket,
+        req.filter.as_deref(),
+        req.sort.as_deref(),
+    )
+    .await
+    .map_err(AppError)?;
     Ok(Json(result))
 }
 
 pub async fn list_gridfs_buckets(
     State(state): State<Arc<WebState>>,
-    Json(req): Json<DocumentListCollectionsRequest>,
+    Json(req): Json<GridFsBucketListRequest>,
 ) -> Result<Json<Vec<dbx_core::document_ops::MongoGridFsBucketInfo>>, AppError> {
-    let result = dbx_core::document_ops::list_gridfs_buckets_core(&state.app, &req.connection_id, &req.database)
-        .await
-        .map_err(AppError)?;
+    let result = dbx_core::document_ops::list_gridfs_buckets_core(
+        &state.app,
+        &req.connection_id,
+        &req.database,
+        req.filter.as_deref(),
+        req.sort.as_deref(),
+    )
+    .await
+    .map_err(AppError)?;
     Ok(Json(result))
 }
 
diff --git a/docs/superpowers/specs/2026-07-06-gridfs-manager-filter-sort-design.md b/docs/superpowers/specs/2026-07-06-gridfs-manager-filter-sort-design.md
new file mode 100644
index 000000000..08122bb3a
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-06-gridfs-manager-filter-sort-design.md
@@ -0,0 +1,247 @@
+# GridFS Manager Filter And Sort Design
+
+**Date:** 2026-07-06
+
+## Goal
+
+Extend the existing GridFS manager and bucket browser so MongoDB users can filter and sort GridFS data without leaving the dedicated GridFS workflow.
+
+This work covers three user-facing improvements:
+
+- add query-style filter and sort controls to the GridFS file list
+- add filter and sort controls to the GridFS bucket manager
+- make the GridFS sidebar node more visually distinct from regular Mongo collections
+
+## Background
+
+The dedicated GridFS browser shipped on 2026-07-03 and already provides:
+
+- a single `GridFS` sidebar entry per Mongo database
+- a database-level manager page for bucket CRUD
+- a bucket-level file browser for upload, download, and delete
+
+Issue #2589 reports that the new Mongo manager flow still lacks filtering. The current UI shows static tables only:
+
+- `MongoGridFsBrowser.vue` lists bucket summaries with no filter or sort controls
+- `MongoBucketBrowser.vue` lists bucket files with a fixed default ordering
+- the backend `list_gridfs_files` API always runs an empty `find({})` with a built-in descending upload date sort
+
+The goal of this iteration is to keep the dedicated GridFS UX, but make it feel closer to the existing Mongo document query experience.
+
+## Current State
+
+### File browser
+
+`MongoBucketBrowser.vue` currently:
+
+- loads every file in the selected bucket
+- shows a table with metadata columns
+- supports upload, download, delete, refresh
+- has no filter input
+- has no user-controlled sort
+- has no query preview
+
+### Bucket manager
+
+`MongoGridFsBrowser.vue` currently:
+
+- loads every GridFS bucket summary for the database
+- shows bucket name, file count, and total size
+- supports create, delete, open, refresh
+- has no filter input
+- has no user-controlled sort
+
+### Sidebar
+
+`TreeItem.vue` currently renders:
+
+- `mongo-gridfs` and `mongo-buckets` with `Archive` plus amber styling
+- `mongo-bucket` with a very similar `Archive` plus lighter amber styling
+
+This makes the GridFS entry readable, but not especially distinct from other MongoDB tree nodes.
+
+## Requirements
+
+### Functional
+
+- users can filter GridFS files within a bucket
+- users can sort GridFS files within a bucket
+- users can filter GridFS buckets within a database
+- users can sort GridFS buckets within a database
+- file-list sorting works both from explicit sort input and column-header sort actions
+- the GridFS sidebar entry has a clearer dedicated visual treatment
+
+### Behavioral
+
+- existing upload, download, delete, create, and open flows keep working
+- existing callers that omit new query parameters retain current behavior
+- invalid filter or sort input produces visible errors rather than silent fallback
+
+## Chosen Approach
+
+### Query model
+
+Use one consistent principle across both GridFS pages:
+
+- execute filter and sort on the server
+- keep frontend controls visually aligned with the document query UI
+- only reuse document-query semantics where the underlying data shape supports it cleanly
+
+### Bucket file browser
+
+The file browser should closely mirror Mongo document query behavior.
+
+Frontend:
+
+- add `filter` and `sort` text inputs to `MongoBucketBrowser.vue`
+- show a query preview string for the effective GridFS file query
+- trigger reload on Enter, refresh click, and table-header sort changes
+- map header sort actions back into the `sort` input, matching `DocumentBrowser.vue`
+
+Backend:
+
+- extend the GridFS file list API to accept optional `filter` and `sort` strings
+- parse them with the same Mongo document parsing helpers already used by document queries
+- run the query against `<bucket>.files` as `find(filter).sort(sort)`
+- preserve the existing default sort of `uploadDate desc, _id desc` when no sort is provided
+
+Preview format:
+
+- use `db.getCollection("<bucket>.files").find(...).sort(...).skip(0).limit(...)` style output
+- the preview exists for transparency and consistency, even if the file browser continues returning a plain row list instead of a paged document result object
+
+### Bucket manager
+
+The bucket manager should adopt the same interaction style, but not pretend bucket summaries are raw Mongo documents.
+
+Frontend:
+
+- add a lightweight `filter` input for bucket-name matching
+- add a sort control that behaves like the existing query toolbar and table-header sorting
+- keep the manager table focused on `name`, `fileCount`, and `totalBytes`
+
+Backend:
+
+- extend the bucket list API to accept optional filter and sort parameters
+- filter bucket summaries by normalized bucket name match
+- sort bucket summaries by one of:
+  - `name`
+  - `fileCount`
+  - `totalBytes`
+- default to `name asc` when no explicit sort is provided
+
+This gives the manager page service-side filtering and sorting while staying honest about the underlying data model, which is aggregated summary data rather than a directly queried collection.
+
+### Sidebar icon treatment
+
+Keep the existing icon family but make the top-level GridFS entry visually stand apart.
+
+- `mongo-gridfs`: keep `Archive` but switch to a more distinctive cool color so it no longer blends with ordinary Mongo tree items
+- `mongo-bucket`: keep the same icon family with a related but softer shade
+
+The goal is recognition, not a broad tree redesign.
+
+## Architecture
+
+### Backend layers
+
+Update the GridFS query path across all transport layers:
+
+- `crates/dbx-core/src/db/mongo_driver.rs`
+- `crates/dbx-core/src/document_ops.rs`
+- `src-tauri/src/commands/document_cmd.rs`
+- `crates/dbx-web/src/routes/document_store.rs`
+- `apps/desktop/src/lib/backend/tauri.ts`
+- `apps/desktop/src/lib/backend/http.ts`
+
+The backend remains backward compatible by treating all new parameters as optional.
+
+### Frontend layers
+
+Update the dedicated GridFS views:
+
+- `apps/desktop/src/components/document/MongoBucketBrowser.vue`
+- `apps/desktop/src/components/document/MongoGridFsBrowser.vue`
+
+Reuse document-query support where it fits:
+
+- `apps/desktop/src/lib/app/documentStoreProvider.ts`
+
+Update the sidebar presentation in:
+
+- `apps/desktop/src/components/sidebar/TreeItem.vue`
+
+## Data Flow
+
+### File browser
+
+1. User opens a GridFS bucket tab.
+2. `MongoBucketBrowser.vue` builds the current `filter` and `sort` state.
+3. Frontend sends the new parameters through the shared document-store API.
+4. Rust applies the filter and sort to `<bucket>.files`.
+5. The returned file list renders in the table and side detail panel.
+6. If the user clicks a sortable header, the UI rewrites the `sort` input and reloads.
+
+### Bucket manager
+
+1. User opens the `GridFS` manager tab.
+2. `MongoGridFsBrowser.vue` sends current manager filter and sort state.
+3. Rust collects bucket summaries, filters them, sorts them, and returns the list.
+4. The manager table and summary pane update in place.
+
+## Error Handling
+
+- invalid Mongo-style file filter input should surface as a visible page error
+- invalid file sort input should surface as a visible page error
+- unsupported bucket-manager sort fields should return a clear backend error
+- empty filter input should behave like no filter
+- missing sort input should fall back to the page default sort
+- write operations continue to use the existing read-only safeguards
+
+## Testing
+
+### Frontend
+
+Add or update Vitest coverage for:
+
+- GridFS query preview formatting in `documentStoreProvider`
+- request assembly for GridFS file filter and sort loading
+- request assembly for GridFS bucket filter and sort loading
+- sidebar icon and color mapping for `mongo-gridfs` and `mongo-bucket`
+
+### Backend
+
+Add Rust coverage for:
+
+- GridFS file filter parsing
+- default file sort fallback
+- explicit file sort handling
+- bucket summary filtering
+- bucket summary sorting by supported fields
+
+## Scope Boundaries
+
+### Included now
+
+- service-side GridFS file filtering
+- service-side GridFS file sorting
+- service-side GridFS bucket filtering
+- service-side GridFS bucket sorting
+- query-style toolbar inputs for the file browser
+- visually improved GridFS sidebar node styling
+
+### Not included now
+
+- pagination contract changes for GridFS APIs
+- turning bucket summaries into full Mongo document queries
+- advanced bucket filter builders
+- drag-and-drop upload improvements
+- inline file editing or file preview
+
+## Success Criteria
+
+- users can narrow GridFS files with Mongo-style filter input
+- users can sort GridFS files from either toolbar input or table headers
+- users can narrow and sort GridFS bucket summaries from the manager page
+- the dedicated GridFS sidebar node is easier to distinguish at a glance
+- existing GridFS CRUD flows keep working without regression
diff --git a/packages/app-tests/gridFsBrowser.test.ts b/packages/app-tests/gridFsBrowser.test.ts
new file mode 100644
index 000000000..c67eb524c
--- /dev/null
+++ b/packages/app-tests/gridFsBrowser.test.ts
@@ -0,0 +1,116 @@
+import assert from "node:assert/strict";
+import { test } from "vitest";
+import * as gridFsBrowserModule from "../../apps/desktop/src/lib/document/gridFsBrowser.ts";
+import {
+  buildGridFsFilesStructuredFilter,
+  currentGridFsBucketFilter,
+  currentGridFsBucketSort,
+  currentGridFsBucketSortDirection,
+  currentGridFsFileSortDirection,
+  gridFsFileFilterFieldOptions,
+  gridFsBucketSortInputForColumn,
+  gridFsFilesQueryPreview,
+  parseGridFsBucketSort,
+} from "../../apps/desktop/src/lib/document/gridFsBrowser.ts";
+
+test("builds a Mongo-style GridFS files query preview", () => {
+  assert.equal(
+    gridFsFilesQueryPreview({
+      bucket: "fs",
+      filterJson: '{"metadata.owner":"alice"}',
+      sortJson: '{"uploadDate":-1}',
+    }),
+    'db.getCollection("fs.files").find({"metadata.owner":"alice"}).sort({"uploadDate":-1})',
+  );
+});
+
+test("omits the sort stage when the GridFS file preview has no explicit sort", () => {
+  assert.equal(
+    gridFsFilesQueryPreview({
+      bucket: "fs",
+      filterJson: '{"filename":"report.zip"}',
+    }),
+    'db.getCollection("fs.files").find({"filename":"report.zip"})',
+  );
+});
+
+test("normalizes GridFS bucket filters by trimming blank input", () => {
+  assert.equal(currentGridFsBucketFilter("   nightly  "), "nightly");
+  assert.equal(currentGridFsBucketFilter("   "), undefined);
+});
+
+test("normalizes GridFS manager sort directions for supported fields", () => {
+  assert.deepEqual(parseGridFsBucketSort('{"totalBytes":-1}'), { field: "totalBytes", direction: "desc" });
+  assert.deepEqual(parseGridFsBucketSort("{ fileCount: 1 }"), { field: "fileCount", direction: "asc" });
+});
+
+test("serializes GridFS manager sort input for supported columns", () => {
+  assert.equal(gridFsBucketSortInputForColumn("name", "asc"), '{"name":1}');
+  assert.equal(gridFsBucketSortInputForColumn("totalBytes", "desc"), '{"totalBytes":-1}');
+  assert.equal(gridFsBucketSortInputForColumn("fileCount", null), "");
+});
+
+test("rejects unsupported GridFS bucket sort fields", () => {
+  assert.throws(() => parseGridFsBucketSort('{"createdAt":-1}'), /Unsupported GridFS bucket sort field/);
+});
+
+test("returns canonical GridFS bucket sort JSON", () => {
+  assert.equal(currentGridFsBucketSort("{ totalBytes: -1 }"), '{"totalBytes":-1}');
+  assert.equal(currentGridFsBucketSort("   "), undefined);
+});
+
+test("exposes the available GridFS file filter fields for the compact builder", () => {
+  assert.deepEqual(gridFsFileFilterFieldOptions, ["_id", "filename", "contentType", "length", "chunkSize", "uploadDate", "md5"]);
+});
+
+test("exposes shared GridFS file field display metadata for filters and headers", () => {
+  assert.deepEqual((gridFsBrowserModule as any).gridFsFileFieldDisplayOptions, [
+    { fieldName: "_id", label: "ID" },
+    { fieldName: "filename", labelKey: "gridfsBrowser.name" },
+    { fieldName: "contentType", labelKey: "gridfsBrowser.contentType" },
+    { fieldName: "length", labelKey: "gridfsBrowser.totalSize" },
+    { fieldName: "chunkSize", labelKey: "gridfsBrowser.chunkSize" },
+    { fieldName: "uploadDate", labelKey: "gridfsBrowser.uploadDate" },
+    { fieldName: "md5", label: "MD5" },
+  ]);
+});
+
+test("combines GridFS file filter rules into a MongoDB structured filter", () => {
+  assert.deepEqual(
+    buildGridFsFilesStructuredFilter([
+      {
+        id: "rule-1",
+        fieldName: "filename",
+        mode: "equals",
+        rawValue: "report.zip",
+        conjunction: "AND",
+      },
+      {
+        id: "rule-2",
+        fieldName: "contentType",
+        mode: "like",
+        rawValue: "image",
+        conjunction: "AND",
+      },
+    ]),
+    {
+      $and: [
+        { filename: "report.zip" },
+        { contentType: { $regex: "image", $options: "i" } },
+      ],
+    },
+  );
+});
+
+test("derives explicit GridFS file sort directions for visible header indicators", () => {
+  assert.equal(currentGridFsFileSortDirection('{"filename":1}', "filename"), "asc");
+  assert.equal(currentGridFsFileSortDirection('{"filename":-1}', "filename"), "desc");
+  assert.equal(currentGridFsFileSortDirection('{"filename":1}', "uploadDate"), "none");
+  assert.equal(currentGridFsFileSortDirection('{"filename":1,"uploadDate":-1}', "filename"), "none");
+});
+
+test("derives explicit GridFS bucket sort directions for visible header indicators", () => {
+  assert.equal(currentGridFsBucketSortDirection('{"name":1}', "name"), "asc");
+  assert.equal(currentGridFsBucketSortDirection('{"totalBytes":-1}', "totalBytes"), "desc");
+  assert.equal(currentGridFsBucketSortDirection('{"name":1}', "fileCount"), "none");
+});
diff --git a/packages/app-tests/treeNodeIcon.test.ts b/packages/app-tests/treeNodeIcon.test.ts
new file mode 100644
index 000000000..a61962e77
--- /dev/null
+++ b/packages/app-tests/treeNodeIcon.test.ts
@@ -0,0 +1,19 @@
+import assert from "node:assert/strict";
+import { test } from "vitest";
+import { getTreeNodeIconInfo } from "../../apps/desktop/src/lib/sidebar/treeNodeIcon.ts";
+import type { TreeNode } from "../../apps/desktop/src/types/database.ts";
+
+test("GridFS sidebar nodes use a dedicated cool-color icon treatment", () => {
+  const gridfs = getTreeNodeIconInfo({ type: "mongo-gridfs" } as TreeNode);
+  const bucket = getTreeNodeIconInfo({ type: "mongo-bucket" } as TreeNode);
+
+  assert.equal(gridfs?.colorClass, "text-cyan-500");
+  assert.equal(bucket?.colorClass, "text-cyan-400");
+});
+
+test("GridFS sidebar icon mapping stays distinct from Mongo collections", () => {
+  const gridfs = getTreeNodeIconInfo({ type: "mongo-gridfs" } as TreeNode);
+  const collection = getTreeNodeIconInfo({ type: "mongo-collection" } as TreeNode);
+
+  assert.notEqual(gridfs?.colorClass, collection?.colorClass);
+});
diff --git a/src-tauri/src/commands/document_cmd.rs b/src-tauri/src/commands/document_cmd.rs
index 685b7f379..fb222b848 100644
--- a/src-tauri/src/commands/document_cmd.rs
+++ b/src-tauri/src/commands/document_cmd.rs
@@ -135,8 +135,17 @@ pub async fn document_list_gridfs_buckets(
     state: State<'_, Arc<AppState>>,
     connection_id: String,
     database: String,
+    filter: Option<String>,
+    sort: Option<String>,
 ) -> Result<Vec<dbx_core::document_ops::MongoGridFsBucketInfo>, String> {
-    dbx_core::document_ops::list_gridfs_buckets_core(&state, &connection_id, &database).await
+    dbx_core::document_ops::list_gridfs_buckets_core(
+        &state,
+        &connection_id,
+        &database,
+        filter.as_deref(),
+        sort.as_deref(),
+    )
+    .await
 }
 
 #[tauri::command]
@@ -167,8 +176,18 @@ pub async fn document_list_gridfs_files(
     connection_id: String,
     database: String,
     bucket: String,
+    filter: Option<String>,
+    sort: Option<String>,
 ) -> Result<Vec<dbx_core::document_ops::MongoGridFsFileInfo>, String> {
-    dbx_core::document_ops::list_gridfs_files_core(&state, &connection_id, &database, &bucket).await
+    dbx_core::document_ops::list_gridfs_files_core(
+        &state,
+        &connection_id,
+        &database,
+        &bucket,
+        filter.as_deref(),
+        sort.as_deref(),
+    )
+    .await
 }
 
 #[tauri::command]