refactor: improve ReceivedFilesModal layout and remove unused ScrollArea component

- Updated the layout of the ReceivedFilesModal to enhance responsiveness and usability by replacing the ScrollArea with a div that manages overflow.
- Removed the unused ScrollArea import to clean up the codebase.
This commit is contained in:
Daniel Luiz Alves
2025-08-18 16:24:59 -03:00
parent c081b6f764
commit 4075a7df29
2 changed files with 59 additions and 50 deletions

View File

@@ -36,7 +36,6 @@ import {
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
@@ -768,7 +767,7 @@ export function ReceivedFilesModal({
<DialogDescription>{t("reverseShares.modals.receivedFiles.description")}</DialogDescription>
</DialogHeader>
<div className="flex flex-col gap-4 flex-1 overflow-hidden">
<div className="flex flex-col gap-4 flex-1 min-h-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<Badge variant="secondary" className="text-sm">
@@ -848,53 +847,55 @@ export function ReceivedFilesModal({
</div>
</div>
) : (
<ScrollArea className="flex-1">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[50px]">
<Checkbox
checked={isAllSelected}
onCheckedChange={handleSelectAll}
aria-label={t("reverseShares.modals.receivedFiles.selectAll")}
<div className="h-[450px] w-full overflow-y-auto rounded-lg border bg-background shadow-sm [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/20">
<div className="p-1">
<Table>
<TableHeader>
<TableRow>
<TableHead className="w-[50px]">
<Checkbox
checked={isAllSelected}
onCheckedChange={handleSelectAll}
aria-label={t("reverseShares.modals.receivedFiles.selectAll")}
/>
</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.file")}</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.size")}</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.sender")}</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.date")}</TableHead>
<TableHead className="text-right">
{t("reverseShares.modals.receivedFiles.columns.actions")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{files.map((file) => (
<FileRow
key={file.id}
file={file}
editingFile={editingFile}
editValue={editValue}
inputRef={inputRef}
hoveredFile={hoveredFile}
copyingFile={copyingFile}
isSelected={selectedFiles.has(file.id)}
onStartEdit={startEdit}
onSaveEdit={saveEdit}
onCancelEdit={cancelEdit}
onEditValueChange={setEditValue}
onKeyDown={handleKeyDown}
onSetHoveredFile={setHoveredFile}
onPreview={handlePreview}
onDownload={handleDownload}
onDelete={handleDeleteFile}
onCopy={handleCopyFile}
onSelectFile={handleSelectFile}
/>
</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.file")}</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.size")}</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.sender")}</TableHead>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.date")}</TableHead>
<TableHead className="text-right">
{t("reverseShares.modals.receivedFiles.columns.actions")}
</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{files.map((file) => (
<FileRow
key={file.id}
file={file}
editingFile={editingFile}
editValue={editValue}
inputRef={inputRef}
hoveredFile={hoveredFile}
copyingFile={copyingFile}
isSelected={selectedFiles.has(file.id)}
onStartEdit={startEdit}
onSaveEdit={saveEdit}
onCancelEdit={cancelEdit}
onEditValueChange={setEditValue}
onKeyDown={handleKeyDown}
onSetHoveredFile={setHoveredFile}
onPreview={handlePreview}
onDownload={handleDownload}
onDelete={handleDeleteFile}
onCopy={handleCopyFile}
onSelectFile={handleSelectFile}
/>
))}
</TableBody>
</Table>
</ScrollArea>
))}
</TableBody>
</Table>
</div>
</div>
)}
</div>
</DialogContent>

View File

@@ -19,6 +19,14 @@ const publicPaths = [
"/s/",
"/r/",
];
const unauthenticatedOnlyPaths = [
"/login",
"/forgot-password",
"/reset-password",
"/auth/callback",
"/auth/oidc/callback",
];
const homePaths = ["/"];
export function RedirectHandler({ children }: RedirectHandlerProps) {
@@ -28,7 +36,7 @@ export function RedirectHandler({ children }: RedirectHandlerProps) {
useEffect(() => {
if (isAuthenticated === true) {
if (publicPaths.some((path) => pathname.startsWith(path)) || homePaths.includes(pathname)) {
if (unauthenticatedOnlyPaths.some((path) => pathname.startsWith(path)) || homePaths.includes(pathname)) {
router.replace("/dashboard");
return;
}
@@ -46,7 +54,7 @@ export function RedirectHandler({ children }: RedirectHandlerProps) {
if (
isAuthenticated === true &&
(publicPaths.some((path) => pathname.startsWith(path)) || homePaths.includes(pathname))
(unauthenticatedOnlyPaths.some((path) => pathname.startsWith(path)) || homePaths.includes(pathname))
) {
return <LoadingScreen />;
}