c3f92ca4ec
Eighteen changes since v0.14.0. See CHANGELOG.md for the full list and the upgrade notes (bump IMAGE_CACHE_VERSION).
88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import * as Icons from './Icons';
|
|
import { en } from '@/lib/i18n/locales/en';
|
|
import { LIGHTBOX_SHORTCUTS, shortcutDisplayKeys } from '@/lib/lightboxShortcuts';
|
|
|
|
/**
|
|
* The admin help section.
|
|
*
|
|
* It exists because parts of the portfolio have no control of their own. The
|
|
* lightbox is the clearest case: its keys are deliberately unadvertised to
|
|
* visitors, which also left the site owner with no way to learn they exist
|
|
* (#473). This is where the owner finds out what their portfolio can do.
|
|
*
|
|
* Labels come from the English dictionary rather than being retyped, so what
|
|
* this page promises is what a visitor is actually shown. The admin panel is
|
|
* English-only, hence `en` directly.
|
|
*/
|
|
export default function HelpView() {
|
|
return (
|
|
<div className="settings-panel">
|
|
<div className="settings-section-header">
|
|
<h3>
|
|
<Icons.IconFileText size={18} /> Help
|
|
</h3>
|
|
<p className="settings-section-sub">
|
|
What your portfolio can do that has no button of its own.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="settings-group">
|
|
<div className="settings-group-head">
|
|
<span className="settings-group-title">
|
|
<Icons.IconFilm size={13} />
|
|
Image viewer
|
|
</span>
|
|
<span className="settings-group-desc">
|
|
Keys a visitor can press in the lightbox. There is deliberately no toolbar for these — a
|
|
permanent control over a photograph costs every visitor something — but visitors can
|
|
call up the same list with <kbd className="help-kbd">?</kbd> or{' '}
|
|
<kbd className="help-kbd">H</kbd>.
|
|
</span>
|
|
</div>
|
|
|
|
<dl className="help-shortcuts">
|
|
{LIGHTBOX_SHORTCUTS.map((shortcut) => (
|
|
<div key={shortcut.labelKey} className="help-shortcuts-row">
|
|
<dt className="help-shortcuts-keys">
|
|
{shortcutDisplayKeys(shortcut).map((key) => (
|
|
<kbd key={key} className="help-kbd">
|
|
{key}
|
|
</kbd>
|
|
))}
|
|
</dt>
|
|
<dd className="help-shortcuts-label">
|
|
{en.lightbox[shortcut.labelKey]}
|
|
{shortcut.note && <span className="help-shortcuts-note">{shortcut.note}</span>}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="settings-group">
|
|
<div className="settings-group-head">
|
|
<span className="settings-group-title">
|
|
<Icons.IconShieldCheck size={13} />
|
|
Diagnostics
|
|
</span>
|
|
<span className="settings-group-desc">
|
|
Checks the things that fail silently — a wrong proxy hop count, a deleted album ID, a
|
|
plaintext password, an album Immich does not consider shared. It also sits behind the
|
|
status badge in the top bar, which is where it belongs when the question is whether
|
|
anything needs attention right now.
|
|
</span>
|
|
</div>
|
|
|
|
<div className="help-action">
|
|
<Link href="/admin/diagnostics" className="admin-btn">
|
|
<Icons.IconShieldCheck size={14} /> Open diagnostics
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|