mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
feat: ✨ Rework OIDC flow, add emoji autosuggestions
This commit is contained in:
Jesse Wierzbinski
parent
7253a01921
commit
a03392bbc3
22 changed files with 358 additions and 78 deletions
|
|
@ -22,6 +22,8 @@
|
|||
:class="['absolute bottom-0 right-0 p-2 text-gray-400 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']">
|
||||
{{ remainingCharacters }}
|
||||
</div>
|
||||
<ComposerEmojiSuggestbox :currently-typing-emoji="currentlyBeingTypedEmoji"
|
||||
@autocomplete="autocompleteEmoji" />
|
||||
</div>
|
||||
<!-- Content warning textbox -->
|
||||
<div v-if="cw" class="mb-4">
|
||||
|
|
@ -56,6 +58,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { char, createRegExp, exactly } from "magic-regexp";
|
||||
import type { Instance } from "~/types/mastodon/instance";
|
||||
import type { Status } from "~/types/mastodon/status";
|
||||
import { OverlayScrollbarsComponent } from "#imports";
|
||||
|
|
@ -74,10 +77,25 @@ const markdown = ref(true);
|
|||
|
||||
const splashes = useConfig().COMPOSER_SPLASHES;
|
||||
const chosenSplash = ref(splashes[Math.floor(Math.random() * splashes.length)]);
|
||||
const currentlyBeingTypedEmoji = computed(() => {
|
||||
const match = content.value?.match(partiallyTypedEmojiValidator);
|
||||
return match ? match.at(-1)?.replace(":", "") ?? "" : null;
|
||||
});
|
||||
|
||||
const autocompleteEmoji = (emoji: string) => {
|
||||
// Replace the end of the string with the emoji
|
||||
content.value = content.value?.replace(
|
||||
createRegExp(
|
||||
exactly(":"),
|
||||
exactly(currentlyBeingTypedEmoji.value ?? "").notBefore(char),
|
||||
),
|
||||
`:${emoji}:`,
|
||||
);
|
||||
};
|
||||
|
||||
watch(Control_Alt, () => {
|
||||
chosenSplash.value = splashes[Math.floor(Math.random() * splashes.length)];
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
useListen("composer:reply", (note: Status) => {
|
||||
respondingTo.value = note;
|
||||
|
|
|
|||
87
components/composer/emoji-suggestbox.vue
Normal file
87
components/composer/emoji-suggestbox.vue
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<ComposerSuggestbox class="max-h-40 overflow-auto !w-auto !flex-row">
|
||||
<div v-for="(emoji, index) in topEmojis" :key="emoji.shortcode" @click="emit('autocomplete', emoji.shortcode)"
|
||||
:ref="el => { if (el) emojiRefs[index] = el as Element }" :title="emoji.shortcode"
|
||||
:class="['flex', 'justify-center', 'shrink-0', 'items-center', 'p-2', 'hover:bg-dark-900/70', { 'bg-pink-500': index === selectedEmojiIndex }]">
|
||||
<img :src="emoji.url" class="w-8 h-8" :alt="`Emoji with shortcode ${emoji.shortcode}`" />
|
||||
</div>
|
||||
</ComposerSuggestbox>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { distance } from "fastest-levenshtein";
|
||||
import type { UnwrapRef } from "vue";
|
||||
const props = defineProps<{
|
||||
currentlyTypingEmoji: string | null;
|
||||
}>();
|
||||
|
||||
const emojiRefs = ref<Element[]>([]);
|
||||
const customEmojis = useCustomEmojis();
|
||||
const { Tab, ArrowRight, ArrowLeft, Enter } = useMagicKeys({
|
||||
passive: false,
|
||||
onEventFired(e) {
|
||||
if (
|
||||
["Tab", "Enter", "ArrowRight", "ArrowLeft"].includes(e.key) &&
|
||||
topEmojis.value !== null
|
||||
)
|
||||
e.preventDefault();
|
||||
},
|
||||
});
|
||||
const topEmojis = ref<UnwrapRef<typeof customEmojis> | null>(null);
|
||||
const selectedEmojiIndex = ref<number | null>(null);
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.currentlyTypingEmoji !== null)
|
||||
topEmojis.value = customEmojis.value
|
||||
.map((emoji) => ({
|
||||
...emoji,
|
||||
distance: distance(
|
||||
props.currentlyTypingEmoji as string,
|
||||
emoji.shortcode,
|
||||
),
|
||||
}))
|
||||
.sort((a, b) => a.distance - b.distance)
|
||||
.slice(0, 20);
|
||||
else topEmojis.value = null;
|
||||
|
||||
if (ArrowRight.value && topEmojis.value !== null) {
|
||||
selectedEmojiIndex.value = (selectedEmojiIndex.value ?? -1) + 1;
|
||||
if (selectedEmojiIndex.value >= topEmojis.value.length) {
|
||||
selectedEmojiIndex.value = 0;
|
||||
}
|
||||
emojiRefs.value[selectedEmojiIndex.value]?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
});
|
||||
}
|
||||
|
||||
if (ArrowLeft.value && topEmojis.value !== null) {
|
||||
selectedEmojiIndex.value =
|
||||
(selectedEmojiIndex.value ?? topEmojis.value.length) - 1;
|
||||
if (selectedEmojiIndex.value < 0) {
|
||||
selectedEmojiIndex.value = topEmojis.value.length - 1;
|
||||
}
|
||||
emojiRefs.value[selectedEmojiIndex.value]?.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "nearest",
|
||||
});
|
||||
}
|
||||
|
||||
if ((Tab.value || Enter.value) && topEmojis.value !== null) {
|
||||
const emoji = topEmojis.value[selectedEmojiIndex.value ?? 0];
|
||||
if (emoji) emit("autocomplete", emoji.shortcode);
|
||||
}
|
||||
});
|
||||
|
||||
// When currentlyTypingEmoji changes, reset the selected emoji index
|
||||
watch(
|
||||
() => props.currentlyTypingEmoji,
|
||||
() => {
|
||||
selectedEmojiIndex.value = null;
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{
|
||||
autocomplete: [emoji: string];
|
||||
}>();
|
||||
</script>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
leave-from="opacity-100 translate-y-0 sm:scale-100"
|
||||
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
|
||||
<HeadlessDialogPanel
|
||||
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
|
||||
class="relative transform rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
|
||||
<Composer v-if="instance" :instance="instance" />
|
||||
</HeadlessDialogPanel>
|
||||
</HeadlessTransitionChild>
|
||||
|
|
@ -44,5 +44,5 @@ useListen("composer:close", () => {
|
|||
});
|
||||
const client = useMegalodon();
|
||||
const tokenData = useTokenData();
|
||||
const instance = useInstance(client);
|
||||
const instance = useInstance();
|
||||
</script>
|
||||
8
components/composer/suggestbox.vue
Normal file
8
components/composer/suggestbox.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<div class="w-full max-w-full rounded ring-1 ring-dark-300 bg-dark-800 absolute z-20 flex flex-col">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
</script>
|
||||
|
|
@ -10,6 +10,15 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
const loading = ref(true);
|
||||
const oidcError = useRequestURL().searchParams.get(
|
||||
"oidc_account_linking_error",
|
||||
);
|
||||
const oidcErrorDesc = useRequestURL().searchParams.get(
|
||||
"oidc_account_linking_error_message",
|
||||
);
|
||||
const oidcAccountLinked = useRequestURL().searchParams.get(
|
||||
"oidc_account_linked",
|
||||
);
|
||||
|
||||
const estimatedProgress = (duration: number, elapsed: number) =>
|
||||
(2 / Math.PI) * 100 * Math.atan(((elapsed / duration) * 100) / 50);
|
||||
|
|
@ -29,5 +38,42 @@ app.hook("page:finish", async () => {
|
|||
// Wait until page has loaded for at least 1 second
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
loading.value = false;
|
||||
|
||||
if (oidcError) {
|
||||
useEvent("notification:new", {
|
||||
type: "error",
|
||||
title: oidcError,
|
||||
message: oidcErrorDesc ?? undefined,
|
||||
persistent: true,
|
||||
onDismiss: () => {
|
||||
// Remove data from URL
|
||||
window.history.replaceState(
|
||||
{},
|
||||
document.title,
|
||||
window.location.pathname,
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
// Remove the error from the URL
|
||||
}
|
||||
|
||||
if (oidcAccountLinked) {
|
||||
useEvent("notification:new", {
|
||||
type: "info",
|
||||
title: "Account linked",
|
||||
message:
|
||||
"Your account has been successfully linked to your OpenID Connect provider.",
|
||||
persistent: true,
|
||||
onDismiss: () => {
|
||||
// Remove data from URL
|
||||
window.history.replaceState(
|
||||
{},
|
||||
document.title,
|
||||
window.location.pathname,
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
65
components/notifications/Renderer.vue
Normal file
65
components/notifications/Renderer.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div aria-live="assertive" class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6">
|
||||
<div class="flex w-full flex-col items-center space-y-4 sm:items-end">
|
||||
<!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
|
||||
<TransitionGroup enter-active-class="transform ease-out duration-300 transition"
|
||||
enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
|
||||
enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
|
||||
leave-active-class="transition transform ease-in duration-100"
|
||||
leave-from-class="translate-y-0 opacity-100 sm:translate-x-0"
|
||||
leave-to-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2">
|
||||
<div v-for="notification in notifications" :key="notification.id"
|
||||
class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-dark-500 shadow-lg ring-1 ring-white/10">
|
||||
<div class="p-4">
|
||||
<div class="flex items-start">
|
||||
<div class="shrink-0 h-6 w-6">
|
||||
<iconify-icon v-if="notification.type === 'info'" icon="tabler:check" height="none"
|
||||
class="h-6 w-6 text-green-400" aria-hidden="true" />
|
||||
<iconify-icon v-else-if="notification.type === 'error'" icon="tabler:alert-triangle"
|
||||
height="none" class="h-6 w-6 text-red-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div class="ml-3 w-0 flex-1 pt-0.5">
|
||||
<p class="text-sm font-semibold text-gray-50">{{ notification.title }}</p>
|
||||
<p class="mt-1 text-sm text-gray-400" v-if="notification.message">{{
|
||||
notification.message }}</p>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-shrink-0">
|
||||
<button type="button" title="Close this notification"
|
||||
@click="notifications.splice(notifications.indexOf(notification), 1); notification.onDismiss?.()"
|
||||
class="inline-flex rounded-md text-gray-400 hover:text-gray-300 duration-200">
|
||||
<iconify-icon icon="tabler:x" class="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const notifications = ref<
|
||||
(NotificationEvent & {
|
||||
id: string;
|
||||
})[]
|
||||
>([]);
|
||||
|
||||
useListen("notification:new", (n) => {
|
||||
const newNotification = {
|
||||
...n,
|
||||
id: Math.random().toString(36).substring(7),
|
||||
};
|
||||
|
||||
notifications.value.push(newNotification);
|
||||
|
||||
!newNotification.persistent &&
|
||||
setTimeout(() => {
|
||||
notifications.value.splice(
|
||||
notifications.value.indexOf(newNotification),
|
||||
1,
|
||||
);
|
||||
newNotification.onDismiss?.();
|
||||
}, 5000);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="flex flex-col p-10 gap-4 h-full">
|
||||
<div
|
||||
class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
|
||||
<img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
|
||||
v-if="instance?.banner" alt="Instance banner" :src="instance.banner" />
|
||||
<img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out" v-if="instance?.banner"
|
||||
alt="Instance banner" :src="instance.banner" />
|
||||
</div>
|
||||
|
||||
<div class="prose prose-invert prose-sm">
|
||||
|
|
@ -20,6 +20,6 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
const client = useMegalodon();
|
||||
const instance = useInstance(client);
|
||||
const instance = useInstance();
|
||||
const description = useExtendedDescription(client);
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue