Use Date type for post date

src/App.vue

@@ -144,7 +144,7 @@ async function updateWall() {
  */
 const filteredPosts = computed(() => {
   // Copy to make sure those are detected as a reactive dependencies
-  var posts: Array<Post> = JSON.parse(JSON.stringify(allPosts.value))
+  var posts: Array<Post> = [... allPosts.value]
   const pinnedLocal = [...pinned.value]
   const hiddenLocal = [...hidden.value]
 
@@ -160,12 +160,11 @@ const filteredPosts = computed(() => {
   posts = posts.sort((a, b) => {
     const aPinned = a.pinned ? 1 : 0
     const bPinned = b.pinned ? 1 : 0
-    return bPinned - aPinned || new Date(b.date).getTime() - new Date(a.date).getTime()
+    return bPinned - aPinned || b.date.getTime() - a.date.getTime()
   })
   return posts
 })
 
-
 function toggle<T>(array: T[], value: T) {
   if (array.includes(value))
     array.splice(array.indexOf(value), 1)

src/components/Card.vue

@@ -51,7 +51,7 @@ const onMediaLoad = inject('fixLayout', () => undefined)
           </video>
         </div>
         <p v-if="config.showText" class="card-text" v-dompurify-html="post.content"></p>
-        <p class="card-text text-end text-break"><a :href="post.url" target="_blank" :title="post.date"
+        <p class="card-text text-end text-break"><a :href="post.url" target="_blank" :title="post.date.toLocaleString()"
             class="text-decoration-none text-muted"><small>{{ timeAgo }}</small></a></p>
       </div>
     </div>

src/sources.ts

@@ -218,7 +218,7 @@ const filterStatus = (cfg: Config, status: MastodonStatus) => {
  * Convert a mastdon status object to a Post.
  */
 const statusToWallPost = (cfg: Config, status: MastodonStatus): Post => {
-    const date = status.created_at
+    const date = new Date(status.created_at)
 
     if (status.reblog)
         status = status.reblog

src/types.ts

@@ -30,7 +30,7 @@ export type Post = {
     id: string;
     url: string;
     content: string;
-    date: string;
+    date: Date;
 
     author?: {
         name: string;

src/utils.ts

@@ -29,7 +29,7 @@ export function deepClone(obj: any) {
  * a string or a new DOM node. Can be used to replace emojis with images or
  * URLs with links.
  * 
- * The root node is modifed in-place and then returned.
+ * The root node is modifed in-place and also returned.
  */
 export function replaceInText(root: Node, pattern: RegExp, replace: (m: RegExpMatchArray) => string | Node) {
     const walk = (node: Node) => {