fix(colibris): keep recent pad names readable, encode only navigation URL (#7865)

Author: kishansomaiya

src/static/js/pad_userlist.ts

@@ -23,6 +23,14 @@ const chat = require('./chat').chat;
 import html10n from './vendors/html10n';
 let myUserInfo = {};
 
+const decodePadSegment = (segment: string): string => {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+};
+
 let colorPickerOpen = false;
 let colorPickerSetup = false;
 
@@ -557,7 +565,7 @@ const paduserlist = (() => {
       if (localStorage.getItem('recentPads') != null) {
         const recentPadsList = JSON.parse(localStorage.getItem('recentPads'));
         const pathSegments = window.location.pathname.split('/');
-        const padName = pathSegments[pathSegments.length - 1];
+        const padName = decodePadSegment(pathSegments[pathSegments.length - 1]);
         const existingPad = recentPadsList.find((pad) => pad.name === padName);
         if (existingPad) {
           existingPad.members = online;

src/static/skins/colibris/index.js

@@ -1,5 +1,13 @@
 'use strict';
 
+const decodePadName = (name) => {
+  try {
+    return decodeURIComponent(name);
+  } catch {
+    return name;
+  }
+};
+
 window.addEventListener('pageshow', (event) => {
   if (event.persisted) {
     if (document.readyState === 'complete' || document.readyState === 'interactive') {
@@ -37,6 +45,13 @@ window.customStart = () => {
     recentPadListData = JSON.parse(recentPadsFromLocalStorage);
   }
 
+  // Normalize older entries that stored encoded names (e.g. Test%2F123).
+  recentPadListData = recentPadListData.map((pad) => ({
+    ...pad,
+    name: decodePadName(String(pad.name ?? '')),
+  }));
+  localStorage.setItem('recentPads', JSON.stringify(recentPadListData));
+
   // Remove duplicates based on pad name and sort by timestamp
   recentPadListData = recentPadListData.filter(
       (pad, index, self) => index === self.findIndex((p) => p.name === pad.name)
@@ -70,7 +85,7 @@ window.customStart = () => {
       li.style.cursor = 'pointer';
 
       li.className = 'recent-pad';
-      const padPath = `${window.location.href}p/${pad.name}`;
+      const padPath = `${window.location.href}p/${encodeURIComponent(pad.name)}`;
       const link = document.createElement('a');
       link.style.textDecoration = 'none';
 

src/static/skins/colibris/pad.js

@@ -1,14 +1,21 @@
 'use strict';
 
 const MAX_PADS_IN_HISTORY = 3;
+const decodePadSegment = (segment) => {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+};
 
 window.customStart = () => {
   $('#pad_title').show();
   $('.buttonicon').on('mousedown', function () { $(this).parent().addClass('pressed'); });
   $('.buttonicon').on('mouseup', function () { $(this).parent().removeClass('pressed'); });
 
   const pathSegments = window.location.pathname.split('/');
-  const padName = pathSegments[pathSegments.length - 1];
+  const padName = decodePadSegment(pathSegments[pathSegments.length - 1]);
   const recentPads = localStorage.getItem('recentPads');
   if (recentPads == null) {
     localStorage.setItem('recentPads', JSON.stringify([]));