Improved session group (per site) styling and UX.

frontend/src/assets/style.css

@@ -7,7 +7,7 @@
   --color-surface-subtle: #f1f3f7;
   --color-border: #d0d5dd;
   --color-border-strong: #9aa2af;
-  --color-heading: #101828;
+  --color-heading: #000;
   --color-text: #1f2933;
   --color-text-muted: #52616b;
   --color-link: #2563eb;
@@ -47,7 +47,7 @@
     --color-surface-subtle: #1b243b;
     --color-border: #25304a;
     --color-border-strong: #3d4d6b;
-    --color-heading: #f8fafc;
+    --color-heading: #fff;
     --color-text: #e2e8f0;
     --color-text-muted: #94a3b8;
     --color-link: #60a5fa;
@@ -498,6 +498,8 @@ th {
   border-radius: var(--radius-sm);
 }
 
+.icon { flex: 0 0 auto; font-size: 1.5em; width: 40px; }
+
 .item-title {
   flex: 1;
   margin: 0;
@@ -553,6 +555,36 @@ th {
 .session-emoji {
   font-size: 1.2rem;
 }
+.session-group {
+  position: relative;
+}
+.session-group:focus-visible {
+  outline: var(-webkit-focus-ring-color) 1px solid;
+}
+.session-group-host {
+  display: flex;
+  align-items: center;
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin: 0.5rem 0;
+}
+.session-group-icon {
+  margin-left: -1.5rem;
+}
+.session-group-host a {
+  color: var(--color-text);
+  text-decoration: none;
+}
+.session-group:focus-visible .session-group-host,
+.session-group:focus-visible .session-group-host a {
+  color: var(--color-heading);
+}
+.btn-card-delete {
+  display: none;
+}
+.session-item:focus .btn-card-delete {
+  display: block;
+}
 
 .badge {
   padding: 0.2rem 0.5rem;

frontend/src/components/SessionList.vue

@@ -7,11 +7,12 @@
     <div class="section-body">
       <div>
         <template v-if="Array.isArray(sessions) && sessions.length">
-          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group">
+          <div v-for="(group, host) in groupedSessions" :key="host" class="session-group" tabindex="0" @keydown.enter="handleGroupEnter($event, host)">
-            <h3 :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
+            <span :class="['session-group-host', { 'is-current-site': group.isCurrentSite }]">
-              <template v-if="host"><a :href="hostUrl(host)">🌐 {{ host }}</a></template>
+              <span class="session-group-icon">🌐</span>
-              <template v-else>🌐 Unbound host</template>
+              <a v-if="host" :href="hostUrl(host)" tabindex="-1" target="_blank" rel="noopener noreferrer">{{ host }}</a>
-            </h3>
+              <template v-else>Unbound host</template>
+            </span>
             <div class="session-list">
               <div
                 v-for="session in group.sessions"
@@ -113,6 +114,12 @@ const handleDelete = (event, session) => {
 
 const isTerminating = (sessionId) => !!props.terminatingSessions[sessionId]
 
+const handleGroupEnter = (event, host) => {
+  if (host && event.target === event.currentTarget) {
+    event.currentTarget.querySelector('a')?.click()
+  }
+}
+
 const hostUrl = (host) => {
   // Assume http if there's a port number, https otherwise
   const protocol = host.includes(':') ? 'http' : 'https'
@@ -166,20 +173,3 @@ const groupedSessions = computed(() => {
   return sortedGroups
 })
 </script>
-
-<style>
-.session-group-host {
-  font-size: 1em;
-  font-weight: 600;
-  margin: 0.5rem 0 0.5rem -1.2rem;
-}
-.session-group-host.is-current-site {
-  color: var(--color-accent);
-}
-.btn-card-delete {
-  display: none;
-}
-.session-item:focus .btn-card-delete {
-  display: block;
-}
-</style>

frontend/src/components/UserBasicInfo.vue

@@ -95,7 +95,6 @@ const userLoaded = computed(() => !!props.name)
 .user-info-extra { grid-area: extra; padding-left: 2rem; border-left: 1px solid var(--color-border); }
 .user-name-row { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; }
 .user-name-row.editing { flex: 1 1 auto; }
-.icon { flex: 0 0 auto; font-size: 1.5em; width: 40px; }
 .display-name { font-weight: 600; font-size: 1.05em; line-height: 1.2; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .name-input { width: auto; flex: 1 1 140px; min-width: 120px; padding: 6px 8px; font-size: 0.9em; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); color: var(--color-text); }
 .user-name-heading .name-input { width: auto; }