WIP PWA for Grain
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: add settings icon to own profile header

+39 -1
+39 -1
src/components/organisms/grain-profile-header.js
··· 1 1 import { LitElement, html, css } from 'lit'; 2 + import { router } from '../../router.js'; 3 + import { auth } from '../../services/auth.js'; 2 4 import '../atoms/grain-avatar.js'; 5 + import '../atoms/grain-icon.js'; 3 6 import '../molecules/grain-profile-stats.js'; 4 7 5 8 export class GrainProfileHeader extends LitElement { 6 9 static properties = { 7 10 profile: { type: Object }, 8 - _showFullscreen: { state: true } 11 + _showFullscreen: { state: true }, 12 + _user: { state: true } 9 13 }; 10 14 11 15 static styles = css` ··· 74 78 border-radius: 50%; 75 79 object-fit: cover; 76 80 } 81 + .settings-button { 82 + background: none; 83 + border: none; 84 + padding: 0; 85 + cursor: pointer; 86 + color: var(--color-text-secondary); 87 + margin-left: auto; 88 + } 77 89 `; 78 90 79 91 constructor() { 80 92 super(); 81 93 this._showFullscreen = false; 94 + this._user = auth.user; 95 + } 96 + 97 + connectedCallback() { 98 + super.connectedCallback(); 99 + this._unsubscribe = auth.subscribe(user => { 100 + this._user = user; 101 + }); 102 + } 103 + 104 + disconnectedCallback() { 105 + super.disconnectedCallback(); 106 + this._unsubscribe?.(); 107 + } 108 + 109 + get #isOwnProfile() { 110 + return this._user?.handle && this._user.handle === this.profile?.handle; 111 + } 112 + 113 + #goToSettings() { 114 + router.push('/settings'); 82 115 } 83 116 84 117 #openFullscreen() { ··· 114 147 followerCount=${followerCount || 0} 115 148 followingCount=${followingCount || 0} 116 149 ></grain-profile-stats> 150 + ${this.#isOwnProfile ? html` 151 + <button class="settings-button" @click=${this.#goToSettings}> 152 + <grain-icon name="gear" size="20"></grain-icon> 153 + </button> 154 + ` : ''} 117 155 </div> 118 156 <div class="info"> 119 157 <div class="handle">@${handle}</div>