[APP-1049] show label expiration in frontend (#7738)

* Add support for label exp to LabelsOnMeDialog

* Add exp to PostAlerts, align with LabelsOnMe UI

* Bump weight

* Improve translations

* Expiry should round up

* Add a little visual alignment hack

src/lib/hooks/useTimeAgo.ts

@@ -19,7 +19,7 @@ const HOUR = MINUTE * 60
 const DAY = HOUR * 24
 const MONTH_30 = DAY * 30
 
-export function useGetTimeAgo() {
+export function useGetTimeAgo({future = false}: {future?: boolean} = {}) {
   const {i18n} = useLingui()
   return useCallback(
     (
@@ -27,10 +27,10 @@ export function useGetTimeAgo() {
       later: number | string | Date,
       options?: {format: DateDiffFormat},
     ) => {
-      const diff = dateDiff(earlier, later)
+      const diff = dateDiff(earlier, later, future ? 'up' : 'down')
       return formatDateDiff({diff, i18n, format: options?.format})
     },
-    [i18n],
+    [i18n, future],
   )
 }
 
@@ -45,6 +45,7 @@ export function useGetTimeAgo() {
 export function dateDiff(
   earlier: number | string | Date,
   later: number | string | Date,
+  rounding: 'up' | 'down' = 'down',
 ): DateDiff {
   let diff = {
     value: 0,
@@ -65,25 +66,37 @@ export function dateDiff(
       unit: 'second' as DateDiff['unit'],
     }
   } else if (diffSeconds < HOUR) {
-    const value = Math.floor(diffSeconds / MINUTE)
+    const value =
+      rounding === 'up'
+        ? Math.ceil(diffSeconds / MINUTE)
+        : Math.floor(diffSeconds / MINUTE)
     diff = {
       value,
       unit: 'minute' as DateDiff['unit'],
     }
   } else if (diffSeconds < DAY) {
-    const value = Math.floor(diffSeconds / HOUR)
+    const value =
+      rounding === 'up'
+        ? Math.ceil(diffSeconds / HOUR)
+        : Math.floor(diffSeconds / HOUR)
     diff = {
       value,
       unit: 'hour' as DateDiff['unit'],
     }
   } else if (diffSeconds < MONTH_30) {
-    const value = Math.floor(diffSeconds / DAY)
+    const value =
+      rounding === 'up'
+        ? Math.ceil(diffSeconds / DAY)
+        : Math.floor(diffSeconds / DAY)
     diff = {
       value,
       unit: 'day' as DateDiff['unit'],
     }
   } else {
-    const value = Math.floor(diffSeconds / MONTH_30)
+    const value =
+      rounding === 'up'
+        ? Math.ceil(diffSeconds / MONTH_30)
+        : Math.floor(diffSeconds / MONTH_30)
     diff = {
       value,
       unit: 'month' as DateDiff['unit'],

src/lib/moderation/useModerationCauseDescription.ts

@@ -7,6 +7,7 @@ import {
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {sanitizeHandle} from '#/lib/strings/handles'
 import {useLabelDefinitions} from '#/state/preferences'
 import {useSession} from '#/state/session'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
@@ -23,6 +24,7 @@ export interface ModerationCauseDescription {
   name: string
   description: string
   source?: string
+  sourceDisplayName?: string
   sourceType?: ModerationCauseSource['type']
   sourceAvi?: string
   sourceDid?: string
@@ -130,14 +132,16 @@ export function useModerationCauseDescription(
       const def = cause.labelDef || getDefinition(labelDefs, cause.label)
       const strings = getLabelStrings(i18n.locale, globalLabelStrings, def)
       const labeler = labelers.find(l => l.creator.did === cause.label.src)
-      let source =
-        labeler?.creator.displayName ||
-        (labeler?.creator.handle ? '@' + labeler?.creator.handle : undefined)
+      let source = labeler
+        ? sanitizeHandle(labeler.creator.handle, '@')
+        : undefined
+      let sourceDisplayName = labeler?.creator.displayName
       if (!source) {
         if (cause.label.src === BSKY_LABELER_DID) {
-          source = 'Bluesky Moderation Service'
+          source = 'moderation.bsky.app'
+          sourceDisplayName = 'Bluesky Moderation Service'
         } else {
-          source = cause.label.src
+          source = _(msg`an unknown labeler`)
         }
       }
       if (def.identifier === 'porn' || def.identifier === 'sexual') {
@@ -154,6 +158,7 @@ export function useModerationCauseDescription(
         name: strings.name,
         description: strings.description,
         source,
+        sourceDisplayName,
         sourceType: cause.source.type,
         sourceAvi: labeler?.creator.avatar,
         sourceDid: cause.label.src,