From df33fb4ce24b7da736abe93d82ce0234f3ee8e07 Mon Sep 17 00:00:00 2001
From: "Mr. Stallion" <mrstallion@nobody.nowhere.fauxdomain.ext>
Date: Sun, 21 May 2023 23:07:07 -0700
Subject: [PATCH] sidepanel profile view

---
 chat/UserList.vue | 138 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 133 insertions(+), 5 deletions(-)

diff --git a/chat/UserList.vue b/chat/UserList.vue
index c10a8aa..1a5cd8e 100644
--- a/chat/UserList.vue
+++ b/chat/UserList.vue
@@ -1,7 +1,7 @@
 <template>
     <sidebar id="user-list" :label="l('users.title')" icon="fa-users" :right="true" :open="expanded">
-        <tabs style="flex-shrink:0" :tabs="channel ? [l('users.friends'), l('users.members')] : [l('users.friends')]" v-model="tab"></tabs>
-        <div class="users" style="padding-left:10px" v-show="tab === '0'">
+        <tabs style="flex-shrink:0" :tabs="channel ? { friends: l('users.friends'), members: l('users.members') } : { profile: 'Profile', friends: l('users.friends') }" v-model="tab"></tabs>
+        <div class="users" style="padding-left:10px" v-show="tab === 'friends'">
             <h4>{{l('users.friends')}}</h4>
             <div v-for="character in friends" :key="character.name">
                 <user :character="character" :showStatus="true" :bookmark="false"></user>
@@ -11,7 +11,7 @@
                 <user :character="character" :showStatus="true" :bookmark="false"></user>
             </div>
         </div>
-        <div v-if="channel" style="padding-left:5px;flex:1;display:flex;flex-direction:column" v-show="tab === '1'">
+        <div v-if="channel" style="padding-left:5px;flex:1;display:flex;flex-direction:column" v-show="tab === 'members'">
             <div class="users" style="flex:1;padding-left:5px">
                 <h4>{{l('users.memberCount', channel.sortedMembers.length)}} <a class="btn sort" @click="switchSort"><i class="fa fa-sort"></i></a></h4>
                 <div v-for="member in filteredMembers" :key="member.character.name">
@@ -25,6 +25,9 @@
                 <input class="form-control" v-model="filter" :placeholder="l('filter')" type="text"/>
             </div>
         </div>
+        <div v-if="!channel" style="flex:1;display:flex;flex-direction:column" class="profile" v-show="tab === 'profile'">
+           <character-page :authenticated="true" :oldApi="true" :name="profileName" :image-preview="true" ref="characterPage"></character-page>
+        </div>
     </sidebar>
 </template>
 
@@ -38,6 +41,7 @@
     import Sidebar from './Sidebar.vue';
     import UserView from './UserView.vue';
     import _ from 'lodash';
+    import characterPage from '../site/character_page/character_page.vue';
 
     type StatusSort = {
       [key in Character.Status]: number;
@@ -72,10 +76,10 @@
     const availableSorts = ['normal', 'status', 'gender'] as const;
 
     @Component({
-        components: {user: UserView, sidebar: Sidebar, tabs: Tabs}
+        components: {characterPage, user: UserView, sidebar: Sidebar, tabs: Tabs}
     })
     export default class UserList extends Vue {
-        tab = '0';
+        tab = 'friends';
         expanded = window.innerWidth >= 992;
         filter = '';
         l = l;
@@ -95,6 +99,10 @@
             return (<Conversation.ChannelConversation>core.conversations.selectedConversation).channel;
         }
 
+        get profileName(): string | undefined {
+          return this.channel ? undefined : core.conversations.selectedConversation.name;
+        }
+
         get filteredMembers(): ReadonlyArray<Channel.Member> {
           const members = this.getFilteredMembers();
 
@@ -189,6 +197,12 @@
             border-top-left-radius: 0;
         }
 
+        .sidebar {
+          .body {
+            overflow-x: hidden;
+          }
+        }
+
         @media (min-width: breakpoint-min(md)) {
             .sidebar {
                 position: static;
@@ -205,5 +219,119 @@
         &.open .body {
             display: flex;
         }
+
+      .profile {
+        h4 {
+          margin: 0.5rem 0 0.5rem 0 !important;
+          padding-left: 0.2rem;
+          padding-right: 0.2rem;
+        }
+
+        .match-report {
+          display: none;
+        }
+
+        .row.character-page {
+          display: block;
+          margin-right: 0;
+          margin-left: 0;
+
+          > div {
+            max-width: 100% !important;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            flex: 0 0 100%;
+          }
+        }
+
+        #character-page-sidebar {
+          border: none;
+          background-color: transparent !important;
+        }
+
+        .card-body {
+          padding: 0;
+        }
+
+        .character-page {
+          .character-links-block,
+          .character-avatar,
+          .character-page-note-link,
+          .character-card-header,
+          .compare-highlight-block
+          {
+            display: none !important;
+          }
+
+          #characterView {
+            .card {
+              border: none !important;
+              background-color: transparent !important;
+            }
+          }
+
+          .infotag {
+            margin: 0;
+            padding: 0;
+            margin-bottom: 0.3rem;
+
+            .infotag-value {
+              margin: 0;
+            }
+          }
+
+          .quick-info {
+            display: none !important;
+          }
+
+          .character-kinks-block {
+            > div {
+              flex-direction: column !important;
+              margin: 0 !important;
+
+              > div {
+                min-width: 100% !important;
+                padding: 0 !important;
+
+                .card {
+                  border: none !important;
+
+                  .card-header {
+                    margin: 0;
+                    padding: 0;
+                  }
+
+                  .character-kink {
+                    margin: 0;
+                    padding: 0;
+
+                    &.stock-kink {
+                      padding-left: 0.2rem !important;
+                      margin-right: 0.3rem !important;
+                      margin-left: 0.1rem !important;
+                    }
+
+                    &.custom-kink {
+                      margin-bottom: 0.3rem;
+                      border: none;
+                      margin-left: auto;
+                      max-width: 95%;
+                      margin-right: auto;
+                      padding-bottom: 0.5rem;
+                      border-bottom: 1px var(--characterKinkCustomBorderColor) solid;
+                    }
+
+                    .popover {
+                      min-width: 180px;
+                      max-width: 180px;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
     }
 </style>