Files
breadcrumb-the-shire/modules/bookmarks/templates/bookmark-dialogs.phtml
fs 44a357dfc4 feat: improve bookmark dialog UX with distinct modes, inline validation, and accessibility
Refine bookmark create/edit and group create/edit dialogs to enterprise
quality: distinct titles per mode (Add bookmark vs Edit bookmark), URL
preview when creating, inline field validation with aria-invalid instead
of toast-only errors, loading spinner on submit, compact inline
new-group link, human-readable icon picker aria-labels, and aria-pressed
on selected icons.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 21:53:57 +01:00

136 lines
6.4 KiB
PHTML

<?php
use MintyPHP\Module\Bookmarks\Service\BookmarkService;
$layoutNav = is_array($layoutNav ?? null) ? $layoutNav : [];
$bookmarkNav = is_array($layoutNav['bookmarks.nav'] ?? null) ? $layoutNav['bookmarks.nav'] : [];
$bookmarkData = is_array($bookmarkNav['grouped'] ?? null) ? $bookmarkNav['grouped'] : [];
$bookmarkGroups = is_array($bookmarkData['groups'] ?? null) ? $bookmarkData['groups'] : [];
// Human-readable icon labels — keep in sync with BookmarkService::ALLOWED_GROUP_ICONS
$iconLabels = [
'bi-house' => t('Icon: Home'),
'bi-people' => t('Icon: People'),
'bi-person' => t('Icon: Person'),
'bi-folder' => t('Icon: Folder'),
'bi-file-text' => t('Icon: Document'),
'bi-gear' => t('Icon: Settings'),
'bi-shield-lock' => t('Icon: Security'),
'bi-bar-chart' => t('Icon: Chart'),
'bi-envelope' => t('Icon: Mail'),
'bi-calendar' => t('Icon: Calendar'),
'bi-clock' => t('Icon: Clock'),
'bi-star' => t('Icon: Star'),
'bi-heart' => t('Icon: Heart'),
'bi-flag' => t('Icon: Flag'),
'bi-bookmark' => t('Icon: Bookmark'),
'bi-pin-map' => t('Icon: Location'),
'bi-lightning' => t('Icon: Lightning'),
'bi-database' => t('Icon: Database'),
'bi-globe' => t('Icon: Globe'),
'bi-code-slash' => t('Icon: Code'),
];
?>
<dialog
data-app-bookmark-dialog
data-app-component="bookmark-save"
data-max-message="<?php e(t('Maximum bookmarks reached')); ?>"
data-title-create="<?php e(t('Add bookmark')); ?>"
data-title-edit="<?php e(t('Edit bookmark')); ?>"
data-label-save="<?php e(t('Add bookmark')); ?>"
data-label-update="<?php e(t('Save changes')); ?>"
data-label-saving="<?php e(t('Saving...')); ?>"
data-msg-saved="<?php e(t('Bookmark saved')); ?>"
data-msg-updated="<?php e(t('Bookmark updated')); ?>"
data-msg-group-created="<?php e(t('Group created')); ?>"
data-msg-error-generic="<?php e(t('Bookmark action failed')); ?>"
data-msg-group-create-failed="<?php e(t('Group action failed')); ?>"
data-msg-name-required="<?php e(t('Bookmark name is required')); ?>"
data-msg-url-required="<?php e(t('Bookmark URL is invalid')); ?>"
data-msg-group-not-found="<?php e(t('Group not found')); ?>"
data-url-preview-label="<?php e(t('Bookmarking this page:')); ?>"
aria-labelledby="app-bookmark-dialog-title"
>
<article class="app-bookmark-dialog">
<header>
<h2 id="app-bookmark-dialog-title"><?php e(t('Add bookmark')); ?></h2>
<button type="button" class="close" data-bookmark-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
</header>
<form data-bookmark-save-form>
<small class="app-bookmark-url-preview" data-bookmark-url-preview hidden></small>
<label for="bookmark-name"><?php e(t('Name')); ?></label>
<input type="text" id="bookmark-name" name="name" maxlength="120" required
placeholder="<?php e(t('Bookmark name')); ?>"
aria-describedby="bookmark-name-error">
<small class="app-bookmark-field-error" id="bookmark-name-error" data-field-error="name"></small>
<div class="app-bookmark-group-label-row">
<label for="bookmark-group"><?php e(t('Assign to group')); ?></label>
<button type="button" class="app-bookmark-new-group-link" data-bookmark-new-group>
<i class="bi bi-plus"></i> <?php e(t('New group')); ?>
</button>
</div>
<select id="bookmark-group" name="group_id" data-bookmark-group-select>
<option value=""><?php e(t('No group')); ?></option>
<?php foreach ($bookmarkGroups as $group):
$groupId = (int) ($group['id'] ?? 0);
$groupName = trim((string) ($group['name'] ?? ''));
if ($groupId <= 0 || $groupName === '') { continue; }
?>
<option value="<?php e($groupId); ?>"><?php e($groupName); ?></option>
<?php endforeach; ?>
</select>
<footer>
<button type="button" class="secondary outline" data-bookmark-dialog-close><?php e(t('Cancel')); ?></button>
<button type="submit" class="app-action-success" data-bookmark-submit-label><?php e(t('Add bookmark')); ?></button>
</footer>
</form>
</article>
</dialog>
<dialog
data-app-bookmark-group-dialog
data-title-create="<?php e(t('New group')); ?>"
data-title-edit="<?php e(t('Edit group')); ?>"
data-label-save="<?php e(t('Create group')); ?>"
data-label-update="<?php e(t('Save changes')); ?>"
data-label-saving="<?php e(t('Saving...')); ?>"
data-max-message="<?php e(t('Maximum groups reached')); ?>"
data-msg-created="<?php e(t('Group created')); ?>"
data-msg-updated="<?php e(t('Group updated')); ?>"
data-msg-error-generic="<?php e(t('Group action failed')); ?>"
data-msg-name-required="<?php e(t('Group name is required')); ?>"
aria-labelledby="app-bookmark-group-dialog-title"
>
<article class="app-bookmark-dialog app-bookmark-group-dialog">
<header>
<h2 id="app-bookmark-group-dialog-title"><?php e(t('New group')); ?></h2>
<button type="button" class="close" data-bookmark-group-dialog-close aria-label="<?php e(t('Close')); ?>" title="<?php e(t('Close')); ?>"></button>
</header>
<form data-bookmark-group-save-form>
<label for="bookmark-group-name"><?php e(t('Group name')); ?></label>
<input type="text" id="bookmark-group-name" name="name" maxlength="100" required
placeholder="<?php e(t('Group name')); ?>"
aria-describedby="bookmark-group-name-error">
<small class="app-bookmark-field-error" id="bookmark-group-name-error" data-field-error="group-name"></small>
<label><?php e(t('Icon')); ?></label>
<div class="app-bookmark-group-icon-picker" data-bookmark-group-icon-picker>
<?php foreach (BookmarkService::allowedGroupIcons() as $allowedIcon):
$readableLabel = $iconLabels[$allowedIcon] ?? $allowedIcon;
?>
<button type="button" class="app-bookmark-group-icon-option"
data-icon="<?php e($allowedIcon); ?>"
aria-label="<?php e($readableLabel); ?>"
aria-pressed="false">
<i class="bi <?php e($allowedIcon); ?>"></i>
</button>
<?php endforeach; ?>
</div>
<input type="hidden" name="icon" value="bi-folder">
<footer>
<button type="button" class="secondary outline" data-bookmark-group-dialog-close><?php e(t('Cancel')); ?></button>
<button type="submit" class="app-action-success" data-bookmark-group-submit-label><?php e(t('Create group')); ?></button>
</footer>
</form>
</article>
</dialog>