Savestate: Translate timeline to German and match Apple Files document aesthetics by hiding names

index.html

@@ -74,7 +74,7 @@
 </head>
 <body class="dark-theme in-chat-view">
   
-  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.251</div>
+  <div id="live-version-badge" style="position: fixed; top: 50px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); opacity: 0.6; z-index: 99999; pointer-events: none; font-weight: 500; font-family: monospace; letter-spacing: 1px; background: rgba(0,0,0,0.2); padding: 2px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.05);">BUILD 1.8.252</div>
     
   <!-- SVG Filters for Liquid Glass Refraction -->
   <svg width="0" height="0" style="position: absolute; pointer-events: none;">

src/views/documents/documents-view.js

@@ -148,14 +148,13 @@ export class DocumentsView {
 
     // Group documents by date (simulated with random dates for demo if mtime isn't easily formatted, but we'll try to use a static nice date for now like the reference)
     // To match the reference closely, let's group them by a realistic date string.
-    // In a real app we'd use: new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date(f.mtime || Date.now()))
+    // In a real app we'd use: new Intl.DateTimeFormat('de-DE', { weekday: 'long', month: 'long', day: 'numeric' }).format(new Date(f.mtime || Date.now()))
     const groups = {};
     documents.forEach((f, i) => {
-      // Create a nice date string. If we want it to look exactly like the reference: "Monday, September 23"
-      // We'll just use today's date formatted beautifully for all of them for now, or group by mtime if available.
+      // Create a nice date string.
       const date = new Date(f.mtime || Date.now());
-      // Formatting like "Monday, September 23" (German format if needed, but reference is English)
-      const dateString = new Intl.DateTimeFormat('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).format(date);
+      // Formatting like "Montag, 23. September" (German format)
+      const dateString = new Intl.DateTimeFormat('de-DE', { weekday: 'long', day: 'numeric', month: 'long' }).format(date);
       
       if (!groups[dateString]) groups[dateString] = [];
       groups[dateString].push(f);
@@ -180,7 +179,7 @@ export class DocumentsView {
             <div class="vault-timeline-header">
               <div class="vault-timeline-line"></div>
               <div class="vault-timeline-title">${dateTitle}</div>
-              <div class="vault-timeline-subtitle">${groupFiles.length} document${groupFiles.length !== 1 ? 's' : ''}</div>
+              <div class="vault-timeline-subtitle">${groupFiles.length} Dokument${groupFiles.length !== 1 ? 'e' : ''}</div>
             </div>
             <div class="vault-timeline-content">
               <div class="vault-timeline-line-content"></div>
@@ -268,13 +267,14 @@ export class DocumentsView {
     const sizeStr = f.size ? Math.round(f.size / 1024) + ' KB' : '';
 
     return `
-      <div class="vault-file vault-item-enter" style="--delay: ${delay}ms" data-name="${f.name}" data-isdir="false" data-path="${path}">
+      <div class="vault-file vault-item-enter" style="--delay: ${delay}ms" data-name="${f.name}" data-isdir="false" data-path="${path}" title="${f.name}">
         <div class="vault-file-body vault-file-body-${ext}">
           <div id="preview-${path.replace(/[^a-zA-Z0-9]/g, '_')}" class="vault-file-preview-slot" style="width: 100%; height: 100%;">
           </div>
         </div>
-        <div class="vault-file-name">${f.name}</div>
-        ${sizeStr ? `<div class="vault-file-size">${sizeStr}</div>` : ''}
+        <!-- To match Apple Files timeline reference, no names or sizes are shown under the documents -->
+        <!-- <div class="vault-file-name">${f.name}</div> -->
+        <!-- ${sizeStr ? `<div class="vault-file-size">${sizeStr}</div>` : ''} -->
         <button class="vault-item-delete" title="Löschen" data-name="${f.name}" data-isdir="false">
           <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
         </button>