From 68a8dae0dc08dccdd9ced4ab930fc3da831eeec5 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Sun, 7 Jun 2026 08:43:16 +0200
Subject: [PATCH] refactor(mui): migrate ProjectFileManager to MUI kit

Replace legacy ConfirmModal with the kit ConfirmDialog (delete-confirm).
Re-skin onto Card + DataTable (file/folder rows), Box toolbar/breadcrumb,
EmptyState, LoadingState, kit Button/TextField/IconButton. The hidden
multipart file input is kept (per-file NAS upload). All queries,
mutations, invalidate keys (["projects", id, "files"]), NAS upload/
download/rename/create-folder/drag-drop logic, permissions, and Czech
text preserved verbatim.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/admin/components/ProjectFileManager.tsx | 788 ++++++++++++--------
 1 file changed, 465 insertions(+), 323 deletions(-)

diff --git a/src/admin/components/ProjectFileManager.tsx b/src/admin/components/ProjectFileManager.tsx
index 31125c6..3050a8a 100644
--- a/src/admin/components/ProjectFileManager.tsx
+++ b/src/admin/components/ProjectFileManager.tsx
@@ -1,8 +1,21 @@
 import { useState, useRef } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import CircularProgress from "@mui/material/CircularProgress";
 import { projectFilesOptions } from "../lib/queries/projects";
 import { useAlert } from "../context/AlertContext";
-import ConfirmModal from "./ConfirmModal";
+import {
+  Card,
+  Button,
+  TextField,
+  ConfirmDialog,
+  EmptyState,
+  LoadingState,
+  DataTable,
+  type DataColumn,
+} from "../ui";
 import apiFetch from "../utils/api";
 
 const API_BASE = "/api/admin";
@@ -143,7 +156,16 @@ function getFileIcon(type: string, extension?: string) {
 
 function SymlinkBadge({ target }: { target?: string }) {
   return (
-    <span className="fm-symlink-badge" title={target || "Odkaz"}>
+    <Box
+      component="span"
+      title={target || "Odkaz"}
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        ml: 0.5,
+        color: "text.secondary",
+      }}
+    >
       <svg
         width="12"
         height="12"
@@ -155,7 +177,7 @@ function SymlinkBadge({ target }: { target?: string }) {
         <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
         <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
       </svg>
-    </span>
+    </Box>
   );
 }
 
@@ -168,26 +190,53 @@ function FileNameCell({
 }) {
   if (item.type === "folder") {
     return (
-      <span className="fm-name-cell">
-        <button
+      <Box
+        component="span"
+        sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}
+      >
+        <Box
+          component="button"
           type="button"
-          className="fm-folder-link"
           onClick={() => onFolderClick(item.name)}
+          sx={{
+            background: "none",
+            border: "none",
+            p: 0,
+            font: "inherit",
+            color: "primary.main",
+            cursor: "pointer",
+            textAlign: "left",
+            "&:hover": { textDecoration: "underline" },
+          }}
         >
           {item.name}
-        </button>
+        </Box>
         {item.is_symlink && <SymlinkBadge target={item.link_target} />}
         {item.item_count !== undefined && (
-          <span className="fm-item-count">{item.item_count}</span>
+          <Box
+            component="span"
+            sx={{
+              fontSize: ".7rem",
+              color: "text.secondary",
+              bgcolor: "action.hover",
+              borderRadius: 1,
+              px: 0.75,
+            }}
+          >
+            {item.item_count}
+          </Box>
         )}
-      </span>
+      </Box>
     );
   }
   return (
-    <span className="fm-name-cell">
-      <span className="fm-file-name">{item.name}</span>
+    <Box
+      component="span"
+      sx={{ display: "inline-flex", alignItems: "center", gap: 0.5 }}
+    >
+      <Box component="span">{item.name}</Box>
       {item.is_symlink && <SymlinkBadge target={item.link_target} />}
-    </span>
+    </Box>
   );
 }
 
@@ -469,76 +518,271 @@ export default function ProjectFileManager({
   };
 
   if (filesLoading && items.length === 0 && !errorMessage) {
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+    return <LoadingState />;
   }
 
   if (errorMessage) {
     return (
-      <div className="admin-card">
-        <div className="admin-card-body">
-          <h3 className="admin-card-title">Soubory</h3>
-          <div className="fm-empty">
+      <Card>
+        <Typography variant="h6" sx={{ mb: 2 }}>
+          Soubory
+        </Typography>
+        <EmptyState
+          icon={
             <svg
               width="32"
               height="32"
               viewBox="0 0 24 24"
               fill="none"
-              stroke="var(--text-tertiary)"
+              stroke="currentColor"
               strokeWidth="1.5"
             >
               <circle cx="12" cy="12" r="10" />
               <line x1="12" y1="8" x2="12" y2="12" />
               <line x1="12" y1="16" x2="12.01" y2="16" />
             </svg>
-            <span>{errorMessage}</span>
-          </div>
-        </div>
-      </div>
+          }
+          title={errorMessage}
+        />
+      </Card>
     );
   }
 
-  return (
-    <div className="admin-card">
-      <div className="admin-card-body">
-        <h3 className="admin-card-title">Soubory</h3>
-
-        {/* Toolbar */}
-        <div className="fm-toolbar">
-          <div className="fm-breadcrumb">
-            {breadcrumb.map((segment, i) => (
-              <span key={i} className="fm-breadcrumb-segment">
-                {i > 0 && <span className="fm-breadcrumb-sep">/</span>}
-                <button
-                  type="button"
-                  className={`fm-breadcrumb-btn ${i === breadcrumb.length - 1 ? "active" : ""}`}
-                  onClick={() => handleBreadcrumbClick(i)}
-                >
-                  {i === 0 ? projectNumber : segment}
-                </button>
-              </span>
-            ))}
-          </div>
-
-          {fullPath && (
-            <span className="fm-full-path" title={fullPath}>
-              {fullPath}
-            </span>
-          )}
-
-          {canManage && (
-            <div className="fm-toolbar-actions">
-              <button
-                type="button"
-                className="admin-btn admin-btn-secondary admin-btn-sm"
-                onClick={() => {
-                  setNewFolderMode(!newFolderMode);
-                  setNewFolderName("");
+  const columns: DataColumn<FileItem>[] = [
+    {
+      key: "icon",
+      header: "",
+      width: 30,
+      align: "left",
+      render: (item) => (
+        <Box sx={{ textAlign: "center" }}>
+          {getFileIcon(item.type, item.extension)}
+        </Box>
+      ),
+    },
+    {
+      key: "name",
+      header: "Název",
+      render: (item) =>
+        renamingItem === item.name ? (
+          <TextField
+            value={renameValue}
+            onChange={(e) => setRenameValue(e.target.value)}
+            autoFocus
+            sx={{ maxWidth: 300 }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                handleRename(item);
+              }
+              if (e.key === "Escape") {
+                e.preventDefault();
+                isCancelling.current = true;
+                setRenamingItem(null);
+                setRenameValue(item.name);
+                setTimeout(() => {
+                  isCancelling.current = false;
+                }, 0);
+              }
+            }}
+            onBlur={() => {
+              if (isCancelling.current) {
+                return;
+              }
+              handleRename(item);
+            }}
+          />
+        ) : (
+          <FileNameCell item={item} onFolderClick={handleFolderClick} />
+        ),
+    },
+    {
+      key: "size",
+      header: "Velikost",
+      width: 90,
+      render: (item) => (
+        <Typography variant="caption" color="text.secondary">
+          {item.type === "file" ? item.size_formatted : "—"}
+        </Typography>
+      ),
+    },
+    {
+      key: "modified",
+      header: "Změněno",
+      width: 120,
+      render: (item) => (
+        <Typography variant="caption" color="text.secondary">
+          {item.modified || "—"}
+        </Typography>
+      ),
+    },
+    ...(canManage
+      ? [
+          {
+            key: "actions",
+            header: "Akce",
+            width: 100,
+            align: "right" as const,
+            render: (item: FileItem) => (
+              <Box
+                sx={{
+                  display: "flex",
+                  gap: 0.5,
+                  justifyContent: "flex-end",
                 }}
               >
+                {item.type === "file" && (
+                  <IconButton
+                    size="small"
+                    title="Stáhnout"
+                    aria-label="Stáhnout"
+                    onClick={() => handleDownload(item)}
+                  >
+                    <svg
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                    >
+                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                      <polyline points="7 10 12 15 17 10" />
+                      <line x1="12" y1="15" x2="12" y2="3" />
+                    </svg>
+                  </IconButton>
+                )}
+                <IconButton
+                  size="small"
+                  title="Přejmenovat"
+                  aria-label="Přejmenovat"
+                  onClick={() => startRename(item)}
+                >
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
+                  </svg>
+                </IconButton>
+                <IconButton
+                  size="small"
+                  color="error"
+                  title="Smazat"
+                  aria-label="Smazat"
+                  onClick={() => setDeleteTarget(item)}
+                >
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <polyline points="3 6 5 6 21 6" />
+                    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                    <path d="M10 11v6M14 11v6" />
+                  </svg>
+                </IconButton>
+              </Box>
+            ),
+          },
+        ]
+      : []),
+  ];
+
+  return (
+    <Card>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        Soubory
+      </Typography>
+
+      {/* Toolbar */}
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap",
+          gap: 1,
+          mb: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 0.25,
+          }}
+        >
+          {breadcrumb.map((segment, i) => (
+            <Box
+              component="span"
+              key={i}
+              sx={{ display: "inline-flex", alignItems: "center" }}
+            >
+              {i > 0 && (
+                <Box component="span" sx={{ mx: 0.25, color: "text.disabled" }}>
+                  /
+                </Box>
+              )}
+              <Box
+                component="button"
+                type="button"
+                onClick={() => handleBreadcrumbClick(i)}
+                sx={{
+                  background: "none",
+                  border: "none",
+                  p: 0,
+                  font: "inherit",
+                  cursor: "pointer",
+                  color:
+                    i === breadcrumb.length - 1
+                      ? "text.primary"
+                      : "primary.main",
+                  fontWeight: i === breadcrumb.length - 1 ? 600 : 400,
+                  "&:hover": { textDecoration: "underline" },
+                }}
+              >
+                {i === 0 ? projectNumber : segment}
+              </Box>
+            </Box>
+          ))}
+        </Box>
+
+        {fullPath && (
+          <Typography
+            variant="caption"
+            color="text.secondary"
+            title={fullPath}
+            sx={{
+              maxWidth: 320,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+            }}
+          >
+            {fullPath}
+          </Typography>
+        )}
+
+        {canManage && (
+          <Box sx={{ display: "flex", gap: 1, ml: "auto" }}>
+            <Button
+              size="small"
+              variant="outlined"
+              color="inherit"
+              onClick={() => {
+                setNewFolderMode(!newFolderMode);
+                setNewFolderName("");
+              }}
+              startIcon={
                 <svg
                   width="14"
                   height="14"
@@ -551,101 +795,148 @@ export default function ProjectFileManager({
                   <line x1="12" y1="11" x2="12" y2="17" />
                   <line x1="9" y1="14" x2="15" y2="14" />
                 </svg>
-                Složka
-              </button>
-              <button
-                type="button"
-                className="admin-btn admin-btn-primary admin-btn-sm"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={uploading}
-              >
-                {uploading ? (
-                  <>
-                    <div className="admin-spinner admin-spinner-sm" />
-                    Nahrávání...
-                  </>
-                ) : (
-                  <>
-                    <svg
-                      width="14"
-                      height="14"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                      <polyline points="17 8 12 3 7 8" />
-                      <line x1="12" y1="3" x2="12" y2="15" />
-                    </svg>
-                    Nahrát
-                  </>
-                )}
-              </button>
-              <input
-                ref={fileInputRef}
-                type="file"
-                multiple
-                style={{ display: "none" }}
-                onChange={handleFileInputChange}
-              />
-            </div>
-          )}
-        </div>
-
-        {/* New folder input */}
-        {newFolderMode && (
-          <div className="fm-new-folder">
-            <input
-              type="text"
-              value={newFolderName}
-              onChange={(e) => setNewFolderName(e.target.value)}
-              className="admin-form-input"
-              placeholder="Název složky..."
-              autoFocus
-              onKeyDown={(e) => {
-                if (e.key === "Enter") handleCreateFolder();
-                if (e.key === "Escape") {
-                  setNewFolderMode(false);
-                  setNewFolderName("");
-                }
-              }}
-              style={{ fontSize: "12px", padding: "6px 10px" }}
-            />
-            <button
-              type="button"
-              className="admin-btn admin-btn-primary admin-btn-sm"
-              onClick={handleCreateFolder}
-              disabled={creatingFolder || !newFolderName.trim()}
+              }
             >
-              {creatingFolder ? (
-                <div className="admin-spinner admin-spinner-sm" />
-              ) : (
-                "Vytvořit"
-              )}
-            </button>
-            <button
-              type="button"
-              className="admin-btn admin-btn-secondary admin-btn-sm"
-              onClick={() => {
+              Složka
+            </Button>
+            <Button
+              size="small"
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+              startIcon={
+                uploading ? (
+                  <CircularProgress size={14} color="inherit" />
+                ) : (
+                  <svg
+                    width="14"
+                    height="14"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                  >
+                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                    <polyline points="17 8 12 3 7 8" />
+                    <line x1="12" y1="3" x2="12" y2="15" />
+                  </svg>
+                )
+              }
+            >
+              {uploading ? "Nahrávání..." : "Nahrát"}
+            </Button>
+            <input
+              ref={fileInputRef}
+              type="file"
+              multiple
+              style={{ display: "none" }}
+              onChange={handleFileInputChange}
+            />
+          </Box>
+        )}
+      </Box>
+
+      {/* New folder input */}
+      {newFolderMode && (
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            mb: 2,
+          }}
+        >
+          <TextField
+            value={newFolderName}
+            onChange={(e) => setNewFolderName(e.target.value)}
+            placeholder="Název složky..."
+            autoFocus
+            sx={{ maxWidth: 320 }}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleCreateFolder();
+              if (e.key === "Escape") {
                 setNewFolderMode(false);
                 setNewFolderName("");
-              }}
+              }
+            }}
+          />
+          <Button
+            size="small"
+            onClick={handleCreateFolder}
+            disabled={creatingFolder || !newFolderName.trim()}
+          >
+            {creatingFolder ? (
+              <CircularProgress size={14} color="inherit" />
+            ) : (
+              "Vytvořit"
+            )}
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="inherit"
+            onClick={() => {
+              setNewFolderMode(false);
+              setNewFolderName("");
+            }}
+          >
+            Zrušit
+          </Button>
+        </Box>
+      )}
+
+      {/* Drop zone + table */}
+      <Box
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        sx={{
+          position: "relative",
+          borderRadius: 2,
+          ...(dragOver
+            ? {
+                outline: "2px dashed",
+                outlineColor: "primary.main",
+                outlineOffset: -4,
+              }
+            : {}),
+        }}
+      >
+        {dragOver && (
+          <Box
+            sx={{
+              position: "absolute",
+              inset: 0,
+              zIndex: 2,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 1,
+              bgcolor: "action.hover",
+              color: "primary.main",
+              borderRadius: 2,
+              pointerEvents: "none",
+            }}
+          >
+            <svg
+              width="32"
+              height="32"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
             >
-              Zrušit
-            </button>
-          </div>
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+            <span>Přetáhněte soubory sem</span>
+          </Box>
         )}
 
-        {/* Drop zone + table */}
-        <div
-          className={`fm-content ${dragOver ? "fm-drag-over" : ""}`}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-        >
-          {dragOver && (
-            <div className="fm-dropzone-overlay">
+        {items.length === 0 && !filesLoading ? (
+          <EmptyState
+            icon={
               <svg
                 width="32"
                 height="32"
@@ -653,180 +944,31 @@ export default function ProjectFileManager({
                 fill="none"
                 stroke="currentColor"
                 strokeWidth="1.5"
-              >
-                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                <polyline points="17 8 12 3 7 8" />
-                <line x1="12" y1="3" x2="12" y2="15" />
-              </svg>
-              <span>Přetáhněte soubory sem</span>
-            </div>
-          )}
-
-          {items.length === 0 && !filesLoading ? (
-            <div className="fm-empty">
-              <svg
-                width="32"
-                height="32"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="var(--text-tertiary)"
-                strokeWidth="1.5"
               >
                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
               </svg>
-              <span>
-                {hasNasFolder
-                  ? "Složka je prázdná"
-                  : "Složka projektu zatím neexistuje"}
-              </span>
-              {canManage && !hasNasFolder && (
-                <span style={{ fontSize: "11px" }}>
-                  Nahrání souboru ji automaticky vytvoří
-                </span>
-              )}
-            </div>
-          ) : (
-            <div className="admin-table-responsive">
-              <table className="admin-table">
-                <thead>
-                  <tr>
-                    <th style={{ width: "30px" }}></th>
-                    <th>Název</th>
-                    <th style={{ width: "90px" }}>Velikost</th>
-                    <th style={{ width: "120px" }}>Změněno</th>
-                    {canManage && (
-                      <th style={{ width: "100px", textAlign: "right" }}>
-                        Akce
-                      </th>
-                    )}
-                  </tr>
-                </thead>
-                <tbody>
-                  {items.map((item) => (
-                    <tr key={item.name}>
-                      <td style={{ textAlign: "center" }}>
-                        {getFileIcon(item.type, item.extension)}
-                      </td>
-                      <td>
-                        {renamingItem === item.name ? (
-                          <input
-                            type="text"
-                            value={renameValue}
-                            onChange={(e) => setRenameValue(e.target.value)}
-                            className="admin-form-input"
-                            style={{
-                              fontSize: "11px",
-                              padding: "3px 8px",
-                              maxWidth: "300px",
-                            }}
-                            autoFocus
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter") {
-                                e.preventDefault();
-                                handleRename(item);
-                              }
-                              if (e.key === "Escape") {
-                                e.preventDefault();
-                                isCancelling.current = true;
-                                setRenamingItem(null);
-                                setRenameValue(item.name);
-                                setTimeout(() => {
-                                  isCancelling.current = false;
-                                }, 0);
-                              }
-                            }}
-                            onBlur={() => {
-                              if (isCancelling.current) {
-                                return;
-                              }
-                              handleRename(item);
-                            }}
-                          />
-                        ) : (
-                          <FileNameCell
-                            item={item}
-                            onFolderClick={handleFolderClick}
-                          />
-                        )}
-                      </td>
-                      <td className="fm-meta">
-                        {item.type === "file" ? item.size_formatted : "\u2014"}
-                      </td>
-                      <td className="fm-meta">{item.modified || "\u2014"}</td>
-                      {canManage && (
-                        <td style={{ textAlign: "right" }}>
-                          <div className="fm-actions">
-                            {item.type === "file" && (
-                              <button
-                                type="button"
-                                className="admin-btn-icon"
-                                title="Stáhnout"
-                                onClick={() => handleDownload(item)}
-                              >
-                                <svg
-                                  width="14"
-                                  height="14"
-                                  viewBox="0 0 24 24"
-                                  fill="none"
-                                  stroke="currentColor"
-                                  strokeWidth="2"
-                                >
-                                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                                  <polyline points="7 10 12 15 17 10" />
-                                  <line x1="12" y1="15" x2="12" y2="3" />
-                                </svg>
-                              </button>
-                            )}
-                            <button
-                              type="button"
-                              className="admin-btn-icon"
-                              title="Přejmenovat"
-                              onClick={() => startRename(item)}
-                            >
-                              <svg
-                                width="14"
-                                height="14"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                              >
-                                <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
-                                <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
-                              </svg>
-                            </button>
-                            <button
-                              type="button"
-                              className="admin-btn-icon danger"
-                              title="Smazat"
-                              onClick={() => setDeleteTarget(item)}
-                            >
-                              <svg
-                                width="14"
-                                height="14"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                strokeWidth="2"
-                              >
-                                <polyline points="3 6 5 6 21 6" />
-                                <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-                                <path d="M10 11v6M14 11v6" />
-                              </svg>
-                            </button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
+            }
+            title={
+              hasNasFolder
+                ? "Složka je prázdná"
+                : "Složka projektu zatím neexistuje"
+            }
+            description={
+              canManage && !hasNasFolder
+                ? "Nahrání souboru ji automaticky vytvoří"
+                : undefined
+            }
+          />
+        ) : (
+          <DataTable
+            columns={columns}
+            rows={items}
+            rowKey={(item) => item.name}
+          />
+        )}
+      </Box>
 
-      <ConfirmModal
+      <ConfirmDialog
         isOpen={deleteTarget !== null}
         onClose={() => setDeleteTarget(null)}
         onConfirm={handleDelete}
@@ -836,9 +978,9 @@ export default function ProjectFileManager({
         message={`Opravdu chcete smazat "${deleteTarget?.name}"?${deleteTarget?.type === "folder" ? " Složka bude smazána včetně veškerého obsahu." : ""}`}
         confirmText="Smazat"
         cancelText="Zrušit"
-        type="danger"
+        confirmVariant="danger"
         loading={deleting}
       />
-    </div>
+    </Card>
   );
 }