From ff738b643d24dfa7302f6857b45710109f61660a Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Fri, 10 Oct 2025 11:06:05 -0700
Subject: [PATCH] Feat: Add link editing sidebar with delete/update

---
 dash.html | 218 +++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 143 insertions(+), 75 deletions(-)
diff --git a/dash.html b/dash.html
index b4f2653..c476595 100644
--- a/dash.html
+++ b/dash.html
@@ -13,7 +13,7 @@
 <body class="bg-slate-50 text-slate-800 font-sans">
     <script>if (!localStorage.getItem('username')) window.location.href = '/';</script>
 
-    <div x-data="{ user: localStorage.getItem('username') }" class="min-h-screen flex flex-col">
+    <div x-data="{ user: localStorage.getItem('username'), sidebarOpen: false, editingSlug: null }" class="min-h-screen flex flex-col">
         <header class="bg-white/80 backdrop-blur-sm border-b border-slate-200 sticky top-0 z-10">
             <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
                 <div class="flex items-center justify-between h-16">
@@ -22,6 +22,9 @@
                     </a>
                     <div class="flex items-center gap-4">
                         <span class="text-slate-600">Welcome, <strong x-text="user"></strong></span>
+                        <button @click="sidebarOpen = !sidebarOpen" class="text-slate-500 hover:text-slate-900 transition-colors">
+                            <i data-lucide="panel-right" class="w-5 h-5"></i>
+                        </button>
                         <button @click="localStorage.clear(); window.location.href='/'" class="text-sm font-semibold text-slate-500 hover:text-slate-900 transition-colors">
                             Logout
                         </button>
@@ -30,92 +33,157 @@
             </div>
         </header>
 
-        <main class="flex-grow">
-            <div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
-                <div class="max-w-2xl mx-auto">
-                    <div x-data="linkForm()" class="bg-white p-8 rounded-xl shadow-sm border border-slate-200">
-                        <h1 class="text-2xl font-bold mb-1">Create a new link</h1>
-                        <p class="text-slate-500 mb-6">Shorten a long URL into a memorable link.</p>
+        <div class="flex-grow flex relative">
+            <main class="flex-grow">
+                <div class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
+                    <div class="max-w-2xl mx-auto">
+                        <div x-data="linkForm()" class="bg-white p-8 rounded-xl shadow-sm border border-slate-200">
+                            <template x-if="!$root.editingSlug">
+                                <div>
+                                    <h1 class="text-2xl font-bold mb-1">Create a new link</h1>
+                                    <p class="text-slate-500 mb-6">Shorten a long URL into a memorable link.</p>
 
-                        <template x-if="result.url">
-                            <div class="bg-green-100 border border-green-300 text-green-800 p-3.5 rounded-md mb-6" role="alert">
-                                <p class="font-semibold">Success! Your link is ready:</p>
-                                <div class="flex items-center gap-2 mt-2">
-                                    <a :href="result.url" x-text="result.url" target="_blank" class="font-mono text-slate-700 hover:underline"></a>
-                                    <button @click="navigator.clipboard.writeText(result.url); copied = true; setTimeout(() => copied = false, 2000)" class="text-slate-500 hover:text-slate-900">
-                                        <i data-lucide="copy" class="w-4 h-4" x-show="!copied"></i>
-                                        <i data-lucide="check" class="w-4 h-4 text-green-600" x-show="copied" style="display: none;"></i>
-                                    </button>
-                                </div>
-                            </div>
-                        </template>
-                        
-                        <form @submit.prevent="createLink" class="space-y-4">
-                            <div>
-                                <label for="longUrl" class="block text-sm font-medium text-slate-700 mb-1">Destination URL</label>
-                                <input x-model="destination_url" type="text" id="longUrl" placeholder="example.com/very-long-url-to-shorten" required class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
-                            </div>
-                            <div>
-                                <label for="customSlug" class="block text-sm font-medium text-slate-700 mb-1">Custom slug (optional)</label>
-                                <div class="flex items-center">
-                                    <span class="p-3 bg-slate-100 border border-r-0 border-slate-300 rounded-l-md text-slate-500">4ev.link/</span>
-                                    <input x-model="slug" type="text" id="customSlug" placeholder="my-custom-link" class="w-full p-3 bg-slate-50 border border-slate-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
-                                </div>
-                            </div>
-                            <div class="g-recaptcha my-4 flex justify-center" data-sitekey="6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"></div>
-                            <p x-text="error" x-show="error" class="text-rose-500 text-sm h-5 -mt-2 text-center"></p>
-                            <button type="submit" :disabled="loading" class="w-full py-3 font-semibold rounded-lg text-white bg-slate-800 hover:bg-slate-900 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed">
-                                <span x-show="!loading">Create Short Link</span>
-                                <i x-show="loading" data-lucide="loader-2" class="animate-spin w-6 h-6"></i>
-                            </button>
-                            <p class="text-xs text-slate-500 text-center pt-2">Links are permanent and do not expire.</p>
-                        </form>
-                    </div>
-                </div>
-
-                <div class="max-w-2xl mx-auto mt-12" x-data="linkList()" x-init="fetchLinks()" @link-created.window="fetchLinks()">
-                    <h2 class="text-2xl font-bold mb-4">Your Links</h2>
-                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 min-h-[10rem] flex flex-col justify-center">
-                        <template x-if="loading">
-                            <div class="flex justify-center items-center p-8">
-                                <i data-lucide="loader-2" class="animate-spin w-8 h-8 text-slate-400"></i>
-                            </div>
-                        </template>
-                        <template x-if="!loading && error">
-                            <p class="text-rose-500 text-center" x-text="error"></p>
-                        </template>
-                        <template x-if="!loading && !error">
-                            <div>
-                                <template x-if="links.length === 0">
-                                    <p class="text-slate-500 text-center py-4">You haven't created any links yet.</p>
-                                </template>
-                                <template x-if="links.length > 0">
-                                    <ul class="space-y-3">
-                                        <template x-for="slug in links" :key="slug">
-                                            <li x-data="{ copied: false }" class="flex items-center justify-between p-3 bg-slate-50 rounded-md border border-slate-200 hover:bg-slate-100 transition-colors">
-                                                <a :href="`/${slug}`" target="_blank" x-text="`${window.location.host}/${slug}`" class="font-mono text-slate-700 hover:underline"></a>
-                                                <button @click="navigator.clipboard.writeText(`https://${window.location.host}/${slug}`); copied = true; setTimeout(() => copied = false, 2000)" class="text-slate-500 hover:text-slate-900 transition-colors">
+                                    <template x-if="result.url">
+                                        <div class="bg-green-100 border border-green-300 text-green-800 p-3.5 rounded-md mb-6" role="alert">
+                                            <p class="font-semibold">Success! Your link is ready:</p>
+                                            <div class="flex items-center gap-2 mt-2">
+                                                <a :href="result.url" x-text="result.url" target="_blank" class="font-mono text-slate-700 hover:underline"></a>
+                                                <button @click="navigator.clipboard.writeText(result.url); copied = true; setTimeout(() => copied = false, 2000)" class="text-slate-500 hover:text-slate-900">
                                                     <i data-lucide="copy" class="w-4 h-4" x-show="!copied"></i>
                                                     <i data-lucide="check" class="w-4 h-4 text-green-600" x-show="copied" style="display: none;"></i>
                                                 </button>
-                                            </li>
-                                        </template>
-                                    </ul>
-                                </template>
-                            </div>
-                        </template>
+                                            </div>
+                                        </div>
+                                    </template>
+                                    
+                                    <form @submit.prevent="createLink" class="space-y-4">
+                                        <div>
+                                            <label for="longUrl" class="block text-sm font-medium text-slate-700 mb-1">Destination URL</label>
+                                            <input x-model="destination_url" type="text" id="longUrl" placeholder="example.com/very-long-url-to-shorten" required class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
+                                        </div>
+                                        <div>
+                                            <label for="customSlug" class="block text-sm font-medium text-slate-700 mb-1">Custom slug (optional)</label>
+                                            <div class="flex items-center">
+                                                <span class="p-3 bg-slate-100 border border-r-0 border-slate-300 rounded-l-md text-slate-500">4ev.link/</span>
+                                                <input x-model="slug" type="text" id="customSlug" placeholder="my-custom-link" class="w-full p-3 bg-slate-50 border border-slate-300 rounded-r-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
+                                            </div>
+                                        </div>
+                                        <div class="g-recaptcha my-4 flex justify-center" data-sitekey="6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"></div>
+                                        <p x-text="error" x-show="error" class="text-rose-500 text-sm h-5 -mt-2 text-center"></p>
+                                        <button type="submit" :disabled="loading" class="w-full py-3 font-semibold rounded-lg text-white bg-slate-800 hover:bg-slate-900 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed">
+                                            <span x-show="!loading">Create Short Link</span>
+                                            <i x-show="loading" data-lucide="loader-2" class="animate-spin w-6 h-6"></i>
+                                        </button>
+                                        <p class="text-xs text-slate-500 text-center pt-2">Links are permanent and do not expire.</p>
+                                    </form>
+                                </div>
+                            </template>
+
+                            <template x-if="$root.editingSlug">
+                                <div x-data="editForm()">
+                                    <button @click="$root.editingSlug = null" class="text-slate-500 hover:text-slate-900 mb-4 flex items-center gap-1">
+                                        <i data-lucide="arrow-left" class="w-4 h-4"></i> Back
+                                    </button>
+                                    <h1 class="text-2xl font-bold mb-1">Edit link</h1>
+                                    <p class="text-slate-500 mb-6 font-mono" x-text="'4ev.link/' + $root.editingSlug"></p>
+
+                                    <form @submit.prevent="updateLink" class="space-y-4">
+                                        <div>
+                                            <label for="editUrl" class="block text-sm font-medium text-slate-700 mb-1">Destination URL</label>
+                                            <input x-model="destination_url" type="text" id="editUrl" placeholder="example.com/new-destination" required class="w-full p-3 bg-slate-50 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-400 focus:border-slate-400 transition">
+                                        </div>
+                                        <div class="g-recaptcha my-4 flex justify-center" data-sitekey="6LeXhdYrAAAAALW6DdgxNeHU0kwBncdicLnVYvXT"></div>
+                                        <p x-text="error" x-show="error" class="text-rose-500 text-sm h-5 -mt-2 text-center"></p>
+                                        <div class="flex gap-3">
+                                            <button type="submit" :disabled="loading" class="flex-1 py-3 font-semibold rounded-lg text-white bg-slate-800 hover:bg-slate-900 transition-colors flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed">
+                                                <span x-show="!loading">Update</span>
+                                                <i x-show="loading" data-lucide="loader-2" class="animate-spin w-6 h-6"></i>
+                                            </button>
+                                            <button type="button" @click="deleteLink" :disabled="loading" class="px-6 py-3 font-semibold rounded-lg text-white bg-rose-600 hover:bg-rose-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                                                Delete
+                                            </button>
+                                        </div>
+                                    </form>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+
+                    <div class="max-w-2xl mx-auto mt-12" x-data="linkList()" x-init="fetchLinks()" @link-created.window="fetchLinks()" x-show="!$root.editingSlug">
+                        <h2 class="text-2xl font-bold mb-4">Your Links</h2>
+                        <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-200 min-h-[10rem] flex flex-col justify-center">
+                            <template x-if="loading">
+                                <div class="flex justify-center items-center p-8">
+                                    <i data-lucide="loader-2" class="animate-spin w-8 h-8 text-slate-400"></i>
+                                </div>
+                            </template>
+                            <template x-if="!loading && error">
+                                <p class="text-rose-500 text-center" x-text="error"></p>
+                            </template>
+                            <template x-if="!loading && !error">
+                                <div>
+                                    <template x-if="links.length === 0">
+                                        <p class="text-slate-500 text-center py-4">You haven't created any links yet.</p>
+                                    </template>
+                                    <template x-if="links.length > 0">
+                                        <ul class="space-y-3">
+                                            <template x-for="slug in links" :key="slug">
+                                                <li x-data="{ copied: false }" class="flex items-center justify-between p-3 bg-slate-50 rounded-md border border-slate-200 hover:bg-slate-100 transition-colors">
+                                                    <a :href="`/${slug}`" target="_blank" x-text="`${window.location.host}/${slug}`" class="font-mono text-slate-700 hover:underline"></a>
+                                                    <button @click="navigator.clipboard.writeText(`https://${window.location.host}/${slug}`); copied = true; setTimeout(() => copied = false, 2000)" class="text-slate-500 hover:text-slate-900 transition-colors">
+                                                        <i data-lucide="copy" class="w-4 h-4" x-show="!copied"></i>
+                                                        <i data-lucide="check" class="w-4 h-4 text-green-600" x-show="copied" style="display: none;"></i>
+                                                    </button>
+                                                </li>
+                                            </template>
+                                        </ul>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
                     </div>
                 </div>
-            </div>
-        </main>
+            </main>
+
+            <aside x-show="sidebarOpen" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform translate-x-full" class="fixed right-0 top-16 bottom-0 w-80 bg-white border-l border-slate-200 shadow-lg z-20 overflow-y-auto" style="display: none;">
+                <div x-data="sidebarLinks()" x-init="fetchLinks()" @link-created.window="fetchLinks()" class="p-4">
+                    <div class="flex items-center justify-between mb-4">
+                        <h3 class="font-bold text-lg">Your Links</h3>
+                        <button @click="$root.sidebarOpen = false" class="text-slate-500 hover:text-slate-900">
+                            <i data-lucide="x" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <template x-if="loading">
+                        <div class="flex justify-center p-8">
+                            <i data-lucide="loader-2" class="animate-spin w-6 h-6 text-slate-400"></i>
+                        </div>
+                    </template>
+                    <template x-if="!loading && error">
+                        <p class="text-rose-500 text-sm text-center" x-text="error"></p>
+                    </template>
+                    <template x-if="!loading && !error && links.length === 0">
+                        <p class="text-slate-500 text-sm text-center py-8">No links yet</p>
+                    </template>
+                    <template x-if="!loading && !error && links.length > 0">
+                        <ul class="space-y-2">
+                            <template x-for="slug in links" :key="slug">
+                                <li>
+                                    <button @click="$root.editingSlug = slug; $root.sidebarOpen = false" class="w-full text-left p-3 bg-slate-50 hover:bg-slate-100 rounded-md border border-slate-200 transition-colors font-mono text-sm" x-text="slug"></button>
+                                </li>
+                            </template>
+                        </ul>
+                    </template>
+                </div>
+            </aside>
+        </div>
     </div>
 
     <script>
         function linkForm(){return{destination_url:"",slug:"",loading:!1,error:"",result:{},copied:!1,async createLink(){this.loading=!0,this.error="",this.result={};const o=grecaptcha.getResponse();if(!o)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error. Please log in again.");const t=await fetch("/api/links/create",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({destination_url:this.destination_url,slug:this.slug||null,username:e,pass_hash:s,"g-recaptcha-response":o})});if(!t.ok)throw new Error(await t.text()||"Failed to create link.");const i=await t.json(),r=window.location.host;this.result={...i,url:`https://${r}/${i.slug}`},this.destination_url="",this.slug="",this.$dispatch("link-created"),this.$nextTick(()=>lucide.createIcons())}catch(e){this.error=e.message}finally{this.loading=!1,grecaptcha.reset()}}}}
         function linkList(){return{links:[],loading:!0,error:"",async fetchLinks(){this.loading=!0,this.error="";try{const e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=await fetch("/api/links/list",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:e,pass_hash:s})});if(!t.ok)throw new Error(await t.text()||"Failed to fetch links.");this.links=(await t.json()).reverse()}catch(e){this.error=e.message}finally{this.loading=!1,this.$nextTick(()=>lucide.createIcons())}}}}
+        function sidebarLinks(){return{links:[],loading:!0,error:"",async fetchLinks(){this.loading=!0,this.error="";try{const e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=await fetch("/api/links/list",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({username:e,pass_hash:s})});if(!t.ok)throw new Error(await t.text()||"Failed to fetch links.");this.links=(await t.json()).reverse()}catch(e){this.error=e.message}finally{this.loading=!1,this.$nextTick(()=>lucide.createIcons())}}}}
+        function editForm(){return{destination_url:"",loading:!1,error:"",async init(){await this.loadCurrentUrl()},async loadCurrentUrl(){try{const e=await fetch(`/api/links/get?slug=${this.$root.editingSlug}`);if(!e.ok)throw new Error("Failed to load link");const s=await e.json();this.destination_url=s.destination_url.startsWith("http")?s.destination_url:`https://${s.destination_url}`}catch(e){this.error=e.message}},async updateLink(){this.loading=!0,this.error="";const o=grecaptcha.getResponse();if(!o)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=await fetch("/api/links/update",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:this.$root.editingSlug,destination_url:this.destination_url,username:e,pass_hash:s,"g-recaptcha-response":o})});if(!t.ok)throw new Error(await t.text()||"Failed to update link.");this.$root.editingSlug=null,this.$dispatch("link-created")}catch(e){this.error=e.message}finally{this.loading=!1,grecaptcha.reset()}},async deleteLink(){if(!confirm("Are you sure you want to delete this link?"))return;this.loading=!0,this.error="";const o=grecaptcha.getResponse();if(!o)return this.error="Please complete the CAPTCHA.",this.loading=!1,void 0;try{const e=localStorage.getItem("username"),s=localStorage.getItem("pass_hash");if(!e||!s)throw new Error("Authentication error.");const t=await fetch("/api/links/delete",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({slug:this.$root.editingSlug,username:e,pass_hash:s,"g-recaptcha-response":o})});if(!t.ok)throw new Error(await t.text()||"Failed to delete link.");this.$root.editingSlug=null,this.$dispatch("link-created")}catch(e){this.error=e.message}finally{this.loading=!1,grecaptcha.reset()}}}}
         lucide.createIcons();
     </script>
 </body>
 </html>
-
-
