From 997651eb6688cab8bc4d03d3ece7a45f86b69cba Mon Sep 17 00:00:00 2001
From: GITuser <abellykens@protonmail.com>
Date: Tue, 1 Sep 2026 21:14:43 +0200
Subject: [PATCH] feat(webapp): make domain names links

A column can now carry a link function, and its cells then render as a router
link. Use it for the domain name, so that a domain can be opened in a new tab
with the middle mouse button, from the context menu, or with a modifier key,
and so that the browser shows its address. The rest of the row keeps taking
one to the same place on click.

Fixes #1192

Co-authored-by: Peter Thomassen <peter@desec.io>
---
 www/webapp/src/views/CrudList.vue       | 15 ++++++++++++++-
 www/webapp/src/views/CrudListDomain.vue |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/www/webapp/src/views/CrudList.vue b/www/webapp/src/views/CrudList.vue
index c844da06d..a281fe5f4 100644
--- a/www/webapp/src/views/CrudList.vue
+++ b/www/webapp/src/views/CrudList.vue
@@ -197,8 +197,15 @@
               v-for="(column, id) in columns"
               #[column.name]="itemFieldProps"
             >
+              <router-link
+                v-if="cellUsesPlainText(column, rawItem(itemFieldProps.item)) && column.link"
+                :key="`${id}-link`"
+                class="crud-readonly-value crud-link"
+                :to="column.link(rawItem(itemFieldProps.item))"
+                @click.stop
+              >{{ readonlyDisplayValue(column, rawItem(itemFieldProps.item)) }}</router-link>
               <div
-                v-if="cellUsesPlainText(column, rawItem(itemFieldProps.item))"
+                v-else-if="cellUsesPlainText(column, rawItem(itemFieldProps.item))"
                 :key="`${id}-readonly`"
                 class="crud-readonly-value"
                 v-text="readonlyDisplayValue(column, rawItem(itemFieldProps.item))"
@@ -841,6 +848,12 @@ export default {
   min-height: 56px;
   padding: 20px 0 4px;
 }
+/* a real link, so that it can be opened in a new tab, but looking like the rest
+   of the row (App.vue underlines it on hover, like any other link) */
+.v-application a.crud-link {
+  color: inherit !important;
+  text-decoration: none;
+}
 </style>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
diff --git a/www/webapp/src/views/CrudListDomain.vue b/www/webapp/src/views/CrudListDomain.vue
index c225674bc..c86633f69 100644
--- a/www/webapp/src/views/CrudListDomain.vue
+++ b/www/webapp/src/views/CrudListDomain.vue
@@ -46,6 +46,7 @@ export default {
             writeOnCreate: true,
             datatype: GenericText.name,
             searchable: true,
+            link: item => ({name: 'domain', params: {domain: item.name}}),
           },
           published: {
             name: 'item.published',