reduce spacing across all views; i18n for cache info text

src/core/i18n.ts

@@ -499,6 +499,7 @@ export interface Translations {
     offlineDone: string;
     offlineSelectLang: string;
     offlineCleared: string;
+    offlineCacheInfo: string;
     locationTitle: string;
     latitude: string;
     longitude: string;
@@ -1044,6 +1045,7 @@ const translations: Record<LanguageCode, Translations> = {
       offlineDone: 'Done! Data cached for offline use.',
       offlineSelectLang: 'Please select at least one language.',
       offlineCleared: 'Cache cleared.',
+      offlineCacheInfo: 'Cache: {0} / {1} ({2} files)',
       locationTitle: 'Location',
       latitude: 'Latitude',
       longitude: 'Longitude',
@@ -1587,6 +1589,7 @@ const translations: Record<LanguageCode, Translations> = {
       offlineDone: 'Готово! Данные закэшированы для офлайн-использования.',
       offlineSelectLang: 'Пожалуйста, выберите хотя бы один язык.',
       offlineCleared: 'Кэш очищен.',
+      offlineCacheInfo: 'Кэш: {0} / {1} ({2} файлов)',
       locationTitle: 'Местоположение',
       latitude: 'Широта',
       longitude: 'Долгота',
@@ -2130,6 +2133,7 @@ const translations: Record<LanguageCode, Translations> = {
       offlineDone: 'Готово! Данныя закешированы для офлайн-потребленїя.',
       offlineSelectLang: 'Пожалуйста, изберите хотя бы единъ языкъ.',
       offlineCleared: 'Кешъ очищенъ.',
+      offlineCacheInfo: 'Кешъ: {0} / {1} ({2} фа́йлѡвъ)',
       locationTitle: 'Мѣстоположе́нїе',
       latitude: 'Широта̀',
       longitude: 'Долгота̀',

src/ui/calendar-view.ts

@@ -581,28 +581,28 @@ export class CalendarView {
               ${this.t.calendar.gregorianDate[0].toLowerCase() + this.t.calendar.gregorianDate.slice(1)}: ${gregorianStr}
             </div>
 
-            <div id="day-title" class="mb-4"></div>
+            <div id="day-title" class="mb-2"></div>
 
-            <div id="astro-panel" class="mb-4 p-2 bg-white/50 border border-gold/20 rounded-lg text-sm text-navy">
+            <div id="astro-panel" class="mb-2 p-2 bg-white/50 border border-gold/20 rounded-lg text-sm text-navy">
               <span class="text-navy-light italic">${this.t.loading}</span>
             </div>
 
-            <div id="commemorations-panel" class="mb-4 p-2 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
+            <div id="commemorations-panel" class="mb-2 p-2 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
               <h3 class="font-bold text-red mb-2">${this.t.calendar.commemorations}</h3>
               <p class="text-sm text-navy-light italic">${this.t.loading}</p>
             </div>
 
-            <div id="fasting-panel" class="mb-4 p-2 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
+            <div id="fasting-panel" class="mb-2 p-2 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
               <h3 class="font-bold text-red mb-2">${this.t.calendar.fastingRule}</h3>
               <p class="text-sm italic text-navy-light">${this.t.loading}</p>
             </div>
 
-            <div id="readings-panel" class="mb-4 p-2 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
+            <div id="readings-panel" class="mb-2 p-2 bg-white/50 border border-gold/20 rounded-lg ${fnClass}">
               <h3 class="font-bold text-red mb-2">${this.t.calendar.readings}</h3>
               <p class="text-sm text-navy-light italic">${this.t.loading}</p>
             </div>
 
-            <div id="services-panel" class="mb-4 border-t border-gold/20 pt-3"></div>
+            <div id="services-panel" class="mb-2 border-t border-gold/20 pt-3"></div>
           </div>
         </div>
       </div>

src/ui/menaion-view.ts

@@ -55,8 +55,8 @@ export class MenaionView {
     this.currentMonth = today.getMonth() + 1;
 
     this.container.innerHTML = `
-      <div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-        <div class="flex flex-wrap gap-2 mb-4">
+      <div class="p-4 max-w-4xl xl:max-w-6xl mx-auto">
+        <div class="flex flex-wrap gap-2 mb-2">
           ${[
             { id: 'prayer', view: 'prayer', label: this.t.nav.prayer },
             { id: 'akathists', view: 'akathists', label: this.t.nav.akathists },
@@ -78,7 +78,7 @@ export class MenaionView {
           `).join('')}
         </div>
         <div id="menaion-calendar"></div>
-        <div id="menaion-content" class="bg-white/50 border border-gold/20 rounded-lg p-6 min-h-[300px]">
+        <div id="menaion-content" class="bg-white/50 border border-gold/20 rounded-lg p-4 min-h-[300px]">
           <p class="text-navy-light italic">${this.t.prayer.selectSection}</p>
         </div>
       </div>
@@ -132,7 +132,7 @@ export class MenaionView {
         <span class="text-base font-bold text-navy">${months[month - 1]}</span>
         <button id="menaion-next" class="text-sm text-navy-light hover:text-navy px-2 py-1">▶</button>
       </div>
-      <div class="grid gap-1 grid-cols-7 mb-4">
+      <div class="grid gap-1 grid-cols-7 mb-2">
         ${daysHtml}
       </div>
     `;

src/ui/prayer-view.ts

@@ -213,8 +213,8 @@ export class PrayerView {
     ];
 
     this.container.innerHTML = `
-      <div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-        <div class="flex flex-wrap gap-2 mb-4">
+      <div class="p-4 max-w-4xl xl:max-w-6xl mx-auto">
+        <div class="flex flex-wrap gap-2 mb-2">
           ${subNavItems.map(item => `
             <button
               class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1
@@ -225,13 +225,13 @@ export class PrayerView {
             >${item.label}</button>
           `).join('')}
         </div>
-        <p class="text-navy-light text-sm mb-4">${subtitle}</p>
-        <select id="prayer-select" class="w-full border border-gold/20 bg-white/50 text-navy rounded-lg px-3 py-2 text-sm mb-6">
+        <p class="text-navy-light text-sm mb-2">${subtitle}</p>
+        <select id="prayer-select" class="w-full border border-gold/20 bg-white/50 text-navy rounded-lg px-3 py-2 text-sm mb-3">
           ${sections.map(s => `
             <option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
           `).join('')}
         </select>
-        <div id="prayer-content" class="bg-white/50 border border-gold/20 rounded-lg p-6 min-h-[300px]">
+        <div id="prayer-content" class="bg-white/50 border border-gold/20 rounded-lg p-4 min-h-[300px]">
           <p class="text-navy-light italic">${this.t.prayer.selectSection}</p>
         </div>
       </div>

src/ui/service-view.ts

@@ -86,11 +86,11 @@ export class ServiceView {
     const availableServices = this.getAvailableServices(dayInfo);
     const fontClass = this.getFontClass();
 
-    const contentClass = `bg-white/50 border border-gold/20 rounded-lg p-6 ${this.activeService ? 'min-h-[300px]' : ''} ${fontClass}`;
+    const contentClass = `bg-white/50 border border-gold/20 rounded-lg p-4 ${this.activeService ? 'min-h-[300px]' : ''} ${fontClass}`;
 
     const tabHtml = `
-      <h3 class="font-bold text-red mb-3">${this.t.services.title}</h3>
-      <div class="flex flex-wrap gap-2 mb-6">
+      <h3 class="font-bold text-red mb-2">${this.t.services.title}</h3>
+      <div class="flex flex-wrap gap-2 mb-3">
         ${availableServices.map(s => `
           <button
             class="service-tab text-sm transition-colors
@@ -108,9 +108,9 @@ export class ServiceView {
     `;
 
     this.container.innerHTML = standalone
-      ? `<div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
+      ? `<div class="p-4 max-w-4xl xl:max-w-6xl mx-auto">
           <h2 class="text-2xl font-bold text-red mb-2">${this.t.services.title}</h2>
-          <p class="text-navy-light mb-4">
+          <p class="text-navy-light mb-2">
             ${this.currentDate.toString()}
             ${dayInfo.isLent ? this.t.services.greatLent : ''}
             ${dayInfo.isBrightWeek ? this.t.services.brightWeek : ''}

src/ui/settings-view.ts

@@ -445,7 +445,10 @@ export class SettingsView {
         OfflineManager.getStats().then(stats => {
           const statsEl = document.getElementById('offline-stats');
           if (statsEl) {
-            statsEl.textContent = `Cache: ${OfflineManager.formatBytes(stats.usageBytes)} / ${OfflineManager.formatBytes(stats.quotaBytes)} (${stats.cachedFiles} files)`;
+            statsEl.textContent = t.settings.offlineCacheInfo
+              .replace('{0}', OfflineManager.formatBytes(stats.usageBytes))
+              .replace('{1}', OfflineManager.formatBytes(stats.quotaBytes))
+              .replace('{2}', String(stats.cachedFiles));
           }
         });
       });
@@ -475,7 +478,10 @@ export class SettingsView {
     OfflineManager.getStats().then(stats => {
       const statsEl = document.getElementById('offline-stats');
       if (statsEl) {
-        statsEl.textContent = `Cache: ${OfflineManager.formatBytes(stats.usageBytes)} / ${OfflineManager.formatBytes(stats.quotaBytes)} (${stats.cachedFiles} files)`;
+        statsEl.textContent = t.settings.offlineCacheInfo
+        .replace('{0}', OfflineManager.formatBytes(stats.usageBytes))
+        .replace('{1}', OfflineManager.formatBytes(stats.quotaBytes))
+        .replace('{2}', String(stats.cachedFiles));
       }
     });