feat: continued with pad link functionality

Author: SamTV12345

src/static/js/scroll.ts

@@ -16,7 +16,6 @@ class Scroll {
     this.outerWin = outerWin;
     this.doc = this.outerWin.contentDocument!;
     this.rootDocument = document;
-    console.log(this.rootDocument)
   }
 
   scrollWhenCaretIsInTheLastLineOfViewportWhenNecessary(rep: RepModel, isScrollableEvent: boolean, innerHeight: number) {

src/static/skins/colibris/index.css

@@ -167,16 +167,44 @@ body nav {
   max-width: 56rem;
 }
 
+.break-column {
+  flex-basis: 100%;
+  width: 0;
+}
+
 ul {
   list-style-type: none;
 }
 
+.recent-pad {
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  position: relative;
+  flex-direction: column;
+}
+
+.recent-pad:hover a {
+  color: var(--ep-color);
+}
+
+.recent-pad-arrow {
+  position: absolute;
+  right: 1rem;
+}
+
+.recent-pad a {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 800;
+}
+
+a, a:visited, a:hover, a:active {
+  color: inherit;
+}
+
 .pad-datalist h2 {
   border-bottom: 1px solid var(--muted-border);
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+  padding: 1rem 1.5rem;
   border-bottom-width: 1px;
   border-bottom-style: solid;
   border-bottom-color: #e5e7eb;

src/static/skins/colibris/index.js

@@ -19,7 +19,7 @@ window.customStart = () => {
     parentStyle.display = 'flex';
     parentStyle.justifyContent = 'center';
     parentStyle.alignItems = 'center';
-    parentStyle.height = '100%';
+    parentStyle.maxHeight = '100%';
     recentPadList.remove();
   } else {
     /**
@@ -30,15 +30,79 @@ window.customStart = () => {
     /**
      * @param {Pad} pad
      */
+
+    const arrowIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-4 h-4 text-gray-400"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>';
+    const clockIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-clock w-3 h-3"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>';
+    const personalIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users w-3 h-3"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>';
     recentPadListData.forEach((pad) => {
       const li = document.createElement('li');
+
+
+      li.style.cursor = 'pointer';
+
       li.className = 'recent-pad';
       const padPath = `${window.location.href}p/${pad.name}`;
       const link = document.createElement('a');
+      link.style.textDecoration = 'none';
+
       link.href = padPath;
-      link.innerText = pad;
+      link.innerText = pad.name;
       li.appendChild(link);
-      //https://v0.dev/chat/etherpad-design-clone-qZnwOrVRXxH
+
+
+      const arrowIconElement = document.createElement('span');
+      arrowIconElement.className = 'recent-pad-arrow';
+      arrowIconElement.innerHTML = arrowIcon;
+      li.appendChild(arrowIconElement);
+
+      const nextRow = document.createElement('div');
+
+      nextRow.style.display = 'flex';
+      nextRow.style.gap = '10px';
+      nextRow.style.marginTop = '10px';
+
+      const clockIconElement = document.createElement('span');
+      clockIconElement.className = 'recent-pad-clock';
+      clockIconElement.innerHTML = clockIcon;
+
+      nextRow.appendChild(clockIconElement);
+
+      const time = new Date(pad.timestamp);
+      const userLocale = navigator.language || 'en-US';
+
+      const formattedTime = time.toLocaleDateString(userLocale, {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+      const timeElement = document.createElement('span');
+      timeElement.className = 'recent-pad-time';
+      timeElement.innerText = formattedTime;
+
+      nextRow.appendChild(timeElement);
+
+      const personalIconElement = document.createElement('span');
+      personalIconElement.className = 'recent-pad-personal';
+      personalIconElement.innerHTML = personalIcon;
+
+      personalIconElement.style.marginLeft = '5px';
+
+      const members = document.createElement('span');
+      members.className = 'recent-pad-members';
+      members.innerText = pad.members;
+
+
+      nextRow.appendChild(personalIconElement);
+      nextRow.appendChild(members);
+      li.appendChild(nextRow);
+
+      li.addEventListener('click', () => {
+        window.location.href = padPath;
+      });
+
+      // https://v0.dev/chat/etherpad-design-clone-qZnwOrVRXxH
       recentPadList.appendChild(li);
     });
   }

src/static/skins/colibris/pad.js

@@ -12,11 +12,22 @@ window.customStart = () => {
     localStorage.setItem('recentPads', JSON.stringify([]));
   }
   const recentPadsList = JSON.parse(localStorage.getItem('recentPads'));
-  if (!recentPadsList.includes(padName)) {
+  if (!recentPadsList.some((pad) => pad.name === padName)) {
     if (recentPadsList.length >= 10) {
       recentPadsList.shift(); // Remove the oldest pad if we have more than 10
     }
-    recentPadsList.push(padName);
+    recentPadsList.push({
+      name: padName,
+      timestamp: new Date().toISOString(), // Store the timestamp for sorting
+      members: 0,
+    });
+    localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
+  } else {
+    // Update the timestamp if the pad already exists
+    const existingPad = recentPadsList.find((pad) => pad.name === padName);
+    if (existingPad) {
+      existingPad.timestamp = new Date().toISOString();
+    }
     localStorage.setItem('recentPads', JSON.stringify(recentPadsList));
   }
 };

src/templates/pad.html

@@ -164,7 +164,7 @@ <h2 data-l10n-id="pad.settings.myView"></h2>
             </p>
             <% e.end_block(); %>
           </div>
-          <button data-l10n-id="pad.settings.delete" id="delete-pad">Delete pad</button>
+          <button data-l10n-id="pad.settings.deletePad" id="delete-pad">Delete pad</button>
           <h2 data-l10n-id="pad.settings.about">About</h2>
           <span data-l10n-id="pad.settings.poweredBy">Powered by</span>
           <a href="https://etherpad.org" target="_blank" referrerpolicy="no-referrer" rel="noopener">Etherpad</a>