frontend

2025-10-24 15:13:37 +02:00
parent e33ab71fac
commit dc633783e0
10 changed files with 283 additions and 237 deletions
@@ -233,7 +233,7 @@ const Sidebar = ({
    : 'Drag files here to upload.';

  return (
-    <aside className="sidebar column">
+    <aside className="sidebar">
      <div className="sidebar__meta">
        <h1 className="sidebar__title">Papercrate</h1>
        <span className="sidebar__hint">{hintText}</span>
@@ -284,44 +284,40 @@ const Sidebar = ({
          }`}
          role="list"
        >
-          {tags.length ? (
-            tags.map((tag) => {
-              const isActive = activeTagSet.has(tag.id);
-              const style = getTagColorStyle(tag.color);
-              const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
-              return (
-                <button
-                  key={tag.id}
-                  type="button"
-                  role="listitem"
-                  className={className}
-                  style={style || undefined}
-                  onClick={() => handleToggleTag(tag.id)}
-                  aria-pressed={isActive}
-                  draggable
-                  onDragStart={(event) => {
-                    try {
-                      const payload = JSON.stringify({
-                        id: tag.id,
-                        label: tag.label,
-                        color: tag.color || null,
-                      });
-                      event.dataTransfer.effectAllowed = 'copy';
-                      event.dataTransfer.setData('application/x-papercrate-tag', payload);
-                      event.dataTransfer.setData('text/papercrate-tag', payload);
-                    } catch (
-                      // eslint-disable-next-line no-empty
-                      error
-                    ) {}
-                  }}
-                >
-                  {tag.label}
-                </button>
-              );
-            })
-          ) : (
-            <span className="meta">No tags yet</span>
-          )}
+          {tags.map((tag) => {
+            const isActive = activeTagSet.has(tag.id);
+            const style = getTagColorStyle(tag.color);
+            const className = `sidebar-tag-pill${isActive ? ' active' : ''}`;
+            return (
+              <button
+                key={tag.id}
+                type="button"
+                role="listitem"
+                className={className}
+                style={style || undefined}
+                onClick={() => handleToggleTag(tag.id)}
+                aria-pressed={isActive}
+                draggable
+                onDragStart={(event) => {
+                  try {
+                    const payload = JSON.stringify({
+                      id: tag.id,
+                      label: tag.label,
+                      color: tag.color || null,
+                    });
+                    event.dataTransfer.effectAllowed = 'copy';
+                    event.dataTransfer.setData('application/x-papercrate-tag', payload);
+                    event.dataTransfer.setData('text/papercrate-tag', payload);
+                  } catch (
+                    // eslint-disable-next-line no-empty
+                    error
+                  ) {}
+                }}
+              >
+                {tag.label}
+              </button>
+            );
+          })}
        </div>
      </div>
      <div className="sidebar-section">
@@ -336,36 +332,32 @@ const Sidebar = ({
          </button>
        </div>
        <ul className="sidebar-correspondent-list">
-          {sortedCorrespondents.length ? (
-            sortedCorrespondents.map((correspondent) => {
-              const isActive = activeCorrespondentSet.has(correspondent.id);
-              const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
-              const label = correspondent.name || 'Unnamed';
-              const handleSelect = () => {
-                const nextId = isActive ? null : correspondent.id;
-                onToggleCorrespondentFilter?.(nextId);
-              };
-              return (
-                <li key={correspondent.id}>
-                  <span
-                    className={className}
-                    role="button"
-                    onClick={handleSelect}
-                    onKeyDown={(event) => {
-                      if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        handleSelect();
-                      }
-                    }}
-                  >
-                    {label}
-                  </span>
-                </li>
-              );
-            })
-          ) : (
-            <li className="meta">No correspondents yet</li>
-          )}
+          {sortedCorrespondents.map((correspondent) => {
+            const isActive = activeCorrespondentSet.has(correspondent.id);
+            const className = `sidebar-correspondent-item${isActive ? ' active' : ''}`;
+            const label = correspondent.name || 'Unnamed';
+            const handleSelect = () => {
+              const nextId = isActive ? null : correspondent.id;
+              onToggleCorrespondentFilter?.(nextId);
+            };
+            return (
+              <li key={correspondent.id}>
+                <span
+                  className={className}
+                  role="button"
+                  onClick={handleSelect}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                      event.preventDefault();
+                      handleSelect();
+                    }
+                  }}
+                >
+                  {label}
+                </span>
+              </li>
+            );
+          })}
        </ul>
      </div>
      <div className="sidebar__footer">