Initial commit

2 files changed, 777 insertions, 0 deletions

diff --git a/public/gallery.js b/public/gallery.js
new file mode 100644
index 0000000..9d3b067
--- /dev/null
+++ b/public/gallery.js
@@ -0,0 +1,675 @@
+'use strict'
+
+let callActive = false
+let callFaulty = false
+
+function call(method, params) {
+	// XXX: At least with POST, unsuccessful requests result
+	// in catched errors containing Errors with a null message.
+	// This is an issue within XMLHttpRequest.
+	callActive++
+	return m.request({
+		method: "POST",
+		url: `/api/${method}`,
+		body: params,
+	}).then(result => {
+		callActive--
+		callFaulty = false
+		return result
+	}).catch(error => {
+		callActive--
+		callFaulty = true
+		throw error
+	})
+}
+
+const loading = (window.location.hostname !== 'localhost') ? 'lazy' : undefined
+
+let Header = {
+	global: [
+		{name: "Browse",     route: '/browse'},
+		{name: "Tags",       route: '/tags'},
+		{name: "Duplicates", route: '/duplicates'},
+		{name: "Orphans",    route: '/orphans'},
+	],
+
+	image: [
+		{
+			route: '/view',
+			render: () => m(m.route.Link, {
+				href: `/view/:key`,
+				params: {key: m.route.param('key')},
+				class: m.route.get().startsWith('/view')
+					? 'active' : undefined,
+			}, "View"),
+		},
+		{
+			route: '/similar',
+			render: () => m(m.route.Link, {
+				href: `/similar/:key`,
+				params: {key: m.route.param('key')},
+				class: m.route.get().startsWith('/similar')
+					? 'active' : undefined,
+			}, "Similar"),
+		},
+	],
+
+	search: [
+		{
+			route: '/search',
+			render: () => m(m.route.Link, {
+				href: `/search/:key`,
+				params: {key: m.route.param('key')},
+				class: m.route.get().startsWith('/search')
+					? 'active' : undefined,
+			}, "Search"),
+		},
+	],
+
+	view(vnode) {
+		const route = m.route.get()
+		const main = this.global.map(x =>
+			m(m.route.Link, {
+				href: x.route,
+				class: route.startsWith(x.route) ? 'active' : undefined,
+			}, x.name))
+
+		let context
+		if (this.image.some(x => route.startsWith(x.route)))
+			context = this.image.map(x => x.render())
+		if (this.search.some(x => route.startsWith(x.route)))
+			context = this.search.map(x => x.render())
+
+		return m('.header', {}, [
+			m('nav', main),
+			m('nav', context),
+			callFaulty
+				? m('.activity.error[title=Error]', '●')
+				: callActive
+					? m('.activity[title=Busy]', '●')
+					: m('.activity[title=Idle]', '○'),
+		])
+	},
+}
+
+let Thumbnail = {
+	view(vnode) {
+		const e = vnode.attrs.info
+		if (!e.thumbW || !e.thumbH)
+			return m('.thumbnail.missing', {...vnode.attrs, info: null})
+		return m('img.thumbnail', {...vnode.attrs, info: null,
+			src: `/thumb/${e.sha1}`, width: e.thumbW, height: e.thumbH,
+			loading})
+	},
+}
+
+let ScoredTag = {
+	view(vnode) {
+		const {space, tagname, score} = vnode.attrs
+		return m('li', [
+			m("meter[max=1.0]", {value: score, title: score}, score),
+			` `,
+			m(m.route.Link, {
+				href: `/search/:key`,
+				params: {key: `${space}:${tagname}`},
+			}, ` ${tagname}`),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let BrowseModel = {
+	path: undefined,
+	subdirectories: [],
+	entries: [],
+	collator: new Intl.Collator(undefined, {numeric: true}),
+
+	async reload(path) {
+		if (this.path !== path) {
+			this.path = path
+			this.subdirectories = []
+			this.entries = []
+		}
+
+		let resp = await call('browse', {path})
+		this.subdirectories = resp.subdirectories
+		this.entries = resp.entries.sort((a, b) =>
+			this.collator.compare(a.name, b.name))
+	},
+
+	joinPath(parent, child) {
+		if (!parent)
+			return child
+		if (!child)
+			return parent
+		return `${parent}/${child}`
+	},
+
+	getBrowseLinks() {
+		if (this.path === undefined)
+			return []
+
+		let links = [{name: "Root", path: "", level: -1}], path
+		for (const crumb of this.path.split('/').filter(s => !!s)) {
+			path = this.joinPath(path, crumb)
+			links.push({name: crumb, path: path, level: -1})
+		}
+
+		links[links.length - 1].level = 0
+
+		for (const sub of this.subdirectories) {
+			links.push(
+				{name: sub, path: this.joinPath(this.path, sub), level: +1})
+		}
+		return links
+	},
+}
+
+let BrowseBarLink = {
+	view(vnode) {
+		const link = vnode.attrs.link
+
+		let c = 'selected'
+		if (link.level < 0)
+			c = 'parent'
+		if (link.level > 0)
+			c = 'child'
+
+		return m('li', {
+			class: c,
+		}, m(m.route.Link, {
+			href: `/browse/:key`,
+			params: {key: link.path},
+		}, link.name))
+	},
+}
+
+let BrowseView = {
+	// So that Page Up/Down, etc., work after changing directories.
+	// Programmatically focusing a scrollable element requires setting tabindex,
+	// and causes :focus-visible on page load, which we suppress in CSS.
+	// I wish there was another way, but the workaround isn't particularly bad.
+	// focus({focusVisible: true}) is FF 104+ only and experimental.
+	oncreate(vnode) { vnode.dom.focus() },
+
+	view(vnode) {
+		return m('.browser[tabindex=0]', {
+			// Trying to force the oncreate on path changes.
+			key: BrowseModel.path,
+		}, BrowseModel.entries.map(info => {
+			return m(m.route.Link, {href: `/view/${info.sha1}`},
+				m(Thumbnail, {info, title: info.name}))
+		}))
+	},
+}
+
+let Browse = {
+	// Reload the model immediately, to improve responsivity.
+	// But we don't need to: https://mithril.js.org/route.html#preloading-data
+	// Also see: https://mithril.js.org/route.html#route-cancellation--blocking
+	oninit(vnode) {
+		let path = vnode.attrs.key || ""
+		BrowseModel.reload(path)
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, [
+				m('.sidebar', [
+					m('ul.path', BrowseModel.getBrowseLinks()
+						.map(link => m(BrowseBarLink, {link}))),
+				]),
+				m(BrowseView),
+			]),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let TagsModel = {
+	ns: null,
+	namespaces: {},
+
+	async reload(ns) {
+		if (this.ns !== ns) {
+			this.ns = ns
+			this.namespaces = {}
+		}
+
+		this.namespaces = await call('tags', {namespace: ns})
+	},
+}
+
+let TagsList = {
+	view(vnode) {
+		// TODO: Make it possible to sort by count.
+		const tags = Object.entries(vnode.attrs.tags)
+			.sort(([a, b]) => a[0].localeCompare(b[0]))
+
+		return (tags.length == 0)
+			? "No tags"
+			: m("ul", tags.map(([name, count]) => m("li", [
+				m(m.route.Link, {
+					href: `/search/:key`,
+					params: {key: `${vnode.attrs.space}:${name}`},
+				}, ` ${name}`),
+				` ×${count}`,
+			])))
+	},
+}
+
+let TagsView = {
+	// See BrowseView.
+	oncreate(vnode) { vnode.dom.focus() },
+
+	view(vnode) {
+		// XXX: The empty-named tag namespace gets a bit shafted,
+		// in particular in the router, as well as with its header.
+		// Maybe we could refer to it by its numeric ID in routing.
+		const names = Object.keys(TagsModel.namespaces)
+			.sort((a, b) => a.localeCompare(b))
+
+		let children = (names.length == 0)
+			? "No namespaces"
+			: names.map(space => {
+				const ns = TagsModel.namespaces[space]
+				return [
+					m("h2", space),
+					ns.description ? m("p", ns.description) : [],
+					m(TagsList, {space, tags: ns.tags}),
+				]
+			})
+		return m('.tags[tabindex=0]', {}, children)
+	},
+}
+
+let Tags = {
+	oninit(vnode) {
+		let ns = vnode.attrs.key
+		TagsModel.reload(ns)
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, m(TagsView)),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let DuplicatesModel = {
+	entries: [],
+
+	async reload() {
+		this.entries = await call('duplicates', {})
+	},
+}
+
+let DuplicatesThumbnail = {
+	view(vnode) {
+		const info = vnode.attrs.info
+		return [
+			m(m.route.Link, {href: `/similar/${info.sha1}`},
+				m(Thumbnail, {info})),
+			(info.occurences != 1) ? ` ×${info.occurences}` : [],
+		]
+	},
+}
+
+let DuplicatesList = {
+	// See BrowseView.
+	oncreate(vnode) { vnode.dom.focus() },
+
+	view(vnode) {
+		let children = (DuplicatesModel.entries.length == 0)
+			? "No duplicates"
+			: DuplicatesModel.entries.map(group =>
+				m('.row', group.map(entry =>
+					m(DuplicatesThumbnail, {info: entry}))))
+		return m('.duplicates[tabindex=0]', {}, children)
+	},
+}
+
+let Duplicates = {
+	oninit(vnode) {
+		DuplicatesModel.reload()
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, m(DuplicatesList)),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let OrphansModel = {
+	entries: [],
+
+	async reload() {
+		this.entries = await call('orphans', {})
+	},
+}
+
+let OrphansReplacement = {
+	view(vnode) {
+		const info = vnode.attrs.info
+		if (!info)
+			return []
+
+		return [
+			` → `,
+			m(m.route.Link, {href: `/view/${info.sha1}`},
+				m(Thumbnail, {info})),
+			`${info.tags} tags`,
+		]
+	},
+}
+
+let OrphansRow = {
+	view(vnode) {
+		const info = vnode.attrs.info
+		return m('.row', [
+			// It might not load, but still allow tag viewing.
+			m(m.route.Link, {href: `/view/${info.sha1}`},
+				m(Thumbnail, {info})),
+			`${info.tags} tags`,
+			m(OrphansReplacement, {info: info.replacement}),
+		])
+	},
+}
+
+let OrphansList = {
+	// See BrowseView.
+	oncreate(vnode) { vnode.dom.focus() },
+
+	view(vnode) {
+		let children = (OrphansModel.entries.length == 0)
+			? "No orphans"
+			: OrphansModel.entries.map(info => [
+				m("h2", info.lastPath),
+				m(OrphansRow, {info}),
+			])
+		return m('.orphans[tabindex=0]', {}, children)
+	},
+}
+
+let Orphans = {
+	oninit(vnode) {
+		OrphansModel.reload()
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, m(OrphansList)),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let ViewModel = {
+	sha1: undefined,
+	width: 0,
+	height: 0,
+	paths: [],
+	tags: {},
+
+	async reload(sha1) {
+		if (this.sha1 !== sha1) {
+			this.sha1 = sha1
+			this.width = this.height = 0
+			this.paths = []
+			this.tags = {}
+		}
+
+		let resp = await call('info', {sha1: sha1})
+		this.width = resp.width
+		this.height = resp.height
+		this.paths = resp.paths
+		this.tags = resp.tags
+	},
+}
+
+let ViewBarBrowseLink = {
+	view(vnode) {
+		return m(m.route.Link, {
+			href: `/browse/:key`,
+			params: {key: vnode.attrs.path},
+		}, vnode.attrs.name)
+	},
+}
+
+let ViewBarPath = {
+	view(vnode) {
+		const parents = vnode.attrs.path.split('/')
+		const basename = parents.pop()
+
+		let result = [], path
+		if (!parents.length)
+			result.push(m(ViewBarBrowseLink, {path: "", name: "Root"}), "/")
+		for (const crumb of parents) {
+			path = BrowseModel.joinPath(path, crumb)
+			result.push(m(ViewBarBrowseLink, {path, name: crumb}), "/")
+		}
+		result.push(basename)
+		return result
+	},
+}
+
+let ViewBar = {
+	view(vnode) {
+		return m('.viewbar', [
+			m('h2', "Locations"),
+			m('ul', ViewModel.paths.map(path =>
+				m('li', m(ViewBarPath, {path})))),
+			m('h2', "Tags"),
+			Object.entries(ViewModel.tags).map(([space, tags]) => [
+				m("h3", m(m.route.Link, {href: `/tags/${space}`}, space)),
+				m("ul.tags", Object.entries(tags)
+					.sort(([t1, w1], [t2, w2]) => (w2 - w1))
+					.map(([tag, score]) =>
+						m(ScoredTag, {space, tagname: tag, score}))),
+			]),
+		])
+	},
+}
+
+let View = {
+	oninit(vnode) {
+		let sha1 = vnode.attrs.key || ""
+		ViewModel.reload(sha1)
+	},
+
+	view(vnode) {
+		const view = m('.view', [
+			ViewModel.sha1 !== undefined
+				? m('img', {src: `/image/${ViewModel.sha1}`,
+					width: ViewModel.width, height: ViewModel.height})
+				: "No image.",
+		])
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, [view, m(ViewBar)]),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let SimilarModel = {
+	sha1: undefined,
+	info: {paths: []},
+	groups: {},
+
+	async reload(sha1) {
+		if (this.sha1 !== sha1) {
+			this.sha1 = sha1
+			this.info = {paths: []}
+			this.groups = {}
+		}
+
+		let resp = await call('similar', {sha1: sha1})
+		this.info = resp.info
+		this.groups = resp.groups
+	},
+}
+
+let SimilarThumbnail = {
+	view(vnode) {
+		const info = vnode.attrs.info
+		return m(m.route.Link, {href: `/view/${info.sha1}`},
+			m(Thumbnail, {info}))
+	},
+}
+
+let SimilarGroup = {
+	view(vnode) {
+		const images = vnode.attrs.images
+		let result = [
+			m('h2', vnode.attrs.name),
+			images.map(info => m('.row', [
+				m(SimilarThumbnail, {info}),
+				m('ul', [
+					m('li', Math.round(info.pixelsRatio * 100) +
+						"% pixels of input image"),
+					info.paths.map(path =>
+						m('li', m(ViewBarPath, {path}))),
+				]),
+			]))
+		]
+		if (!images.length)
+			result.push("No matches.")
+		return result
+	},
+}
+
+let SimilarList = {
+	view(vnode) {
+		if (SimilarModel.sha1 === undefined ||
+			SimilarModel.info.paths.length == 0)
+			return "No image"
+
+		const info = SimilarModel.info
+		return m('.similar', {}, [
+			m('.row', [
+				m(SimilarThumbnail, {info}),
+				m('ul', info.paths.map(path =>
+					m('li', m(ViewBarPath, {path})))),
+			]),
+			Object.entries(SimilarModel.groups).map(([name, images]) =>
+				m(SimilarGroup, {name, images})),
+		])
+	},
+}
+
+let Similar = {
+	oninit(vnode) {
+		let sha1 = vnode.attrs.key || ""
+		SimilarModel.reload(sha1)
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, m(SimilarList)),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+let SearchModel = {
+	query: undefined,
+	matches: [],
+	related: {},
+
+	async reload(query) {
+		if (this.query !== query) {
+			this.query = query
+			this.matches = []
+			this.related = {}
+		}
+
+		let resp = await call('search', {query})
+		this.matches = resp.matches
+		this.related = resp.related
+	},
+}
+
+let SearchRelated = {
+	view(vnode) {
+		return Object.entries(SearchModel.related)
+			.sort((a, b) => a[0].localeCompare(b[0]))
+			.map(([space, tags]) => [
+				m('h2', space),
+				m('ul.tags', tags
+					.sort((a, b) => (b.score - a.score))
+					.map(({tag, score}) =>
+						m(ScoredTag, {space, tagname: tag, score}))),
+			])
+	},
+}
+
+let SearchView = {
+	// See BrowseView.
+	oncreate(vnode) { vnode.dom.focus() },
+
+	view(vnode) {
+		return m('.browser[tabindex=0]', {
+			// Trying to force the oncreate on path changes.
+			key: SearchModel.path,
+		}, SearchModel.matches
+			.sort((a, b) => b.score - a.score)
+			.map(info => {
+				return m(m.route.Link, {href: `/view/${info.sha1}`},
+					m(Thumbnail, {info, title: info.score}))
+			}))
+	},
+}
+
+let Search = {
+	oninit(vnode) {
+		SearchModel.reload(vnode.attrs.key)
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m(Header),
+			m('.body', {}, [
+				m('.sidebar', [
+					m('p', SearchModel.query),
+					m(SearchRelated),
+				]),
+				m(SearchView),
+			]),
+		])
+	},
+}
+
+// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+window.addEventListener('load', () => {
+	m.route(document.body, "/browse/", {
+		// The path doesn't need to be escaped, perhaps change that (":key...").
+		"/browse/": Browse,
+		"/browse/:key": Browse,
+		"/tags": Tags,
+		"/tags/:key": Tags,
+		"/duplicates": Duplicates,
+		"/orphans": Orphans,
+
+		"/view/:key": View,
+		"/similar/:key": Similar,
+
+		"/search/:key": Search,
+	})
+})
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..1bdeb3f
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,102 @@
+:root { --shade-color: #eee; }
+
+body { margin: 0; padding: 0; font-family: sans-serif; }
+a { color: inherit; }
+
+.container { display: flex; flex-direction: column;
+	height: 100vh; width: 100vw; overflow: hidden; }
+
+.body { display: flex; flex-grow: 1; overflow: hidden; position: relative; }
+.body::after { content: ''; position: absolute; pointer-events: none;
+	top: 0; left: 0; right: 0; height: .75rem;
+	background: linear-gradient(#fff, rgb(255 255 255 / 0%)); }
+
+.header { color: #000; background: #aaa linear-gradient(#888, #999);
+	display: flex; justify-content: space-between; column-gap: .5rem; }
+.header nav { display: flex; margin: 0 .5rem; align-items: end; }
+.header nav a { display: block; text-decoration: none;
+	background: #bbb linear-gradient(#bbb, #ccc);
+	margin: .25rem 0 0 -1px; padding: .25rem .75rem;
+	border: 1px solid #888; border-radius: .5rem .5rem 0 0; }
+.header nav a.active { font-weight: bold; border-bottom: 1px solid #fff;
+	background: #fff linear-gradient(#eee, #fff); }
+.header nav a.active, .header nav a:hover { padding-bottom: .4rem; }
+.header .activity { padding: .25rem .5rem; align-self: center; color: #fff; }
+.header .activity.error { color: #f00; }
+
+.sidebar { padding: .25rem .5rem; background: var(--shade-color);
+	border-right: 1px solid #ccc; overflow: auto;
+	min-width: 10rem; max-width: 20rem; flex-shrink: 0; }
+.sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
+.sidebar ul { margin: .5rem 0; padding: 0; }
+
+.sidebar .path { margin: .5rem -.5rem; }
+.sidebar .path li { margin: 0; padding: 0; }
+.sidebar .path li a { padding: .25rem .5rem; padding-left: 30px;
+	display: block; text-decoration: none; white-space: nowrap; }
+.sidebar .path li a:hover { background-color: rgb(0 0 0 / 10%); }
+
+.sidebar .path li.parent a {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 14 10 8 16 14' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
+	background-repeat: no-repeat; background-position: 5px center; }
+
+.sidebar .path li.selected a { font-weight: bold;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23888' /%3E%3C/svg%3E%0A");
+	background-repeat: no-repeat; background-position: 5px center; }
+
+.sidebar .path li.child a {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 6 10 12 16 6' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
+	background-repeat: no-repeat; background-position: 5px center; }
+
+.browser { overflow: auto; display: flex; flex-wrap: wrap;
+	align-content: flex-start; justify-content: center; align-items: center;
+	gap: 3px; padding: 9px; flex-grow: 1; }
+.browser:focus-visible { outline: 0; box-shadow: none; }
+
+.tags { padding: .5rem; flex-grow: 1; overflow: auto; }
+.tags:focus-visible { outline: 0; box-shadow: none; }
+.tags h2 { margin: .5em 0 .25em 0; padding: 0; font-size: 1.1rem; }
+.tags p { margin: .25em 0; }
+.tags ul { display: flex; margin: .5em 0; padding: 0;
+	flex-wrap: wrap; gap: .25em; }
+.tags ul li { display: block; margin: 0; padding: .25em .5em;
+	border-radius: .5rem; background: var(--shade-color); }
+
+img.thumbnail { display: block;
+	background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%)
+		50% / 20px 20px; }
+img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
+	margin: 3px; border: 0px solid #000; }
+.thumbnail.missing { width: 128px; height: 128px; position: relative; }
+.thumbnail.missing::after { content: '?'; font-size: 64px;
+	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+
+.view { display: flex; flex-grow: 1; overflow: hidden;
+	justify-content: center; align-items: center; }
+.view img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.view img { z-index: 1; }
+
+.viewbar { padding: .25rem .5rem; background: #eee;
+	border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; }
+.viewbar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
+.viewbar h3 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; }
+.viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
+.viewbar ul.tags { padding: 0; list-style-type: none; }
+.viewbar li { margin: 0; padding: 0; }
+
+.sidebar meter,
+.viewbar meter { width: 1.25rem;
+	/* background: white; border: 1px solid #ccc; */ }
+
+.similar { padding: .5rem; flex-grow: 1; overflow: auto; }
+.similar h2 { margin: 1em 0 0.5em 0; padding: 0; font-size: 1.2rem; }
+.similar .row { display: flex; margin: .5rem 0; }
+.similar .row ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
+
+.duplicates,
+.orphans { padding: .5rem; flex-grow: 1; overflow: auto; }
+.duplicates .row,
+.orphans .row { display: flex; margin: .5rem 0; align-items: center; gap: 3px; }
+
+.orphans .row { margin-bottom: 1.25rem; }
+.orphans h2 { margin: 0.25em 0; padding: 0; font-size: 1.1rem; }