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

refactor: ♻️ Rewrite state system to use Pinia for composer and auth

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-08-28 07:41:51 +02:00
parent a6db9e059d
commit b510782a30
No known key found for this signature in database
80 changed files with 999 additions and 1011 deletions
Download patch file Download diff file Expand all files Collapse all files

45
app/components/sidebars/account/account-manager.vue
View file

@ -10,15 +10,15 @@
Manage your accounts and settings.
</DialogDescription>
</DialogHeader>
<div v-if="identities.length > 0" class="grid gap-4 py-2">
<div v-for="identity of identities" :key="identity.account.id"
<div v-if="authStore.identities.length > 0" class="grid gap-4 py-2">
<div v-for="identity of authStore.identities" :key="identity.account.id"
class="grid grid-cols-[1fr_auto] has-[>[data-switch]]:grid-cols-[1fr_auto_auto] gap-2">
<TinyCard :account="identity.account" :domain="identity.instance.domain" naked />
<Button data-switch v-if="currentIdentity?.id !== identity.id"
@click="switchAccount(identity.account.id)" variant="outline">
<Button data-switch v-if="authStore.identity?.id !== identity.id"
@click="authStore.setActiveIdentity(identity.id)" variant="outline">
Switch
</Button>
<Button @click="signOut(appData, identity)" variant="outline" size="icon"
<Button @click="signOutAction(identity.id)" variant="outline" size="icon"
:title="m.sharp_big_mallard_reap()">
<LogOut />
</Button>
@ -47,7 +47,6 @@
import { LogIn, LogOut, UserPlus } from "lucide-vue-next";
import { toast } from "vue-sonner";
import { NuxtLink } from "#components";
import { identity as currentIdentity } from "#imports";
import TinyCard from "~/components/profiles/tiny-card.vue";
import { Button } from "~/components/ui/button";
import {
@ -61,31 +60,25 @@ import {
} from "~/components/ui/dialog";
import * as m from "~~/paraglide/messages.js";
const appData = useAppData();
const authStore = useAuthStore();
const signInAction = async () => {
const instance = await askForInstance();
const signInAction = async () => signIn(appData, await askForInstance());
const id = toast.loading(m.level_due_ox_greet());
const switchAccount = async (userId: string) => {
if (userId === currentIdentity.value?.account.id) {
return await navigateTo(`/@${currentIdentity.value.account.username}`);
}
const id = toast.loading("Switching account...");
const identityToSwitch = identities.value.find(
(i) => i.account.id === userId,
);
if (!identityToSwitch) {
try {
await authStore.startSignIn(instance);
} catch (e) {
console.error(e);
toast.dismiss(id);
toast.error("No identity to switch to");
return;
}
};
currentIdentity.value = identityToSwitch;
const signOutAction = async (identityId: string) => {
const id = toast.loading("Signing out...");
await authStore.signOut(identityId);
toast.dismiss(id);
toast.success("Switched account");
window.location.href = "/";
toast.success("Signed out");
};
</script>

9
app/components/sidebars/footer/footer-actions.vue
View file

@ -18,6 +18,7 @@ import * as m from "~~/paraglide/messages.js";
import AccountManager from "../account/account-manager.vue";
const { $pwa } = useNuxtApp();
const authStore = useAuthStore();
</script>
<template>
@ -25,8 +26,8 @@ const { $pwa } = useNuxtApp();
<SidebarMenu class="gap-3">
<SidebarMenuItem>
<AccountManager>
<SidebarMenuButton v-if="identity" size="lg">
<TinyCard :account="identity.account" :domain="identity.instance.domain" naked />
<SidebarMenuButton v-if="authStore.account && authStore.instance" size="lg">
<TinyCard :account="authStore.account" :domain="authStore.instance.domain" naked />
<ChevronsUpDown class="ml-auto size-4" />
</SidebarMenuButton>
<SidebarMenuButton v-else>
@ -37,14 +38,14 @@ const { $pwa } = useNuxtApp();
</AccountManager>
</SidebarMenuItem>
<SidebarMenuItem class="flex flex-col gap-2">
<Button v-if="identity" variant="default" size="lg" class="w-full group-data-[collapsible=icon]:px-4"
<Button v-if="authStore.isSignedIn" variant="default" size="lg" class="w-full group-data-[collapsible=icon]:px-4"
@click="useEvent('composer:open')">
<Pen />
<span class="group-data-[collapsible=icon]:hidden">
{{ m.salty_aloof_turkey_nudge() }}
</span>
</Button>
<Button v-if="identity" size="lg" variant="secondary" @click="useEvent('preferences:open')">
<Button v-if="authStore.isSignedIn" size="lg" variant="secondary" @click="useEvent('preferences:open')">
<Cog />
Preferences
</Button>

4
app/components/sidebars/instance/instance-header.vue
View file

@ -6,7 +6,7 @@ import {
SidebarMenuItem,
} from "~/components/ui/sidebar";
const instance = useInstance();
const authStore = useAuthStore();
</script>
<template>
@ -14,7 +14,7 @@ const instance = useInstance();
<SidebarMenu>
<SidebarMenuItem>
<NuxtLink href="/">
<InstanceSmallCard v-if="instance" :instance="instance" />
<InstanceSmallCard v-if="authStore.instance" :instance="authStore.instance" />
</NuxtLink>
</SidebarMenuItem>
</SidebarMenu>

4
app/components/sidebars/left-sidebar.vue
View file

@ -9,7 +9,7 @@
<NavItems
:items="
sidebarConfig.other.filter((i) =>
i.requiresLogin ? !!identity : true
i.requiresLogin ? authStore.isSignedIn : true
)
"
/>
@ -33,4 +33,6 @@ import * as m from "~~/paraglide/messages.js";
import FooterActions from "./footer/footer-actions.vue";
import InstanceHeader from "./instance/instance-header.vue";
import NavItems from "./navigation/nav-items.vue";
const authStore = useAuthStore();
</script>

3
app/components/sidebars/sidebar.vue
View file

@ -10,6 +10,7 @@ const showTimelines = computed(
["/", "/home", "/local", "/public", "/global"].includes(route.path) &&
isMd.value,
);
const authStore = useAuthStore();
</script>
<template>
@ -23,5 +24,5 @@ const showTimelines = computed(
</header>
<slot />
</main>
<RightSidebar v-if="identity" v-show="preferences.display_notifications_sidebar" />
<RightSidebar v-if="authStore.isSignedIn" v-show="preferences.display_notifications_sidebar" />
</template>