refactor: improve ReceivedFilesModal layout (#216)

This commit is contained in:
Daniel Luiz Alves
2025-08-18 16:37:42 -03:00
committed by GitHub
2 changed files with 59 additions and 50 deletions

View File

@@ -36,7 +36,6 @@ import {
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { import {
@@ -768,7 +767,7 @@ export function ReceivedFilesModal({
<DialogDescription>{t("reverseShares.modals.receivedFiles.description")}</DialogDescription> <DialogDescription>{t("reverseShares.modals.receivedFiles.description")}</DialogDescription>
</DialogHeader> </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 justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Badge variant="secondary" className="text-sm"> <Badge variant="secondary" className="text-sm">
@@ -848,53 +847,55 @@ export function ReceivedFilesModal({
</div> </div>
</div> </div>
) : ( ) : (
<ScrollArea className="flex-1"> <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">
<Table> <div className="p-1">
<TableHeader> <Table>
<TableRow> <TableHeader>
<TableHead className="w-[50px]"> <TableRow>
<Checkbox <TableHead className="w-[50px]">
checked={isAllSelected} <Checkbox
onCheckedChange={handleSelectAll} checked={isAllSelected}
aria-label={t("reverseShares.modals.receivedFiles.selectAll")} 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> </TableBody>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.size")}</TableHead> </Table>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.sender")}</TableHead> </div>
<TableHead>{t("reverseShares.modals.receivedFiles.columns.date")}</TableHead> </div>
<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>
)} )}
</div> </div>
</DialogContent> </DialogContent>

View File

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