feat: started with recent pads implementation

src/locales/de.json

@@ -54,6 +54,8 @@
 	"index.newPad": "Neues Pad",
 	"index.createOpenPad": "oder ein Pad mit folgendem Namen erstellen/öffnen:",
 	"index.openPad": "Öffne ein vorhandenes Pad mit folgendem Namen:",
+  "index.recentPads": "Zuletzt bearbeitete Pads",
+  "index.recentPadsEmpty": "Keine kürzlich bearbeiteten Pads gefunden.",
 	"pad.toolbar.bold.title": "Fett (Strg-B)",
 	"pad.toolbar.italic.title": "Kursiv (Strg-I)",
 	"pad.toolbar.underline.title": "Unterstrichen (Strg-U)",

src/locales/en.json

@@ -36,6 +36,9 @@
   "index.newPad": "New Pad",
   "index.createOpenPad": "or create/open a Pad with the name:",
   "index.openPad": "open an existing Pad with the name:",
+  "index.recentPads": "Recent Pads",
+  "index.recentPadsEmpty": "No recent pads found.",
+
 
   "pad.toolbar.bold.title": "Bold (Ctrl+B)",
   "pad.toolbar.italic.title": "Italic (Ctrl+I)",

src/static/js/l10n.ts

@@ -7,8 +7,6 @@ let language = document.cookie.match(/language=((\w{2,3})(-\w+)?)/);
 if (language) regexpLang = language[1];
 
 html10n.mt.bind('indexed', () => {
-  console.log('Navigator language', navigator.language)
-  console.log('Localizing things', [regexpLang, navigator.language, 'en'])
   html10n.localize([regexpLang, navigator.language, 'en']);
 });
 

src/static/js/vendors/html10n.ts

@@ -472,7 +472,6 @@ export class Html10n {
   }
 
   localize(langs: (string|undefined)[]|string) {
-    console.log('Available langs ', langs)
     if ('string' === typeof langs) {
       langs = [langs];
     }

src/static/skins/colibris/index.css

@@ -16,6 +16,16 @@ body {
   background-size: cover;
 }
 
+
+.pad-datalist {
+  position: absolute;
+  top: 110%;
+  background-color: #586a69;
+  border-radius: 3px;
+  min-height: 200px;
+  width: 350px;
+}
+
 #wrapper {
   border-top: none;
   margin-top: 0;
@@ -35,6 +45,7 @@ input {
   max-width: 350px;
   text-align: center;
   color:#FFF;
+  position: relative;
 }
 
 #label {
@@ -85,4 +96,4 @@ button[type=submit]:hover {
   max-width: 350px;
   padding: 0 12px;
   position: relative;
-}
+}

src/static/skins/colibris/index.js

@@ -1,7 +1,41 @@
 'use strict';
 
+
 window.customStart = () => {
   // define your javascript here
   // jquery is available - except index.js
   // you can load extra scripts with $.getScript http://api.jquery.com/jQuery.getScript/
+  const recentPadList = document.getElementById('recent-pads');
+  const parentStyle = recentPadList.parentElement.style;
+  const recentPadListHeading = document.querySelector('[data-l10n-id="index.recentPads"]');
+  const recentPadsFromLocalStorage = localStorage.getItem('recent-pads');
+  let recentPadListData = [];
+  if (recentPadsFromLocalStorage != null) {
+    recentPadListData = JSON.parse(recentPadsFromLocalStorage);
+  }
+
+  if (recentPadListData.length === 0) {
+    recentPadListHeading.setAttribute('data-l10n-id', 'index.recentPadsEmpty');
+    parentStyle.display = 'flex';
+    parentStyle.justifyContent = 'center';
+    parentStyle.alignItems = 'center';
+    parentStyle.height = '100%';
+    recentPadList.remove();
+  } else {
+    /**
+     * @typedef {Object} Pad
+     * @property {string} name
+     */
+
+    /**
+     * @param {Pad} pad
+     */
+    recentPadListData.forEach((pad) => {
+      const li = document.createElement('li');
+      li.className = 'recent-pad';
+      const padPath = `${window.location.href}p/${pad.name}`;
+      li.innerHTML = `<a href="${padPath}">${pad}</a>`;
+      recentPadList.appendChild(li);
+    });
+  }
 };

src/static/skins/colibris/pad.js

@@ -4,4 +4,9 @@ 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('/').filter(Boolean);
+  const lastSegment = pathSegments[pathSegments.length - 1];
+  const padName = window.location.href
+
 };

src/templates/index.html

@@ -145,6 +145,11 @@
                         <input type="text" id="padname" maxlength="50" autofocus x-webkit-speech>
                         <button type="submit">OK</button>
                     </form>
+                    <div class="pad-datalist">
+                      <h3 data-l10n-id="index.recentPads"></h3>
+                        <ul id="recent-pads">
+                        </ul>
+                    </div>
                 <% } %>
             </div>
         <% e.end_block(); %>