refactor(file-upload): SSR-first state, click-to-replace, cleaner preview

- Server renders initial file-upload state (src, alt, label text,
  has-current class) so there is no flash of broken-image icon while
  JS boots. JS no longer duplicates that work — it only reacts to
  user input (select, clear, drag-and-drop) and uses data-current-src
  solely to restore the server file after a blob preview.
- Clicking the current preview image now opens the file dialog, mirrors
  the Replace button, with hover affordance (cursor + primary border).
- Drop the transparency checker pattern in the preview — the admin UI
  does not need Figma-style transparency semantics. Preview is now a
  flat theme-aware surface (--app-preview-bg) that keeps white or
  black logos visible against a neutral gray.
- Move tenant favicon out of the aside into the Master-data tab as its
  own details block next to the Tenant-logos section. Uses the same
  barrier-form pattern (HTML5 form attribute + app-file-upload.phtml)
  for a consistent instant-upload UX.
- Tenant-logo slot label is a native <label> element — picks up the
  global form-label typography and spacing, no custom muted-color
  class needed.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-24 20:53:58 +02:00
parent 6e3fc63c1d
commit e814b5fd11
10 changed files with 78 additions and 85 deletions

View File

@@ -43,13 +43,13 @@ $hasCurrent = $uploadCurrentSrc !== '';
$hasDelete = $hasCurrent && ($uploadDeleteAction !== '' || $uploadDeleteFormId !== '');
?>
<div data-app-component="file-upload" class="app-file-upload"
<?php if ($hasCurrent): ?>data-current-src="<?php e($uploadCurrentSrc); ?>" data-current-label="<?php e($uploadCurrentLabel); ?>"<?php endif; ?>>
<div data-app-component="file-upload" class="app-file-upload<?php e($hasCurrent ? ' has-current' : ''); ?>"
<?php if ($hasCurrent): ?>data-current-src="<?php e($uploadCurrentSrc); ?>"<?php endif; ?>>
<?php if ($hasCurrent): ?>
<div class="app-file-upload-current">
<img class="app-file-upload-current-image" src="" alt="">
<img class="app-file-upload-current-image" src="<?php e($uploadCurrentSrc); ?>" alt="<?php e($uploadCurrentLabel); ?>" loading="lazy">
<div class="app-file-upload-current-meta">
<span class="app-file-upload-current-label"></span>
<span class="app-file-upload-current-label"><?php e($uploadCurrentLabel); ?></span>
<span class="app-file-upload-current-actions">
<button type="button" class="app-file-upload-replace-button"><?php e(t('Replace')); ?></button>
<?php if ($hasDelete): ?>

View File

@@ -22,7 +22,7 @@ $previewUrl = $hasLogo
: '';
?>
<div class="tenant-logo-slot">
<span class="tenant-logo-slot-label"><?php e($fieldLabel); ?></span>
<label><?php e($fieldLabel); ?></label>
<?php if ($canUpdate && $uploadFormId !== ''): ?>
<?php
$fileUpload = [