refactor: convert src/components/UserChip.vue from class-based to Opt…

…ions/Composition API

Summary:
The conversion process involved:
1. Replacing the class-based structure with Options API format
2. Moving class properties to data()
3. Moving class methods to methods: {}
4. Moving computed properties to computed: {}
5. Using defineComponent for better TypeScript support
6. Maintaining the lifecycle hook (created)
7. Preserving all functionality and type safety

Warnings:
The store typing appears to rely on direct state mutation (this..state._user!), which might need attention during a Vue 3 migration. While this works in Vue 2, it's not recommended practice and might cause issues in strict mode or Vue 3.

packages/vue/src/components/UserChip.vue

@@ -43,55 +43,64 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import Component from 'vue-class-component';
+import { defineComponent } from 'vue';
 import { log } from 'util';
 import { setTimeout } from 'timers';
 import { User } from '../db/userDB';
 
-@Component({})
-export default class UserChip extends Vue {
-  private username: string = '';
-  private items: string[] = [
-    // 'sample1', 'sample2', 'sample3', 'sample4'
-  ];
+export default defineComponent({
+  name: 'UserChip',
+
+  data() {
+    return {
+      username: '',
+      items: [] as string[],
+      checked: false
+    };
+  },
+
+  computed: {
+    hasNewItems(): boolean {
+      return this.items.length > 0;
+    }
+  },
 
-  private checked: boolean = false;
   created() {
     User.instance().then((u) => {
       this.username = u.username;
     });
-  }
-  public async gotoSettings() {
-    this.$router.push(`/u/${(await User.instance()).username}`);
-  }
-  public async gotoStats() {
-    this.$router.push(`/u/${(await User.instance()).username}/stats`);
-  }
+  },
 
-  private dismiss(item: string) {
-    const index = this.items.indexOf(item);
-    this.items.splice(index, 1);
-  }
-  private async logout() {
-    const res = await this.$store.state._user!.logout();
-    if (res.ok) {
-      this.$store.state.userLoginAndRegistrationContainer = {
-        init: true,
-        loggedIn: false,
-        regDialogOpen: false,
-        loginDialogOpen: false,
-      };
-
-      this.$store.state.config.darkMode = false;
-      this.$store.state.config.likesConfetti = false;
-
-      this.$router.push('/home');
-    }
-  }
+  methods: {
+    async gotoSettings() {
+      this.$router.push(`/u/${(await User.instance()).username}`);
+    },
+
+    async gotoStats() {
+      this.$router.push(`/u/${(await User.instance()).username}/stats`);
+    },
+
+    dismiss(item: string) {
+      const index = this.items.indexOf(item);
+      this.items.splice(index, 1);
+    },
 
-  public get hasNewItems(): boolean {
-    return this.items.length > 0;
+    async logout() {
+      const res = await this.$store.state._user!.logout();
+      if (res.ok) {
+        this.$store.state.userLoginAndRegistrationContainer = {
+          init: true,
+          loggedIn: false,
+          regDialogOpen: false,
+          loginDialogOpen: false,
+        };
+
+        this.$store.state.config.darkMode = false;
+        this.$store.state.config.likesConfetti = false;
+
+        this.$router.push('/home');
+      }
+    }
   }
-}
+});
 </script>