From 5ca7dc96781878d5fc30499008322ae92f0d0e84 Mon Sep 17 00:00:00 2001
From: Nils Schneider <nils.schneider@posteo.de>
Date: Fri, 31 Oct 2025 00:38:52 +0100
Subject: [PATCH] cleanup

---
 frontend/src/documents/DocumentsTable.jsx | 135 ++++++++++++----------
 frontend/src/styles.css                   |  49 ++++----
 2 files changed, 98 insertions(+), 86 deletions(-)

diff --git a/frontend/src/documents/DocumentsTable.jsx b/frontend/src/documents/DocumentsTable.jsx
index 6098180..7743b2f 100644
--- a/frontend/src/documents/DocumentsTable.jsx
+++ b/frontend/src/documents/DocumentsTable.jsx
@@ -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(
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1c0c906..9e33b5f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -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;