release: v0.13.0 (#535)
Twenty-nine commits since v0.12.0. See CHANGELOG.md for the full list and the upgrade notes. Ten additions — the SEO package (site URL, robots.txt, sitemap.xml, JSON-LD), slideshow mode, opt-in original downloads, copy-link, previous/next album navigation, alt text from the Immich description, per-album location precision, the update notice, a Help tab, and a subpage cover grid separate from its photo grid. Two fixes: CJK album slugs, and the lightbox control bar. Photo of the Day (#476) was built on `dev` and reverted as not planned; it never appears in a release. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01DmsHVRL9yQvckUB1ZpVWre --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: ralksta <ralksta@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
92
app/admin/components/HelpView.tsx
Normal file
92
app/admin/components/HelpView.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import DoctorModal from './DoctorModal';
|
||||
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() {
|
||||
const [showDoctor, setShowDoctor] = useState(false);
|
||||
|
||||
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">
|
||||
<button type="button" className="admin-btn" onClick={() => setShowDoctor(true)}>
|
||||
<Icons.IconShieldCheck size={14} /> Run diagnostics
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DoctorModal isOpen={showDoctor} onClose={() => setShowDoctor(false)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user