From 32ff6d48cdde8d6f2b2a0e216c035aaf3e73167d Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sat, 29 Aug 2026 04:17:41 -0600
Subject: [PATCH] Update Profile component

---
 resources/assets/components/Profile.vue | 275 +++++++++++-------------
 1 file changed, 131 insertions(+), 144 deletions(-)

diff --git a/resources/assets/components/Profile.vue b/resources/assets/components/Profile.vue
index ef0d57cb4..abccbb4bd 100644
--- a/resources/assets/components/Profile.vue
+++ b/resources/assets/components/Profile.vue
@@ -5,54 +5,41 @@
                 <div class="row justify-content-center">
                     <div class="col-12 col-md-6">
                         <div class="card shadow-none border card-body mt-5 mb-3 ft-std" style="border-radius: 20px;">
-                            <p class="lead font-weight-bold text-center mb-0"><i class="far fa-exclamation-triangle mr-2"></i>This account has indicated their new account is:</p>
+                            <p class="lead font-weight-bold text-center mb-0"><i
+                                    class="far fa-exclamation-triangle mr-2"></i>This account has indicated their new
+                                account is:</p>
                         </div>
                         <div class="card shadow-none border" style="border-radius: 20px;">
                             <div class="card-body ft-std">
                                 <div class="d-flex justify-content-between align-items-center" style="gap: 1rem;">
                                     <div class="d-flex align-items-center flex-shrink-1" style="gap: 1rem;">
-                                        <img :src="profile.moved.avatar" width="50" height="50" class="rounded-circle" onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
-                                        <p class="h3 font-weight-light mb-0 text-break">&commat;{{ profile.moved.acct }}</p>
+                                        <img :src="profile.moved.avatar" width="50" height="50" class="rounded-circle"
+                                            onerror="this.onerror=null;this.src='/storage/avatars/default.jpg?v=0';">
+                                        <p class="h3 font-weight-light mb-0 text-break">&commat;{{ profile.moved.acct }}
+                                        </p>
                                     </div>
 
                                     <div class="d-flex flex-grow-1 justify-content-end" style="min-width: 200px;">
-                                        <router-link
-                                            :to="`/i/web/profile/${profile.moved.id}`"
-                                            class="btn btn-outline-primary rounded-pill font-weight-bold"
-                                            >View New Account</router-link>
+                                        <router-link :to="`/i/web/profile/${profile.moved.id}`"
+                                            class="btn btn-outline-primary rounded-pill font-weight-bold">View New
+                                            Account</router-link>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        <hr>
-                        <p class="lead text-center ft-std">
-                            <a
-                                href="#"
-                                class="btn btn-primary btn-lg rounded-pill font-weight-bold px-5"
-                                @click.prevent="showMoved = true">Proceed</a>
-                        </p>
                     </div>
                 </div>
             </div>
             <div v-else class="row">
                 <div class="col-md-3 d-md-block px-md-3 px-xl-5">
-                    <profile-sidebar
-                        :profile="profile"
-                        :relationship="relationship"
-                        :user="curUser"
-                        v-on:back="goBack"
-                        v-on:toggletab="toggleTab"
-                        v-on:updateRelationship="updateRelationship"
-                        @follow="follow"
+                    <profile-sidebar :profile="profile" :relationship="relationship" :user="curUser" v-on:back="goBack"
+                        v-on:toggletab="toggleTab" v-on:updateRelationship="updateRelationship" @follow="follow"
                         @unfollow="unfollow" />
                 </div>
 
                 <div class="col-md-8 px-md-5">
-                    <component
-                        v-bind:is="getTabComponentName()"
-                        :key="getTabComponentName() + profile.id"
-                        :profile="profile"
-                        :relationship="relationship" />
+                    <component v-bind:is="getTabComponentName()" :key="getTabComponentName() + profile.id"
+                        :profile="profile" :relationship="relationship" />
                 </div>
             </div>
 
@@ -62,102 +49,102 @@
 </template>
 
 <script type="text/javascript">
-    import Drawer from './partials/drawer.vue';
-    import ProfileFeed from './partials/profile/ProfileFeed.vue';
-    import ProfileSidebar from './partials/profile/ProfileSidebar.vue';
-    import ProfileFollowers from './partials/profile/ProfileFollowers.vue';
-    import ProfileFollowing from './partials/profile/ProfileFollowing.vue';
-
-    export default {
-        props: {
-            id: {
-                type: String
-            },
-
-            profileId: {
-                type: String
-            },
-
-            username: {
-                type: String
-            },
-
-            cachedProfile: {
-                type: Object
-            },
-
-            cachedUser: {
-                type: Object
-            }
-        },
-
-        components: {
-            "drawer": Drawer,
-            "profile-feed": ProfileFeed,
-            "profile-sidebar": ProfileSidebar,
-            "profile-followers": ProfileFollowers,
-            "profile-following": ProfileFollowing
+import Drawer from './partials/drawer.vue';
+import ProfileFeed from './partials/profile/ProfileFeed.vue';
+import ProfileSidebar from './partials/profile/ProfileSidebar.vue';
+import ProfileFollowers from './partials/profile/ProfileFollowers.vue';
+import ProfileFollowing from './partials/profile/ProfileFollowing.vue';
+
+export default {
+    props: {
+        id: {
+            type: String
         },
 
-        data() {
-            return {
-                isLoaded: false,
-                curUser: undefined,
-                tab: "index",
-                profile: undefined,
-                relationship: undefined,
-                showMoved: false,
-            }
+        profileId: {
+            type: String
         },
 
-        mounted() {
-            this.init();
+        username: {
+            type: String
         },
 
-        watch: {
-            '$route': 'init'
+        cachedProfile: {
+            type: Object
         },
 
-        methods: {
-            init() {
-                this.tab = 'index';
-                this.isLoaded = false;
-                this.relationship = undefined;
-                this.owner = false;
-
-                if(this.cachedProfile && this.cachedUser) {
-                    this.curUser = this.cachedUser;
-                    this.profile = this.cachedProfile;
-                    // this.fetchPosts();
-                    // this.isLoaded = true;
-                    this.fetchRelationship();
-                    if(this.cachedProfile && this.cachedProfile.local) {
-                        window.history.pushState({}, '', `/${this.cachedProfile.acct}`);
-                    }
-                } else {
-                    this.curUser = window._sharedData.user;
-                    this.fetchProfile();
+        cachedUser: {
+            type: Object
+        }
+    },
+
+    components: {
+        "drawer": Drawer,
+        "profile-feed": ProfileFeed,
+        "profile-sidebar": ProfileSidebar,
+        "profile-followers": ProfileFollowers,
+        "profile-following": ProfileFollowing
+    },
+
+    data() {
+        return {
+            isLoaded: false,
+            curUser: undefined,
+            tab: "index",
+            profile: undefined,
+            relationship: undefined,
+            showMoved: false,
+        }
+    },
+
+    mounted() {
+        this.init();
+    },
+
+    watch: {
+        '$route': 'init'
+    },
+
+    methods: {
+        init() {
+            this.tab = 'index';
+            this.isLoaded = false;
+            this.relationship = undefined;
+            this.owner = false;
+
+            if (this.cachedProfile && this.cachedUser) {
+                this.curUser = this.cachedUser;
+                this.profile = this.cachedProfile;
+                // this.fetchPosts();
+                // this.isLoaded = true;
+                this.fetchRelationship();
+                if (this.cachedProfile && this.cachedProfile.local) {
+                    window.history.pushState({}, '', `/${this.cachedProfile.acct}`);
                 }
-            },
+            } else {
+                this.curUser = window._sharedData.user;
+                this.fetchProfile();
+            }
+        },
 
-            getTabComponentName() {
-                switch(this.tab) {
-                    case 'index':
-                        return "profile-feed";
+        getTabComponentName() {
+            switch (this.tab) {
+                case 'index':
+                    return "profile-feed";
                     break;
 
-                    default:
-                        return `profile-${this.tab}`;
+                default:
+                    return `profile-${this.tab}`;
                     break;
-                }
-            },
+            }
+        },
 
-            fetchProfile() {
-                let id = this.profileId ? this.profileId : this.id;
-                axios.get('/api/pixelfed/v1/accounts/' + id)
+        fetchProfile() {
+            let id = this.profileId ? this.profileId : this.id;
+            axios.get('/api/pixelfed/v1/accounts/' + id)
                 .then(res => {
                     this.profile = res.data;
-                    if(res.data.id == this.curUser.id) {
+                    if (res.data.id == this.curUser.id) {
                         this.owner = true;
                         // this.isLoaded = true;
                         // this.loaded();
@@ -168,46 +155,46 @@
                         this.fetchRelationship();
                     }
 
-                    if(res.data && res.data.local) {
+                    if (res.data && res.data.local) {
                         window.history.pushState({}, '', `/${res.data.acct}`);
                     }
                 })
                 .catch(err => {
                     this.$router.push('/i/web/404');
                 });
-            },
+        },
 
-            fetchRelationship() {
-                if(this.owner) {
-                    this.relationship = {};
-                    this.isLoaded = true;
-                    return;
-                }
+        fetchRelationship() {
+            if (this.owner) {
+                this.relationship = {};
+                this.isLoaded = true;
+                return;
+            }
 
-                axios.get('/api/v1/accounts/relationships', {
-                    params: {
-                        'id[]': this.profile.id
-                    }
-                }).then(res => {
-                    this.relationship = res.data[0];
-                    this.isLoaded = true;
-                })
-            },
+            axios.get('/api/v1/accounts/relationships', {
+                params: {
+                    'id[]': this.profile.id
+                }
+            }).then(res => {
+                this.relationship = res.data[0];
+                this.isLoaded = true;
+            })
+        },
 
-            toggleTab(tab) {
-                this.tab = tab;
-            },
+        toggleTab(tab) {
+            this.tab = tab;
+        },
 
-            goBack() {
-                this.$router.go(-1);
-            },
+        goBack() {
+            this.$router.go(-1);
+        },
 
-            unfollow() {
-                axios.post('/api/v1/accounts/' + this.profile.id + '/unfollow')
+        unfollow() {
+            axios.post('/api/v1/accounts/' + this.profile.id + '/unfollow')
                 .then(res => {
                     this.$store.commit('updateRelationship', [res.data])
                     this.relationship = res.data;
-                    if(this.profile.locked) {
+                    if (this.profile.locked) {
                         location.reload();
                     }
                     this.profile.followers_count--;
@@ -215,14 +202,14 @@
                     swal('Oops!', 'An error occured when attempting to unfollow this account.', 'error');
                     this.relationship.following = true;
                 });
-            },
+        },
 
-            follow() {
-                axios.post('/api/v1/accounts/' + this.profile.id + '/follow')
+        follow() {
+            axios.post('/api/v1/accounts/' + this.profile.id + '/follow')
                 .then(res => {
                     this.$store.commit('updateRelationship', [res.data])
                     this.relationship = res.data;
-                    if(this.profile.locked) {
+                    if (this.profile.locked) {
                         this.relationship.requested = true;
                     }
                     this.profile.followers_count++;
@@ -230,17 +217,17 @@
                     swal('Oops!', 'An error occured when attempting to follow this account.', 'error');
                     this.relationship.following = false;
                 });
-            },
+        },
 
-            updateRelationship(val) {
-                this.relationship = val;
-            }
+        updateRelationship(val) {
+            this.relationship = val;
         }
     }
+}
 </script>
 
 <style lang="scss" scoped>
-    .profile-timeline-component {
-        margin-bottom: 10rem;
-    }
+.profile-timeline-component {
+    margin-bottom: 10rem;
+}
 </style>