Group properties in list page

src/routes/category-properties/+page.server.ts

@@ -4,12 +4,41 @@ import { error } from '@sveltejs/kit'
 import sql from 'sql-template-tag'
 
 export const load = async () => {
-	const { rows: properties, err } = await query<PropertyShort>(sql`
-		SELECT id, relation FROM properties
+	const { rows: properties, err } = await query<
+		PropertyShort & { dual_property_id?: string }
+	>(sql`
+		SELECT id, relation, dual_property_id FROM properties
 		ORDER BY lower(id)
 	`)
 
 	if (err) error(500, 'Could not load properties')
 
-	return { properties }
+	const seen = new Set()
+
+	const grouped_properties: typeof properties = []
+
+	for (const p of properties) {
+		if (seen.has(p.id) || (p.dual_property_id && seen.has(p.dual_property_id))) {
+			continue
+		}
+
+		if (p.id.startsWith('co') && p.dual_property_id) {
+			const swap = {
+				id: p.dual_property_id,
+				dual_property_id: p.id,
+				relation: p.relation,
+			}
+			grouped_properties.push(swap)
+		} else {
+			grouped_properties.push(p)
+		}
+
+		seen.add(p.id)
+		if (p.dual_property_id) seen.add(p.dual_property_id)
+	}
+
+	const total = properties.length
+	const grouped_total = grouped_properties.length
+
+	return { grouped_properties, total, grouped_total }
 }

src/routes/category-properties/+page.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
-	import PropertyList from '$components/PropertyList.svelte'
 	import SearchFilter from '$components/SearchFilter.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
 	import { pluralize } from '$lib/client/utils'
+	import { get_property_url } from '$lib/commons/property.url.js'
 
 	let { data } = $props()
 
 	let search = $state('')
 
 	let searched_properties = $derived(
 		search
-			? data.properties.filter((property) =>
-					property.id.toLowerCase().includes(search.toLowerCase()),
+			? data.grouped_properties.filter(
+					(property) =>
+						property.id.toLowerCase().includes(search.toLowerCase()) ||
+						property.dual_property_id
+							?.toLowerCase()
+							.includes(search.toLowerCase()),
 				)
-			: data.properties,
+			: data.grouped_properties,
 	)
 </script>
 
@@ -25,12 +29,28 @@
 <SearchFilter bind:search />
 
 <p class="hint">
-	{pluralize(searched_properties.length, {
-		one: 'Found {count} property',
-		other: 'Found {count} properties',
-	})}
+	{#if !search}
+		Found {data.total} properties ({data.grouped_total} grouped)
+	{:else}
+		{pluralize(searched_properties.length, {
+			one: 'Found {count} group',
+			other: 'Found {count} groups',
+		})}
+	{/if}
 </p>
 
-<PropertyList properties={searched_properties} />
+<ul>
+	{#each searched_properties as { id, relation, dual_property_id }}
+		<li>
+			{relation}
+			<a href={get_property_url(id, 'category')}>{id}</a>
+			{#if dual_property_id && id !== dual_property_id}
+				/ <a href={get_property_url(dual_property_id, 'category')}>
+					{dual_property_id}
+				</a>
+			{/if}
+		</li>
+	{/each}
+</ul>
 
 <SuggestionForm />

src/routes/functor-properties/+page.server.ts

@@ -3,14 +3,44 @@ import { query } from '$lib/server/db'
 import { error } from '@sveltejs/kit'
 import sql from 'sql-template-tag'
 
+// TODO: remove code duplication with category properties list page
+
 export const load = async () => {
-	const { rows: properties, err } = await query<PropertyShort>(sql`
-        SELECT id, relation
-        FROM functor_properties
+	const { rows: properties, err } = await query<
+		PropertyShort & { dual_property_id?: string }
+	>(sql`
+        SELECT id, relation, dual_property_id FROM functor_properties
         ORDER BY lower(id)
     `)
 
 	if (err) error(500, 'Could not load properties')
 
-	return { properties }
+	const seen = new Set()
+
+	const grouped_properties: typeof properties = []
+
+	for (const p of properties) {
+		if (seen.has(p.id) || (p.dual_property_id && seen.has(p.dual_property_id))) {
+			continue
+		}
+
+		if (p.id.startsWith('co') && p.dual_property_id) {
+			const swap = {
+				id: p.dual_property_id,
+				dual_property_id: p.id,
+				relation: p.relation,
+			}
+			grouped_properties.push(swap)
+		} else {
+			grouped_properties.push(p)
+		}
+
+		seen.add(p.id)
+		if (p.dual_property_id) seen.add(p.dual_property_id)
+	}
+
+	const total = properties.length
+	const grouped_total = grouped_properties.length
+
+	return { grouped_properties, total, grouped_total }
 }

src/routes/functor-properties/+page.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import MetaData from '$components/MetaData.svelte'
-	import PropertyList from '$components/PropertyList.svelte'
 	import SuggestionForm from '$components/SuggestionForm.svelte'
-	import { pluralize } from '$lib/client/utils'
+	import { get_property_url } from '$lib/commons/property.url'
 
 	let { data } = $props()
 </script>
@@ -12,14 +11,24 @@
 <h2>Properties of Functors</h2>
 
 <!-- TODO: add search feature if the list grows in the future -->
+<!-- TODO: remove code duplication with category properties list page -->
 
 <p class="hint">
-	{pluralize(data.properties.length, {
-		one: 'Found {count} property',
-		other: 'Found {count} properties',
-	})}
+	Found {data.total} properties ({data.grouped_total} grouped)
 </p>
 
-<PropertyList properties={data.properties} type="functor" />
+<ul>
+	{#each data.grouped_properties as { id, relation, dual_property_id }}
+		<li>
+			{relation}
+			<a href={get_property_url(id, 'functor')}>{id}</a>
+			{#if dual_property_id && id !== dual_property_id}
+				/ <a href={get_property_url(dual_property_id, 'functor')}>
+					{dual_property_id}
+				</a>
+			{/if}
+		</li>
+	{/each}
+</ul>
 
 <SuggestionForm />