nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
nils
2025-10-31 00:38:52 +01:00
parent 39d1d80383
commit 5ca7dc9678
2 changed files with 98 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/documents/DocumentsTable.jsx
+77 -58
View File
@@ -665,6 +665,36 @@ const DocumentsTable = ({
const cardClasses = ['document-card', 'document'];
if (isSelected) cardClasses.push('selected');
if (isDraggingDoc) cardClasses.push('is-dragging');
const titleText = doc.title || doc.original_name;
const documentTypeNode = documentType
? (
<span
className={`doc-type-inline${
isDocumentTypeActive ? ' active' : ''
}`}
role={canToggleDocumentType ? 'button' : undefined}
tabIndex={canToggleDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
({documentType.name})
</span>
)
: null;
return (
<div
key={doc.id}
@@ -688,47 +718,27 @@ const DocumentsTable = ({
document={doc}
ensureAssetUrl={ensureAssetUrl}
getDocumentAsset={getDocumentAsset}
alt={`Thumbnail for ${doc.title || doc.original_name}`}
alt={`Thumbnail for ${titleText}`}
maxSize={gridIconSize}
scrollRootRef={scrollRef}
/>
<div className="document-card__meta">
<div
className="document-card__title"
title={doc.title || doc.original_name}
title={titleText}
>
{documentType ? (
<span
className={`doc-type-label${
isDocumentTypeActive ? ' active' : ''
}`}
role={canToggleDocumentType ? 'button' : undefined}
tabIndex={canToggleDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
{documentType.name}
</span>
) : null}
{correspondents.length > 0 ? (
<span className="doc-correspondents">
{renderCorrespondentLinks(correspondents)}
</span>
) : null}
<span>{doc.title || doc.original_name}</span>
<span className="doc-name__primary">{titleText}</span>
{documentTypeNode ? (
<>
{' '}
{documentTypeNode}
</>
) : null}
</div>
{visibleTags.length > 0 && (
<div className="document-card__tags">
@@ -917,6 +927,35 @@ const DocumentsTable = ({
const documentType = resolveDocumentType(doc);
const isRowDocumentTypeActive = documentType?.id != null && activeDocumentTypeIdSet.has(documentType.id);
const canToggleRowDocumentType = documentType?.id != null && typeof onDocumentTypeClick === 'function';
const titleText = doc.title || doc.original_name;
const documentTypeNode = documentType
? (
<span
className={`doc-type-inline${
isRowDocumentTypeActive ? ' active' : ''
}`}
role={canToggleRowDocumentType ? 'button' : undefined}
tabIndex={canToggleRowDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
({documentType.name})
</span>
)
: null;
return (
<tr
@@ -938,7 +977,7 @@ const DocumentsTable = ({
document={doc}
ensureAssetUrl={ensureAssetUrl}
getDocumentAsset={getDocumentAsset}
alt={`Thumbnail for ${doc.title || doc.original_name}`}
alt={`Thumbnail for ${titleText}`}
scrollRootRef={scrollRef}
/>
</td>
@@ -946,38 +985,18 @@ const DocumentsTable = ({
<div className="doc-name">
<div className="doc-list__name-content">
<span className="doc-name__title">
{documentType ? (
<span
className={`doc-type-label${
isRowDocumentTypeActive ? ' active' : ''
}`}
role={canToggleRowDocumentType ? 'button' : undefined}
tabIndex={canToggleRowDocumentType ? 0 : undefined}
onClick={(event) => {
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}}
onKeyDown={(event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
event.stopPropagation();
if (canToggleRowDocumentType) {
onDocumentTypeClick?.(documentType.id, documentType);
}
}
}}
>
{documentType.name}
</span>
) : null}
{correspondents.length > 0 ? (
<span className="doc-correspondents">
{renderCorrespondentLinks(correspondents)}
</span>
) : null}
<span>{doc.title || doc.original_name}</span>
<span className="doc-name__primary">{titleText}</span>
{documentTypeNode ? (
<>
{' '}
{documentTypeNode}
</>
) : null}
</span>
</div>
{(doc.tags || []).length > 0 && (
@@ -1058,7 +1077,7 @@ const DocumentsTable = ({
type="button"
className="icon-button"
title="Rename"
aria-label={`Rename document ${doc.title || doc.original_name}`}
aria-label={`Rename document ${titleText}`}
onClick={(event) => {
event.stopPropagation();
const nextName = window.prompt(
frontend/src/styles.css
+21 -28
View File
@@ -2012,43 +2012,36 @@ button.danger:hover:not([disabled]) {
color: inherit;
}
.doc-type-label {
display: inline-flex;
align-items: center;
padding: 0.05rem 0.4rem;
margin-right: 0.35rem;
border-radius: 999px;
background: var(--surface-subtle);
.doc-name__primary {
font-weight: 600;
}
.doc-type-inline {
color: var(--muted);
font-size: 0.75rem;
font-size: 0.85em;
line-height: 1.2;
cursor: default;
gap: 0.25rem;
}
.doc-type-label[role='button'] {
cursor: pointer;
color: var(--accent);
background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.doc-type-label[role='button']:hover,
.doc-type-label[role='button']:focus-visible {
color: var(--accent-strong, var(--accent));
background: color-mix(in oklch, var(--accent) 20%, transparent);
}
.doc-type-label[role='button']:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.doc-type-label.active {
background: color-mix(in oklch, var(--accent) 28%, transparent);
.doc-type-inline.active {
color: var(--accent-strong, var(--accent));
font-weight: 600;
}
.doc-type-inline[role='button'] {
cursor: pointer;
}
.doc-type-inline[role='button']:hover,
.doc-type-inline[role='button']:focus-visible {
color: var(--accent-strong, var(--accent));
}
.doc-type-inline[role='button']:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.doc-correspondent-link {
background: none;
background-color: transparent;