From 4728b64c6a97d0bbe45720764ca595dda6a11979 Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 5 Oct 2025 09:32:49 +0200
Subject: [PATCH 1/2] add absolute locale dateTime as tooltip to relative
 dateTimes

Signed-off-by: dartcafe <github@dartcafe.de>
---
 src/components/Activity/ActivityItem.vue  | 10 +++--
 src/components/Cards/CardAddProposals.vue |  3 +-
 src/components/Comments/CommentItem.vue   | 10 +++--
 src/components/Poll/PollInfoLine.vue      | 45 ++++++++++++-------
 src/components/Poll/PollInformation.vue   | 39 ++++++++++++-----
 src/components/PollList/PollItem.vue      | 53 +++++++++++++++--------
 src/stores/poll.ts                        | 14 ++----
 src/views/Reference.vue                   | 11 ++++-
 8 files changed, 118 insertions(+), 67 deletions(-)

diff --git a/src/components/Activity/ActivityItem.vue b/src/components/Activity/ActivityItem.vue
index 6b80ceca9c..7f3ee818f2 100644
--- a/src/components/Activity/ActivityItem.vue
+++ b/src/components/Activity/ActivityItem.vue
@@ -20,9 +20,7 @@ const props = defineProps({
 	},
 })
 
-const dateActivityRelative = computed(() =>
-	DateTime.fromISO(props.activity.datetime).toRelative(),
-)
+const dateActivity = computed(() => DateTime.fromISO(props.activity.datetime))
 
 const message = computed(() => {
 	const subject = props.activity.subject_rich[0]
@@ -97,7 +95,11 @@ const message = computed(() => {
 <template>
 	<div class="activity-item">
 		<div class="activity-item__content">
-			<span class="activity-item__date">{{ dateActivityRelative }}</span>
+			<span
+				:title="dateActivity.toLocaleString(DateTime.DATETIME_SHORT)"
+				class="activity-item__date"
+				>{{ dateActivity.toRelative() }}</span
+			>
 			<NcRichText :text="message.subject" :arguments="message.parameters" />
 		</div>
 	</div>
diff --git a/src/components/Cards/CardAddProposals.vue b/src/components/Cards/CardAddProposals.vue
index 80b1494e96..a94c6dd3c4 100644
--- a/src/components/Cards/CardAddProposals.vue
+++ b/src/components/Cards/CardAddProposals.vue
@@ -26,7 +26,8 @@ const optionAddDatesModalProps = {
 		<p v-if="pollStore.isProposalExpirySet && !pollStore.isProposalExpired">
 			{{
 				t('polls', 'The proposal period ends {timeRelative}.', {
-					timeRelative: pollStore.proposalsExpireRelative,
+					timeRelative:
+						pollStore.getProposalExpirationDateTime.toRelative() as string,
 				})
 			}}
 		</p>
diff --git a/src/components/Comments/CommentItem.vue b/src/components/Comments/CommentItem.vue
index cb4e1cf9d3..a8e20f84f6 100644
--- a/src/components/Comments/CommentItem.vue
+++ b/src/components/Comments/CommentItem.vue
@@ -29,9 +29,7 @@ const preferencesStore = usePreferencesStore()
 
 const { comment } = defineProps<{ comment: CommentsGrouped }>()
 
-const dateCommentedRelative = computed(() =>
-	DateTime.fromSeconds(comment.timestamp).toRelative(),
-)
+const commentedDateTime = computed(() => DateTime.fromSeconds(comment.timestamp))
 
 const isCurrentUser = computed(
 	() => sessionStore.currentUser?.id === comment.user.id,
@@ -103,7 +101,11 @@ const deletable = computed(
 
 			<UserBubble v-else-if="!isCurrentUser" :user="comment.user" />
 
-			<span class="comment-item__date">{{ dateCommentedRelative }}</span>
+			<span
+				class="comment-item__date"
+				:title="commentedDateTime.toLocaleString(DateTime.DATETIME_SHORT)">
+				{{ commentedDateTime.toRelative() }}
+			</span>
 
 			<span v-if="isConfidential" class="comment-item__confidential">
 				{{ confidentialRecipient }}
diff --git a/src/components/Poll/PollInfoLine.vue b/src/components/Poll/PollInfoLine.vue
index 596dfa96d2..1022d7812f 100644
--- a/src/components/Poll/PollInfoLine.vue
+++ b/src/components/Poll/PollInfoLine.vue
@@ -16,6 +16,7 @@ import closedPollIcon from 'vue-material-design-icons/LockOutline.vue'
 import creationIcon from 'vue-material-design-icons/ClockOutline.vue'
 import ProposalsIcon from 'vue-material-design-icons/HandExtendedOutline.vue'
 import ExpirationIcon from 'vue-material-design-icons/CalendarEndOutline.vue'
+import { DateTime } from 'luxon'
 
 const pollStore = usePollStore()
 const sharesStore = useSharesStore()
@@ -36,6 +37,7 @@ const subTexts = computed(() => {
 			text: t('polls', 'Archived'),
 			class: 'archived',
 			iconComponent: archivedPollIcon,
+			title: '',
 		})
 		return subTexts
 	}
@@ -46,6 +48,7 @@ const subTexts = computed(() => {
 			text: [t('polls', 'Unpublished')].join('. '),
 			class: 'unpublished',
 			iconComponent: unpublishedIcon,
+			title: '',
 		})
 		return subTexts
 	}
@@ -58,6 +61,7 @@ const subTexts = computed(() => {
 			}),
 			class: '',
 			iconComponent: null,
+			title: '',
 		})
 	} else {
 		subTexts.push({
@@ -67,15 +71,19 @@ const subTexts = computed(() => {
 			}),
 			class: '',
 			iconComponent: null,
+			title: '',
 		})
 	}
 
 	if (pollStore.isClosed) {
 		subTexts.push({
 			id: 'closed',
-			text: timeExpirationRelative.value,
+			text: pollStore.getExpirationDateTime.toRelative() as string,
 			class: 'closed',
 			iconComponent: closedPollIcon,
+			title: pollStore.getExpirationDateTime.toLocaleString(
+				DateTime.DATETIME_SHORT,
+			) as string,
 		})
 		return subTexts
 	}
@@ -84,10 +92,14 @@ const subTexts = computed(() => {
 		subTexts.push({
 			id: 'expiring',
 			text: t('polls', 'Closing {relativeExpirationTime}', {
-				relativeExpirationTime: timeExpirationRelative.value,
+				relativeExpirationTime:
+					pollStore.getExpirationDateTime.toRelative() as string,
 			}),
 			class: closeToClosing.value ? 'closing' : 'open',
 			iconComponent: ExpirationIcon,
+			title: pollStore.getExpirationDateTime.toLocaleString(
+				DateTime.DATETIME_SHORT,
+			) as string,
 		})
 		return subTexts
 	}
@@ -96,10 +108,14 @@ const subTexts = computed(() => {
 		subTexts.push({
 			id: 'expired',
 			text: t('polls', 'Proposal period ended {timeRelative}', {
-				timeRelative: pollStore.proposalsExpireRelative,
+				timeRelative:
+					pollStore.getProposalExpirationDateTime.toRelative() as string,
 			}),
 			class: 'proposal',
 			iconComponent: ProposalsIcon,
+			title: pollStore.getProposalExpirationDateTime.toLocaleString(
+				DateTime.DATETIME_SHORT,
+			) as string,
 		})
 		return subTexts
 	}
@@ -108,10 +124,14 @@ const subTexts = computed(() => {
 		subTexts.push({
 			id: 'proposal-open',
 			text: t('polls', 'Proposal period ends {timeRelative}', {
-				timeRelative: pollStore.proposalsExpireRelative,
+				timeRelative:
+					pollStore.getProposalExpirationDateTime.toRelative() as string,
 			}),
 			class: 'proposal',
 			iconComponent: ProposalsIcon,
+			title: pollStore.getProposalExpirationDateTime.toLocaleString(
+				DateTime.DATETIME_SHORT,
+			) as string,
 		})
 		return subTexts
 	}
@@ -119,31 +139,23 @@ const subTexts = computed(() => {
 	if (subTexts.length < 2) {
 		subTexts.push({
 			id: 'created',
-			text: dateCreatedRelative.value,
+			text: pollStore.getCreationDateTime.toRelative(),
 			class: 'created',
 			iconComponent: creationIcon,
+			title: pollStore.getCreationDateTime.toLocaleString(
+				DateTime.DATETIME_SHORT,
+			) as string,
 		})
 	}
 	return subTexts
 })
 
-const dateCreatedRelative = computed(() =>
-	pollStore.getCreationDateTime.toRelative(),
-)
-
 const closeToClosing = computed(
 	() =>
 		!pollStore.isClosed
 		&& pollStore.configuration.expire
 		&& pollStore.getExpirationDateTime.diffNow().as('days') < 1,
 )
-
-const timeExpirationRelative = computed(() => {
-	if (pollStore.configuration.expire) {
-		return pollStore.getExpirationDateTime.toRelative() as string
-	}
-	return t('polls', 'never')
-})
 </script>
 
 <template>
@@ -151,6 +163,7 @@ const timeExpirationRelative = computed(() => {
 		<span
 			v-for="subText in subTexts"
 			:key="subText.id"
+			:title="subText.title"
 			:class="['sub-text', subText.class]">
 			<Component :is="subText.iconComponent" :size="16" />
 			<span class="sub-text">{{ subText.text }}</span>
diff --git a/src/components/Poll/PollInformation.vue b/src/components/Poll/PollInformation.vue
index 70ce226cc5..bfc4e249a0 100644
--- a/src/components/Poll/PollInformation.vue
+++ b/src/components/Poll/PollInformation.vue
@@ -33,6 +33,7 @@ import { usePollStore } from '../../stores/poll'
 import { useSubscriptionStore } from '../../stores/subscription'
 import { useOptionsStore } from '../../stores/options'
 import { useVotesStore } from '../../stores/votes'
+import { DateTime } from 'luxon'
 
 const pollStore = usePollStore()
 const sessionStore = useSessionStore()
@@ -46,12 +47,14 @@ const proposalsStatus = computed(() => {
 	}
 	if (pollStore.isProposalExpirySet && !pollStore.isProposalExpired) {
 		return t('polls', 'Proposal period ends {timeRelative}', {
-			timeRelative: pollStore.proposalsExpireRelative,
+			timeRelative:
+				pollStore.getProposalExpirationDateTime.toRelative() as string,
 		})
 	}
 	if (pollStore.isProposalExpirySet && pollStore.isProposalExpired) {
 		return t('polls', 'Proposal period ended {timeRelative}', {
-			timeRelative: pollStore.proposalsExpireRelative,
+			timeRelative:
+				pollStore.getProposalExpirationDateTime.toRelative() as string,
 		})
 	}
 	return t('polls', 'No proposals are allowed')
@@ -75,12 +78,7 @@ const accessCaption = computed(() =>
 		? t('polls', 'Private poll')
 		: t('polls', 'Openly accessible poll'),
 )
-const dateCreatedRelative = computed(
-	() => pollStore.getCreationDateTime.toRelative() as string,
-)
-const dateExpiryRelative = computed(
-	() => pollStore.getCreationDateTime.toRelative() as string,
-)
+
 const currentTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
 const countAllYesVotes = computed(() => votesStore.countAllVotesByAnswer('yes'))
 const countAllMaybeVotes = computed(() => votesStore.countAllVotesByAnswer('maybe'))
@@ -113,23 +111,40 @@ const countUsedVotes = computed(
 			</template>
 			{{ accessCaption }}
 		</BadgeDiv>
-		<BadgeDiv>
+		<BadgeDiv
+			:title="
+				t('polls', 'Created {dateTime}', {
+					dateTime: pollStore.getCreationDateTime.toLocaleString(
+						DateTime.DATETIME_SHORT,
+					) as string,
+				})
+			">
 			<template #icon>
 				<CreationIcon />
 			</template>
 			{{
 				t('polls', 'Created {dateRelative}', {
-					dateRelative: dateCreatedRelative,
+					dateRelative:
+						pollStore.getCreationDateTime.toRelative() as string,
 				})
 			}}
 		</BadgeDiv>
-		<BadgeDiv v-if="pollStore.configuration.expire">
+		<BadgeDiv
+			v-if="pollStore.configuration.expire"
+			:title="
+				t('polls', 'Closing: {dateTime}', {
+					dateTime: pollStore.getCreationDateTime.toLocaleString(
+						DateTime.DATETIME_SHORT,
+					) as string,
+				})
+			">
 			<template #icon>
 				<ClosedIcon />
 			</template>
 			{{
 				t('polls', 'Closing: {dateRelative}', {
-					dateRelative: dateExpiryRelative,
+					dateRelative:
+						pollStore.getCreationDateTime.toRelative() as string,
 				})
 			}}
 		</BadgeDiv>
diff --git a/src/components/PollList/PollItem.vue b/src/components/PollList/PollItem.vue
index 76e1896da7..6ff2726a8d 100644
--- a/src/components/PollList/PollItem.vue
+++ b/src/components/PollList/PollItem.vue
@@ -39,21 +39,26 @@ const { poll, noLink = false } = defineProps<Props>()
 
 const pollStore = usePollStore()
 const preferencesStore = usePreferencesStore()
+
+const expirationDateTime = computed(() =>
+	DateTime.fromMillis(poll.configuration.expire * 1000),
+)
+
+const createdDateTime = computed(() =>
+	DateTime.fromMillis(poll.status.created * 1000),
+)
+
+const archiveDateTime = computed(() =>
+	DateTime.fromMillis(poll.status.archivedDate * 1000),
+)
+
 const closeToClosing = computed(
 	() =>
 		!poll.status.isExpired
 		&& poll.configuration.expire
-		&& DateTime.fromMillis(poll.configuration.expire * 1000).diffNow('hours')
-			.hours < 36,
+		&& expirationDateTime.value.diffNow('hours').hours < 36,
 )
 
-const timeExpirationRelative = computed(() => {
-	if (poll.configuration.expire) {
-		return DateTime.fromMillis(poll.configuration.expire * 1000).toRelative()
-	}
-	return t('polls', 'never')
-})
-
 const expiryClass = computed(() => {
 	if (poll.status.isExpired) {
 		return 'error'
@@ -70,10 +75,6 @@ const expiryClass = computed(() => {
 	return 'success'
 })
 
-const timeCreatedRelative = computed(
-	() => DateTime.fromMillis(poll.status.created * 1000).toRelative() as string,
-)
-
 const descriptionLine = computed(() => {
 	if (preferencesStore.user.verbosePollsList) {
 		if (poll.configuration.description) {
@@ -84,15 +85,13 @@ const descriptionLine = computed(() => {
 
 	if (poll.status.isArchived) {
 		return t('polls', 'Archived {relativeTime}', {
-			relativeTime: DateTime.fromMillis(
-				poll.status.archivedDate * 1000,
-			).toRelative() as string,
+			relativeTime: archiveDateTime.value.toRelative() as string,
 		})
 	}
 
 	return t('polls', 'Started {relativeTime} from {ownerName}', {
 		ownerName: poll.owner.displayName,
-		relativeTime: timeCreatedRelative.value,
+		relativeTime: createdDateTime.value.toRelative() as string,
 	})
 })
 </script>
@@ -259,13 +258,29 @@ const descriptionLine = computed(() => {
 			<BadgeSmallDiv
 				v-if="poll.configuration.expire"
 				:class="expiryClass"
-				:title="t('polls', 'Expiration')">
+				:title="
+					t(
+						'polls',
+						poll.status.isExpired
+							? 'Expired {dateTime}'
+							: 'Expires {dateTime}',
+						{
+							dateTime: expirationDateTime.toLocaleString(
+								DateTime.DATETIME_SHORT,
+							) as string,
+						},
+					)
+				">
 				>
 				<template #icon>
 					<ClosedPollsIcon v-if="poll.status.isExpired" :size="16" />
 					<ExpirationIcon v-else :size="16" />
 				</template>
-				{{ timeExpirationRelative }}
+				{{
+					expirationDateTime
+						? expirationDateTime.toRelative()
+						: t('polls', 'never')
+				}}
 			</BadgeSmallDiv>
 		</div>
 
diff --git a/src/stores/poll.ts b/src/stores/poll.ts
index 3a18a48300..a06e01d2bb 100644
--- a/src/stores/poll.ts
+++ b/src/stores/poll.ts
@@ -192,6 +192,10 @@ export const usePollStore = defineStore('poll', {
 			return DateTime.fromSeconds(state.configuration.expire)
 		},
 
+		getProposalExpirationDateTime(state): DateTime {
+			return DateTime.fromSeconds(state.configuration.proposalsExpire)
+		},
+
 		getCreationDateTime(state): DateTime {
 			return DateTime.fromSeconds(state.status.created)
 		},
@@ -211,20 +215,10 @@ export const usePollStore = defineStore('poll', {
 			)
 		},
 
-		getProposalExpirationDateTime(state): DateTime {
-			return DateTime.fromSeconds(state.configuration.proposalsExpire)
-		},
-
 		isProposalExpirySet(state): boolean {
 			return this.isProposalAllowed && state.configuration.proposalsExpire > 0
 		},
 
-		proposalsExpireRelative(state): string {
-			return DateTime.fromSeconds(
-				state.configuration.proposalsExpire,
-			).toRelative() as string
-		},
-
 		isClosed(state): boolean {
 			return (
 				state.status.isExpired
diff --git a/src/views/Reference.vue b/src/views/Reference.vue
index 4843ad7865..6172a45e1a 100644
--- a/src/views/Reference.vue
+++ b/src/views/Reference.vue
@@ -32,6 +32,10 @@ interface Props {
 
 const { richObject } = defineProps<Props>()
 
+const expiryDateTime = richObject?.poll.expiry
+	? DateTime.fromMillis(richObject.poll.expiry * 1000)
+	: null
+
 const expiryClass = richObject?.poll?.expiry
 	? DateTime.fromMillis(richObject.poll.expiry * 1000).diffNow('hours').hours < 36
 		? 'warning'
@@ -54,11 +58,16 @@ const expiryClass = richObject?.poll?.expiry
 			</BadgeSmallDiv>
 			<BadgeSmallDiv
 				v-else-if="richObject.poll.expiry > 0"
+				:title="
+					expiryDateTime
+						? expiryDateTime.toLocaleString(DateTime.DATETIME_SHORT)
+						: ''
+				"
 				:class="expiryClass">
 				<template #icon>
 					<ExpirationIcon :size="16" />
 				</template>
-				{{ DateTime.fromMillis(richObject.poll.expiry * 1000).toRelative() }}
+				{{ expiryDateTime ? expiryDateTime.toRelative() : '' }}
 			</BadgeSmallDiv>
 		</div>
 		<div class="description">

From 7c468bf2733c9251508ad0636f1f593fd306560f Mon Sep 17 00:00:00 2001
From: dartcafe <github@dartcafe.de>
Date: Sun, 5 Oct 2025 09:37:54 +0200
Subject: [PATCH 2/2] changelog

Signed-off-by: dartcafe <github@dartcafe.de>
---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65bdf7b56c..fc5e1bf00c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,10 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## [unreleased]
+### Added
+ - Show locale date as tooltip for relative date time information
+
 ## [8.5.0] - 2025-10-03
 ### Fixed
  - Archived polls could not get entered anymore