frontend: folders

frontend/src/detail/DetailPanel.jsx

@@ -323,6 +323,8 @@ const DetailPanel = ({
   onCorrespondentAdd,
   onCorrespondentRemove,
   resolveApiPath,
+  onFolderNavigate = null,
+  resolveFolderPath = null,
   onClose = () => {},
 }) => {
   const selectedCount = selectedDocuments.length;
@@ -670,6 +672,20 @@ const DetailPanel = ({
     return sortCorrespondents(singleDoc.correspondents || []);
   }, [singleDoc]);
 
+  const singleFolderPath = useMemo(() => {
+    if (!singleDoc?.folder_id) {
+      return null;
+    }
+    if (typeof resolveFolderPath !== 'function') {
+      return null;
+    }
+    const segments = resolveFolderPath(singleDoc.folder_id);
+    if (!Array.isArray(segments) || !segments.some((segment) => segment?.id && segment.id !== 'root')) {
+      return null;
+    }
+    return segments;
+  }, [singleDoc?.folder_id, resolveFolderPath]);
+
   const bulkCorrespondents = useMemo(() => {
     if (selectedDocuments.length <= 1) {
       const doc = selectedDocuments[0];
@@ -1063,6 +1079,53 @@ const DetailPanel = ({
               <strong>Pages:</strong> {pageCountValue}
             </div>
           ) : null}
+          {singleFolderPath?.length ? (
+            <div>
+              <strong>Folder:</strong>{' '}
+              <span className="detail-folder-path">
+                {singleFolderPath.map((segment, index) => {
+                  const label = segment?.name || '…';
+                  const targetId = segment?.id || null;
+                  const key = `${targetId || label}-${index}`;
+                  const isClickable = Boolean(targetId) && typeof onFolderNavigate === 'function';
+                  const href = !isClickable
+                    ? null
+                    : targetId === 'root'
+                    ? '/documents'
+                    : `/documents/folder/${targetId}`;
+                  return (
+                    <React.Fragment key={key}>
+                      {index > 0 ? <span className="detail-folder-path__separator">/</span> : null}
+                      {isClickable ? (
+                        <a
+                          href={href}
+                          className="detail-folder-path__link"
+                          onClick={(event) => {
+                            if (
+                              event.button !== 0 ||
+                              event.metaKey ||
+                              event.ctrlKey ||
+                              event.shiftKey ||
+                              event.altKey
+                            ) {
+                              return;
+                            }
+                            event.preventDefault();
+                            event.stopPropagation();
+                            onFolderNavigate(targetId);
+                          }}
+                        >
+                          {label}
+                        </a>
+                      ) : (
+                        <span className="detail-folder-path__segment">{label}</span>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </span>
+            </div>
+          ) : null}
           <div>
             <strong>Original filename:</strong>{' '}
             {singleDoc.original_name}