@panoramax/web-viewer 3.2.3-develop-6e69906d → 3.2.3-develop-8b82a4e5

package/src/components/menus/PictureLegend.js

@@ -1,7 +1,13 @@
-import {LitElement, html, nothing, css} from "lit";
-import {fa} from "../../utils/widgets";
-import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
-import { placeholder } from "../styles";
+import { LitElement, html, nothing, css } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import { fa } from "../../utils/widgets";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import { faUser } from "@fortawesome/free-solid-svg-icons/faUser";
+import { faClock } from "@fortawesome/free-solid-svg-icons/faClock";
+import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
+import { faShareNodes } from "@fortawesome/free-solid-svg-icons/faShareNodes";
+import { placeholder, panel } from "../styles";
 import { reverseGeocodingNominatim } from "../../utils/geocoder";
 
 /**
@@ -9,6 +15,7 @@ import { reverseGeocodingNominatim } from "../../utils/geocoder";
  * @class Panoramax.components.menus.PictureLegend
  * @element pnx-picture-legend
  * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @slot `editors` External links to map editors, or any tool that may be helpful. Defaults to OSM tools (iD & JOSM).
  * @example
  * ```html
  * <pnx-picture-legend ._parent=${viewer} />
@@ -16,39 +23,119 @@ import { reverseGeocodingNominatim } from "../../utils/geocoder";
  */
 export default class PictureLegend extends LitElement {
 	/** @private */
-	static styles = [placeholder, css`
-		.addr {
+	static styles = [placeholder, panel, css`
+		:host {
+			overflow-y: auto;
+			overflow-x: hidden;
+			display: block;
+			margin: 0;
+			font-family: var(--font-family);
+		}
+
+		@media screen and (min-width: 576px) {
+			:host { max-height: 70vh; }
+			pnx-picture-metadata { width: 30vw; }
+		}
+
+		.pnx-hidden { display: none !important; }
+
+		/* Top bar */
+		.headline {
+			display: flex;
+			gap: 10px;
+			align-items: center;
+			margin: 10px 10px 5px 10px;
+			justify-content: space-between;
+		}
+
+		/* Address line */
+		#pic-legend-addr {
 			line-height: 1.2em;
 			font-size: 1em;
 			margin-bottom: 2px;
+			flex-grow: 5;
+			font-weight: 800;
 		}
 
-		.addr span {
+		#pic-legend-addr span {
 			display: inline-block;
 			height: 100%;
 			width: 100%;
 		}
 
-		.context {
-			font-size: 0.9em;
+		/* Minimal info block */
+		#pic-legend-info {
+			margin: 10px;
 			display: flex;
-			align-items: center;
-			justify-content: space-between;
+			gap: 10px;
+			justify-content: space-around;
+		}
+		.info-block {
+			display: flex;
+			flex-shrink: 1;
+			gap: 5px;
+			font-weight: 600;
+			font-size: 0.85em;
+		}
+		.info-block svg { height: 18px; }
+
+		/* Expand button */
+		#pic-legend-expand {
+			display: block;
+			margin-top: 5px;
+			max-width: 100%;
+		}
+		#pic-legend-expand::part(btn) {
+			border-radius: 10px;
+			border-top-right-radius: 0;
+			border-top-left-radius: 0;
+		}
+
+		/* Details block */
+		pnx-picture-metadata {
+			margin: 5px 10px 10px;
+			display: block;
+			max-width: 450px;
+			box-sizing: border-box;
+		}
+
+		/* Details actions */
+		#pic-legend-cta {
+			display: flex;
+			margin: 5px 10px;
+			border-bottom-left-radius: 10px;
+			border-bottom-right-radius: 10px;
+			gap: 5px;
+			flex-wrap: wrap;
 		}
 
-		pnx-button { float: right; vertical-align: sub; }
+		/* More options menu */
+		#pnx-legend-opts { min-width: unset; }
+
+		/* Editors */
+		#pic-legend-editors { margin: 0 10px; }
 	`];
 
 	/** @private */
 	static properties = {
 		_caption: { state: true },
 		_addr: { state: true },
+		_expanded: { state: true },
+		collapsable: { type: Boolean },
 	};
 
+	/** @private */
+	constructor() {
+		super();
+		this._expanded = true;
+		this.collapsable = false;
+	}
+
 	/** @private */
 	connectedCallback() {
 		super.connectedCallback();
 
+		this._expanded = !this.collapsable;
 		this._prevSearches = {};
 
 		this._parent.onceReady().then(() => {
@@ -63,6 +150,7 @@ export default class PictureLegend extends LitElement {
 	_onPicChange(picMeta) {
 		clearTimeout(this._addrTimer1);
 		this._caption = picMeta?.caption;
+		this._expanded = !this.collapsable;
 		
 		if(picMeta) {
 			const coordsHash = `${picMeta.gps[0]}/${picMeta.gps[1]}`;
@@ -86,24 +174,75 @@ export default class PictureLegend extends LitElement {
 		}
 	}
 
+	/** @private */
+	_onBackClick() {
+		if(this._expanded && this.collapsable) { this._expanded = false; }
+		else { this._parent.select(); }
+	}
+
 	/** @private */
 	render() {
 		if(!this._caption) { return nothing; }
 
+		const hiddenExpanded = classMap({"pnx-hidden": this._expanded});
+		const shownExpanded = classMap({"pnx-hidden": !this._expanded});
+
 		return html`
-			<div class="addr">
-				${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
-			</div>
-			<div class="context">
-				${this._caption.producer ? this._caption.producer : nothing}
-				${this._caption.producer && this._caption.date ? html`-` : nothing}
-				${this._caption.date ? this._caption.date.toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }) : nothing}
+			<div class="headline">
 				<pnx-button
-					kind="outline"
-					title=${this._parent?._t.pnx.legend_title}
-					@click=${() => this._parent?._showPictureMetadata()}
-				>${fa(faCircleInfo, { styles: { height: "12px" }})}</pnx-button>
+					kind="superinline"
+					@click=${this._onBackClick}
+				>
+					${fa(faArrowLeft)}
+				</pnx-button>
+
+				<div id="pic-legend-addr">
+					${this._addr?.length > 0 ? this._addr : html`<span class="pnx-placeholder-loading">&nbsp;</span>`}
+				</div>
+
+				<pnx-picture-legend-actions
+					@click=${e => e.stopPropagation()}
+					._parent=${this._parent}
+					?full=${this._expanded}
+				></pnx-picture-legend-actions>
+			</div>
+
+			<div id="pic-legend-info" class=${hiddenExpanded}>
+				${this._caption.producer?.length > 0 ? html`<div class="info-block">
+					${fa(faUser)}
+					${this._caption.producer[this._caption.producer.length-1]}
+				</div>` : nothing}
+
+				${this._caption.date ? html`<div class="info-block">
+					${fa(faClock)}
+					${this._caption.date.toLocaleDateString(undefined, { year: "numeric", month: "long" })}
+				</div>` : nothing}
+			</div>
+
+			<div id="pic-legend-cta" class=${shownExpanded}>
+				${this._parent.api._endpoints.report ? html`
+						<pnx-button size="sm" @click=${() => this._parent._showReportForm()}>
+							${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
+						</pnx-button>
+				` : nothing}
+
+				<pnx-button size="sm" @click=${() => this._parent._showShareOptions()}>
+					${fa(faShareNodes)} ${this._parent?._t.pnx.share}
+				</pnx-button>
+
+				<slot name="editors">
+					<pnx-widget-osmeditors ._parent=${this._parent} />
+				</slot>
 			</div>
+
+			${this.collapsable ? html`<pnx-button
+				kind="full"
+				id="pic-legend-expand"
+				class=${hiddenExpanded}
+				@click=${() => this._expanded = true}
+			>${fa(faChevronDown)}</pnx-button>` : nothing}
+
+			<pnx-picture-metadata class=${shownExpanded} ._parent=${this._parent}></pnx-picture-metadata>
 		`;
 	}
 }

package/src/components/menus/PictureMetadata.js

@@ -1,20 +1,24 @@
-import { LitElement, html, nothing } from "lit";
+import { LitElement, nothing, css } from "lit";
+import { html, unsafeStatic } from "lit/static-html.js";
 import { fa } from "../../utils/widgets";
-import { faCircleInfo } from "@fortawesome/free-solid-svg-icons/faCircleInfo";
-import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons/faTriangleExclamation";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons/faLocationDot";
 import { faMedal } from "@fortawesome/free-solid-svg-icons/faMedal";
-import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 import { faCamera } from "@fortawesome/free-solid-svg-icons/faCamera";
-import { faGear } from "@fortawesome/free-solid-svg-icons/faGear";
-import { titles, tables, expandable } from "../styles";
-import { createTable, createLinkCell, createWebComp } from "../../utils/widgets";
+import { faImage } from "@fortawesome/free-solid-svg-icons/faImage";
+import { faImages } from "@fortawesome/free-solid-svg-icons/faImages";
+import { faScroll } from "@fortawesome/free-solid-svg-icons/faScroll";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons/faQuestion";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
+import { titles, textarea } from "../styles";
+import { createWebComp } from "../../utils/widgets";
 import { getGPSPrecision } from "../../utils/picture";
 import {
 	getGrade, QUALITYSCORE_GPS_VALUES, QUALITYSCORE_RES_360_VALUES,
 	QUALITYSCORE_RES_FLAT_VALUES, QUALITYSCORE_POND_GPS, QUALITYSCORE_POND_RES
 } from "../../utils/utils";
 
+const missing = () => fa(faQuestion, {styles: {height: "16px"}});
+
 /**
  * Picture metadata displays detailed info about a single picture (ID, capture context, EXIF attributes...).
  * @class Panoramax.components.menus.PictureMetadata
@@ -27,7 +31,41 @@ import {
  */
 export default class PictureMetadata extends LitElement {
 	/** @private */
-	static styles = [ titles, tables, expandable ];
+	static styles = [ titles, textarea, css`
+		h4[slot="title"] {
+			margin: 0;
+			justify-content: center;
+			font-size: 0.8em;
+			line-height: 2em;
+			padding: 0.5em 0;
+		}
+		h4[slot="title"] svg.svg-inline--fa {
+			height: 14px;
+		}
+		div[slot="content"] {
+			padding: 5px 10px;
+			background-color: #ededed;
+		}
+
+		/* Small data blocks */
+		/* .data-blocks { display: flex; } */
+		.data-block {
+			display: inline-block;
+			min-width: 50%;
+			margin: 5px 0;
+			box-sizing: border-box;
+			vertical-align: top;
+		}
+		.data-block h5 {
+			font-size: 0.8em;
+			font-weight: 400;
+			color: var(--blue-dark);
+			margin: 0 0 5px 0;
+		}
+		.data-block div {
+			font-size: 1em;
+		}
+	` ];
 
 	/** @private */
 	static properties = {
@@ -44,77 +82,74 @@ export default class PictureMetadata extends LitElement {
 		});
 	}
 
+	/** @private */
+	_toTab(title, data) {
+		return html`
+			<h4 slot="title">${title}</h4>
+			<div slot="content" class="data-blocks">
+				${data.filter(b => b).map(b => html`<div class="data-block" style=${b.style}>
+					<h5>${b.title}</h5>
+					<div style=${b.content_style}>${b.content}</div>
+				</div>`)}
+			</div>
+		`;
+	}
+
 	/** @private */
 	render() {
 		/* eslint-disable indent */
 		if(!this._meta) { return nothing; }
 
-		// General metadata
-		const generalData = [
-			{
-				section: this._parent?._t.pnx.metadata_general_picid,
-				classes: ["pnx-td-with-id"],
-				values: createLinkCell(
-					this._meta.id,
-					this._parent.api.getPictureMetadataUrl(this._meta.id, this._meta?.sequence?.id),
-					this._parent?._t.pnx.metadata_general_picid_link,
-					this._parent?._t
-				)
-			},
-			{
-				section: this._parent?._t.pnx.metadata_general_seqid,
-				classes: ["pnx-td-with-id"],
-				values: createLinkCell(
-					this._meta?.sequence?.id,
-					this._parent.api.getSequenceMetadataUrl(this._meta?.sequence?.id),
-					this._parent?._t.pnx.metadata_general_seqid_link,
-					this._parent?._t
-				)
-			},
-			{ section: this._parent?._t.pnx.metadata_general_author, value: this._meta?.caption?.producer },
-			{ section: this._parent?._t.pnx.metadata_general_license, value: this._meta?.caption?.license },
-			{
-				section: this._parent?._t.pnx.metadata_general_date,
-				value: this._meta?.caption?.date?.toLocaleDateString(undefined, {
-					year: "numeric", month: "long", day: "numeric",
-					hour: "numeric", minute: "numeric", second: "numeric",
-					fractionalSecondDigits: 3, timeZoneName: "short"
-				})
-			},
-		];
-
-		// Camera details
-		const focal = this._meta?.properties?.["pers:interior_orientation"]?.focal_length ? `${this._meta?.properties?.["pers:interior_orientation"]?.focal_length} mm` : "❓";
-		let resmp = this._meta?.properties?.["pers:interior_orientation"]?.["sensor_array_dimensions"];
+		// Generic information
+		const persOrient = this._meta?.properties?.["pers:interior_orientation"];
+		const makeModel = [persOrient.camera_manufacturer, persOrient.camera_model].filter(v => v).join(" ");
+		const focal = persOrient?.focal_length ? `${persOrient?.focal_length} mm` : missing();
+		let resmp = persOrient?.["sensor_array_dimensions"];
 		if(resmp) { resmp = `${resmp[0]} x ${resmp[1]} px (${Math.floor(resmp[0] * resmp[1] / 1000000)} Mpx)`;}
 		let pictype = this._parent?._t.pnx.picture_flat;
-		let picFov = this._meta?.properties?.["pers:interior_orientation"]?.["field_of_view"]; // Use raw value instead of horizontalFov to avoid default showing up
+		let pictypelong = this._parent?._t.pnx.picture_flat_long;
+		let picFov = persOrient?.["field_of_view"]; // Use raw value instead of horizontalFov to avoid default showing up
 		if(picFov !== null && picFov !== undefined) {
-			if(picFov === 360) { pictype = this._parent?._t.pnx.picture_360; }
+			if(picFov === 360) {
+				pictype = this._parent?._t.pnx.picture_360;
+				pictypelong = this._parent?._t.pnx.picture_360_long;
+			}
 			else { pictype += ` (${picFov}°)`; }
 		}
 
+		// Camera tab
 		const cameraData = [
-			{ section: this._parent?._t.pnx.metadata_camera_make, value: this._meta?.properties?.["pers:interior_orientation"]?.camera_manufacturer || "❓" },
-			{ section: this._parent?._t.pnx.metadata_camera_model, value: this._meta?.properties?.["pers:interior_orientation"]?.camera_model || "❓" },
-			{ section: this._parent?._t.pnx.metadata_camera_type, value: pictype },
-			{ section: this._parent?._t.pnx.metadata_camera_resolution, value: resmp || "❓" },
-			{ section: this._parent?._t.pnx.metadata_camera_focal_length, value: focal },
+			{ title: this._parent?._t.pnx.metadata_camera_make, content: persOrient?.camera_manufacturer || missing() },
+			{ title: this._parent?._t.pnx.metadata_camera_model, content: persOrient?.camera_model || missing() },
+			{ title: this._parent?._t.pnx.metadata_camera_type, content: pictype },
+			{ title: this._parent?._t.pnx.metadata_camera_resolution, content: resmp || missing() },
+			{ title: this._parent?._t.pnx.metadata_camera_focal_length, content: focal },
+			// Capture date
+			this._meta?.caption?.date && {
+				title: this._parent?._t.pnx.metadata_general_date,
+				content: html`
+					<strong>${new Intl.DateTimeFormat(undefined, {dateStyle: "short"}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(undefined, {hour: "numeric", minute: "numeric", second: "numeric", fractionalSecondDigits: 3, timeZoneName: "longOffset"}).format(this._meta.caption.date)}
+				`
+			}
 		];
 
-		// Location details
-		const orientation = this._meta?.properties?.["view:azimuth"] !== undefined ? `${this._meta.properties["view:azimuth"]}°` : "❓";
-		const gpsPrecisionLabel = getGPSPrecision(this._meta);
+		// Location tab
+		const orientation = this._meta?.properties?.["view:azimuth"] !== undefined && `${this._meta.properties["view:azimuth"]}°`;
 		const locationData = [
-			{ section: this._parent?._t.pnx.metadata_location_longitude, value: this._meta.gps[0] },
-			{ section: this._parent?._t.pnx.metadata_location_latitude, value: this._meta.gps[1] },
-			{ section: this._parent?._t.pnx.metadata_location_orientation, value: orientation },
-			{ section: this._parent?._t.pnx.metadata_location_precision, value: gpsPrecisionLabel },
+			{ title: this._parent?._t.pnx.metadata_location_longitude, content: this._meta.gps[0] },
+			{ title: this._parent?._t.pnx.metadata_location_latitude, content: this._meta.gps[1] },
+			{ title: this._parent?._t.pnx.metadata_location_orientation, content: orientation || missing() },
+			{ title: this._parent?._t.pnx.metadata_location_precision, content: getGPSPrecision(this._meta) || missing() },
 		];
 
-		// Picture quality level
-		const hasQualityScore = this._parent?.map?._hasQualityScore?.();
-		let qualityData;
+		// Quality tab
+		const hasQualityScore = (
+			this._parent?.map?._hasQualityScore?.()
+			|| this._meta?.properties?.["quality:horizontal_accuracy"]
+			|| this._meta?.properties?.["panoramax:horizontal_pixel_density"]
+		);
+		let qualityData, generalGrade;
 		if(hasQualityScore) {
 			const gpsGrade = getGrade(QUALITYSCORE_GPS_VALUES, this._meta?.properties?.["quality:horizontal_accuracy"]);
 			const resGrade = getGrade(
@@ -123,39 +158,13 @@ export default class PictureMetadata extends LitElement {
 			);
 
 			// Note: score is also calculated in utils/map code
-			const generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
+			generalGrade = Math.round((resGrade || 1) * QUALITYSCORE_POND_RES + (gpsGrade || 1) * QUALITYSCORE_POND_GPS);
 
 			qualityData = [
-				{ section: this._parent?._t.pnx.metadata_quality_score, value: createWebComp("pnx-quality-score", { grade: generalGrade }) },
-				{ section: this._parent?._t.pnx.metadata_quality_gps_score, value: createWebComp("pnx-grade", { stars: gpsGrade, _t: this._parent?._t }) },
-				{ section: this._parent?._t.pnx.metadata_quality_resolution_score, value: createWebComp("pnx-grade", { stars: resGrade, _t: this._parent?._t }) },
-			];
-		}
-
-		return html`
-			<h4>${fa(faCircleInfo)} ${this._parent?._t.pnx.metadata}</h4>
-
-			${this._parent.api._endpoints.report ? 
-				html`
-					<pnx-button ._t=${this._parent?._t} @click=${() => this._parent._showReportForm()}>
-						${fa(faTriangleExclamation)} ${this._parent?._t.pnx.report}
-					</pnx-button>
-				` :
-				nothing
-			}
-
-			${createTable("pnx-table-light", generalData)}
-
-			<h4>${fa(faCamera)} ${this._parent?._t.pnx.metadata_camera}</h4>
-			${createTable("pnx-table-light", cameraData)}
-
-			<h4>${fa(faLocationDot)} ${this._parent?._t.pnx.metadata_location}</h4>
-			${createTable("pnx-table-light", locationData)}
-
-			${hasQualityScore ?
-				html`
-					<h4 style="margin-bottom: 5px">
-						${fa(faMedal)} ${this._parent?._t.pnx.metadata_quality}
+				{
+					title: this._parent?._t.pnx.metadata_quality_score,
+					content: html`<div style="display: flex; justify-content: center; gap: 10px; align-items: center;">
+						<pnx-quality-score grade=${generalGrade} style="font-size: 16px"></pnx-quality-score>
 						<pnx-button
 							title="${this._parent?._t.pnx.metadata_quality_help}"
 							kind="outline"
@@ -163,25 +172,126 @@ export default class PictureMetadata extends LitElement {
 						>
 							${fa(faInfoCircle)}
 						</pnx-button>
-					</h4>
-					${createTable("pnx-table-light", qualityData)}
-				` :
-				nothing
-			}
+					</div>`,
+					style: "width: 100%"
+				},
+				{
+					title: this._parent?._t.pnx.metadata_quality_gps_score,
+					content: createWebComp("pnx-grade", { stars: gpsGrade, _t: this._parent?._t })
+				},
+				{
+					title: this._parent?._t.pnx.metadata_quality_resolution_score,
+					content: createWebComp("pnx-grade", { stars: resGrade, _t: this._parent?._t })
+				},
+			];
+		}
+
+		// EXIF data
+		const exifData = Object.entries(this._meta.properties.exif)
+			.sort()
+			.filter(([, value]) => value)
+			.map(([key, value]) => {
+				if(JSON.stringify(value).includes("\\u")) {
+					value = JSON.stringify(value).replace(/\\u[0-9A-Fa-f]{4}/g, unicode => (
+						" 0x" + parseInt(unicode.slice(2), 16).toString(16).toUpperCase().padStart(4, "0")
+					)).slice(1, -1).trim();
+				}
+				return {
+					title: key,
+					content: value.length > 30 ? html`<textarea readonly>${value}</textarea>`: value,
+					style: value.length > 30 ? "width: 100%" : undefined
+				};
+			});
 
-			${this._meta.properties?.exif ?
-				html`
-					<details>
-						<summary>${fa(faGear)} ${this._parent?._t.pnx.metadata_exif}</summary>
-						${createTable("", Object.entries(this._meta.properties.exif)
-							.sort()
-							.map(([key, value]) => ({ section: key, value: value })
-						))}
-					</details>
-				` :
-				nothing
+		// General metadata
+		const overview = [
+			// Producer
+			this._meta?.caption?.producer?.length > 0 && {
+				title: this._parent?._t.pnx.metadata_general_author,
+				content: html`
+					<strong>${this._meta.caption.producer[this._meta.caption.producer.length - 1]}</strong>
+					${this._meta.caption.producer.length > 1 ? html`<br />${this._meta.caption.producer.slice(0, -1).join(", ")}` : nothing}
+				`
+			},
+			// Capture date
+			this._meta?.caption?.date && {
+				title: this._parent?._t.pnx.metadata_general_date,
+				content: html`
+					<strong>${new Intl.DateTimeFormat(undefined, {dateStyle: "long"}).format(this._meta.caption.date)}</strong>
+					<br />${new Intl.DateTimeFormat(undefined, {hour: "numeric",minute:"numeric"}).format(this._meta.caption.date)}
+				`
+			},
+			// Camera
+			persOrient && {
+				title: this._parent?._t.pnx.metadata_camera,
+				content: html`
+					<strong>${makeModel.length > 0 ? makeModel : missing()}</strong>
+					<br />${pictypelong}
+				`
+			},
+			// License
+			this._meta?.caption?.license && {
+				title: this._parent?._t.pnx.metadata_general_license,
+				content: html`${unsafeStatic(this._meta.caption.license)}`
+			},
+			// Quality score
+			hasQualityScore && {
+				title: this._parent?._t.pnx.metadata_quality,
+				content: html`<pnx-quality-score grade=${generalGrade} style="font-size: 14px" />`
+			},
+			// Copy ID
+			{
+				title: this._parent?._t.pnx.metadata_general_copy_id,
+				content_style: "display: flex; gap: 5px;",
+				content: html`
+					<pnx-copy-button
+						kind="outline"
+						size="sm"
+						._t=${this._parent?._t}
+						text=${this._meta.id}
+						style="flex: 1"
+					>
+						${fa(faImage)} ${this._parent?._t.pnx.metadata_general_picid}
+					</pnx-copy-button>
+					<pnx-copy-button
+						kind="outline"
+						size="sm"
+						._t=${this._parent?._t}
+						text=${this._meta.sequence.id}
+						style="flex: 1"
+					>
+						${fa(faImages)} ${this._parent?._t.pnx.metadata_general_seqid}
+					</pnx-copy-button>
+				`
 			}
-		`;
+		];
+
+		return html`<pnx-tabs>
+			${this._toTab( // General
+				html`${fa(faImage)} ${this._parent?._t.pnx.metadata_summary}`,
+				overview
+			)}
+
+			${this._toTab( // Camera
+				html`${fa(faCamera)} ${this._parent?._t.pnx.metadata_camera}`,
+				cameraData
+			)}
+
+			${this._toTab( // Position
+				html`${fa(faLocationDot)} ${this._parent?._t.pnx.metadata_location}`,
+				locationData
+			)}
+
+			${hasQualityScore ? this._toTab( // Quality
+				html`${fa(faMedal)} ${this._parent?._t.pnx.metadata_quality}`,
+				qualityData
+			) : nothing}
+
+			${this._meta.properties?.exif ? this._toTab( // EXIF
+				html`${fa(faScroll)} ${this._parent?._t.pnx.metadata_exif}`,
+				exifData
+			) : nothing}
+		</pnx-tabs>`;
 	}
 }