From 57c1437bf01bc10e3226763503ce452d20c9300f Mon Sep 17 00:00:00 2001
From: hhvrc <github@heavenvr.tech>
Date: Fri, 25 Oct 2024 13:09:29 +0200
Subject: [PATCH] Improve UserAgent readability

---
 package.json                                     |  1 +
 pnpm-lock.yaml                                   |  9 +++++++++
 .../settings/sessions/+page.svelte               | 16 ++++++++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c1f9606..ed5017c 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
 		"tailwindcss": "3.4.14",
 		"tslib": "^2.8.0",
 		"typescript": "^5.6.3",
+		"ua-parser-js": "^2.0.0-beta.3",
 		"vite-plugin-mkcert": "^1.17.6",
 		"vite-plugin-tailwind-purgecss": "0.3.3",
 		"vitest": "^2.1.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e6abdb8..ad0f792 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,6 +125,9 @@ importers:
       typescript:
         specifier: ^5.6.3
         version: 5.6.3
+      ua-parser-js:
+        specifier: ^2.0.0-beta.3
+        version: 2.0.0-beta.3
       vite-plugin-mkcert:
         specifier: ^1.17.6
         version: 1.17.6(vite@5.4.9(@types/node@22.7.7))
@@ -2382,6 +2385,10 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  ua-parser-js@2.0.0-beta.3:
+    resolution: {integrity: sha512-vZkEG/GplLRxj4XVrjLUQpSNg9Qj9RdnIqrOy8dqrLP1e5x7i2N8RfVYlWRbKEZdDSWfeWNcWS38gmieX03/5A==}
+    hasBin: true
+
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -4762,6 +4769,8 @@ snapshots:
 
   typescript@5.6.3: {}
 
+  ua-parser-js@2.0.0-beta.3: {}
+
   ufo@1.5.4: {}
 
   uid@2.0.2:
diff --git a/src/routes/(authenticated)/settings/sessions/+page.svelte b/src/routes/(authenticated)/settings/sessions/+page.svelte
index 3d57949..9752fa1 100644
--- a/src/routes/(authenticated)/settings/sessions/+page.svelte
+++ b/src/routes/(authenticated)/settings/sessions/+page.svelte
@@ -6,6 +6,7 @@
   import { elapsedToString } from '$lib/utils/time';
   import { escapeHtml } from '$lib/utils/encoding';
   import { getModalStore } from '@skeletonlabs/skeleton';
+  import { UAParser } from 'ua-parser-js';
 
   const modalStore = getModalStore();
 
@@ -47,6 +48,17 @@
     }
   }
 
+  function getReadableName(userAgent: string | null): string {
+    if (!userAgent) return 'Unknown';
+
+    const ua = new UAParser(userAgent);
+
+    const browser = ua.getBrowser();
+    const os = ua.getOS();
+
+    return `${browser.name} on ${os.name} ${os.version}`;
+  }
+
   listSessions();
 </script>
 
@@ -63,7 +75,7 @@
       <table class="table table-hover">
         <thead>
           <tr>
-            <th>User-Agent</th>
+            <th>UserAgent</th>
             <th>Created</th>
             <th>Last Seen</th>
             <th>Expires</th>
@@ -74,7 +86,7 @@
         <tbody>
           {#each sessions as row (row.id)}
             <tr>
-              <td>{row.userAgent}</td>
+              <td title={row.userAgent}>{getReadableName(row.userAgent)}</td>
               <td title={row.created.toLocaleString()}>{row.created.toLocaleDateString()}</td>
 
               <!--