refactor: clean up DocumentsFilters component by removing unused imports and buttons, and streamline type toggle functionality

This commit is contained in:
Anish Sarkar 2026-03-05 21:21:21 +05:30
parent 5813b90e78
commit f3e5b19a99

View file

@ -1,12 +1,10 @@
"use client"; "use client";
import { useSetAtom } from "jotai";
import { import {
CircleAlert, CircleAlert,
FileType, FileType,
ListFilter, ListFilter,
Search, Search,
SlidersHorizontal,
Trash, Trash,
Upload, Upload,
X, X,
@ -14,7 +12,6 @@ import {
import { motion } from "motion/react"; import { motion } from "motion/react";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import React, { useMemo, useRef, useState } from "react"; import React, { useMemo, useRef, useState } from "react";
import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup"; import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
import { import {
AlertDialog, AlertDialog,
@ -55,9 +52,7 @@ export function DocumentsFilters({
const id = React.useId(); const id = React.useId();
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
// Dialog hooks for action buttons
const { openDialog: openUploadDialog } = useDocumentUploadDialog(); const { openDialog: openUploadDialog } = useDocumentUploadDialog();
const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
const [typeSearchQuery, setTypeSearchQuery] = useState(""); const [typeSearchQuery, setTypeSearchQuery] = useState("");
@ -99,15 +94,6 @@ export function DocumentsFilters({
<Upload size={16} /> <Upload size={16} />
<span>Upload documents</span> <span>Upload documents</span>
</Button> </Button>
<Button
onClick={() => setConnectorDialogOpen(true)}
variant="outline"
size="sm"
className="h-9 gap-2 bg-white text-gray-700 border-white hover:bg-gray-50 dark:bg-white dark:text-gray-800 dark:hover:bg-gray-100"
>
<SlidersHorizontal size={16} />
<span>Manage connectors</span>
</Button>
</div> </div>
{/* Spacer */} {/* Spacer */}
@ -193,18 +179,11 @@ export function DocumentsFilters({
</div> </div>
) : ( ) : (
filteredTypes.map((value: DocumentTypeEnum, i) => ( filteredTypes.map((value: DocumentTypeEnum, i) => (
<div <button
type="button"
key={value} key={value}
role="button"
tabIndex={0}
className="flex w-full items-center gap-2.5 py-2 px-3 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-left" className="flex w-full items-center gap-2.5 py-2 px-3 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-left"
onClick={() => onToggleType(value, !activeTypes.includes(value))} onClick={() => onToggleType(value, !activeTypes.includes(value))}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onToggleType(value, !activeTypes.includes(value));
}
}}
> >
{/* Icon */} {/* Icon */}
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted/50 text-foreground/80"> <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted/50 text-foreground/80">
@ -227,7 +206,7 @@ export function DocumentsFilters({
onCheckedChange={(checked: boolean) => onToggleType(value, !!checked)} onCheckedChange={(checked: boolean) => onToggleType(value, !!checked)}
className="h-4 w-4 shrink-0 rounded border-muted-foreground/30 data-[state=checked]:bg-primary data-[state=checked]:border-primary" className="h-4 w-4 shrink-0 rounded border-muted-foreground/30 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
/> />
</div> </button>
)) ))
)} )}
</div> </div>