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>
136 lines
6.4 KiB
PHTML
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>
|