Fix link saving and polish link UI

index.html

@@ -149,6 +149,21 @@
                         </div>
                     </section>
 
+                    <section class="links-insights">
+                        <div class="links-note-chip">
+                            <i class="ph-fill ph-globe-hemisphere-west"></i>
+                            <span>Save articles, dashboards, and internal tools</span>
+                        </div>
+                        <div class="links-note-chip">
+                            <i class="ph-fill ph-lightning"></i>
+                            <span>Open, copy, edit, and clean up links quickly</span>
+                        </div>
+                        <div class="links-note-chip">
+                            <i class="ph-fill ph-note-pencil"></i>
+                            <span>Keep notes next to each saved website</span>
+                        </div>
+                    </section>
+
                     <section id="linksSection">
                         <div class="section-header">
                             <h2>Your Links</h2>
@@ -216,6 +231,7 @@
             <div class="input-group">
                 <label class="input-label">URL *</label>
                 <input type="url" id="linkUrlInput" placeholder="https://example.com" autocomplete="off">
+                <p class="input-help">You can paste `hf.com` or a full `https://...` link.</p>
             </div>
             <div class="input-group">
                 <label class="input-label">Title</label>
@@ -225,7 +241,17 @@
                 <label class="input-label">Description</label>
                 <textarea id="linkDescriptionInput" placeholder="Add notes about this link..." rows="3"></textarea>
             </div>
+            <div class="link-preview-panel" id="linkPreviewPanel">
+                <div class="link-preview-icon">
+                    <i class="ph-fill ph-globe"></i>
+                </div>
+                <div class="link-preview-content">
+                    <strong id="linkPreviewTitle">Website preview</strong>
+                    <span id="linkPreviewUrl">A normalized URL preview will appear here.</span>
+                </div>
+            </div>
             <div class="modal-footer">
+                <span class="shortcut-hint">Ctrl/Cmd + Enter to save</span>
                 <button class="btn-secondary" id="cancelLinkBtn">Cancel</button>
                 <button class="btn-primary" id="confirmLinkBtn"><i class="ph-fill ph-check"></i> Save Link</button>
             </div>
@@ -269,6 +295,6 @@
     <script>
         window.__DOCVAULT_REMOTE_API_BASE__ = 'https://mohsin-devs-docvault.hf.space/api';
     </script>
-    <script type="module" src="js/main.js?v=8"></script>
+    <script type="module" src="js/main.js?v=9"></script>
 </body>
 </html>

js/main.js

@@ -198,6 +198,8 @@ class App {
     document.getElementById('linkUrlInput').addEventListener('keydown', (e) => {
       if (e.key === 'Enter') document.getElementById('linkTitleInput').focus();
     });
+    document.getElementById('linkUrlInput').addEventListener('input', () => this.updateLinkPreview());
+    document.getElementById('linkTitleInput').addEventListener('input', () => this.updateLinkPreview());
 
     document.getElementById('linkDescriptionInput').addEventListener('keydown', (e) => {
       if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
@@ -350,6 +352,51 @@ class App {
     return new Date(value).toLocaleDateString();
   }
 
+  parseUrl(url) {
+    if (!url) return null;
+    try {
+      return new URL(this.normalizeUrl(url));
+    } catch (err) {
+      return null;
+    }
+  }
+
+  getLinkHostname(url) {
+    const parsed = this.parseUrl(url);
+    if (!parsed) return 'Unknown host';
+    return parsed.hostname.replace(/^www\./, '');
+  }
+
+  updateLinkPreview() {
+    const rawUrl = document.getElementById('linkUrlInput')?.value.trim() || '';
+    const rawTitle = document.getElementById('linkTitleInput')?.value.trim() || '';
+    const previewTitle = document.getElementById('linkPreviewTitle');
+    const previewUrl = document.getElementById('linkPreviewUrl');
+    const previewPanel = document.getElementById('linkPreviewPanel');
+    if (!previewTitle || !previewUrl || !previewPanel) return;
+
+    const parsed = this.parseUrl(rawUrl);
+    if (!rawUrl) {
+      previewPanel.classList.remove('is-valid', 'is-invalid');
+      previewTitle.textContent = 'Website preview';
+      previewUrl.textContent = 'A normalized URL preview will appear here.';
+      return;
+    }
+
+    if (!parsed) {
+      previewPanel.classList.remove('is-valid');
+      previewPanel.classList.add('is-invalid');
+      previewTitle.textContent = rawTitle || 'Invalid link';
+      previewUrl.textContent = 'Enter a valid website like https://example.com';
+      return;
+    }
+
+    previewPanel.classList.remove('is-invalid');
+    previewPanel.classList.add('is-valid');
+    previewTitle.textContent = rawTitle || this.getLinkHostname(parsed.href);
+    previewUrl.textContent = parsed.href;
+  }
+
   buildStarredDisplayFiles() {
     const cachedByPath = new Map(this.state.cachedFiles.map((file) => [file.path, file]));
     const recentByPath = new Map(this.state.recent.map((file) => [file.path, file]));
@@ -494,7 +541,10 @@ class App {
               <i class="ph-fill ph-link"></i>
             </div>
             <div class="link-card-content">
-              <div class="link-title">${this.escapeHtml(link.title || link.url)}</div>
+              <div class="link-card-topline">
+                <div class="link-title">${this.escapeHtml(link.title || link.url)}</div>
+                <span class="link-domain-badge">${this.escapeHtml(this.getLinkHostname(link.url))}</span>
+              </div>
               <a href="${this.escapeHtml(link.url)}" target="_blank" rel="noopener noreferrer" class="link-url" title="${this.escapeHtml(link.url)}">
                 ${this.escapeHtml(link.url)}
               </a>
@@ -949,6 +999,7 @@ class App {
     }
 
     modal.classList.add('active');
+    this.updateLinkPreview();
     setTimeout(() => document.getElementById('linkUrlInput').focus(), 50);
   }
 
@@ -958,12 +1009,13 @@ class App {
     const descriptionInput = document.getElementById('linkDescriptionInput');
     const confirmBtn = document.getElementById('confirmLinkBtn');
 
-    const url = this.normalizeUrl(urlInput.value.trim());
+    const parsedUrl = this.parseUrl(urlInput.value.trim());
+    const url = parsedUrl ? parsedUrl.href : '';
     const title = titleInput.value.trim();
     const description = descriptionInput.value.trim();
 
     if (!url) {
-      this.ui.showToast('URL is required', 'error');
+      this.ui.showToast('Enter a valid website URL', 'error');
       return;
     }
 

server/routes/api.py

@@ -1,6 +1,7 @@
 """API routes for DocVault."""
 
 import mimetypes
+from urllib.parse import urlparse
 
 import requests
 from flask import Blueprint, Response, jsonify, request, stream_with_context
@@ -30,6 +31,14 @@ def _storage():
     return get_storage()
 
 
+def _is_valid_http_url(value: str) -> bool:
+    try:
+        parsed = urlparse(value)
+    except Exception:
+        return False
+    return parsed.scheme in {"http", "https"} and bool(parsed.netloc)
+
+
 def _item_type(storage, user_id: str, path: str) -> str | None:
     if hasattr(storage, "get_item_type"):
         return storage.get_item_type(user_id, path)
@@ -288,8 +297,7 @@ def add_link():
         if not url:
             return jsonify({"success": False, "error": "url is required"}), 400
 
-        # Validate URL format
-        if not (url.startswith("http://") or url.startswith("https://")):
+        if not _is_valid_http_url(url):
             return jsonify({"success": False, "error": "Invalid URL format"}), 400
 
         if not title:
@@ -342,6 +350,8 @@ def update_link():
 
         if not link_id:
             return jsonify({"success": False, "error": "link_id is required"}), 400
+        if url and not _is_valid_http_url(url):
+            return jsonify({"success": False, "error": "Invalid URL format"}), 400
 
         result = _storage().update_link(user_id, link_id, url, title, description)
         return jsonify(result), 200 if result.get("success") else 400

server/storage/hf.py

@@ -2,7 +2,9 @@
 
 from __future__ import annotations
 
+import json
 import os
+import uuid
 from datetime import datetime, timezone
 from typing import Any, Dict, List
 
@@ -55,6 +57,50 @@ class HuggingFaceStorageManager(StorageInterface):
     def _timestamp(self) -> str:
         return datetime.now(timezone.utc).isoformat()
 
+    def _links_repo_path(self, user_id: str) -> str:
+        return self._user_repo_path(user_id, ".links/data.json")
+
+    def _load_links(self, user_id: str) -> List[Dict[str, Any]]:
+        links_repo_path = self._links_repo_path(user_id)
+        repo_files = self._list_repo_files()
+
+        if links_repo_path not in repo_files:
+            return []
+
+        try:
+            content_path = self.api.hf_hub_download(
+                repo_id=config.HF_REPO_ID,
+                filename=links_repo_path,
+                repo_type=config.HF_REPO_TYPE,
+            )
+            with open(content_path, "r", encoding="utf-8") as file_obj:
+                links = json.load(file_obj)
+        except Exception as exc:
+            logger.warning("Failed to load links: %s", exc)
+            return []
+
+        if not isinstance(links, list):
+            logger.warning("Links payload is not a list for user %s", user_id)
+            return []
+
+        return [link for link in links if isinstance(link, dict)]
+
+    def _save_links(
+        self, user_id: str, links: List[Dict[str, Any]], commit_message: str
+    ) -> None:
+        payload = json.dumps(links, indent=2, ensure_ascii=True).encode("utf-8")
+        self.api.create_commit(
+            repo_id=config.HF_REPO_ID,
+            repo_type=config.HF_REPO_TYPE,
+            operations=[
+                CommitOperationAdd(
+                    path_in_repo=self._links_repo_path(user_id),
+                    path_or_fileobj=payload,
+                )
+            ],
+            commit_message=commit_message,
+        )
+
     def _validate_relative_path(self, path: str, label: str = "path") -> str:
         normalized = PathValidator._normalize_relative_path(path)
         if not PathValidator.is_valid_path(normalized):
@@ -503,55 +549,23 @@ class HuggingFaceStorageManager(StorageInterface):
     def add_link(
         self, user_id: str, url: str, title: str, description: str = ""
     ) -> Dict[str, Any]:
-        import json
-        import uuid
-
         self._ensure_token()
 
         try:
-            # Get existing links
-            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
-            repo_files = self._list_repo_files()
-            
-            links = []
-            if links_repo_path in repo_files:
-                try:
-                    content = self.api.hf_hub_download(
-                        repo_id=config.HF_REPO_ID,
-                        filename=links_repo_path,
-                        repo_type=config.HF_REPO_TYPE,
-                    )
-                    with open(content, 'r') as f:
-                        links = json.load(f)
-                except Exception as e:
-                    logger.warning(f"Failed to load existing links: {e}")
-                    links = []
-
-            # Add new link
+            links = self._load_links(user_id)
             link_id = str(uuid.uuid4())
+            now = self._timestamp()
             new_link = {
                 "id": link_id,
                 "url": url,
                 "title": title,
                 "description": description,
-                "created_at": self._timestamp(),
-                "updated_at": self._timestamp(),
+                "created_at": now,
+                "updated_at": now,
             }
             links.append(new_link)
 
-            # Save links
-            operations = [
-                CommitOperationAdd(
-                    path_in_repo=links_repo_path,
-                    path_or_fileobj=json.dumps(links, indent=2),
-                )
-            ]
-            self.api.create_commit(
-                repo_id=config.HF_REPO_ID,
-                repo_type=config.HF_REPO_TYPE,
-                operations=operations,
-                commit_message=f"Add link: {title}",
-            )
+            self._save_links(user_id, links, f"Add link: {title}")
 
             return {
                 "success": True,
@@ -566,36 +580,11 @@ class HuggingFaceStorageManager(StorageInterface):
             }
 
     def get_links(self, user_id: str) -> Dict[str, Any]:
-        import json
-
         try:
-            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
-            repo_files = self._list_repo_files()
-            
-            if links_repo_path not in repo_files:
-                return {
-                    "success": True,
-                    "links": [],
-                }
-
-            try:
-                content = self.api.hf_hub_download(
-                    repo_id=config.HF_REPO_ID,
-                    filename=links_repo_path,
-                    repo_type=config.HF_REPO_TYPE,
-                )
-                with open(content, 'r') as f:
-                    links = json.load(f)
-                return {
-                    "success": True,
-                    "links": links,
-                }
-            except Exception as e:
-                logger.warning(f"Failed to load links: {e}")
-                return {
-                    "success": True,
-                    "links": [],
-                }
+            return {
+                "success": True,
+                "links": self._load_links(user_id),
+            }
         except Exception as exc:
             logger.error(f"get_links failed: {exc}", exc_info=True)
             return {
@@ -605,51 +594,24 @@ class HuggingFaceStorageManager(StorageInterface):
             }
 
     def delete_link(self, user_id: str, link_id: str) -> Dict[str, Any]:
-        import json
-
         self._ensure_token()
 
         try:
-            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
-            repo_files = self._list_repo_files()
-            
-            if links_repo_path not in repo_files:
+            links = self._load_links(user_id)
+            if not links:
                 return {
                     "success": False,
                     "error": "No links found",
                 }
 
-            try:
-                content = self.api.hf_hub_download(
-                    repo_id=config.HF_REPO_ID,
-                    filename=links_repo_path,
-                    repo_type=config.HF_REPO_TYPE,
-                )
-                with open(content, 'r') as f:
-                    links = json.load(f)
-            except Exception as e:
-                logger.warning(f"Failed to load links: {e}")
+            updated_links = [link for link in links if link.get("id") != link_id]
+            if len(updated_links) == len(links):
                 return {
                     "success": False,
-                    "error": "Failed to load links",
+                    "error": "Link not found",
                 }
 
-            # Remove link by ID
-            links = [link for link in links if link.get("id") != link_id]
-
-            # Save updated links
-            operations = [
-                CommitOperationAdd(
-                    path_in_repo=links_repo_path,
-                    path_or_fileobj=json.dumps(links, indent=2),
-                )
-            ]
-            self.api.create_commit(
-                repo_id=config.HF_REPO_ID,
-                repo_type=config.HF_REPO_TYPE,
-                operations=operations,
-                commit_message=f"Delete link: {link_id}",
-            )
+            self._save_links(user_id, updated_links, f"Delete link: {link_id}")
 
             return {
                 "success": True,
@@ -665,36 +627,15 @@ class HuggingFaceStorageManager(StorageInterface):
     def update_link(
         self, user_id: str, link_id: str, url: str = "", title: str = "", description: str = ""
     ) -> Dict[str, Any]:
-        import json
-
         self._ensure_token()
 
         try:
-            links_repo_path = self._user_repo_path(user_id, ".links/data.json")
-            repo_files = self._list_repo_files()
-            
-            if links_repo_path not in repo_files:
+            links = self._load_links(user_id)
+            if not links:
                 return {
                     "success": False,
                     "error": "No links found",
                 }
-
-            try:
-                content = self.api.hf_hub_download(
-                    repo_id=config.HF_REPO_ID,
-                    filename=links_repo_path,
-                    repo_type=config.HF_REPO_TYPE,
-                )
-                with open(content, 'r') as f:
-                    links = json.load(f)
-            except Exception as e:
-                logger.warning(f"Failed to load links: {e}")
-                return {
-                    "success": False,
-                    "error": "Failed to load links",
-                }
-
-            # Update link by ID
             updated = False
             for link in links:
                 if link.get("id") == link_id:
@@ -714,19 +655,7 @@ class HuggingFaceStorageManager(StorageInterface):
                     "error": "Link not found",
                 }
 
-            # Save updated links
-            operations = [
-                CommitOperationAdd(
-                    path_in_repo=links_repo_path,
-                    path_or_fileobj=json.dumps(links, indent=2),
-                )
-            ]
-            self.api.create_commit(
-                repo_id=config.HF_REPO_ID,
-                repo_type=config.HF_REPO_TYPE,
-                operations=operations,
-                commit_message=f"Update link: {link_id}",
-            )
+            self._save_links(user_id, links, f"Update link: {link_id}")
 
             return {
                 "success": True,

styles.css

@@ -497,6 +497,32 @@ body {
   gap: 16px;
 }
 
+.links-insights {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: -6px;
+}
+
+.links-note-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid var(--border-color);
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: var(--shadow-sm);
+}
+
+.links-note-chip i {
+  color: var(--primary-color);
+  font-size: 16px;
+}
+
 .links-stat-card,
 .links-search {
   background: var(--card);
@@ -546,6 +572,64 @@ body {
   color: var(--text-main);
 }
 
+.link-preview-panel {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
+  margin-bottom: 20px;
+  transition: all 0.2s ease;
+}
+
+.link-preview-panel.is-valid {
+  border-color: rgba(16, 185, 129, 0.35);
+  background: linear-gradient(180deg, #ecfdf5, #f0fdf4);
+}
+
+.link-preview-panel.is-invalid {
+  border-color: rgba(239, 68, 68, 0.35);
+  background: linear-gradient(180deg, #fef2f2, #fff7ed);
+}
+
+.link-preview-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: #ffffff;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  box-shadow: var(--shadow-sm);
+  flex-shrink: 0;
+}
+
+.link-preview-panel.is-invalid .link-preview-icon {
+  color: var(--danger-color);
+}
+
+.link-preview-content {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.link-preview-content strong {
+  font-size: 14px;
+  color: var(--text-main);
+}
+
+.link-preview-content span {
+  font-size: 12px;
+  color: var(--text-muted);
+  word-break: break-word;
+}
+
 /* ── SECTION HEADERS ── */
 .section-header {
   display: flex;
@@ -1040,6 +1124,13 @@ body {
   margin-bottom: 8px;
 }
 
+.input-help {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+
 .input-group input {
   width: 100%;
   padding: 12px 16px;
@@ -1061,9 +1152,17 @@ body {
 .modal-footer {
   display: flex;
   justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
   gap: 12px;
 }
 
+.shortcut-hint {
+  margin-right: auto;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
 /* ── BUTTONS ── */
 .btn-primary {
   padding: 10px 20px;
@@ -1641,6 +1740,9 @@ body {
   .links-hero h2 { font-size: 24px; }
   .links-toolbar { grid-template-columns: 1fr; }
   .links-stat-card strong { font-size: 22px; }
+  .links-note-chip { width: 100%; justify-content: center; }
+  .link-card-topline { flex-direction: column; }
+  .shortcut-hint { width: 100%; margin-right: 0; }
   
   /* Mobile Menu Toggle */
   .menu-toggle {
@@ -1816,6 +1918,14 @@ body {
   min-width: 0;
 }
 
+.link-card-topline {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
 .link-icon {
   width: 40px;
   height: 40px;
@@ -1837,6 +1947,20 @@ body {
   line-height: 1.3;
 }
 
+.link-domain-badge {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+  padding: 5px 10px;
+  border-radius: 999px;
+  background: var(--hover-bg);
+  color: var(--text-muted);
+  border: 1px solid var(--border-color);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+}
+
 .link-url {
   font-size: 12px;
   color: var(--primary-color);