versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add notifications, improve note design

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-02 11:17:25 +01:00
parent c586db3669
commit d32f4d6899
No known key found for this signature in database
7 changed files with 129 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/notes/content.vue
View file

@ -1,5 +1,5 @@
<template>
<div :class="['prose block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content">
<div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content">
</div>
<Attachments v-if="attachments.length > 0" :attachments="attachments" />

27
components/notes/header.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="rounded flex flex-row items-center gap-3">
<NuxtLink :href="url" :class="cn('relative size-14', smallLayout && 'size-6')">
<Avatar :class="cn('size-14 rounded-md border border-card', smallLayout && 'size-6')">
<NuxtLink :href="url" :class="cn('relative size-14', smallLayout && 'size-8')">
<Avatar :class="cn('size-14 rounded-md border border-card', smallLayout && 'size-8')">
<AvatarImage :src="avatar" alt="" />
<AvatarFallback class="rounded-lg"> AA </AvatarFallback>
</Avatar>
@ -10,7 +10,7 @@
<AvatarFallback class="rounded-lg"> AA </AvatarFallback>
</Avatar>
</NuxtLink>
<div :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'flex-row justify-start items-center gap-2')">
<div :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'text-sm')">
<span class="truncate font-semibold">{{
displayName
}}</span>
@ -37,6 +37,10 @@
<script lang="ts" setup>
import { cn } from "@/lib/utils";
import type { StatusVisibility } from "@versia/client/types";
import type {
UseTimeAgoMessages,
UseTimeAgoUnitNamesDefault,
} from "@vueuse/core";
import { AtSign, Globe, Lock, LockOpen } from "lucide-vue-next";
import CopyableText from "./copyable-text.vue";
@ -52,7 +56,22 @@ const { acct, createdAt } = defineProps<{
}>();
const [username, instance] = acct.split("@");
const timeAgo = useTimeAgo(createdAt);
const digitRegex = /\d/;
const timeAgo = useTimeAgo(createdAt, {
messages: {
justNow: "now",
past: (n) => (n.match(digitRegex) ? `${n}` : n),
future: (n) => (n.match(digitRegex) ? `in ${n}` : n),
month: (n) => `${n}mo`,
year: (n) => `${n}y`,
day: (n) => `${n}d`,
week: (n) => `${n}w`,
hour: (n) => `${n}h`,
minute: (n) => `${n}m`,
second: (n) => `${n}s`,
invalid: "",
} as UseTimeAgoMessages<UseTimeAgoUnitNamesDefault>,
});
const fullTime = new Intl.DateTimeFormat("en-US", {
dateStyle: "medium",
timeStyle: "short",

4
components/notes/note.vue
View file

@ -1,5 +1,5 @@
<template>
<Card as="article" class="rounded-none border-0 duration-200 shadow-none max-w-full">
<Card as="article" class="rounded-none border-0 duration-200 shadow- max-w-full">
<CardHeader class="pb-4" as="header">
<ReblogHeader v-if="note.reblog" :avatar="note.account.avatar" :display-name="note.account.display_name"
:url="reblogAccountUrl" />
@ -11,7 +11,7 @@
<CardContent>
<Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments"/>
</CardContent>
<CardFooter v-if="!hideActions">
<CardFooter v-if="!hideActions" class="p-4 pt-0">
<Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"
:api-note-string="JSON.stringify(note, null, 4)" :reblog-count="noteToUse.reblogs_count" :remote-url="noteToUse.url" :is-remote="isRemote" :author-id="noteToUse.account.id" @edit="useEvent('composer:edit', note)" @reply="useEvent('composer:reply', note)" @quote="useEvent('composer:quote', note)" @delete="useEvent('note:delete', note)" :note-id="noteToUse.id" :liked="noteToUse.favourited ?? false" :reblogged="noteToUse.reblogged ?? false" />
</CardFooter>