feat: links externos via open_url, fix descarga media y tip atajos en ajustes

PostDetailScreen:
- Añadir helper openInBrowser(): usa invoke('open_url') en Tauri y
  window.open() como fallback en browser, evitando WebView2 interno
- Convertir 'Ver en Threads', chip URL y 'Abrir en Threads' de <a> a
  <button onclick={openInBrowser}> para abrir siempre en browser del sistema
- fix: downloadMedia en Tauri usa openInBrowser(media.url) directamente
  — WebView2 no puede descargar data: URIs ni URLs cross-origin (Instagram,
  Giphy). Si está cacheado como data URL, descarga directa solo en modo web
- fix: downloadInlineVideo fallback usa openInBrowser en lugar de window.open

SettingsScreen:
- Añadir sección colapsable 'Atajos de teclado' al pie de ajustes:
  chip con icono de teclado, acordeón max-height con transición suave,
  badges kbd estilizados y columna de contexto (Global / En vault / En post)

Author: D4vRAM369

src/routes/PostDetailScreen.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte'
   import { get } from 'svelte/store'
+  import { invoke } from '@tauri-apps/api/core'
   import { categories, deletePost, loadVault, posts, savePost } from '../lib/stores/vault'
   import { getStorage } from '../lib/storage/index'
   import CategoryBadge from '../components/CategoryBadge.svelte'
@@ -101,6 +102,16 @@
     editingNote = false
   }
 
+  // Abre una URL en el browser del sistema (no en el WebView interno de Tauri).
+  // En desktop usa open_url (crate open, Rust). En browser usa window.open().
+  function openInBrowser(url: string) {
+    if ('__TAURI_INTERNALS__' in window) {
+      void invoke('open_url', { url })
+    } else {
+      window.open(url, '_blank', 'noopener,noreferrer')
+    }
+  }
+
   function formatDate(ts: number): string {
     return new Date(ts).toLocaleDateString('es', {
       weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
@@ -117,13 +128,34 @@
     }
   }
 
+  /*
+    PBL: <a download> no funciona en URLs cross-origin (CDN Instagram/Threads).
+    El WebView2/browser ignora el atributo download si el dominio es distinto al de la app.
+    Fix: fetch() → Blob → Object URL (mismo origen) → <a download> ya funciona.
+    Si está cacheado como data URL, descarga directa sin red.
+  */
   function downloadMedia(media: PostMedia) {
-    const a = document.createElement('a')
-    a.href = getMediaSource(media)
-    a.download = fileNameFromUrl(media.url)
-    a.target = '_blank'
-    a.rel = 'noopener noreferrer'
-    a.click()
+    // En Tauri, WebView2 no puede descargar data: URIs ni URLs cross-origin.
+    // La solución más fiable: abrir la URL original en el browser del sistema.
+    if ('__TAURI_INTERNALS__' in window) {
+      openInBrowser(media.url)
+      return
+    }
+
+    // Fallback para modo browser web: intentar descarga directa vía data URL
+    const src = getMediaSource(media)
+    if (src.startsWith('data:')) {
+      const filename = fileNameFromUrl(media.url)
+      const a = document.createElement('a')
+      a.href     = src
+      a.download = filename
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+      return
+    }
+
+    openInBrowser(src)
   }
 
   function getInlineVideoState(media: PostMedia) {
@@ -244,17 +276,24 @@
     }
   }
 
-  function downloadInlineVideo(media: PostMedia) {
-    const state = getInlineVideoState(media)
+  async function downloadInlineVideo(media: PostMedia) {
+    const state  = getInlineVideoState(media)
     const source = state.downloadSrc ?? state.src
     if (!source) return
 
-    const a = document.createElement('a')
-    a.href = source
-    a.download = fileNameFromUrl(source)
-    a.target = '_blank'
-    a.rel = 'noopener noreferrer'
-    a.click()
+    const filename = fileNameFromUrl(source)
+    try {
+      const res     = await fetch(source)
+      const blob    = await res.blob()
+      const blobUrl = URL.createObjectURL(blob)
+      const a = document.createElement('a')
+      a.href     = blobUrl
+      a.download = filename
+      a.click()
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 15_000)
+    } catch {
+      openInBrowser(source)
+    }
   }
 
   function toImageProxyUrl(url: string): string {
@@ -834,19 +873,16 @@
                         >Descargar</button>
                       {/if}
 
-                      <a
-                        href={media.url}
-                        target="_blank"
-                        rel="noopener noreferrer"
+                      <button
+                        onclick={() => openInBrowser(media.url)}
                         class="px-3 py-1.5 rounded-lg text-xs font-semibold transition-all duration-200"
                         style="
                           background: rgba(124,77,255,0.22);
                           border: 1px solid rgba(124,77,255,0.4);
                           color: #e4d6ff;
                           font-family: var(--font-display);
-                          text-decoration: none;
                         "
-                      >Ver en Threads ↗</a>
+                      >Ver en Threads ↗</button>
                     </div>
                   </div>
                 {:else}
@@ -874,13 +910,11 @@
                         font-family: var(--font-display);
                       "
                     >Descargar</button>
-                    <a
-                      href={media.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      class="text-xs truncate"
+                    <button
+                      onclick={() => openInBrowser(media.url)}
+                      class="text-xs truncate text-left"
                       style="color: var(--vault-on-bg-muted)"
-                    >{media.url}</a>
+                    >{media.url}</button>
                   </div>
                 {/if}
               </div>
@@ -914,18 +948,15 @@
       target="_blank" + rel="noopener noreferrer" = seguridad básica
       para links externos (previene que la nueva pestaña acceda a window.opener).
     -->
-    <a
-      href={cleanThreadsUrl(post.url)}
-      target="_blank"
-      rel="noopener noreferrer"
+    <button
+      onclick={() => openInBrowser(cleanThreadsUrl(post.url))}
       class="flex items-center justify-center gap-2.5 w-full py-3.5 rounded-2xl font-semibold transition-all duration-200"
       style="
         background: rgba(255,255,255,0.05);
         border: 1px solid rgba(255,255,255,0.11);
         color: var(--vault-on-bg);
         font-family: var(--font-display);
         font-size: 0.9rem;
-        text-decoration: none;
         letter-spacing: 0.02em;
       "
       onmouseenter={(e) => {
@@ -947,6 +978,6 @@
         <line x1="10" y1="14" x2="21" y2="3"/>
       </svg>
       Abrir en Threads
-    </a>
+    </button>
   {/if}
 </div>

src/routes/SettingsScreen.svelte

@@ -10,8 +10,9 @@
   let importError  = $state('')
   // pendingFile guarda el archivo seleccionado mientras el usuario decide si confirmar.
   // File | null significa: puede ser un objeto File (archivo) o null (ninguno pendiente).
-  let pendingFile   = $state<File | null>(null)
-  let showAboutDev  = $state(false)
+  let pendingFile    = $state<File | null>(null)
+  let showAboutDev   = $state(false)
+  let showShortcuts  = $state(false)
 
   async function openExternal(url: string) {
     if ('__TAURI_INTERNALS__' in window) {
@@ -292,6 +293,80 @@
       </svg>
     </button>
   </div>
+
+  <!-- ── Tip: atajos de teclado ───────────────────────────────────────────
+    Sin card dedicada — fila colapsable sutil al pie del layout.
+    Patrón: chip con icono de teclado + acordeón max-height.
+  -->
+  <div class="mt-6 mb-2">
+    <button
+      onclick={() => showShortcuts = !showShortcuts}
+      class="flex items-center gap-1.5 text-xs transition-colors duration-200"
+      style="color: var(--vault-on-bg-muted); background: none; border: none; padding: 0; cursor: pointer;"
+      onmouseenter={(e) => (e.currentTarget as HTMLElement).style.color = 'var(--vault-on-bg)'}
+      onmouseleave={(e) => (e.currentTarget as HTMLElement).style.color = 'var(--vault-on-bg-muted)'}
+      aria-expanded={showShortcuts}
+    >
+      <!-- Icono teclado -->
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="shrink-0:0; opacity:0.7">
+        <rect x="2" y="6" width="20" height="14" rx="2"/>
+        <line x1="6" y1="10" x2="6" y2="10"/><line x1="10" y1="10" x2="10" y2="10"/>
+        <line x1="14" y1="10" x2="14" y2="10"/><line x1="18" y1="10" x2="18" y2="10"/>
+        <line x1="6" y1="14" x2="6" y2="14"/><line x1="18" y1="14" x2="18" y2="14"/>
+        <line x1="10" y1="14" x2="14" y2="14"/>
+      </svg>
+      <span style="font-family: var(--font-body)">Atajos de teclado</span>
+      <!-- Chevron rotatorio -->
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
+        style="transition: transform 0.22s ease; transform: rotate({showShortcuts ? 180 : 0}deg); opacity:0.5"
+      >
+        <polyline points="6 9 12 15 18 9"/>
+      </svg>
+    </button>
+
+    <!-- Acordeón — max-height transition estándar -->
+    <div style="
+      max-height: {showShortcuts ? '280px' : '0'};
+      overflow: hidden;
+      transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    ">
+      <div class="mt-3 flex flex-col gap-1" style="opacity: {showShortcuts ? 1 : 0}; transition: opacity 0.2s ease 0.05s">
+        {#each [
+          { keys: ['Esc'],          desc: 'Volver atrás',                  ctx: 'Global' },
+          { keys: ['Ctrl', 'N'],    desc: 'Añadir post',                   ctx: 'Global' },
+          { keys: ['/'],            desc: 'Buscar posts',                  ctx: 'En vault' },
+          { keys: ['Ctrl', 'F'],    desc: 'Buscar en la app',              ctx: 'Global' },
+          { keys: ['←', '→'],      desc: 'Navegar entre posts',           ctx: 'En post' },
+        ] as shortcut}
+          <div class="flex items-center gap-3 py-1">
+            <div class="flex items-center gap-1 shrink-0" style="min-width: 110px">
+              {#each shortcut.keys as key, i}
+                {#if i > 0}<span style="color: var(--vault-on-bg-muted); font-size: 9px; opacity:0.5">+</span>{/if}
+                <span style="
+                  font-family: var(--font-mono, 'DM Mono', monospace);
+                  font-size: 10px;
+                  padding: 1px 6px;
+                  border-radius: 4px;
+                  border: 1px solid rgba(255,255,255,0.13);
+                  background: rgba(255,255,255,0.05);
+                  color: var(--vault-on-bg);
+                  line-height: 1.6;
+                ">{key}</span>
+              {/each}
+            </div>
+            <span class="text-xs" style="color: var(--vault-on-bg); flex:1">{shortcut.desc}</span>
+            <span class="text-xs" style="
+              color: var(--vault-on-bg-muted);
+              font-family: var(--font-body);
+              font-size: 10px;
+              opacity: 0.5;
+            ">{shortcut.ctx}</span>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+
 </div>
 
 <!-- ── Modal About Dev ─────────────────────────────────────────────────── -->