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

app/components/editor/bubble-menu.vue

@@ -68,9 +68,10 @@ watch(active, (value) => {
 </script>
 
 <template>
-    <BubbleMenu :editor="editor" class="bg-popover rounded-md">
+    <BubbleMenu :editor="editor">
         <ToggleGroup type="multiple"
             v-model="active"
+             class="bg-popover rounded-md"
         >
             <ToggleGroupItem value="bold">
                 <BoldIcon />

app/components/editor/content.vue

@@ -29,6 +29,7 @@ const {
     mode?: "rich" | "plain";
     disabled?: boolean;
 }>();
+const authStore = useAuthStore();
 
 const emit = defineEmits<{
     pasteFiles: [files: File[]];
@@ -53,13 +54,13 @@ const editor = new Editor({
         }),
         Emoji.configure({
             emojis: emojis.concat(
-                identity.value?.emojis.map((emoji) => ({
+                authStore.emojis.map((emoji) => ({
                     name: emoji.shortcode,
                     shortcodes: [emoji.shortcode],
                     group: emoji.category ?? undefined,
                     tags: [],
                     fallbackImage: emoji.url,
-                })) || [],
+                })),
             ),
             HTMLAttributes: {
                 class: "emoji not-prose",

app/components/editor/emojis-list.vue

@@ -26,14 +26,13 @@ const { items, command } = defineProps<{
     items: string[];
     command: (value: { name: string }) => void;
 }>();
+const authStore = useAuthStore();
 
 const selectedIndex = ref(0);
 const emojis = computed(() => {
     return items
         .map((item) => {
-            return identity.value?.emojis.find(
-                (emoji) => emoji.shortcode === item,
-            );
+            return authStore.emojis.find((emoji) => emoji.shortcode === item);
         })
         .filter((emoji) => emoji !== undefined);
 });

app/components/editor/suggestion.ts

@@ -14,6 +14,8 @@ export type UserData = {
     value: z.infer<typeof Account>;
 };
 
+const authStore = useAuthStore();
+
 const updatePosition = (editor: Editor, element: HTMLElement): void => {
     const virtualElement = {
         getBoundingClientRect: () =>
@@ -42,7 +44,9 @@ export const mentionSuggestion = {
             return [];
         }
 
-        const users = await client.value.searchAccount(query, { limit: 20 });
+        const users = await authStore.client.searchAccount(query, {
+            limit: 20,
+        });
 
         return go(
             query,
@@ -122,7 +126,7 @@ export const emojiSuggestion = {
             return [];
         }
 
-        const emojis = (identity.value as Identity).emojis;
+        const emojis = authStore.emojis;
 
         return go(
             query,