Add show more/less button for long journal entries (#623)

- Show "Show more" button on both mobile and desktop when entry text is clamped
- Add "Show less" button when expanded to collapse back
- Add useTranslation hook to ExpandableStory component
- Add i18n keys common.showMore and common.showLess for all 14 languages

client/src/i18n/translations/ar.ts

@@ -5,6 +5,8 @@ const ar: Record<string, string | { name: string; category: string }[]> = {
 
   // Common
   'common.save': 'حفظ',
+  'common.showMore': 'عرض المزيد',
+  'common.showLess': 'عرض أقل',
   'common.cancel': 'إلغاء',
   'common.delete': 'حذف',
   'common.edit': 'تعديل',

client/src/i18n/translations/br.ts

@@ -1,6 +1,8 @@
 const br: Record<string, string | { name: string; category: string }[]> = {
   // Common
   'common.save': 'Salvar',
+  'common.showMore': 'Mostrar mais',
+  'common.showLess': 'Mostrar menos',
   'common.cancel': 'Cancelar',
   'common.delete': 'Excluir',
   'common.edit': 'Editar',

client/src/i18n/translations/cs.ts

@@ -1,6 +1,8 @@
 const cs: Record<string, string | { name: string; category: string }[]> = {
   // Společné (Common)
   'common.save': 'Uložit',
+  'common.showMore': 'Zobrazit více',
+  'common.showLess': 'Zobrazit méně',
   'common.cancel': 'Zrušit',
   'common.delete': 'Smazat',
   'common.edit': 'Upravit',

client/src/i18n/translations/de.ts

@@ -1,6 +1,8 @@
 const de: Record<string, string | { name: string; category: string }[]> = {
   // Allgemein
   'common.save': 'Speichern',
+  'common.showMore': 'Mehr anzeigen',
+  'common.showLess': 'Weniger anzeigen',
   'common.cancel': 'Abbrechen',
   'common.delete': 'Löschen',
   'common.edit': 'Bearbeiten',

client/src/i18n/translations/en.ts

@@ -1,6 +1,8 @@
 const en: Record<string, string | { name: string; category: string }[]> = {
   // Common
   'common.save': 'Save',
+  'common.showMore': 'Show more',
+  'common.showLess': 'Show less',
   'common.cancel': 'Cancel',
   'common.delete': 'Delete',
   'common.edit': 'Edit',

client/src/i18n/translations/es.ts

@@ -1,6 +1,8 @@
 const es: Record<string, string> = {
   // Common
   'common.save': 'Guardar',
+  'common.showMore': 'Ver más',
+  'common.showLess': 'Ver menos',
   'common.cancel': 'Cancelar',
   'common.delete': 'Eliminar',
   'common.edit': 'Editar',

client/src/i18n/translations/fr.ts

@@ -1,6 +1,8 @@
 const fr: Record<string, string> = {
   // Common
   'common.save': 'Enregistrer',
+  'common.showMore': 'Voir plus',
+  'common.showLess': 'Voir moins',
   'common.cancel': 'Annuler',
   'common.delete': 'Supprimer',
   'common.edit': 'Modifier',

client/src/i18n/translations/hu.ts

@@ -1,6 +1,8 @@
 const hu: Record<string, string | { name: string; category: string }[]> = {
   // Általános
   'common.save': 'Mentés',
+  'common.showMore': 'Továbbiak',
+  'common.showLess': 'Kevesebb',
   'common.cancel': 'Mégse',
   'common.delete': 'Törlés',
   'common.edit': 'Szerkesztés',

client/src/i18n/translations/it.ts

@@ -1,6 +1,8 @@
 const it: Record<string, string | { name: string; category: string }[]> = {
   // Common
   'common.save': 'Salva',
+  'common.showMore': 'Mostra di più',
+  'common.showLess': 'Mostra meno',
   'common.cancel': 'Annulla',
   'common.delete': 'Elimina',
   'common.edit': 'Modifica',

client/src/i18n/translations/nl.ts

@@ -1,6 +1,8 @@
 const nl: Record<string, string> = {
   // Common
   'common.save': 'Opslaan',
+  'common.showMore': 'Meer tonen',
+  'common.showLess': 'Minder tonen',
   'common.cancel': 'Annuleren',
   'common.delete': 'Verwijderen',
   'common.edit': 'Bewerken',

client/src/i18n/translations/pl.ts

@@ -1,6 +1,8 @@
 const pl: Record<string, string | { name: string; category: string }[]> = {
   // Common
   'common.save': 'Zapisz',
+  'common.showMore': 'Pokaż więcej',
+  'common.showLess': 'Pokaż mniej',
   'common.cancel': 'Anuluj',
   'common.delete': 'Usuń',
   'common.edit': 'Edytuj',

client/src/i18n/translations/ru.ts

@@ -1,6 +1,8 @@
 const ru: Record<string, string> = {
   // Common
   'common.save': 'Сохранить',
+  'common.showMore': 'Показать больше',
+  'common.showLess': 'Показать меньше',
   'common.cancel': 'Отмена',
   'common.delete': 'Удалить',
   'common.edit': 'Редактировать',

client/src/i18n/translations/zh.ts

@@ -1,6 +1,8 @@
 const zh: Record<string, string> = {
   // Common
   'common.save': '保存',
+  'common.showMore': '显示更多',
+  'common.showLess': '收起',
   'common.cancel': '取消',
   'common.delete': '删除',
   'common.edit': '编辑',

client/src/i18n/translations/zhTw.ts

@@ -1,6 +1,8 @@
 const zhTw: Record<string, string> = {
   // Common
   'common.save': '儲存',
+  'common.showMore': '顯示更多',
+  'common.showLess': '收起',
   'common.cancel': '取消',
   'common.delete': '刪除',
   'common.edit': '編輯',

client/src/pages/JourneyDetailPage.tsx

@@ -992,6 +992,7 @@ function GalleryView({ entries, journeyId, userId, trips, onPhotoClick, onRefres
 // ── Expandable Story ─────────────────────────────────────────────────────
 
 function ExpandableStory({ story }: { story: string }) {
+  const { t } = useTranslation()
   const [expanded, setExpanded] = useState(false)
   const [clamped, setClamped] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
@@ -1017,16 +1018,24 @@ function ExpandableStory({ story }: { story: string }) {
         onClick={() => { if (clamped || expanded) setExpanded(e => !e) }}
         className={`text-[13px] text-zinc-700 dark:text-zinc-300 leading-relaxed ${
           expanded ? '' : 'line-clamp-3 md:line-clamp-[9]'
-        } ${clamped || expanded ? 'cursor-pointer md:cursor-auto' : ''}`}
+        } ${clamped || expanded ? 'cursor-pointer' : ''}`}
       >
         <JournalBody text={story} />
       </div>
       {clamped && !expanded && (
         <button
           onClick={() => setExpanded(true)}
-          className="md:hidden mt-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-medium text-zinc-500 dark:text-zinc-400 active:scale-95 transition-transform"
+          className="mt-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-medium text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 active:scale-95 transition-all"
         >
-          Read more <ChevronRight size={10} />
+          {t('common.showMore')} <ChevronRight size={10} />
+        </button>
+      )}
+      {expanded && (
+        <button
+          onClick={() => setExpanded(false)}
+          className="mt-2 inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-medium text-zinc-500 dark:text-zinc-400 hover:bg-zinc-200 dark:hover:bg-zinc-700 active:scale-95 transition-all"
+        >
+          {t('common.showLess')} <ChevronRight size={10} className="rotate-[-90deg]" />
         </button>
       )}
     </div>