Danny Morabito
dc9abee715
✨ Features added: - 🔍 Implement functional search in header navigation - ⚙️ Add basic user settings page - 📱 Make dashboard fully responsive 🔧 Enhancements: - 🎭 Standardize CSS with consistent theming across components - 🧹 Remove unused CSS for better performance - 📊 Improve dashboard layout and visual hierarchy - 📦 Redesign last block widget for better usability 💅 This commit introduces a cohesive design system with functional design-token components for a more ✨ polished user experience.
104 lines
2.4 KiB
TypeScript
104 lines
2.4 KiB
TypeScript
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
|
|
import firstLine from '@utils/firstLine';
|
|
import { getProfile } from '@utils/profileUtils';
|
|
import { LitElement, css, html } from 'lit';
|
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
|
|
import '@components/EveLink';
|
|
|
|
@customElement('arx-nostr-medium-profile')
|
|
export class MediumProfile extends LitElement {
|
|
@property() profile!: NDKUserProfile;
|
|
@property() npub = '';
|
|
|
|
@state()
|
|
private displayName = '';
|
|
|
|
@state()
|
|
private profileUrl = '';
|
|
|
|
@state()
|
|
private truncatedAbout = '';
|
|
|
|
static override styles = [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
arx-eve-link {
|
|
color: var(--color-base-content);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
border-radius: var(--radius-selector);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
arx-eve-link:hover {
|
|
background-color: oklch(from var(--color-base-300) l c h / 0.5);
|
|
}
|
|
|
|
arx-eve-link:focus-visible {
|
|
outline: var(--border) solid var(--color-accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.display-name {
|
|
font-weight: 500;
|
|
color: var(--color-base-content);
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.bio {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-size: 0.85rem;
|
|
color: var(--color-secondary);
|
|
max-width: 180px;
|
|
}
|
|
|
|
arx-nostr-avatar {
|
|
flex-shrink: 0;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
arx-eve-link:hover arx-nostr-avatar {
|
|
transform: scale(1.05);
|
|
}
|
|
`,
|
|
];
|
|
|
|
override firstUpdated() {
|
|
const { displayName, profileUrl } = getProfile({
|
|
profile: this.profile,
|
|
npub: this.npub,
|
|
});
|
|
this.displayName = displayName;
|
|
this.profileUrl = profileUrl;
|
|
this.truncatedAbout = this.getTruncatedAbout();
|
|
}
|
|
|
|
getTruncatedAbout() {
|
|
const about = firstLine(this.profile.about);
|
|
return about?.length > 80 ? `${about.substring(0, 80)}...` : about;
|
|
}
|
|
|
|
override render() {
|
|
return html`
|
|
<arx-eve-link href=${this.profileUrl}>
|
|
<arx-nostr-avatar
|
|
.profile=${this.profile}
|
|
size="medium"
|
|
></arx-nostr-avatar>
|
|
<div>
|
|
<div>${this.displayName}</div>
|
|
<div class="bio">${this.truncatedAbout}</div>
|
|
</div>
|
|
</arx-eve-link>
|
|
`;
|
|
}
|
|
}
|