Arx/Eve
2
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

🎨 ✨ 🚀 Overhaul UI/UX with comprehensive design system improvements

Browse source 
✨ 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.
This commit is contained in:
Danny Morabito 2025-03-20 09:46:13 +01:00
parent 5afeb4d01a
commit dc9abee715
Signed by: dannym
GPG key ID: 7CC8056A5A04557E
49 changed files with 4176 additions and 2468 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1294
bun.lock
View file

File diff suppressed because it is too large Load diff

8
package.json
View file

@ -31,13 +31,13 @@
"@tsconfig/node22": "^22.0.0",
"@types/markdown-it": "^14.1.2",
"@types/node": "^22.13.10",
"electron": "^34.3.2",
"electron": "^34.3.3",
"electron-builder": "^25.1.8",
"electron-vite": "^3.0.0",
"lightningcss": "^1.29.2",
"sass-embedded": "^1.85.1",
"lightningcss": "^1.29.3",
"sass-embedded": "^1.86.0",
"typescript": "~5.6.3",
"vite": "^6.2.1"
"vite": "^6.2.2"
},
"dependencies": {
"@lit-labs/motion": "^1.0.8",

52
src/components/AppGrid.ts
View file

@ -1,5 +1,6 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { map } from 'lit/directives/map.js';
import '@components/AppIcon';
@ -15,34 +16,24 @@ export class AppGrid extends LitElement {
static override styles = [
css`
.app-grid {
:host {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-template-columns: 80px;
justify-content: space-around;
gap: 20px;
padding: 30px;
width: minmax(800px, 100cqw);
margin-top: 10px;
}
@media (min-width: 1024px) {
.app-grid {
width: 500px;
@media (min-width: 500px) {
grid-template-columns: repeat(2, 80px);
}
}
@media (max-width: 768px) {
.app-grid {
grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
gap: 15px;
padding: 20px;
@media (min-width: 768px) {
grid-template-columns: repeat(3, 80px);
}
}
@media (max-width: 480px) {
.app-grid {
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
gap: 10px;
padding: 15px;
@media (min-width: 1024px) {
grid-template-columns: repeat(4, 80px);
}
}
`,
@ -50,18 +41,17 @@ export class AppGrid extends LitElement {
override render() {
return html`
<div class="app-grid">
${this.apps.map(
(app) => html`
<arx-app-icon
.icon=${app.icon}
.color=${app.color}
.href=${app.href}
.name=${app.name}
></arx-app-icon>
`,
)}
</div>
${map(
this.apps,
(app) => html`
<arx-app-icon
.icon=${app.icon}
.color=${app.color}
.href=${app.href}
.name=${app.name}
></arx-app-icon>
`,
)}
`;
}
}

177
src/components/AppIcon.ts
View file

@ -2,6 +2,7 @@ import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@components/EveLink';
import { when } from 'lit/directives/when.js';
@customElement('arx-app-icon')
export class AppIcon extends LitElement {
@ -17,83 +18,157 @@ export class AppIcon extends LitElement {
@property()
name = 'App';
private iconElement?: HTMLElement;
static override styles = [
css`
.app-name {
font-size: 12px;
color: #000;
text-shadow: 0px 0px 5px #ffffff;
text-align: center;
max-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
transition: all 0.2s ease-in-out;
:host {
display: flex;
--animation-speed: 0.25s;
}
.app-icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
color: #fff;
text-align: center;
gap: 8px;
text-decoration: none;
padding: 6px;
border-radius: 18px;
transition: transform var(--animation-speed)
cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
&:hover {
.icon {
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border: 2px solid #000;
border-radius: 10px;
}
.app-name {
color: white;
text-shadow: 0px 0px 5px black;
}
}
.app-icon:hover {
transform: translateY(-2px);
}
.icon {
width: clamp(48px, 8vw, 64px);
height: clamp(48px, 8vw, 64px);
border-radius: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 96px;
height: 96px;
border-radius: 24px;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #aaa;
transition: all 0.2s ease-in-out;
border: 1px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
position: relative;
transition: all var(--animation-speed) ease-out;
&::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.25) 20%,
rgba(255, 255, 255, 0) 60%
);
pointer-events: none;
opacity: 1;
transition: opacity var(--animation-speed) ease-out;
}
.app-icon {
width: 75%;
height: 75%;
&::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
var(--gradient-angle),
rgba(255, 255, 255, 0.25) 20%,
rgba(255, 255, 255, 0) 60%
);
pointer-events: none;
opacity: 0;
transition: opacity var(--animation-speed) ease-out;
}
&:hover::before {
opacity: 0;
}
&:hover::after {
opacity: 1;
}
}
@media (max-width: 480px) {
.app-name {
font-size: 11px;
}
.icon-svg {
color: white;
filter: drop-shadow(
calc(cos(var(--gradient-angle)) * 2px)
calc(sin(var(--gradient-angle)) * 2px) rgba(0, 0, 0, 0.2)
);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.app-name {
display: block;
width: 100%;
text-align: center;
font-size: 18px;
font-weight: 500;
color: var(--color-base-content);
white-space: nowrap;
text-decoration: none;
transition: all var(--animation-speed) ease-out;
}
.app-icon:hover .icon {
transform: scale(1.08);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}
.app-icon:active .icon {
transform: scale(0.96);
}
`,
];
override firstUpdated() {
this.iconElement = this.shadowRoot?.querySelector('.icon') as HTMLElement;
if (this.iconElement) {
this.iconElement.addEventListener('mousemove', this.handleMouseMove);
}
}
override disconnectedCallback() {
super.disconnectedCallback();
if (this.iconElement) {
this.iconElement.removeEventListener('mousemove', this.handleMouseMove);
}
}
handleMouseMove = (e: MouseEvent) => {
if (!this.iconElement) return;
const rect = this.iconElement.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const dx = e.clientX - centerX;
const dy = e.clientY - centerY;
const angle = Math.atan2(dy, dx) * (180 / Math.PI);
this.iconElement.style.setProperty('--gradient-angle', `${angle}deg`);
};
override render() {
return html`
<arx-eve-link href="${this.href}" class="app-icon">
<div class="icon" style="background-color: ${this.color}">
${
this.icon
? html`<iconify-icon
icon="${this.icon}"
class="app-icon"
width="48"
height="48"
color="white"
></iconify-icon>`
: ''
}
<div class="icon" style="background: ${this.color};">
${when(
this.icon,
() => html`<iconify-icon
icon="${this.icon}"
class="icon-svg"
width="64"
height="64"
></iconify-icon>`,
)}
</div>
<span class="app-name">${this.name}</span>
</arx-eve-link>

78
src/components/Arbor/Button.ts
View file

@ -1,78 +0,0 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@components/EveLink';
@customElement('arx-arbor-button')
export class ArborButton extends LitElement {
@property({ type: String }) href = '';
@property({ type: String }) target = '';
@property({ type: String }) rel = '';
@property({ type: Boolean }) disabled = false;
get hrefValue() {
if (!this.href || this.disabled) return 'javascript:void(0)';
return this.href;
}
static override styles = [
css`
arx-eve-link::part(link) {
color: white;
text-decoration: none;
}
arx-eve-link {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
border: none;
padding: 0.75rem 0.75rem;
border-radius: 0.25rem;
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.2;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: var(--shadow-sm);
gap: 5px;
}
arx-eve-link:hover {
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
background: color-mix(in oklch, var(--accent), black 15%);
}
arx-eve-link:focus {
outline: none;
box-shadow: var(--shadow-md);
}
arx-eve-link:active {
transform: translateY(0);
box-shadow: var(--shadow-md);
}
arx-eve-link.disabled {
opacity: 0.6;
cursor: not-allowed;
}
`,
];
override render() {
return html`
<arx-eve-link
.href=${this.hrefValue}
.target=${this.target}
.rel=${this.rel}
class="${this.disabled ? 'disabled' : ''}"
>
<slot></slot>
</arx-eve-link>
`;
}
}

53
src/components/Arbor/ForumCategory.ts
View file

@ -1,6 +1,8 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@components/General/Button';
@customElement('arx-arbor-forum-category')
export class ArborForumCategory extends LitElement {
@property({ type: String }) override title = '';
@ -9,21 +11,45 @@ export class ArborForumCategory extends LitElement {
static override styles = [
css`
.forum-category {
background: oklch(100% 0 0);
border-radius: 0.5rem;
box-shadow: var(--shadow-xl);
margin-block-end: 1.5rem;
background: var(--color-base-100);
border-radius: var(--radius-box);
border: var(--border) solid var(--color-base-300);
margin-block-end: 2rem;
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px)
oklch(from var(--color-base-100) l c h / 0.4);
overflow: hidden;
}
.category-header {
background: var(--primary);
color: oklch(100% 0 0);
padding: 1rem 1.5rem;
border-radius: 0.5rem 0.5rem 0 0;
font-weight: 500;
background: var(--color-secondary);
color: var(--color-secondary-content);
padding: 1.25rem 1.75rem;
font-weight: 600;
font-size: 1.1rem;
letter-spacing: 0.01em;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--border) solid var(--color-base-300);
}
::slotted(:first-child) {
margin-top: 1rem;
}
::slotted(:last-child) {
margin-bottom: 1rem;
}
.empty-state {
padding: 2rem 1.75rem;
color: var(--color-secondary);
font-style: italic;
text-align: center;
}
`,
];
@ -33,12 +59,13 @@ export class ArborForumCategory extends LitElement {
<div class="forum-category">
<div class="category-header">
<span>${this.title}</span>
<arx-arbor-button href="/arbor/new-topic/${this.id}">
New Topic
</arx-arbor-button>
<arx-button
label="New Topic"
href="/arbor/new-topic/${this.id}"
></arx-button>
</div>
<slot>
<div style="padding: 1rem 1.5rem">No topics...</div>
<div class="empty-state">No topics yet...</div>
</slot>
</div>
`;

200
src/components/Arbor/ForumPost.ts
View file

@ -19,47 +19,50 @@ export class ForumPost extends LitElement {
.post {
display: flex;
flex-direction: row;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04),
0 1px 3px rgba(0, 0, 0, 0.03);
margin-block-end: 0.75rem;
border-radius: var(--radius-box);
background: var(--color-base-100);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1);
margin-block-end: 1rem;
overflow: hidden;
transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
isolation: isolate;
border: var(--border) solid var(--color-base-300);
will-change: transform;
}
&:hover {
transform: translateY(2px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07),
0 2px 4px rgba(0, 0, 0, 0.04);
}
.post:hover {
transform: translateY(-2px);
box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 6px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.post--highlighted {
position: relative;
border-inline-start: none;
}
&::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 4px;
background: #4361ee;
border-radius: 4px 0 0 4px;
}
.post--highlighted::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--color-accent);
border-radius: 4px 0 0 4px;
}
.post__sidebar {
padding: clamp(1rem, 4vw, 1.5rem);
border-right: 1px solid rgba(0, 0, 0, 0.06);
border-right: var(--border) solid var(--color-base-300);
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.01);
background: var(--color-base-200);
}
.post__main {
@ -73,10 +76,8 @@ export class ForumPost extends LitElement {
display: flex;
align-items: center;
padding: 1rem clamp(1rem, 4vw, 1.5rem);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.01);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: var(--border) solid var(--color-base-300);
background: var(--color-base-200);
}
.post__time {
@ -84,17 +85,18 @@ export class ForumPost extends LitElement {
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(0, 0, 0, 0.6);
color: var(--color-secondary);
font-weight: 500;
}
& iconify-icon {
color: rgba(0, 0, 0, 0.4);
}
.post__time iconify-icon {
color: var(--color-secondary);
opacity: 0.7;
}
.post__permalink {
margin-inline-start: auto;
color: #4361ee;
color: var(--color-accent);
border: none;
background: transparent;
cursor: pointer;
@ -104,22 +106,16 @@ export class ForumPost extends LitElement {
display: grid;
place-items: center;
transition: all 0.2s ease;
}
&:hover {
background: rgba(67, 97, 238, 0.08);
transform: scale(1.05);
}
&:focus-visible {
outline: 2px solid #4361ee;
outline-offset: 2px;
}
.post__permalink:hover {
transform: scale(1.05);
}
.post__content {
padding: clamp(1.25rem, 5vw, 1.75rem);
line-height: 1.7;
color: rgba(0, 0, 0, 0.87);
color: var(--color-base-content);
overflow-wrap: break-word;
flex: 1;
font-size: clamp(0.95rem, 2vw, 1rem);
@ -129,90 +125,25 @@ export class ForumPost extends LitElement {
.post__actions {
display: flex;
padding: 0.75rem clamp(0.75rem, 3vw, 1.25rem);
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-top: var(--border) solid var(--color-base-300);
gap: clamp(0.5rem, 2vw, 0.75rem);
background: rgba(0, 0, 0, 0.01);
}
.action-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 10px;
background: transparent;
border: none;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
transition: all 0.2s ease;
& iconify-icon {
font-size: 1.25rem;
}
&:hover:not(:disabled) {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.87);
transform: translateY(-1px);
}
&:focus-visible {
outline: 2px solid rgba(0, 0, 0, 0.2);
outline-offset: 1px;
}
&:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.action-button--primary {
color: #4361ee;
&:hover:not(:disabled) {
background: rgba(67, 97, 238, 0.08);
}
&:focus-visible {
outline-color: #4361ee;
}
background: var(--color-base-200);
}
@media (max-width: 768px) {
.post {
flex-direction: column;
margin-inline: -1rem;
border-radius: 0;
margin-block-end: 1.5rem;
}
.post__sidebar {
border-right: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
border-bottom: var(--border) solid var(--color-base-300);
padding: 1rem;
flex-direction: row;
justify-content: flex-start;
gap: 1rem;
}
.action-button {
padding: 0.625rem;
justify-content: center;
flex: 1;
border-radius: 10px;
& span {
display: none;
}
}
}
@media (max-width: 480px) {
@ -290,13 +221,13 @@ export class ForumPost extends LitElement {
${formatDateTime(this.date)}
</div>
<button
<arx-button
class="post__permalink"
title="Copy permalink"
@click=${this._copyPermalink}
>
<iconify-icon icon="mdi:link-variant"></iconify-icon>
</button>
<iconify-icon slot="label" icon="mdi:link-variant"></iconify-icon>
</arx-button>
</div>
<div class="post__content">
@ -306,33 +237,30 @@ export class ForumPost extends LitElement {
</div>
<div class="post__actions">
<button
class="action-button action-button--primary"
@click=${this._handleReply}
disabled
>
<iconify-icon icon="mdi:reply"></iconify-icon>
<span>Reply</span>
</button>
<arx-button label="Reply" @click=${this._handleReply} disabled>
<iconify-icon slot="prefix" icon="mdi:reply"></iconify-icon>
</arx-button>
<a href=${permalink} class="action-button">
<iconify-icon icon="mdi:link-variant"></iconify-icon>
<span>Permalink</span>
</a>
<arx-button href=${permalink} label="Permalink">
<iconify-icon
slot="prefix"
icon="mdi:link-variant"
></iconify-icon>
</arx-button>
<button class="action-button" @click=${this._handleZap} disabled>
<iconify-icon icon="mdi:lightning-bolt"></iconify-icon>
<span>Zap</span>
</button>
<arx-button label="Zap" @click=${this._handleZap} disabled>
<iconify-icon
slot="prefix"
icon="mdi:lightning-bolt"
></iconify-icon>
</arx-button>
<button
class="action-button"
@click=${this._handleDownzap}
disabled
>
<iconify-icon icon="mdi:lightning-bolt-outline"></iconify-icon>
<span>Downzap</span>
</button>
<arx-button label="Downzap" @click=${this._handleDownzap} disabled>
<iconify-icon
slot="prefix"
icon="mdi:lightning-bolt-outline"
></iconify-icon>
</arx-button>
</div>
</div>
</div>

71
src/components/Arbor/ForumTopic.ts
View file

@ -12,26 +12,40 @@ export class ArborForumTopic extends LitElement {
display: grid;
grid-template-columns: 3fr 1fr;
padding: 1.75rem;
border-radius: 12px;
border-radius: var(--radius-box);
margin-bottom: 1rem;
box-shadow: var(--shadow-md);
border: var(--border) solid var(--color-base-300);
background-color: var(--color-base-200);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px)
oklch(from var(--color-base-100) l c h / 0.4);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.topic:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.15),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-100) l c h / 0.5);
}
.topic-icon {
inline-size: 40px;
block-size: 40px;
background: var(--accent);
border-radius: 10px;
background: var(--color-accent);
border-radius: calc(var(--radius-selector) * 1.5);
flex-shrink: 0;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-sm);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.topic-icon::after {
@ -41,7 +55,7 @@ export class ArborForumTopic extends LitElement {
background: linear-gradient(
45deg,
transparent,
oklch(from var(--accent) l c h / 0.2)
oklch(from var(--color-accent) l c h / 0.2)
);
}
@ -62,24 +76,25 @@ export class ArborForumTopic extends LitElement {
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--primary);
color: var(--color-base-content);
transition: all 0.2s ease;
&:hover {
color: var(--secondary);
transform: translateX(4px);
}
}
arx-eve-link:hover::part(link) {
color: var(--color-accent);
transform: translateX(4px);
}
.topic-details p {
margin: 0;
font-size: 0.975rem;
line-height: 1.6;
color: var(--secondary);
color: var(--color-secondary);
}
.new-status {
position: relative;
color: var(--accent);
color: var(--color-accent);
}
.new-status::after {
@ -90,15 +105,17 @@ export class ArborForumTopic extends LitElement {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
background: var(--accent);
color: var(--light);
background: var(--color-accent);
color: var(--color-accent-content);
padding: 2px 8px;
border-radius: 12px;
box-shadow: var(--shadow-sm);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.hot-status {
color: var(--error);
color: var(--color-error);
}
.hot-status::before {
@ -111,29 +128,31 @@ export class ArborForumTopic extends LitElement {
flex-direction: column;
gap: 1rem;
padding-left: 1.5rem;
border-left: 2px solid var(--border);
border-left: var(--border) solid var(--color-base-300);
}
.last-post-section {
background: oklch(from var(--primary) 98% calc(c * 0.2) h);
background: oklch(from var(--color-base-200) l c h);
padding: 0.875rem;
border-radius: 8px;
box-shadow: var(--shadow-sm);
border-radius: var(--radius-field);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.1);
}
.last-post-section > div:first-of-type {
font-size: 0.875rem;
font-weight: 500;
color: var(--secondary);
color: var(--color-secondary);
margin-bottom: 0.5rem;
}
.last-post-info {
color: var(--secondary);
color: var(--color-secondary);
font-size: 0.875rem;
margin-top: 0.625rem;
padding-top: 0.625rem;
border-top: 1px solid var(--border);
border-top: var(--border) solid var(--color-base-300);
}
@media (max-width: 968px) {
@ -147,7 +166,7 @@ export class ArborForumTopic extends LitElement {
padding-left: 0;
border-left: none;
padding-top: 1rem;
border-top: 2px solid var(--border);
border-top: var(--border) solid var(--color-base-300);
}
}
`,

32
src/components/Breadcrumbs.ts
View file

@ -1,8 +1,9 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import './BreadcrumbsItem';
import { map } from 'lit/directives/map.js';
import '@components/BreadcrumbsItem';
@customElement('arx-breadcrumbs')
export class Breadcrumbs extends LitElement {
@property({ type: Array }) items: { text: string; href?: string }[] = [];
@ -11,27 +12,23 @@ export class Breadcrumbs extends LitElement {
css`
:host {
display: block;
--breadcrumb-bg: var(--surface, #ffffff);
--breadcrumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
--breadcrumb-border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
--breadcrumb-radius: 8px;
--breadcrumb-padding: 0.75rem 1.25rem;
--breadcrumb-font: var(--font-family, system-ui, sans-serif);
--breadcrumb-text-color: var(--text-primary, #333);
--breadcrumb-separator-color: var(--text-secondary, #666);
--breadcrumb-accent-color: var(--accent, #0066cc);
--breadcrumb-hover-color: var(--accent-dark, #004c99);
--breadcrumb-active-bg: var(--accent-light, rgba(0, 102, 204, 0.1));
}
nav {
max-width: 1200px;
margin: 1.25rem auto;
background-color: var(--breadcrumb-bg);
border-radius: var(--breadcrumb-radius);
box-shadow: var(--breadcrumb-shadow);
background-color: var(--color-base-200);
border-radius: var(--radius-box);
border: var(--border) solid var(--color-base-300);
padding: 0.75rem 1.25rem;
font-size: 0.95rem;
transition: all 0.3s ease;
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px)
oklch(from var(--color-base-100) l c h / 0.4);
}
ol {
@ -43,6 +40,11 @@ export class Breadcrumbs extends LitElement {
align-items: center;
overflow-x: auto;
scrollbar-width: none;
color: var(--color-base-content);
}
ol::-webkit-scrollbar {
display: none;
}
@media (max-width: 640px) {

20
src/components/BreadcrumbsItem.ts
View file

@ -26,7 +26,7 @@ export class BreadcrumbsItem extends LitElement {
display: flex;
align-items: center;
margin-inline: 0.75rem;
color: var(--breadcrumb-separator);
color: var(--color-secondary);
user-select: none;
font-size: 0.85rem;
}
@ -42,29 +42,29 @@ export class BreadcrumbsItem extends LitElement {
display: inline-flex;
align-items: center;
padding: 0.4rem 0.7rem;
border-radius: 6px;
border-radius: calc(var(--radius-selector) / 2);
transition: all 0.2s ease;
}
.active {
background-color: var(--breadcrumb-active-bg);
background-color: oklch(from var(--color-base-300) l c h / 0.5);
font-weight: 500;
color: var(--breadcrumb-text);
color: var(--color-base-content);
}
.link {
color: var(--breadcrumb-accent);
color: var(--color-accent);
text-decoration: none;
}
.link:hover .breadcrumb-content {
background-color: var(--breadcrumb-active-bg);
background-color: oklch(from var(--color-accent) l c h / 0.1);
}
.link:focus-visible {
outline: 2px solid var(--breadcrumb-accent);
outline: var(--border) solid var(--color-accent);
outline-offset: 2px;
border-radius: 6px;
border-radius: calc(var(--radius-selector) / 2);
}
.item-text {
@ -77,8 +77,8 @@ export class BreadcrumbsItem extends LitElement {
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--breadcrumb-accent);
height: var(--border);
background-color: var(--color-accent);
transition: width 0.25s ease;
}

296
src/components/DateTimeSettings.ts Normal file
View file

@ -0,0 +1,296 @@
import { StyledToggle } from '@/components/General/Toggle';
import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@components/General/Input';
import '@components/General/Fieldset';
import '@components/General/Select';
interface DateTimeFormatOptions {
locale: string;
weekday: 'long' | 'short' | 'narrow' | '';
year: 'numeric' | '2-digit' | '';
month: 'numeric' | '2-digit' | 'long' | 'short' | 'narrow' | '';
day: 'numeric' | '2-digit' | '';
hour: 'numeric' | '2-digit' | '';
minute: 'numeric' | '2-digit' | '';
second: 'numeric' | '2-digit' | '';
hour12: boolean;
}
const DEFAULT_OPTIONS: DateTimeFormatOptions = {
locale: 'en-US',
weekday: 'short',
year: 'numeric',
month: 'long',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true,
};
@customElement('arx-date-time-settings')
export class DateTimeSettings extends LitElement {
@state()
private options: DateTimeFormatOptions = { ...DEFAULT_OPTIONS };
@state()
private previewDate = new Date();
override connectedCallback() {
super.connectedCallback();
this.loadFromLocalStorage();
setInterval(() => {
this.previewDate = new Date();
this.requestUpdate();
}, 1000);
}
private loadFromLocalStorage() {
const savedOptions = localStorage.getItem('dateTimeFormatOptions');
if (savedOptions) {
try {
this.options = { ...DEFAULT_OPTIONS, ...JSON.parse(savedOptions) };
} catch (e) {
console.error('Failed to parse saved options', e);
this.options = { ...DEFAULT_OPTIONS };
}
}
}
private saveToLocalStorage() {
localStorage.setItem('dateTimeFormatOptions', JSON.stringify(this.options));
this.dispatchEvent(
new CustomEvent('settings-changed', {
bubbles: true,
composed: true,
detail: { options: this.options },
}),
);
}
private handleChange(key: keyof DateTimeFormatOptions, e: Event) {
const target = e.target as HTMLSelectElement | HTMLInputElement | StyledToggle;
let value: string | boolean | undefined = target.value;
if (key === 'hour12' && target instanceof StyledToggle) value = target.checked;
this.options = {
...this.options,
[key]: value,
};
if (key === 'locale') this.requestUpdate();
this.saveToLocalStorage();
}
private formatWithOption(option: string, type: keyof DateTimeFormatOptions): string {
if (option === '') return '';
const date = this.previewDate;
const locale = this.options.locale;
const formatterOptions: Intl.DateTimeFormatOptions = {
[type]: option,
};
// Special case for hour to respect hour12 setting
if (type === 'hour') formatterOptions.hour12 = this.options.hour12;
try {
return new Intl.DateTimeFormat(locale, formatterOptions).format(date);
} catch (e) {
console.error(`Error formatting with option ${option} for ${type}`, e);
return 'Error: Invalid format';
}
}
private formatPreview(): string {
return new Date(this.previewDate).toLocaleString(this.options.locale, {
weekday: this.options.weekday === '' ? undefined : this.options.weekday,
year: this.options.year === '' ? undefined : this.options.year,
month: this.options.month === '' ? undefined : this.options.month,
day: this.options.day === '' ? undefined : this.options.day,
hour: this.options.hour === '' ? undefined : this.options.hour,
minute: this.options.minute === '' ? undefined : this.options.minute,
second: this.options.second === '' ? undefined : this.options.second,
hour12: this.options.hour12,
});
}
override render() {
return html`
<arx-fieldset legend="Date/Time Settings">
<arx-input
label="Locale"
type="text"
.value=${this.options.locale}
@input=${(e: Event) => this.handleChange('locale', e)}
>
</arx-input>
<arx-select
label="Weekday Format"
.value=${this.options.weekday}
@change=${(e: Event) => this.handleChange('weekday', e)}
.options=${[
{
value: 'long',
label: `Long (${this.formatWithOption('long', 'weekday')})`,
},
{
value: 'short',
label: `Short (${this.formatWithOption('short', 'weekday')})`,
},
{
value: 'narrow',
label: `Narrow (${this.formatWithOption('narrow', 'weekday')})`,
},
]}
></arx-select>
<arx-select
label="Year Format"
.value=${this.options.year}
@change=${(e: Event) => this.handleChange('year', e)}
.options=${[
{
value: 'numeric',
label: `Numeric (${this.formatWithOption('numeric', 'year')})`,
},
{
value: '2-digit',
label: `2-digit (${this.formatWithOption('2-digit', 'year')})`,
},
{
value: '',
label: 'None',
},
]}
></arx-select>
<arx-select
label="Month Format"
.value=${this.options.month}
@change=${(e: Event) => this.handleChange('month', e)}
.options=${[
{
value: 'long',
label: `Long (${this.formatWithOption('long', 'month')})`,
},
{
value: 'short',
label: `Short (${this.formatWithOption('short', 'month')})`,
},
{
value: 'narrow',
label: `Narrow (${this.formatWithOption('narrow', 'month')})`,
},
{
value: 'numeric',
label: `Numeric (${this.formatWithOption('numeric', 'month')})`,
},
{
value: '2-digit',
label: `2-digit (${this.formatWithOption('2-digit', 'month')})`,
},
{
value: '',
label: 'None',
},
]}
></arx-select>
<arx-select
label="Day Format"
.value=${this.options.day}
@change=${(e: Event) => this.handleChange('day', e)}
.options=${[
{
value: 'numeric',
label: `Numeric (${this.formatWithOption('numeric', 'day')})`,
},
{
value: '2-digit',
label: `2-digit (${this.formatWithOption('2-digit', 'day')})`,
},
{
value: '',
label: 'None',
},
]}
></arx-select>
<arx-select
label="Hour Format"
.value=${this.options.hour}
@change=${(e: Event) => this.handleChange('hour', e)}
.options=${[
{
value: 'numeric',
label: 'Numeric',
},
{
value: '2-digit',
label: '2-digit',
},
{
value: '',
label: 'None',
},
]}
></arx-select>
<arx-select
label="Minute Format"
.value=${this.options.minute}
@change=${(e: Event) => this.handleChange('minute', e)}
.options=${[
{
value: 'numeric',
label: 'Numeric',
},
{
value: '2-digit',
label: '2-digit',
},
{
value: '',
label: 'None',
},
]}
></arx-select>
<arx-select
label="Second Format"
.value=${this.options.second}
@change=${(e: Event) => this.handleChange('second', e)}
.options=${[
{
value: 'numeric',
label: 'Numeric',
},
{
value: '2-digit',
label: '2-digit',
},
{
value: '',
label: 'None',
},
]}
></arx-select>
<arx-toggle
label="Use 12-hour format"
?checked=${this.options.hour12}
@change=${(e: Event) => this.handleChange('hour12', e)}
></arx-toggle>
<h3>Preview</h3>
<p>${this.formatPreview()}</p>
</arx-fieldset>
`;
}
}

58
src/components/ErrorView.ts
View file

@ -7,17 +7,55 @@ export class ErrorView extends LitElement {
error!: string;
static override styles = css`
.error {
color: var(--error);
}`;
:host {
display: block;
margin: 0.75rem 0;
}
.error-container {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-field);
background-color: var(--color-error);
color: var(--color-error-content);
box-shadow: 0 2px 5px oklch(from var(--color-error) l c h / 0.2);
border-left: calc(var(--border) * 2) solid
oklch(from var(--color-error-content) l c h / 0.8);
animation: fadeIn 0.3s ease-out forwards;
}
.error-message {
flex: 1;
font-weight: 500;
line-height: 1.5;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 640px) {
.error-container {
padding: 0.625rem 0.875rem;
}
}
`;
override render() {
return html`<span class="error">${this.error}</span>`;
}
}
declare global {
interface HTMLElementTagNameMap {
'arx-error-view': ErrorView;
return html`
<div class="error-container" role="alert">
<iconify-icon icon="mdi:alert-circle" width="24"></iconify-icon>
<div class="error-message">${this.error}</div>
</div>
`;
}
}

13
src/components/EveLink.ts
View file

@ -7,6 +7,13 @@ export class EveLink extends LitElement {
@property({ type: String }) target = '';
@property({ type: String }) rel = '';
static override styles = css`
a {
display: inline-block;
color: var(--color-primary);
}
`;
get hrefValue() {
let href = this.href;
if (href.startsWith('javascript:')) return href;
@ -16,12 +23,6 @@ export class EveLink extends LitElement {
return href;
}
static override styles = css`
a {
part: link;
}
`;
override render() {
return html`
<a

257
src/components/General/Button.ts Normal file
View file

@ -0,0 +1,257 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('arx-button')
export class StyledButton extends LitElement {
@property() label = '';
@property() type: 'button' | 'submit' | 'reset' | 'menu' = 'button';
@property({ type: Boolean }) disabled = false;
@property() name = '';
@property() value = '';
@property() variant: 'default' | 'primary' | 'secondary' | 'accent' = 'default';
@property({ type: Boolean }) loading = false;
@property({ type: Boolean }) fullWidth = false;
@property({ type: Boolean, reflect: true }) pressed = false;
@property({ type: String }) href = '';
static override styles = css`
:host {
display: inline-block;
position: relative;
}
:host([fullWidth]) {
display: block;
width: 100%;
}
button {
--bg: var(--color-base-100);
--text: var(--color-base-content);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 46px;
padding: 10px 24px;
font-size: 16px;
font-weight: 500;
font-family: inherit;
color: var(--text);
background: var(--bg);
border: var(--border) solid var(--color-base-300);
border-radius: var(--radius-selector);
cursor: pointer;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 6px)
oklch(from var(--color-base-content) l c h / 0.15),
calc(var(--depth) * -3px) calc(var(--depth) * -3px)
calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.7);
overflow: hidden;
outline: none;
}
:host([variant="primary"]) button {
--bg: var(--color-primary);
--text: var(--color-primary-content);
}
:host([variant="secondary"]) button {
--bg: var(--color-secondary);
--text: var(--color-secondary-content);
}
:host([variant="accent"]) button {
--bg: var(--color-accent);
--text: var(--color-accent-content);
}
:host([fullWidth]) button {
width: 100%;
}
button:hover,
button:focus-visible {
transform: translateY(-2px);
background: oklch(from var(--bg) calc(l + 0.02) c h);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.2),
calc(var(--depth) * -4px) calc(var(--depth) * -4px)
calc(var(--depth) * 8px) oklch(from var(--color-base-100) l c h / 0.8);
}
button:active,
:host([pressed]) button {
transform: translateY(1px);
border-top: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-left: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-bottom: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
border-right: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-content) l c h / 0.2),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5);
background: linear-gradient(
145deg,
oklch(from var(--bg) calc(l - 0.03) c h),
oklch(from var(--bg) l c h)
);
}
button:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 3px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.4);
}
.spinner {
display: none;
position: relative;
width: 18px;
height: 18px;
}
:host([loading]) .spinner {
display: inline-block;
}
:host([loading]) .label {
opacity: 0.7;
}
.spinner::before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 18px;
height: 18px;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: currentColor;
border-right-color: currentColor;
animation: spinner 0.8s linear infinite;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
::slotted([slot="prefix"]) {
margin-right: 4px;
}
::slotted([slot="suffix"]) {
margin-left: 4px;
}
`;
override render() {
return html`
<button
type=${this.type}
?disabled=${this.disabled || this.loading}
name=${this.name}
value=${this.value}
@click=${this._handleClick}
@keydown=${this._handleKeyDown}
@focus=${this._handleFocus}
@blur=${this._handleBlur}
>
<slot name="prefix"></slot>
<div class="spinner"></div>
<slot name="label">
<span class="label">${this.label}</span>
</slot>
<slot name="suffix"></slot>
</button>
`;
}
private _handleClick(e: MouseEvent) {
if (this.disabled || this.loading) {
e.preventDefault();
return;
}
if (this.href) {
let href = this.href;
if (href.startsWith('javascript:')) return href;
if (href.startsWith('eve://')) href = href.replace('eve://', '#');
if (href.startsWith('/')) href = href.replace('/', '#');
if (!href.startsWith('#')) href = `#${href}`;
window.location.href = href;
return;
}
this.dispatchEvent(
new CustomEvent('click', {
detail: {
name: this.name,
value: this.value,
},
bubbles: true,
composed: true,
}),
);
}
private _handleKeyDown(e: KeyboardEvent) {
if ((e.key === 'Enter' || e.key === ' ') && !this.disabled && !this.loading) {
e.preventDefault();
this.dispatchEvent(
new CustomEvent('click', {
detail: {
name: this.name,
value: this.value,
},
bubbles: true,
composed: true,
}),
);
}
this.dispatchEvent(
new CustomEvent('keydown', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
private _handleFocus() {
this.dispatchEvent(
new CustomEvent('focus', {
bubbles: true,
composed: true,
}),
);
}
private _handleBlur() {
this.dispatchEvent(
new CustomEvent('blur', {
bubbles: true,
composed: true,
}),
);
}
}

35
src/components/General/Card.ts Normal file
View file

@ -0,0 +1,35 @@
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('arx-card')
export class StyledFieldset extends LitElement {
static override styles = css`
:host {
display: block;
background: var(--color-base-200);
border-radius: var(--radius-box);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
padding: 32px;
margin-bottom: 32px;
border: var(--border) solid var(--color-base-300);
transition: all 0.3s ease;
&:hover {
box-shadow: calc(var(--depth) * 6px) calc(var(--depth) * 6px)
calc(var(--depth) * 12px)
oklch(from var(--color-base-content) l c h / 0.15),
calc(var(--depth) * -3px) calc(var(--depth) * -3px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-100) l c h / 0.7);
transform: translateY(-2px);
}
}
`;
override render() {
return html`<slot></slot>`;
}
}

122
src/components/General/Fieldset.ts Normal file
View file

@ -0,0 +1,122 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
@customElement('arx-fieldset')
export class StyledFieldset extends LitElement {
@property() legend = '';
@property({ type: Boolean }) disabled = false;
@property() variant = 'default'; // default, primary, secondary, accent
static override styles = css`
:host {
display: block;
width: 100%;
margin-bottom: 24px;
}
.fieldset-container {
background: var(--color-base-100);
border: var(--border) solid var(--color-base-300);
border-radius: var(--radius-box);
padding: 24px;
position: relative;
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.5);
transition: all 0.25s ease;
}
:host([variant="primary"]) .fieldset-container {
border-left: calc(var(--border) * 3) solid var(--color-primary);
}
:host([variant="secondary"]) .fieldset-container {
border-left: calc(var(--border) * 3) solid var(--color-secondary);
}
:host([variant="accent"]) .fieldset-container {
border-left: calc(var(--border) * 3) solid var(--color-accent);
}
.legend {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: var(--color-base-100);
border: var(--border) solid var(--color-base-300);
padding: 0 10px;
font-size: 14px;
font-weight: 600;
color: var(--color-base-content);
border-radius: calc(var(--radius-selector) / 2);
transition: all 0.25s ease;
}
:host([variant="primary"]) .legend {
color: var(--color-primary);
}
:host([variant="secondary"]) .legend {
color: var(--color-secondary);
}
:host([variant="accent"]) .legend {
color: var(--color-accent);
}
.fieldset-content {
padding-top: 8px;
}
:host([disabled]) .fieldset-container {
opacity: 0.7;
cursor: not-allowed;
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.05),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.3);
}
:host([disabled]) .legend {
opacity: 0.7;
}
:host(:not([disabled])) .fieldset-container:hover {
box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 6px)
oklch(from var(--color-base-content) l c h / 0.15),
calc(var(--depth) * -3px) calc(var(--depth) * -3px)
calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
}
:host(:not([disabled])) .fieldset-container:focus-within {
border-color: var(--color-accent);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.5),
0 0 0 2px oklch(from var(--color-accent) l c h / 0.2);
}
:host(:not([disabled])) .fieldset-container:focus-within .legend {
color: var(--color-accent);
}
`;
override render() {
return html`
<div class="fieldset-container" ?disabled=${this.disabled}>
${when(this.legend, () => html`<div class="legend">${this.legend}</div>`)}
<div class="fieldset-content">
<slot></slot>
</div>
</div>
`;
}
}

165
src/components/General/Input.ts Normal file
View file

@ -0,0 +1,165 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
@customElement('arx-input')
export class StyledInput extends LitElement {
@property() placeholder = '';
@property() value = '';
@property({ type: Boolean }) disabled = false;
@property() type = 'text';
@property() name = '';
@property({ type: Boolean }) required = false;
@property() label = '';
static override styles = css`
:host {
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: var(--color-base-content);
font-weight: 500;
}
input {
width: 100%;
padding: 14px 16px;
font-size: 16px;
color: var(--color-base-content);
background: var(--color-base-100);
border: var(--border) solid var(--color-base-300);
border-radius: var(--radius-field);
box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15),
inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
0 0 0 transparent;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
input::placeholder {
color: var(--color-secondary);
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.1);
}
input:hover {
transform: translateY(-1px);
background: oklch(from var(--color-base-100) calc(l + 0.02) c h);
}
input:hover::placeholder {
transform: translateX(3px);
}
input:focus {
outline: none;
transform: translateY(1px);
border-top: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-left: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-bottom: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
border-right: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-content) l c h / 0.2),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
0 0 0 transparent;
background: linear-gradient(
145deg,
oklch(from var(--color-base-100) calc(l - 0.03) c h),
oklch(from var(--color-base-100) l c h)
);
}
input:disabled {
opacity: 0.7;
cursor: not-allowed;
box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.05),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
transform: none;
}
`;
override render() {
return html`
${when(this.label, () => html`<label for="input-${this.name}">${this.label}</label>`)}
<input
.value=${this.value}
?disabled=${this.disabled}
?required=${this.required}
placeholder=${this.placeholder}
type=${this.type}
name=${this.name}
@input=${this._handleInput}
@focus=${this._handleFocus}
@blur=${this._handleBlur}
@keydown=${this._handleKeyDown}
@keyup=${this._handleKeyUp}
/>
`;
}
private _handleKeyDown(e: KeyboardEvent) {
this.dispatchEvent(
new CustomEvent('keydown', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
private _handleKeyUp(e: KeyboardEvent) {
this.dispatchEvent(
new CustomEvent('keyup', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
private _handleFocus() {
this.dispatchEvent(
new CustomEvent('focus', {
bubbles: true,
composed: true,
}),
);
}
private _handleBlur() {
this.dispatchEvent(
new CustomEvent('blur', {
bubbles: true,
composed: true,
}),
);
}
private _handleInput(e: InputEvent) {
const input = e.target as HTMLInputElement;
this.value = input.value;
this.dispatchEvent(
new CustomEvent('input', {
detail: { value: this.value },
bubbles: true,
composed: true,
}),
);
}
}

135
src/components/Prompt.ts → src/components/General/Prompt.ts
View file

@ -2,6 +2,8 @@ import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import '@components/General/Input';
@customElement('arx-prompt')
export class EvePrompt extends LitElement {
@property({ type: String }) promptText = 'Please provide input';
@ -17,18 +19,7 @@ export class EvePrompt extends LitElement {
static override styles = css`
:host {
--prompt-primary: #3b82f6;
--prompt-primary-hover: #2563eb;
--prompt-bg: #ffffff;
--prompt-text: #1f2937;
--prompt-border: #e5e7eb;
--prompt-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
--prompt-cancel-bg: #f3f4f6;
--prompt-cancel-hover: #e5e7eb;
--prompt-overlay: rgba(15, 23, 42, 0.6);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
sans-serif;
display: block;
}
.overlay {
@ -37,7 +28,7 @@ export class EvePrompt extends LitElement {
left: 0;
width: 100%;
height: 100%;
background-color: var(--prompt-overlay);
background-color: oklch(from var(--color-base-content) l c h / 0.6);
display: flex;
align-items: center;
justify-content: center;
@ -54,15 +45,20 @@ export class EvePrompt extends LitElement {
}
.prompt-container {
background-color: var(--prompt-bg);
border-radius: 12px;
box-shadow: var(--prompt-shadow);
background-color: var(--color-base-100);
border-radius: var(--radius-box);
border: var(--border) solid var(--color-base-300);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.2),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.4);
width: 90%;
max-width: 420px;
padding: 28px;
transform: scale(0.95) translateY(10px);
transition: transform 0.25s cubic-bezier(0.1, 1, 0.2, 1);
color: var(--prompt-text);
color: var(--color-base-content);
}
.overlay.active .prompt-container {
@ -74,28 +70,7 @@ export class EvePrompt extends LitElement {
font-weight: 600;
margin: 0 0 16px 0;
line-height: 1.4;
}
.input-container {
margin: 20px 0;
}
.input-field {
width: 100%;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--prompt-border);
font-size: 15px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
color: inherit;
background-color: transparent;
outline: none;
box-sizing: border-box;
}
.input-field:focus {
border-color: var(--prompt-primary);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
color: var(--color-base-content);
}
.buttons {
@ -105,47 +80,13 @@ export class EvePrompt extends LitElement {
margin-top: 24px;
}
button {
padding: 10px 18px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
outline: none;
}
button:focus-visible {
box-shadow: 0 0 0 2px var(--prompt-bg), 0 0 0 4px var(--prompt-primary);
}
.cancel-btn {
background-color: var(--prompt-cancel-bg);
color: var(--prompt-text);
}
.cancel-btn:hover {
background-color: var(--prompt-cancel-hover);
}
.save-btn {
background-color: var(--prompt-primary);
color: white;
}
.save-btn:hover {
background-color: var(--prompt-primary-hover);
}
@media (prefers-color-scheme: dark) {
:host {
--prompt-bg: #1e1e1e;
--prompt-text: #e5e7eb;
--prompt-border: #374151;
--prompt-cancel-bg: #374151;
--prompt-cancel-hover: #4b5563;
}
.prompt-container:focus-within {
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.2),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.4),
0 0 0 2px oklch(from var(--color-accent) l c h / 0.2);
}
`;
@ -221,26 +162,30 @@ export class EvePrompt extends LitElement {
${
this.showInput
? html`
<div class="input-container">
<input
type="text"
class="input-field"
.value=${this._inputValue}
@input=${this._handleInputChange}
placeholder=${this.placeholder}
/>
</div>
<arx-input
type="text"
class="input-field"
.value=${this._inputValue}
@input=${this._handleInputChange}
placeholder=${this.placeholder}
></arx-input>
`
: ''
}
<div class="buttons">
<button @click=${this._handleCancel} class="cancel-btn">
${this.cancelText}
</button>
<button @click=${this._handleSave} class="save-btn">
${this.saveText}
</button>
<arx-button
variant="accent"
label=${this.cancelText}
@click=${this._handleCancel}
>
</arx-button>
<arx-button
variant="secondary"
label=${this.saveText}
@click=${this._handleSave}
>
</arx-button>
</div>
</div>
</div>

207
src/components/General/Select.ts Normal file
View file

@ -0,0 +1,207 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
@customElement('arx-select')
export class StyledSelect<T> extends LitElement {
@property() placeholder = '';
@property() value = '';
@property({ type: Boolean }) disabled = false;
@property() name = '';
@property({ type: Boolean }) required = false;
@property() label = '';
@property({ type: Array<T> }) options = [];
@property() valueMapper?: (option: T) => string;
@property() textMapper?: (option: T) => string;
static override styles = css`
:host {
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: var(--color-base-content);
font-weight: 500;
}
select {
width: 100%;
padding: 14px 16px;
font-size: 16px;
color: var(--color-base-content);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: var(--color-base-100);
border: var(--border) solid var(--color-base-300);
border-radius: var(--radius-field);
box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15),
inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
0 0 0 transparent;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
select:hover {
transform: translateY(-1px);
background-color: oklch(from var(--color-base-100) calc(l + 0.02) c h);
}
select:focus {
outline: none;
transform: translateY(1px);
border-top: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-left: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-bottom: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
border-right: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-content) l c h / 0.2),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
0 0 0 transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-color: linear-gradient(
145deg,
oklch(from var(--color-base-100) calc(l - 0.03) c h),
oklch(from var(--color-base-100) l c h)
);
}
select:disabled {
opacity: 0.7;
cursor: not-allowed;
box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.05),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
transform: none;
}
select option[value=""] {
color: var(--color-secondary);
}
`;
private _getOptionValue(option: T) {
if (option === undefined || option === null) return '';
if (this.valueMapper) return this.valueMapper(option);
if (typeof option === 'object' && 'value' in option) return option.value;
return option;
}
private _getOptionText(option: T) {
if (option === undefined || option === null) return '';
if (this.textMapper) return this.textMapper(option);
if (typeof option === 'object' && 'label' in option) return option.label;
return option;
}
override render() {
return html`
${when(this.label, () => html`<label for="select-${this.name}">${this.label}</label>`)}
<select
id="select-${this.name}"
.value=${this.value}
?disabled=${this.disabled}
?required=${this.required}
name=${this.name}
@change=${this._handleChange}
@focus=${this._handleFocus}
@blur=${this._handleBlur}
@keydown=${this._handleKeyDown}
@keyup=${this._handleKeyUp}
>
${when(
this.placeholder,
() =>
html`<option value="" ?selected=${!this.value} disabled>
${this.placeholder}
</option>`,
)}
${map(this.options, (option) => {
const optionValue = this._getOptionValue(option);
const optionText = this._getOptionText(option);
return html`
<option
value=${optionValue}
?selected=${optionValue === this.value}
>
${optionText}
</option>
`;
})}
</select>
`;
}
private _handleKeyDown(e: KeyboardEvent) {
this.dispatchEvent(
new CustomEvent('keydown', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
private _handleKeyUp(e: KeyboardEvent) {
this.dispatchEvent(
new CustomEvent('keyup', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
private _handleFocus() {
this.dispatchEvent(
new CustomEvent('focus', {
bubbles: true,
composed: true,
}),
);
}
private _handleBlur() {
this.dispatchEvent(
new CustomEvent('blur', {
bubbles: true,
composed: true,
}),
);
}
private _handleChange(e: Event) {
const select = e.target as HTMLSelectElement;
this.value = select.value;
this.dispatchEvent(
new CustomEvent('change', {
detail: { value: this.value },
bubbles: true,
composed: true,
}),
);
}
}

212
src/components/General/Textarea.ts Normal file
View file

@ -0,0 +1,212 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
@customElement('arx-textarea')
export class StyledTextarea extends LitElement {
@property() placeholder = '';
@property() value = '';
@property({ type: Boolean }) disabled = false;
@property() name = '';
@property({ type: Boolean }) required = false;
@property() label = '';
@property() rows = 4;
@property() maxlength = '';
@property({ type: Boolean }) resizable = true;
static override styles = css`
:host {
display: block;
width: 100%;
margin-bottom: 8px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: var(--color-base-content);
font-weight: 500;
}
textarea {
width: 100%;
min-height: 80px;
padding: 14px 16px;
font-size: 16px;
color: var(--color-base-content);
font-family: inherit;
line-height: 1.5;
background: var(--color-base-100);
border: var(--border) solid var(--color-base-300);
border-radius: var(--radius-field);
box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15),
inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7),
0 0 0 transparent;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
resize: vertical;
}
:host(:not([resizable])) textarea {
resize: none;
}
textarea::placeholder {
color: var(--color-secondary);
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1.1);
}
textarea:hover {
transform: translateY(-1px);
background: oklch(from var(--color-base-100) calc(l + 0.02) c h);
}
textarea:hover::placeholder {
transform: translateX(3px);
}
textarea:focus {
outline: none;
transform: translateY(1px);
border-top: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-left: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-bottom: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
border-right: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-content) l c h / 0.2),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
0 0 0 transparent;
background: linear-gradient(
145deg,
oklch(from var(--color-base-100) calc(l - 0.03) c h),
oklch(from var(--color-base-100) l c h)
);
}
textarea:disabled {
opacity: 0.7;
cursor: not-allowed;
box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.05),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
transform: none;
}
.character-count {
display: none;
text-align: right;
margin-top: 4px;
font-size: 12px;
color: var(--color-secondary);
}
.has-maxlength .character-count {
display: block;
}
.character-count.near-limit {
color: var(--color-warning);
}
.character-count.at-limit {
color: var(--color-error);
}
`;
override render() {
const charCount = this.value?.length || 0;
const maxLen = Number.parseInt(this.maxlength) || 0;
const nearLimit = maxLen && charCount >= maxLen * 0.8;
const atLimit = maxLen && charCount >= maxLen * 0.95;
const hasMaxlength = !!this.maxlength;
return html`
${when(this.label, () => html`<label for="textarea-${this.name}">${this.label}</label>`)}
<div class="${hasMaxlength ? 'has-maxlength' : ''}">
<textarea
id="textarea-${this.name}"
.value=${this.value}
?disabled=${this.disabled}
?required=${this.required}
placeholder=${this.placeholder}
rows=${this.rows}
maxlength=${this.maxlength}
name=${this.name}
@input=${this._handleInput}
@focus=${this._handleFocus}
@blur=${this._handleBlur}
@keydown=${this._handleKeyDown}
></textarea>
<div
class="character-count ${nearLimit ? 'near-limit' : ''} ${atLimit ? 'at-limit' : ''}"
>
${charCount}/${this.maxlength}
</div>
</div>
`;
}
private _handleKeyDown(e: KeyboardEvent) {
if (e.key === 'Tab' && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
e.preventDefault();
const textarea = e.target as HTMLTextAreaElement;
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
this.value = `${this.value.substring(0, start)}\t${this.value.substring(end)}`;
setTimeout(() => {
textarea.selectionStart = textarea.selectionEnd = start + 1;
}, 0);
}
this.dispatchEvent(
new CustomEvent('keydown', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
private _handleFocus() {
this.dispatchEvent(
new CustomEvent('focus', {
bubbles: true,
composed: true,
}),
);
}
private _handleBlur() {
this.dispatchEvent(
new CustomEvent('blur', {
bubbles: true,
composed: true,
}),
);
}
private _handleInput(e: InputEvent) {
const textarea = e.target as HTMLTextAreaElement;
this.value = textarea.value;
this.dispatchEvent(
new CustomEvent('input', {
detail: { value: this.value },
bubbles: true,
composed: true,
}),
);
}
}

216
src/components/General/Toggle.ts Normal file
View file

@ -0,0 +1,216 @@
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
@customElement('arx-toggle')
export class StyledToggle extends LitElement {
@property() label = '';
@property({ type: Boolean, reflect: true }) checked = false;
@property({ type: Boolean }) disabled = false;
@property() name = '';
@property({ type: Boolean }) required = false;
@property() value = 'on';
static override styles = css`
:host {
display: inline-block;
width: 100%;
margin-bottom: 8px;
}
.toggle-container {
display: flex;
align-items: center;
gap: 12px;
}
label {
font-size: 14px;
color: var(--color-base-content);
font-weight: 500;
cursor: pointer;
}
.toggle-wrapper {
position: relative;
display: inline-block;
width: 48px;
height: 24px;
}
.toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-track {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-base-100);
border-radius: 24px;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
border: var(--border) solid var(--color-base-300);
box-shadow: inset calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15),
inset calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.7);
}
.toggle-track:hover {
background-color: oklch(from var(--color-base-100) calc(l + 0.02) c h);
}
.toggle-knob {
position: absolute;
height: 18px;
width: 18px;
left: 3px;
bottom: 2px;
background-color: var(--color-base-content);
border-radius: 50%;
transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.2),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.3);
}
.toggle-input:checked + .toggle-track {
background-color: var(--color-base-100);
border-top: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-left: var(--border) solid
oklch(from var(--color-base-300) l c h / 0.8);
border-bottom: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
border-right: var(--border) solid
oklch(from var(--color-base-200) l c h / 0.8);
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-content) l c h / 0.2),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5);
}
.toggle-input:checked + .toggle-track .toggle-knob {
transform: translateX(24px);
background-color: var(--color-accent);
}
.toggle-input:focus + .toggle-track {
outline: none;
box-shadow: inset calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 5px)
oklch(from var(--color-base-content) l c h / 0.2),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.5),
0 0 0 2px oklch(from var(--color-accent) l c h / 0.3);
}
.toggle-input:disabled + .toggle-track {
opacity: 0.7;
cursor: not-allowed;
box-shadow: inset calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.05),
inset calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.4);
}
.toggle-input:disabled + .toggle-track .toggle-knob {
background-color: var(--color-secondary);
box-shadow: calc(var(--depth) * 1px) calc(var(--depth) * 1px)
calc(var(--depth) * 2px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 2px) oklch(from var(--color-base-100) l c h / 0.2);
}
`;
override render() {
return html`
<div class="toggle-container">
${when(this.label, () => html` <label for="toggle-${this.name}">${this.label}</label> `)}
<div class="toggle-wrapper">
<input
type="checkbox"
id="toggle-${this.name}"
class="toggle-input"
.checked=${this.checked}
?disabled=${this.disabled}
?required=${this.required}
name=${this.name}
value=${this.value}
@change=${this._handleChange}
@focus=${this._handleFocus}
@blur=${this._handleBlur}
@keydown=${this._handleKeyDown}
/>
<label for="toggle-${this.name}" class="toggle-track">
<span class="toggle-knob"></span>
</label>
</div>
</div>
`;
}
private _handleChange(e: Event) {
const checkbox = e.target as HTMLInputElement;
this.checked = checkbox.checked;
this.dispatchEvent(
new CustomEvent('change', {
detail: { checked: this.checked, value: this.value },
bubbles: true,
composed: true,
}),
);
}
private _handleFocus() {
this.dispatchEvent(
new CustomEvent('focus', {
bubbles: true,
composed: true,
}),
);
}
private _handleBlur() {
this.dispatchEvent(
new CustomEvent('blur', {
bubbles: true,
composed: true,
}),
);
}
private _handleKeyDown(e: KeyboardEvent) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this.checked = !this.checked;
this.dispatchEvent(
new CustomEvent('change', {
detail: { checked: this.checked, value: this.value },
bubbles: true,
composed: true,
}),
);
}
this.dispatchEvent(
new CustomEvent('keydown', {
detail: { key: e.key },
bubbles: true,
composed: true,
}),
);
}
}

241
src/components/General/Tooltip.ts Normal file
View file

@ -0,0 +1,241 @@
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
@customElement('arx-tooltip')
export class Tooltip extends LitElement {
@property() content = '';
@property() position = 'top';
@property() delay = 100; // Delay before showing tooltip (ms)
@property() offset = 8; // Distance from target element
@property() variant = 'default'; // default, primary, secondary, accent, error, warning, success
@property({ type: Boolean }) arrow = true;
@property({ type: Boolean }) allowHtml = false;
@property({ type: Boolean }) interactive = false;
@property({ type: Boolean }) disabled = false;
@state() private isVisible = false;
@state() private timer: ReturnType<typeof setTimeout> | null = null;
static override styles = css`
:host {
display: inline-block;
position: relative;
}
.tooltip-container {
position: relative;
display: inline-block;
}
.tooltip {
position: absolute;
z-index: 999;
max-width: 300px;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: var(--radius-field);
font-size: 0.875rem;
line-height: 1.4;
text-align: center;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.2);
transform: scale(0.95);
transform-origin: center;
}
.tooltip.interactive {
pointer-events: auto;
}
.tooltip.visible {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/* Default variant */
.tooltip.default {
background-color: var(--color-base-content);
color: var(--color-base-100);
}
/* Primary variant */
.tooltip.primary {
background-color: var(--color-primary);
color: var(--color-primary-content);
}
/* Secondary variant */
.tooltip.secondary {
background-color: var(--color-secondary);
color: var(--color-secondary-content);
}
/* Accent variant */
.tooltip.accent {
background-color: var(--color-accent);
color: var(--color-accent-content);
}
/* Error variant */
.tooltip.error {
background-color: var(--color-error);
color: var(--color-error-content);
}
/* Warning variant */
.tooltip.warning {
background-color: var(--color-warning);
color: var(--color-warning-content);
}
/* Success variant */
.tooltip.success {
background-color: var(--color-success);
color: var(--color-success-content);
}
/* Positions */
.tooltip.top {
bottom: calc(100% + var(--offset, 8px));
left: 50%;
transform: translateX(-50%) scale(0.95);
}
.tooltip.top.visible {
transform: translateX(-50%) scale(1);
}
.tooltip.right {
left: calc(100% + var(--offset, 8px));
top: 50%;
transform: translateY(-50%) scale(0.95);
}
.tooltip.right.visible {
transform: translateY(-50%) scale(1);
}
.tooltip.bottom {
top: calc(100% + var(--offset, 8px));
left: 50%;
transform: translateX(-50%) scale(0.95);
}
.tooltip.bottom.visible {
transform: translateX(-50%) scale(1);
}
.tooltip.left {
right: calc(100% + var(--offset, 8px));
top: 50%;
transform: translateY(-50%) scale(0.95);
}
.tooltip.left.visible {
transform: translateY(-50%) scale(1);
}
/* Arrow */
.tooltip::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: inherit;
transform: rotate(45deg);
}
.tooltip.top::after {
bottom: -4px;
left: 50%;
margin-left: -4px;
}
.tooltip.right::after {
left: -4px;
top: 50%;
margin-top: -4px;
}
.tooltip.bottom::after {
top: -4px;
left: 50%;
margin-left: -4px;
}
.tooltip.left::after {
right: -4px;
top: 50%;
margin-top: -4px;
}
.tooltip.no-arrow::after {
display: none;
}
@media (max-width: 640px) {
.tooltip {
max-width: 200px;
font-size: 0.75rem;
padding: 0.4rem 0.6rem;
}
}
`;
override render() {
return html`
<div
class="tooltip-container"
@mouseenter=${!this.disabled ? this._onMouseEnter : null}
@mouseleave=${!this.disabled ? this._onMouseLeave : null}
@focus=${!this.disabled ? this._onMouseEnter : null}
@blur=${!this.disabled ? this._onMouseLeave : null}
>
<slot></slot>
<div
class="tooltip ${this.position} ${this.variant} ${
this.isVisible ? 'visible' : ''
} ${!this.arrow ? 'no-arrow' : ''} ${this.interactive ? 'interactive' : ''}"
style="--offset: ${this.offset}px;"
role="tooltip"
aria-hidden=${!this.isVisible}
>
${this.allowHtml ? html`<div .innerHTML=${this.content}></div>` : this.content}
</div>
</div>
`;
}
private _onMouseEnter() {
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
this.isVisible = true;
}, this.delay);
}
private _onMouseLeave() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.isVisible = false;
}
override disconnectedCallback() {
super.disconnectedCallback();
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
}
}

343
src/components/Header.ts
View file

@ -1,141 +1,302 @@
import { ndk } from '@/ndk';
import type { NDKEvent } from '@nostr-dev-kit/ndk';
import * as nip19 from '@nostr/tools/nip19';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { keyed } from 'lit/directives/keyed.js';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
import '@components/HeaderSugestion';
import '@components/General/Input';
@customElement('arx-header')
export class Header extends LitElement {
@property({ type: String }) override title = 'Eve';
@property({ type: String }) url = 'eve://home';
@property({ type: Boolean }) canGoBack = false;
@property({ type: Boolean }) canGoForward = false;
private searchQuery = '';
private searchInput: HTMLInputElement | null = null;
private _debounceTimeout?: ReturnType<typeof setTimeout>;
static override styles = [
css`
header {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
z-index: 999999;
background: var(--primary);
height: var(--font-2xl);
font-size: var(--header-height);
transition: all 0.3s ease;
display: flex;
align-items: center;
padding: 0 var(--space-md);
}
@state() private showSuggestions = false;
@state() private events: NDKEvent[] = [];
@state() private suggestions: NDKEvent[] = [];
.nav-buttons {
display: flex;
gap: var(--space-xs);
padding-right: var(--space-xs);
static override styles = css`
:host {
display: block;
z-index: 999999;
}
button {
text-decoration: none;
color: var(--light);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: var(--space-xs);
border-radius: 100%;
font-size: var(--font-md);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
header {
background: var(--color-primary);
backdrop-filter: blur(10px);
border: var(--border) solid var(--color-primary-content);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.2);
height: var(--font-2xl, 3rem);
font-size: var(--font-md, 1rem);
transition: all 0.3s ease;
display: flex;
align-items: space-between;
padding: 0 var(--space-md, 1rem);
}
&:hover {
background: rgba(255, 255, 255, 0.2);
}
.nav-buttons {
display: flex;
gap: var(--space-xs, 0.5rem);
padding-right: var(--space-xs, 0.5rem);
}
&.disabled {
opacity: 0.5;
pointer-events: none;
}
}
}
.nav-buttons button {
text-decoration: none;
color: var(--color-primary-content);
background: oklch(from var(--color-primary-content) l c h / 0.1);
border: var(--border) solid
oklch(from var(--color-primary-content) l c h / 0.2);
padding: var(--space-xs, 0.5rem);
border-radius: 50%;
font-size: var(--font-md, 1rem);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.search-container {
flex: 1;
position: relative;
.nav-buttons button:hover {
background: oklch(from var(--color-primary-content) l c h / 0.2);
transform: translateY(-2px);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15);
}
input {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
color: var(--light);
width: 100%;
text-align: center;
cursor: text;
font-size: 0.9rem;
width: 100%;
padding: var(--space-xs);
text-align: center;
.nav-buttons button:active {
transform: translateY(1px);
}
&:not(:focus)::placeholder {
color: var(--light);
opacity: 1;
}
.nav-buttons button.disabled {
opacity: 0.5;
pointer-events: none;
}
&:focus {
background: rgba(0, 0, 0, 0.2);
}
}
}
`,
];
.search-container {
flex: 1;
position: relative;
}
arx-input {
transform: translateY(3px);
}
.suggestions {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: oklch(from var(--color-base-100) l c h / 0.9);
backdrop-filter: blur(10px);
border: var(--border) solid var(--color-base-200);
border-top: none;
border-radius: 0 0 var(--radius-field) var(--radius-field);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px)
oklch(from var(--color-base-content) l c h / 0.2);
z-index: 9999;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
`;
override firstUpdated() {
ndk
.fetchEvents({
limit: 50_000,
})
.then((events) => {
this.events = [...events];
});
}
override render() {
return html`
<header>
<div class="nav-buttons">
<button
class=${this.canGoBack ? '' : 'disabled'}
@click=${() => this.dispatchEvent(new CustomEvent('go-back'))}
class=${classMap({ disabled: !this.canGoBack })}
@click=${this._handleGoBack}
aria-label="Go back"
>
<iconify-icon icon="material-symbols:arrow-back"></iconify-icon>
</button>
<button
class=${this.canGoForward ? '' : 'disabled'}
@click=${() => this.dispatchEvent(new CustomEvent('go-forward'))}
class=${classMap({ disabled: !this.canGoForward })}
@click=${this._handleGoForward}
aria-label="Go forward"
>
<iconify-icon icon="material-symbols:arrow-forward"></iconify-icon>
</button>
<button
@click=${() => {
window.location.hash = '#';
}}
aria-label="Home"
>
<button @click=${this._handleGoHome} aria-label="Home">
<iconify-icon icon="material-symbols:home"></iconify-icon>
</button>
</div>
<div class="search-container" @click=${this.focusSearch}>
<input
ref=${this.searchInput}
<div class="search-container">
<arx-input
type="text"
.value=${this.searchQuery}
@keyup=${this.handleSearch}
/>
placeholder=${this.url}
@keyup=${this._handleSearch}
@focus=${this._handleFocus}
@input=${this._handleInput}
></arx-input>
${when(
this.showSuggestions,
() => html`
<div class="suggestions">
${map(this.suggestions, (suggestion: NDKEvent) =>
keyed(
suggestion.id,
html`
<arx-header-suggestion
.event=${suggestion}
.allEvents=${this.events}
@click=${() => this._handleSuggestionClick(suggestion)}
></arx-header-suggestion>
`,
),
)}
</div>
`,
)}
</div>
</header>
`;
}
private focusSearch() {
this.searchInput?.focus();
private _handleFocus() {
this.showSuggestions = true;
}
private handleSearch(e: KeyboardEvent) {
private _handleInput(e: InputEvent) {
this.searchQuery = (e.target as HTMLInputElement).value;
if (this._debounceTimeout) {
clearTimeout(this._debounceTimeout);
}
if (!this.searchQuery.trim()) {
this.suggestions = [];
this.showSuggestions = false;
return;
}
this._debounceTimeout = setTimeout(() => {
const query = this.searchQuery.toLowerCase();
const isNoteSearch = query.startsWith('note1');
const isEventSearch = query.startsWith('nevent1');
const isPubkeySearch = query.startsWith('npub1');
this.suggestions = this.events
.filter((event: NDKEvent) => {
if (event.kind === 11 || event.kind === 1111) return false; // hide old forum events
if (event.kind === 30890 || event.kind === 30891) return false; // ignore old-in-dev events
if (event.kind === 60890) return false; // don't include the actual forum
if (event.kind === 60891) {
const categoryId = event.tags.find((tag) => tag[0] === 'd')?.[1] || '';
const forum = this.events.find(
(e) => e.kind === 60890 && e.tags.some((tag) => tag[0] === 'forum' && tag[1] === `60891:${categoryId}`),
);
if (!forum) return false; // ignore orphan forum categories
}
if (event.id.includes(query)) return true;
if (isNoteSearch) {
const noteId = nip19.noteEncode(event.id);
return noteId.includes(query);
}
if (isEventSearch) {
const eventId = event.encode();
return eventId.includes(query);
}
if (isPubkeySearch && event.kind === 0) {
const pubkey = nip19.npubEncode(event.pubkey);
return pubkey.includes(query);
}
if (event.content.toLowerCase().includes(query)) return true;
return event.tags.some((tag) => tag.length > 1 && tag[1].toLowerCase().includes(query));
})
.slice(0, 20);
this.showSuggestions = this.suggestions.length > 0;
}, 50);
this.showSuggestions = true;
}
private _handleSearch(e: KeyboardEvent) {
if (e.key !== 'Enter') return;
const hash = (e.target as HTMLInputElement).value.replace('eve://', '#');
const target = e.target as HTMLInputElement;
this.searchQuery = target.value;
this.showSuggestions = false;
if (this.searchQuery.startsWith('npub1')) {
try {
const { type } = nip19.decode(this.searchQuery);
if (type === 'npub') {
window.location.hash = `profile/${this.searchQuery}`;
return;
}
} catch (e) {}
}
const hash = this.searchQuery.replace('eve://', '#');
window.location.hash = hash;
}
private _handleGoBack() {
this.dispatchEvent(new CustomEvent('go-back'));
}
private _handleGoForward() {
this.dispatchEvent(new CustomEvent('go-forward'));
}
private _handleGoHome() {
window.location.hash = '#';
}
private _handleSuggestionClick(suggestion: NDKEvent) {
window.location.hash = '#';
this.showSuggestions = false;
console.log(suggestion);
switch (suggestion.kind) {
case 0:
window.location.hash = `profile/${suggestion.pubkey}`;
break;
case 60890:
case 60891:
window.location.hash = 'arbor';
break;
case 892:
window.location.hash = `arbor/topics/${suggestion.id}`;
break;
case 893: {
const threadId = suggestion.tags.find((tag) => tag[0] === 'E')?.[1]!;
window.location.hash = `arbor/topics/${threadId}`;
break;
}
default:
window.location.hash = `event/${suggestion.id}`;
}
}
}

52
src/components/HeaderSugestion.ts Normal file
View file

@ -0,0 +1,52 @@
import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import '@components/NostrProfile';
@customElement('arx-header-suggestion')
export class HeaderSuggestion extends LitElement {
@property({ type: NDKEvent }) event: NDKEvent | undefined;
@property({ type: Array<NDKEvent> }) allEvents: NDKEvent[] | undefined;
static override styles = css`
:host {
display: block;
padding: var(--space-xs) var(--space-sm);
cursor: pointer;
transition: background 0.2s ease;
}
`;
override render() {
if (!this.event) return html``;
if (this.event.kind === 0)
return html`<arx-nostr-profile
npub=${this.event.pubkey}
></arx-nostr-profile>`;
if (this.event.kind === 892) {
const threadName = this.event.tags.find((tag) => tag[0] === 'name')?.[1] || '';
return html`Arbor Thread: ${threadName}`;
}
if (this.event.kind === 893) {
const threadId = this.event.tags.find((tag) => tag[0] === 'E')?.[1] || '';
const thread = this.allEvents?.find((event) => event.id === threadId);
const threadName = thread?.tags.find((tag) => tag[0] === 'name')?.[1] || '';
return html`Arbor Post in ${threadName}:
${this.event.content.substring(0, 100)}`;
}
if (this.event.kind === 60891) {
const categoryId = this.event.tags.find((tag) => tag[0] === 'd')?.[1] || '';
const forum = this.allEvents?.find(
(event) =>
event.kind === 60890 && event.tags.some((tag) => tag[0] === 'forum' && tag[1] === `60891:${categoryId}`),
);
if (!forum) return html`Orphan (deleted) forum category`;
const forumName = forum.tags.find((tag) => tag[0] === 'd')?.[1] || '';
const arborText = `Arbor${forumName === 'arbor' ? '' : ` [${forumName}]`}`;
const categoryName = this.event.tags.find((tag) => tag[0] === 'name')?.[1] || '';
return html`${arborText} Category: ${categoryName}`;
}
return html`Event kind ${this.event.kind}`;
}
}

305
src/components/InitialSetup.ts
View file

@ -10,6 +10,11 @@ import { encodeBase64 } from '@std/encoding/base64';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import '@components/LoadingView';
import '@components/General/Button';
import '@components/General/Input';
import '@components/General/Fieldset';
@customElement('arx-initial-setup')
export class InitialSetup extends LitElement {
@state() private currentPage = 1;
@ -32,32 +37,18 @@ export class InitialSetup extends LitElement {
:host {
display: block;
width: 100%;
--primary-color: var(--eve-primary-color, #4a90e2);
--primary-hover: var(--eve-primary-hover, #357abd);
--secondary-color: var(--eve-secondary-color, #6c757d);
--secondary-hover: var(--eve-secondary-hover, #5a6268);
--text-color: var(--eve-text-color, #2c3e50);
--text-secondary: var(--eve-text-secondary, #64748b);
--background-color: var(--eve-background-color, #ffffff);
--error-color: var(--eve-error-color, #dc3545);
--success-color: var(--eve-success-color, #28a745);
--spacing-unit: 0.25rem;
--border-radius: 8px;
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
font-family: system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
color: var(--text-color);
color: var(--color-base-content);
--spacing-unit: 0.25rem;
}
.welcome-container {
max-width: min(800px, 90vw);
margin: 0 auto;
padding: calc(var(--spacing-unit) * 8);
animation: fadeIn var(--transition-normal);
animation: fadeIn var(--transition);
}
section {
@ -67,8 +58,8 @@ export class InitialSetup extends LitElement {
.alpha-badge {
display: inline-flex;
align-items: center;
background: var(--primary-color);
color: white;
background: var(--color-accent);
color: var(--color-accent-content);
padding: 0.15em 0.5em;
border-radius: 999px;
font-size: 0.75em;
@ -89,8 +80,8 @@ export class InitialSetup extends LitElement {
font-weight: 700;
background: linear-gradient(
45deg,
var(--primary-color),
var(--primary-hover)
var(--color-accent),
oklch(from var(--color-accent) l calc(c * 1.2) h)
);
-webkit-background-clip: text;
color: transparent;
@ -101,18 +92,20 @@ export class InitialSetup extends LitElement {
font-size: clamp(1.5rem, 3vw, 1.75rem);
font-weight: 600;
margin-bottom: calc(var(--spacing-unit) * 4);
color: var(--color-base-content);
}
h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: calc(var(--spacing-unit) * 4);
color: var(--color-base-content);
}
p {
margin: 0 0 calc(var(--spacing-unit) * 4);
line-height: 1.6;
color: var(--text-secondary);
color: var(--color-secondary);
}
.input-group {
@ -121,65 +114,6 @@ export class InitialSetup extends LitElement {
margin-top: calc(var(--spacing-unit) * 6);
}
input {
flex: 1;
padding: calc(var(--spacing-unit) * 4);
border: 2px solid var(--text-secondary);
border-radius: var(--border-radius);
font-size: 1rem;
transition: all var(--transition-fast);
}
input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}
.button {
position: relative;
display: inline-flex;
align-items: center;
gap: calc(var(--spacing-unit) * 2);
padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);
border: none;
border-radius: var(--border-radius);
font-weight: 500;
cursor: pointer;
transition: all var(--transition-fast);
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.button.primary {
background: linear-gradient(
45deg,
var(--primary-color),
var(--primary-hover)
);
color: white;
box-shadow: var(--shadow-md);
}
.button.secondary {
background: linear-gradient(
45deg,
var(--secondary-color),
var(--secondary-hover)
);
color: white;
}
.button:hover {
transform: translateY(-2px);
}
.button:active {
transform: translateY(0);
}
.navigation {
display: flex;
justify-content: space-between;
@ -201,75 +135,52 @@ export class InitialSetup extends LitElement {
.welcome-container {
padding: calc(var(--spacing-unit) * 4);
}
.input-group {
flex-direction: column;
}
.button {
width: 100%;
justify-content: center;
}
}
pre {
white-space: normal;
background-color: var(--color-base-200);
padding: calc(var(--spacing-unit) * 4);
border-radius: var(--radius-field);
}
code {
white-space: pre;
font-family: monospace;
background-color: var(--color-base-200);
padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
border-radius: var(--radius-field);
}
.note {
display: block;
color: #666;
color: var(--color-secondary);
font-size: 0.875rem;
margin-top: 0.5rem;
padding-left: 0.5rem;
border-left: 2px solid #ddd;
border-left: var(--border) solid var(--color-base-300);
font-style: italic;
line-height: 1.4;
max-width: 600px;
opacity: 0.9;
transition: all 0.2s ease;
}
.note:hover {
opacity: 1;
border-left-color: #999;
}
fieldset {
border: 2px solid #3498db;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
background-color: #f8f9fa;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
legend {
padding: 0 10px;
background-color: #3498db;
color: white;
font-weight: bold;
border-radius: 4px;
font-size: 1.1em;
}
fieldset:hover {
border-color: #2980b9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
border-left-color: var(--color-accent);
}
.external-link {
color: #2970ff;
color: var(--color-accent);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
position: relative;
}
.external-link:hover {
color: #1a56db;
color: oklch(from var(--color-accent) l calc(c * 1.2) h);
text-decoration: underline;
}
@ -328,27 +239,28 @@ export class InitialSetup extends LitElement {
</section>
<section>
<div class="action-buttons">
<a href="https://arx-ccn.com/eve-feedback" class="button primary">
<iconify-icon icon="mdi:feedback"></iconify-icon>Share Feedback
</a>
<a
href="https://arx-ccn.com/report-eve-bug"
class="button secondary"
>
<iconify-icon icon="mdi:bug"></iconify-icon>Report a Bug
</a>
</div>
<arx-button
label="Share Feedback"
@click=${() => window.open('https://arx-ccn.com/eve-feedback')}
>
<iconify-icon slot="prefix" icon="mdi:feedback"></iconify-icon>
</arx-button>
<arx-button
variant="secondary"
label="Report a Bug"
@click=${() => window.open('https://arx-ccn.com/report-eve-bug')}
>
<iconify-icon slot="prefix" icon="mdi:bug"></iconify-icon>
</arx-button>
</section>
<div class="navigation">
<span></span>
<button
<arx-button
variant="primary"
label="Next"
@click=${() => this.handleNavigation(2)}
class="button primary"
>
Next
</button>
></arx-button>
</div>
</main>
`;
@ -387,36 +299,36 @@ export class InitialSetup extends LitElement {
well as improve your community's security.
</p>
<div class="input-group">
<input
<arx-input
@input=${this.onSeedPhraseInput}
.value=${this.seedPhrase}
id="seed-input"
type="text"
placeholder="Enter seed phrase..."
/>
<button
></arx-input>
<arx-button
@click=${() => this.generateSeedPhrase()}
class="button secondary"
label="Generate"
variant="secondary"
>
Generate
</button>
</arx-button>
</div>
</section>
<div class="navigation">
<button
<arx-button
@click=${() => this.handleNavigation(1)}
class="button secondary"
label="Back"
variant="secondary"
>
Back
</button>
<button
</arx-button>
<arx-button
@click=${() => this.handleNavigation(3)}
?disabled=${!this.isValidSeedPhrase()}
class="button primary"
label="Continue"
variant="primary"
>
Continue
</button>
</arx-button>
</div>
</main>
`;
@ -437,9 +349,13 @@ export class InitialSetup extends LitElement {
This process will be automated in future releases.
</p>
<p>Please press the button below to start the relay.</p>
<button @click=${() => this.startRelay()} class="button primary">
<arx-button
variant="primary"
label="Start Relay"
@click=${() => this.startRelay()}
>
Start Relay
</button>
</arx-button>
<p>
Having trouble? Our team is here to help if you encounter any
issues.
@ -448,18 +364,18 @@ export class InitialSetup extends LitElement {
</section>
<div class="navigation">
<button
<arx-button
@click=${() => this.handleNavigation(2)}
class="button secondary"
variant="secondary"
label="Back"
>
Back
</button>
<button
</arx-button>
<arx-button
@click=${() => this.handleNavigation(4)}
class="button primary"
variant="primary"
label="Continue"
>
Continue
</button>
</arx-button>
</div>
</main>
`;
@ -488,45 +404,43 @@ export class InitialSetup extends LitElement {
community members.
</p>
<div class="profile-form">
<fieldset>
<legend>Display Name</legend>
<input
<arx-fieldset legend="Your Name">
<arx-input
id="username"
type="text"
.value=${this.userName}
@input=${this.onUserNameInput}
placeholder="Enter your name"
/>
</fieldset>
<fieldset>
<legend>Profile Picture</legend>
<input
></arx-input>
</arx-fieldset>
<arx-fieldset legend="Profile Picture">
<arx-input
id="profile-image"
type="text"
.value=${this.profileImage}
@input=${this.onProfileImageInput}
placeholder="Enter image URL"
/>
></arx-input>
<small class="note">
Direct file uploads will be supported in a future update. For
now, please provide an image URL or leave blank.
</small>
</fieldset>
</arx-fieldset>
</div>
</section>
<div class="navigation">
<button
<arx-button
@click=${() => this.handleNavigation(3)}
class="button secondary"
variant="secondary"
label="Back"
>
Back
</button>
<button
</arx-button>
<arx-button
@click=${() => this.handleNavigation(5)}
class="button primary"
variant="primary"
label="Final Step"
>
Final Step
</button>
</arx-button>
</div>
</main>
`;
@ -546,13 +460,13 @@ export class InitialSetup extends LitElement {
>npub.cash</a
>.
</p>
<input
<arx-input
id="lightning-address"
type="text"
.value=${this.lightningAddress}
@input=${this.onLightningAddressInput}
placeholder="your@lightning.address"
/>
/></arx-input>
<small class="note">
Your Lightning address enables secure, instant payments within the
community.
@ -560,15 +474,14 @@ export class InitialSetup extends LitElement {
</section>
<div class="navigation">
<button
<arx-button
@click=${() => this.handleNavigation(4)}
class="button secondary"
variant="secondary"
label="Back"
>
Back
</button>
<button @click=${() => this.goToFinalStep()} class="button primary">
Next
</button>
</arx-button>
<arx-button variant="primary" label="Next" @click=${() => this.goToFinalStep()}>
</arx-button>
</div>
</main>
`;
@ -625,13 +538,17 @@ export class InitialSetup extends LitElement {
</section>
<div class="navigation">
<button
<arx-button
@click=${() => this.handleNavigation(5)}
class="button secondary"
variant="secondary"
label="Back"
>
Back
</button>
<button @click=${this.finish} class="button primary">Finish</button>
</arx-button>
<arx-button
variant="accent"
label="Finish"
@click=${this.finish}
></arx-button>
</div>
</main>
`;
@ -666,7 +583,9 @@ export class InitialSetup extends LitElement {
case 6:
return this.renderPageSix();
default:
return html`<div class="welcome-container">Loading...</div>`;
return html`<div class="welcome-container">
<arx-loading-view></arx-loading-view>
</div>`;
}
}
}

42
src/components/LoadingView.ts
View file

@ -1,17 +1,43 @@
import { LitElement, html } from 'lit';
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('arx-loading-view')
export class LoadingView extends LitElement {
static override styles = [
css`
:host {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px;
color: var(--color-accent);
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner {
animation: spin 1.5s linear infinite;
width: 18px;
height: 18px;
border: 2px solid var(--color-accent-content);
border-top: 2px solid var(--color-accent);
border-radius: 50%;
}
`,
];
override render() {
return html`
<span>Loading...</span>
<div class="spinner"></div>
Loading...
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'arx-loading-view': LoadingView;
}
}

8
src/components/NostrAvatar.ts
View file

@ -20,13 +20,13 @@ export class ArxNostrAvatar extends LitElement {
--avatar-size: 2rem;
}
.medium-avatar {
--avatar-size: 3rem;
}
.large-avatar {
--avatar-size: 4rem;
}
.large-avatar {
--avatar-size: 6rem;
}
.huge-avatar {
--avatar-size: 5rem;
--avatar-size: 10rem;
}
`,
];

20
src/components/NostrProfile.ts
View file

@ -52,13 +52,25 @@ export class NostrProfile extends LitElement {
switch (this.renderType) {
case 'short':
return html`<arx-nostr-short-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-short-profile>`;
return html`<arx-nostr-short-profile
.profile=${this.profile}
npub=${this.npub}
></arx-nostr-short-profile>`;
case 'medium':
return html`<arx-nostr-medium-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-medium-profile>`;
return html`<arx-nostr-medium-profile
.profile=${this.profile}
npub=${this.npub}
></arx-nostr-medium-profile>`;
case 'large':
return html`<arx-nostr-large-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-large-profile>`;
return html`<arx-nostr-large-profile
.profile=${this.profile}
npub=${this.npub}
></arx-nostr-large-profile>`;
case 'card':
return html`<arx-nostr-card-profile .profile=${this.profile} npub=${this.npub}></arx-nostr-card-profile>`;
return html`<arx-nostr-card-profile
.profile=${this.profile}
npub=${this.npub}
></arx-nostr-card-profile>`;
default:
return html`<p>Invalid render type</p>`;
}

160
src/components/Widgets/BitcoinBlockWidget.ts
View file

@ -1,11 +1,16 @@
import { getLastBlockHeight } from '@utils/lastBlockHeight';
import formatDateTime from '@/utils/formatDateTime';
import { type LastBlock, getLastBlock } from '@/utils/lastBlock';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import '@components/LoadingView';
import '@components/General/Tooltip';
import '@components/General/Fieldset';
@customElement('arx-bitcoin-block-widget')
export class BitcoinBlockWidget extends LitElement {
@state()
private lastBlock: number | null = null;
private lastBlock: LastBlock | null = null;
@state()
private isLoading = true;
@ -13,15 +18,16 @@ export class BitcoinBlockWidget extends LitElement {
@state()
private error: string | null = null;
private REFRESH_INTERVAL = 5000;
private REFRESH_INTERVAL = 30000;
@state()
private timer: number | null = null;
constructor() {
super();
this.loadBlockHeight();
this.timer = window.setInterval(this.loadBlockHeight, this.REFRESH_INTERVAL);
this.loadBlock = this.loadBlock.bind(this);
this.loadBlock();
this.timer = window.setInterval(this.loadBlock, this.REFRESH_INTERVAL);
}
override disconnectedCallback() {
@ -29,70 +35,138 @@ export class BitcoinBlockWidget extends LitElement {
if (this.timer) clearInterval(this.timer);
}
async loadBlockHeight() {
async loadBlock() {
this.isLoading = true;
try {
const response = await getLastBlockHeight();
this.lastBlock = response.height;
const response = await getLastBlock();
this.lastBlock = response;
this.error = null;
} catch (error) {
this.error = 'Failed to load block height';
this.error = 'Failed to load block data';
console.error(error);
} finally {
this.isLoading = false;
}
}
private formatBlockId(id: string): string {
if (!id) return '';
if (id.length <= 16) return id;
return `${id.substring(0, 8)}...${id.substring(id.length - 8)}`;
}
private formatSize(size: number): string {
if (size < 1024) return `${size} Bytes`;
if (size < 1024 * 1024) return `${(size / 1024).toFixed(2)} KB`;
return `${(size / (1024 * 1024)).toFixed(2)} MB`;
}
private copyToClipboard(text: string) {
navigator.clipboard.writeText(text).catch((err) => {
console.error('Could not copy text: ', err);
});
}
static override styles = [
css`
.error {
color: #dc3545;
padding: 0.5rem;
border-radius: 4px;
background: #f8d7da;
:host {
display: block;
}
.loading {
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
margin-bottom: 12px;
border-bottom: var(--border) solid var(--color-base-300);
padding-bottom: 8px;
}
.block-height {
display: flex;
align-items: center;
gap: 0.5rem;
}
.label {
font-weight: 500;
}
.value {
font-size: 1.25rem;
.widget-title {
font-size: 1.2rem;
font-weight: 600;
margin: 0;
color: var(--color-base-content);
display: flex;
align-items: center;
gap: 8px;
}
.bitcoin-icon {
color: var(--color-warning);
font-size: 1.4rem;
}
.error {
color: var(--color-error-content);
padding: 12px;
border-radius: var(--radius-field);
background: var(--color-error);
margin-bottom: 12px;
}
`,
];
override render() {
if (this.error) {
return html`<div class="error">${this.error}</div>`;
}
private renderError() {
return html`<div class="error">${this.error}</div>`;
}
if (this.isLoading) {
return html`
<div class="loading">
<span class="loader"></span>
Loading latest block...
</div>
`;
}
private renderLoading() {
return html`<arx-loading-view></arx-loading-view>`;
}
private renderEmptyState() {
return html`<div class="error">No block data available</div>`;
}
private renderBlockData() {
if (!this.lastBlock) return this.renderEmptyState();
return html`
<div class="block-height">
<span class="label">Last Block:</span>
<span class="value">${this.lastBlock?.toLocaleString()}</span>
<arx-fieldset legend="Height">
<strong>${this.lastBlock.height.toLocaleString()}</strong>
</arx-fieldset>
<arx-fieldset legend="Block ID">
<arx-tooltip
content="Click to copy full ID"
@click=${() => this.copyToClipboard(this.lastBlock!.id)}
>
<strong>${this.formatBlockId(this.lastBlock.id)}</strong>
</arx-tooltip>
</arx-fieldset>
<arx-fieldset legend="Timestamp">
<strong>${formatDateTime(this.lastBlock.timestamp * 1000)}</strong>
</arx-fieldset>
<arx-fieldset legend="Size">
<strong>
${this.formatSize(this.lastBlock.size)}
(${this.lastBlock.tx_count.toLocaleString()} txs)
</strong>
</arx-fieldset>
`;
}
override render() {
return html`
<div class="widget-header">
<h3 class="widget-title">
<span class="bitcoin-icon">₿</span> Bitcoin Latest Block
</h3>
</div>
${when(
this.error,
() => this.renderError(),
() =>
when(
this.isLoading && !this.lastBlock,
() => this.renderLoading(),
() => this.renderBlockData(),
),
)}
`;
}
}

102
src/components/profiles/CardProfile.ts
View file

@ -2,6 +2,10 @@ import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { getProfile } from '@utils/profileUtils';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import '@components/EveLink';
import '@components/General/Card';
@customElement('arx-nostr-card-profile')
export class CardProfile extends LitElement {
@ -25,50 +29,82 @@ export class CardProfile extends LitElement {
static override styles = [
css`
.card {
padding: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
max-width: 300px;
}
a {
color: var(--primary);
color: var(--color-accent);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
transition: all 0.2s ease;
}
h3 {
margin: 0;
font-size: 1.2rem;
color: var(--color-base-content);
font-weight: 600;
}
p {
margin: 0.25rem 0;
color: var(--secondary);
color: var(--color-secondary);
font-size: 0.9rem;
}
.bio {
white-space: pre-line;
font-size: 0.9rem;
color: var(--primary);
margin: 0.5rem 0;
padding-top: 0.5rem;
border-top: 1px solid var(--border);
color: var(--color-base-content);
margin: 0.75rem 0 0.5rem;
padding-top: 0.75rem;
border-top: var(--border) solid var(--color-base-300);
line-height: 1.5;
}
.website-link {
display: block;
margin-top: 0.5rem;
margin-top: 0.75rem;
font-size: 0.9rem;
color: var(--accent);
color: var(--color-accent);
position: relative;
width: fit-content;
padding: 0.25rem 0;
}
.website-link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: var(--border);
background-color: var(--color-accent);
transition: width 0.25s ease;
}
.website-link:hover {
text-decoration: underline;
color: oklch(from var(--color-accent) l calc(c * 1.1) h);
}
.website-link:hover::after {
width: 100%;
}
router-link {
display: flex;
align-items: center;
border-radius: calc(var(--radius-selector) / 2);
padding: 0.25rem;
transition: all 0.2s ease;
}
router-link:hover {
background-color: oklch(from var(--color-base-300) l c h / 0.5);
}
router-link:focus-visible {
outline: var(--border) solid var(--color-accent);
outline-offset: 2px;
}
`,
];
@ -101,21 +137,31 @@ export class CardProfile extends LitElement {
override render() {
return html`
<div class="card">
<router-link to=${this.profileUrl}>
<arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
<arx-card>
<arx-eve-link href=${this.profileUrl}>
<arx-nostr-avatar
.profile=${this.profile}
size="large"
></arx-nostr-avatar>
<div>
<h3>${this.displayName}</h3>
<p v-if=${this.firstLineOfAbout}>${this.firstLineOfAbout}</p>
${when(this.firstLineOfAbout, () => html`<p>${this.firstLineOfAbout}</p>`)}
</div>
</router-link>
</arx-eve-link>
<div v-if=${this.about} class="bio">${this.about}</div>
<a v-if=${this.website} href=${this.website} target="_blank" rel="noreferrer noopener" class="website-link">
${this.website}
</a>
</div>
${when(this.about, () => html`<div class="bio">${this.about}</div>`)}
${when(
this.website,
() => html`<a
href=${this.website}
target="_blank"
rel="noreferrer noopener"
class="website-link"
>
${this.website}
</a>`,
)}
</arx-card>
`;
}
}

62
src/components/profiles/LargeProfile.ts
View file

@ -4,6 +4,8 @@ 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-large-profile')
export class LargeProfile extends LitElement {
@property() profile!: NDKUserProfile;
@ -20,19 +22,58 @@ export class LargeProfile extends LitElement {
static override styles = [
css`
a {
color: var(--primary);
:host {
display: block;
}
arx-eve-link {
color: var(--color-base-content);
text-decoration: none;
display: inline-flex;
display: flex;
align-items: center;
gap: 0.5rem;
gap: 0.75rem;
padding: 0.75rem;
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;
}
h3 {
margin: 0 0 0.35rem 0;
font-size: 1.1rem;
font-weight: 600;
color: var(--color-base-content);
}
.bio {
white-space: pre-line;
font-size: 0.9rem;
color: var(--primary);
margin: 0.5rem 0;
color: var(--color-secondary);
margin: 0;
line-height: 1.4;
max-width: 24rem;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
arx-nostr-avatar {
flex-shrink: 0;
transition: transform 0.2s ease;
}
arx-eve-link:hover arx-nostr-avatar {
transform: scale(1.05);
}
`,
];
@ -49,13 +90,16 @@ export class LargeProfile extends LitElement {
override render() {
return html`
<router-link to=${this.profileUrl}>
<arx-nostr-avatar .profile=${this.profile} size="large"></arx-nostr-avatar>
<arx-eve-link href=${this.profileUrl}>
<arx-nostr-avatar
.profile=${this.profile}
size="large"
></arx-nostr-avatar>
<div>
<h3>${this.displayName}</h3>
<div class="bio">${this.about}</div>
</div>
</router-link>
</arx-eve-link>
`;
}
}

46
src/components/profiles/MediumProfile.ts
View file

@ -22,12 +22,52 @@ export class MediumProfile extends LitElement {
static override styles = [
css`
arx-eve-link::part(link) {
color: var(--primary);
:host {
display: block;
}
arx-eve-link {
color: var(--color-base-content);
text-decoration: none;
display: inline-flex;
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);
}
`,
];

35
src/components/profiles/ShortProfile.ts
View file

@ -18,12 +18,43 @@ export class ShortProfile extends LitElement {
static override styles = [
css`
arx-eve-link::part(link) {
color: var(--primary);
:host {
display: inline-block;
}
arx-eve-link {
color: var(--color-base-content);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-selector);
transition: all 0.2s ease;
white-space: nowrap;
}
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;
}
span {
font-weight: 500;
font-size: 0.95rem;
}
arx-nostr-avatar {
flex-shrink: 0;
transition: transform 0.2s ease;
}
arx-eve-link:hover arx-nostr-avatar {
transform: scale(1.05);
}
`,
];

1
src/index.html
View file

@ -2,7 +2,6 @@
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.3.0/dist/iconify-icon.min.js"></script>
</head>

3
src/main.ts
View file

@ -1,5 +1,4 @@
import './style.scss';
import './style.css';
import '@components/ErrorView';
import '@components/NostrAvatar';
import '@components/LoadingView';

212
src/routes/404Page.ts
View file

@ -2,7 +2,9 @@ import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import type { RouteParams } from './router';
import '@components/EveLink';
import '@components/General/Button';
import '@components/General/Card';
import '@components/General/Fieldset';
@customElement('arx-404-page')
export class FourOhFourPage extends LitElement {
@ -17,30 +19,27 @@ export class FourOhFourPage extends LitElement {
static override styles = [
css`
.not-found {
:host {
display: flex;
align-items: center;
justify-content: center;
font-family: "Inter", sans-serif;
padding: 1rem;
}
.content {
max-width: 600px;
text-align: center;
font-family: system-ui, -apple-system, sans-serif;
padding: 2rem 1rem;
min-height: 80vh;
background-color: var(--color-base-100);
}
.error-container h1 {
margin: 0;
}
.error-container h1 * {
position: relative;
margin: 0 -20px;
display: flex;
align-items: center;
justify-content: center;
}
.spinning-gear {
animation: spin 5s linear infinite;
animation: spin 8s linear infinite;
font-size: 7rem;
margin: 0 -10px;
}
@keyframes spin {
@ -52,37 +51,34 @@ export class FourOhFourPage extends LitElement {
}
}
.path-container {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
margin-bottom: 2rem;
padding: 1rem;
backdrop-filter: blur(10px);
}
.path-text {
color: var(--secondary);
margin: 0 0 0.5rem 0;
font-size: 0.9rem;
arx-fieldset {
margin-top: 1rem;
text-align: center;
}
.path {
font-family: "JetBrains Mono", monospace;
color: var(--primary);
font-family: monospace;
color: var(--color-accent);
word-break: break-all;
font-size: 1.1rem;
padding: 0.5rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 4px;
font-size: 1rem;
padding: 0.75rem;
background: oklch(from var(--color-base-content) l c h / 0.1);
border-radius: var(--radius-field);
display: inline-block;
max-width: 100%;
text-align: left;
}
h1 {
font-size: 8rem;
font-size: 7rem;
font-weight: 800;
color: var(--color-base-content);
line-height: 1;
margin-bottom: 1rem;
}
.four {
padding: 0 0.25rem;
}
.message-text {
@ -92,108 +88,100 @@ export class FourOhFourPage extends LitElement {
gap: 0.75rem;
}
.message-text .inline-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.status {
font-size: 1.25rem;
color: #94a3b8;
margin: 1rem 0;
font-size: 1.5rem;
color: var(--color-base-content);
margin: 0.5rem 0;
font-weight: 600;
}
.sub-text {
color: #64748b;
color: var(--color-secondary);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-bottom: 2rem;
}
.inline-icon {
font-size: 1.25rem;
margin-bottom: 2.5rem;
font-size: 1.1rem;
}
.actions {
display: flex;
gap: 1rem;
gap: 1.25rem;
justify-content: center;
flex-wrap: wrap;
}
.primary-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
transition: all 0.3s ease;
text-decoration: none;
background: var(--accent);
color: white;
&:hover {
background: var(--secondary);
transform: translateY(-2px);
@media (max-width: 640px) {
h1 {
font-size: 5rem;
}
}
arx-eve-link::part(link) {
color: white;
text-decoration: none;
.spinning-gear {
font-size: 5rem;
}
.status {
font-size: 1.25rem;
}
.sub-text {
font-size: 1rem;
}
.actions {
flex-direction: column;
align-items: center;
}
}
`,
];
override render() {
return html`
<div class="not-found">
<div class="content">
<div class="error-container">
<h1>
<span class="four">4</span>
<iconify-icon
icon="fluent-emoji:gear"
class="spinning-gear"
></iconify-icon>
<span class="four">4</span>
</h1>
</div>
<div class="path-container">
<div class="path-text">Path:</div>
<div class="path">${this.path}</div>
</div>
<div class="message-text">
<div class="status">Page not found.</div>
<div class="sub-text">
The page you are looking for does not exist.
</div>
</div>
<div class="actions">
<a
href="javascript:void(0)"
@click="${() =>
this.dispatchEvent(
new CustomEvent('go-back', {
bubbles: true,
composed: true,
}),
)}"
class="primary-button"
>
<iconify-icon icon="material-symbols:arrow-back"></iconify-icon>
Go back
</a>
<arx-eve-link href="home" class="primary-button">
<iconify-icon icon="material-symbols:home"></iconify-icon>
Home
</arx-eve-link>
<arx-card>
<div class="error-container">
<h1>
<span class="four">4</span>
<iconify-icon
icon="fluent-emoji:gear"
class="spinning-gear"
></iconify-icon>
<span class="four">4</span>
</h1>
</div>
<arx-fieldset legend="Path">
<div class="path">${this.path}</div>
</arx-fieldset>
<div class="message-text">
<div class="status">Page not found</div>
<div class="sub-text">
The page you are looking for does not exist
</div>
</div>
</div>
<div class="actions">
<arx-button
@click="${() =>
this.dispatchEvent(
new CustomEvent('go-back', {
bubbles: true,
composed: true,
}),
)}"
variant="primary"
label="Go Back"
>
<iconify-icon
slot="prefix"
icon="material-symbols:arrow-back"
></iconify-icon>
</arx-button>
<arx-button href="home" label="Home" variant="secondary">
<iconify-icon icon="material-symbols:home"></iconify-icon>
Home
</arx-button>
</div>
</arx-card>
`;
}
}

16
src/routes/Arbor/Home.ts
View file

@ -2,16 +2,13 @@ import { getSigner, ndk } from '@/ndk';
import { NDKEvent, type NDKKind, type NDKSubscription } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
import '@components/Breadcrumbs';
import '@components/Arbor/ForumTopic';
import '@components/Arbor/ForumCategory';
import '@components/Arbor/Button';
import '@components/Prompt';
import type { EvePrompt } from '@components/Prompt';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
import '@components/General/Prompt';
interface ForumTopic {
id: string;
@ -164,9 +161,10 @@ export class ArborForum extends LitElement {
>
</arx-breadcrumbs>
<arx-arbor-button @click=${this.newCategoryButtonClicked}>
New Category
</arx-arbor-button>
<arx-button
label="New Category"
@click=${this.newCategoryButtonClicked}
></arx-button>
<arx-prompt
id="new-category-prompt"

35
src/routes/Arbor/NewPost.ts
View file

@ -3,6 +3,8 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '@components/General/Textarea';
@customElement('arx-arbor-post-creator')
export class ArborPostCreator extends LitElement {
@property({ type: String })
@ -36,23 +38,6 @@ export class ArborPostCreator extends LitElement {
font-family: monospace;
}
textarea {
width: 100%;
min-height: 200px;
padding: 0.75rem;
border: 1px solid #ccc;
border-radius: 0.5rem;
resize: vertical;
font-family: inherit;
line-height: 1.5;
}
textarea:focus {
outline: none;
border-color: var(--primary-color, #3b82f6);
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.error {
color: #dc2626;
font-size: 0.875rem;
@ -133,29 +118,29 @@ export class ArborPostCreator extends LitElement {
<div class="container">
<div class="topic-id">Topic ID: ${this.topicId}</div>
<textarea
<arx-textarea
placeholder="Post. You can use Markdown here."
.value=${this.postContent}
@input=${this.handleContentInput}
?disabled=${this.isCreating}
></textarea>
></arx-textarea>
${this.error ? html` <div class="error">${this.error}</div> ` : null}
<div class="actions">
<arx-arbor-button
<arx-button
label="Cancel"
@click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
?disabled=${this.isCreating}
>
Cancel
</arx-arbor-button>
></arx-button>
<arx-arbor-button
<arx-button
label=${this.isCreating ? 'Creating...' : 'Create'}
@click=${this.doCreatePost}
?disabled=${this.isCreating}
>
${this.isCreating ? 'Creating...' : 'Create'}
</arx-arbor-button>
</arx-button>
</div>
</div>
`;

39
src/routes/Arbor/NewTopic.ts
View file

@ -3,6 +3,10 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '@components/General/Input';
import '@components/General/Textarea';
import '@components/General/Button';
@customElement('arx-arbor-topic-creator')
export class ArborTopicCreator extends LitElement {
@property({ type: String })
@ -22,20 +26,6 @@ export class ArborTopicCreator extends LitElement {
display: block;
}
input,
textarea {
width: 100%;
margin-bottom: 1rem;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
min-height: 200px;
resize: vertical;
}
.error {
color: red;
margin-bottom: 1rem;
@ -108,35 +98,34 @@ export class ArborTopicCreator extends LitElement {
return html`
<div class="category-id">Category ID: ${this.categoryId}</div>
<input
<arx-input
type="text"
placeholder="New Topic"
.value=${this.newTopic}
@input=${this.handleTopicInput}
?disabled=${this.isCreating}
/>
></arx-input>
<textarea
<arx-textarea
placeholder="Topic. You can use Markdown here."
.value=${this.topicContent}
@input=${this.handleContentInput}
?disabled=${this.isCreating}
></textarea>
></arx-textarea>
<div class="button-group">
<arx-arbor-button
<arx-button
label="Cancel"
@click=${() => this.dispatchEvent(new CustomEvent('cancel'))}
?disabled=${this.isCreating}
>
Cancel
</arx-arbor-button>
></arx-button>
<arx-arbor-button
<arx-button
label=${this.isCreating ? 'Creating...' : 'Create'}
@click=${this.doCreateTopic}
?disabled=${this.isCreating}
>
${this.isCreating ? 'Creating...' : 'Create'}
</arx-arbor-button>
</arx-button>
</div>
`;
}

64
src/routes/Arbor/TopicView.ts
View file

@ -5,7 +5,7 @@ import { customElement, property, state } from 'lit/decorators.js';
import '@components/Breadcrumbs';
import '@components/Arbor/ForumPost';
import '@components/Arbor/Button';
import '@components/General/Button';
import { map } from 'lit/directives/map.js';
import { when } from 'lit/directives/when.js';
@ -34,23 +34,24 @@ export class ArborTopicView extends LitElement {
:host {
display: block;
margin: 0 auto;
padding: 1rem;
color: #1a1a1a;
font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.topic-container {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
background: var(--color-base-100);
border-radius: var(--radius-box);
border: var(--border) solid var(--color-base-300);
overflow: hidden;
margin-top: 1.5rem;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1),
calc(var(--depth) * -1px) calc(var(--depth) * -1px)
calc(var(--depth) * 3px) oklch(from var(--color-base-100) l c h / 0.4);
}
.header {
background: var(--primary);
color: oklch(100% 0 0);
background: var(--color-secondary);
color: var(--color-secondary-content);
padding: 1.5rem 2rem;
font-weight: 600;
font-size: 1.25rem;
@ -58,32 +59,54 @@ export class ArborTopicView extends LitElement {
justify-content: space-between;
align-items: center;
position: relative;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 2px oklch(from var(--color-base-content) l c h / 0.2);
letter-spacing: 0.01em;
border-bottom: var(--border) solid var(--color-base-300);
}
.posts-container {
display: flex;
flex-direction: column;
gap: 0;
background: #f9f9f9;
background: var(--color-base-200);
padding: 1.5rem;
min-height: 300px;
}
.actions {
background: #f9f9f9;
background: var(--color-base-200);
padding: 1.25rem 1.5rem;
display: flex;
justify-content: flex-end;
border-top: 1px solid rgba(0, 0, 0, 0.06);
border-top: var(--border) solid var(--color-base-300);
}
.empty-state {
padding: 3rem;
text-align: center;
color: #666;
color: var(--color-secondary);
font-style: italic;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
background: var(--color-base-100);
border-radius: var(--radius-field);
margin: 1rem 0;
border: var(--border) dashed var(--color-base-300);
}
arx-breadcrumbs {
margin-bottom: 1rem;
}
arx-forum-post {
border-bottom: var(--border) solid var(--color-base-300);
}
arx-forum-post:last-child {
border-bottom: none;
}
@media (max-width: 768px) {
@ -108,6 +131,13 @@ export class ArborTopicView extends LitElement {
.header {
padding: 1rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.empty-state {
padding: 2rem 1rem;
}
}
`;
@ -199,9 +229,9 @@ export class ArborTopicView extends LitElement {
</div>
<div class="actions">
<arx-arbor-button href="/arbor/new-post/${this.topicId}">
<arx-button label="New Post" href="/arbor/new-post/${this.topicId}">
New Post
</arx-arbor-button>
</arx-button>
</div>
</div>
`;

135
src/routes/Home.ts
View file

@ -2,9 +2,13 @@ import { getNpub, getUserProfile } from '@/ndk';
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { map } from 'lit/directives/map.js';
import { html, literal } from 'lit/static-html.js';
import '@widgets/BitcoinBlockWidget';
import '@components/AppGrid';
import '@components/NostrAvatar';
import '@components/General/Card';
@customElement('arx-eve-home')
export class Home extends LitElement {
@ -20,57 +24,57 @@ export class Home extends LitElement {
id: 0,
href: 'letters',
name: 'Letters',
color: '#FF33BB',
icon: 'bxs:envelope',
color: '#FF3E96',
icon: 'fa-solid:leaf',
},
{
id: 1,
href: 'messages',
name: 'Messages',
color: '#34C759',
icon: 'bxs:chat',
name: 'Murmur',
color: '#00CD66',
icon: 'fa-solid:seedling',
},
{
id: 2,
href: 'calendar',
name: 'Calendar',
color: '#FF9500',
icon: 'bxs:calendar',
color: '#FF8C00',
icon: 'fa-solid:sun',
},
{
id: 3,
href: 'arbor',
name: 'Arbor',
color: '#FF3B30',
icon: 'bxs:conversation',
color: '#FF4040',
icon: 'fa-solid:tree',
},
{
id: 5,
href: 'agora',
name: 'Agora',
color: '#5856D6',
icon: 'bxs:store',
href: 'grove',
name: 'Grove',
color: '#9370DB',
icon: 'fa-solid:store-alt',
},
{
id: 6,
href: 'wallet',
name: 'Wallet',
color: '#007AFF',
icon: 'bxs:wallet',
color: '#1E90FF',
icon: 'fa-solid:spa',
},
{
id: 7,
href: 'consortium',
name: 'Consortium',
color: '#FFCC00',
icon: 'bxs:landmark',
href: 'oracle',
name: 'Oracle',
color: '#FFD700',
icon: 'bxs:landscape',
},
{
id: 8,
href: 'settings',
name: 'Settings',
color: '#deadbeef',
icon: 'bxs:wrench',
color: '#7B68EE',
icon: 'fa-solid:tools',
},
];
@ -91,26 +95,12 @@ export class Home extends LitElement {
static override styles = [
css`
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.content-wrapper {
display: flex;
gap: 20px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
margin: auto;
}
.home {
@ -126,36 +116,17 @@ export class Home extends LitElement {
.home-container {
flex: 1;
background: rgba(255, 255, 255, 0.5);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 0;
}
.widgets-container {
width: 300px;
width: 350px;
display: flex;
flex-direction: column;
gap: 20px;
}
.widget {
background: rgba(255, 255, 255, 0.5);
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
h3 {
margin: 0 0 10px 0;
font-size: 18px;
color: #1c1c1e;
}
p {
margin: 0;
font-size: 14px;
color: #333;
line-height: 1.4;
& > * {
flex: 1;
}
}
@ -170,20 +141,12 @@ export class Home extends LitElement {
overflow-x: auto;
padding-bottom: 10px;
}
.widget {
min-width: 250px;
}
}
@media (max-width: 768px) {
.widgets-container {
flex-direction: column;
}
.widget {
width: auto;
}
}
.welcome-section {
@ -193,21 +156,12 @@ export class Home extends LitElement {
justify-content: center;
gap: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.5);
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.welcome-text h1 {
margin: 0;
font-size: 24px;
color: #1c1c1e;
}
.welcome-text p {
margin: 5px 0 0;
color: #666;
font-size: 14px;
}
`,
];
@ -221,29 +175,20 @@ export class Home extends LitElement {
return html`
<div class="home">
<div class="content-wrapper">
<div class="home-container">
<div class="welcome-section">
<div class="avatar">
<arx-nostr-profile
.npub=${this.npub}
render-type="avatar"
></arx-nostr-profile>
</div>
<arx-card class="home-container">
<arx-card class="welcome-section">
<arx-nostr-avatar
.profile=${this.profile}
size="huge"
></arx-nostr-avatar>
<div class="welcome-text">
<h1>Welcome, ${this.username}</h1>
</div>
</div>
</arx-card>
<arx-app-grid .apps=${this.apps}></arx-app-grid>
</div>
</arx-card>
<div class="widgets-container">
${this.widgets.map(
(widget) => html`
<div class="widget">
<h3>${widget.title}</h3>
<${widget.content}></${widget.content}>
</div>
`,
)}
${map(this.widgets, (widget) => html`<arx-card><${widget.content}></${widget.content}></arx-card>`)}
</div>
</div>
</div>

139
src/routes/Profile.ts
View file

@ -4,6 +4,8 @@ import { customElement, property, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import { getUserProfile } from '../ndk';
import '@components/General/Card';
@customElement('arx-profile-route')
export class NostrProfile extends LitElement {
@property({ type: String })
@ -24,13 +26,16 @@ export class NostrProfile extends LitElement {
position: relative;
height: 20rem;
overflow: hidden;
border-radius: var(--radius-box) var(--radius-box) 0 0;
border: var(--border) solid var(--color-base-300);
border-bottom: none;
}
.banner-image {
position: absolute;
inset: 0;
transform: scale(1);
transition: transform 700ms;
transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-image:hover {
@ -49,8 +54,8 @@ export class NostrProfile extends LitElement {
background: linear-gradient(
to bottom,
transparent,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.4)
oklch(from var(--color-base-content) l c h / 0.2),
oklch(from var(--color-base-content) l c h / 0.4)
);
}
@ -70,14 +75,6 @@ export class NostrProfile extends LitElement {
margin-top: 4rem;
}
.profile-card {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 0.75rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
backdrop-filter: blur(8px);
}
.profile-content {
display: flex;
flex-direction: column;
@ -100,9 +97,11 @@ export class NostrProfile extends LitElement {
height: 10rem;
border-radius: 50%;
object-fit: cover;
border: 4px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 300ms;
border: calc(var(--border) * 2) solid var(--color-base-100);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15);
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-image:hover {
@ -113,16 +112,24 @@ export class NostrProfile extends LitElement {
width: 10rem;
height: 10rem;
border-radius: 50%;
background: linear-gradient(to bottom right, #e5e7eb, #d1d5db);
background: linear-gradient(
135deg,
var(--color-base-200),
var(--color-base-300)
);
display: flex;
align-items: center;
justify-content: center;
border: calc(var(--border) * 2) solid var(--color-base-100);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.15);
}
.placeholder-icon {
width: 5rem;
height: 5rem;
color: #9ca3af;
color: var(--color-secondary);
}
.profile-info {
@ -145,18 +152,19 @@ export class NostrProfile extends LitElement {
.display-name {
font-size: 1.875rem;
font-weight: bold;
color: #111827;
color: var(--color-base-content);
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
}
.verified-icon {
color: #3b82f6;
color: var(--color-accent);
}
.nip05 {
color: #4b5563;
color: var(--color-secondary);
display: flex;
align-items: center;
gap: 0.25rem;
@ -175,51 +183,13 @@ export class NostrProfile extends LitElement {
}
}
.follow-button {
padding: 0.5rem 1.5rem;
border-radius: 9999px;
font-weight: 500;
transition: all 300ms;
background-color: #3b82f6;
color: white;
}
.follow-button:hover {
background-color: #2563eb;
}
.follow-button.following {
background-color: #e5e7eb;
color: #1f2937;
}
.follow-button.following:hover {
background-color: #d1d5db;
}
.copy-button {
padding: 0.5rem;
border-radius: 9999px;
background-color: #f3f4f6;
transition: background-color 300ms;
}
.copy-button:hover {
background-color: #e5e7eb;
}
.copy-icon {
width: 1.25rem;
height: 1.25rem;
}
.links-section {
display: grid;
grid-auto-columns: minmax(300px, 1fr);
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
border-top: var(--border) solid var(--color-base-300);
}
.link-item {
@ -227,13 +197,19 @@ export class NostrProfile extends LitElement {
align-items: center;
gap: 0.5rem;
padding: 1rem;
border-radius: 0.5rem;
background-color: #f9fafb;
transition: background-color 300ms;
border-radius: var(--radius-field);
background-color: var(--color-base-200);
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
color: var(--color-base-content);
}
.link-item:hover {
background-color: #f3f4f6;
background-color: var(--color-base-300);
transform: translateY(-2px);
box-shadow: calc(var(--depth) * 2px) calc(var(--depth) * 2px)
calc(var(--depth) * 4px)
oklch(from var(--color-base-content) l c h / 0.1);
}
.link-icon {
@ -242,39 +218,23 @@ export class NostrProfile extends LitElement {
}
.link-icon.website {
color: #3b82f6;
color: var(--color-accent);
}
.link-icon.lightning {
color: #eab308;
color: var(--color-warning);
}
.bio {
white-space: pre-line;
font-size: 0.9rem;
color: #4b5563;
color: var(--color-secondary);
margin: 1rem 0;
padding-top: 1rem;
line-height: 1.5;
}
.animate-gradient {
background-size: 200% 200%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
padding: 1rem;
line-height: 1.6;
background-color: var(--color-base-200);
border-radius: var(--radius-field);
border-left: 3px solid var(--color-accent);
}
`;
@ -317,7 +277,7 @@ export class NostrProfile extends LitElement {
<div
class=${this.profile.banner ? 'profile-container with-banner' : 'profile-container no-banner'}
>
<div class="profile-card">
<arx-card>
<div class="profile-content">
<div class="profile-image-container">
${when(
@ -376,6 +336,7 @@ export class NostrProfile extends LitElement {
<a
href=${this.profile!.website}
target="_blank"
rel="noopener noreferrer"
class="link-item"
>
<svg-icon icon="mdi:web" class="link-icon website"></svg-icon>
@ -396,7 +357,7 @@ export class NostrProfile extends LitElement {
`,
)}
</div>
</div>
</arx-card>
</div>
`;
}

181
src/routes/Settings.ts Normal file
View file

@ -0,0 +1,181 @@
import defaultAvatar from '@/default-avatar.png';
import { getSigner, getUserProfile, ndk } from '@/ndk';
import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { when } from 'lit/directives/when.js';
import '@components/DateTimeSettings';
import '@components/General/Input';
import '@components/General/Button';
import '@components/General/Fieldset';
import '@components/General/Card';
import '@components/Breadcrumbs';
@customElement('arx-settings')
export class EveSettings extends LitElement {
static override styles = css`
:host {
display: block;
font-family: var(--font-family, "Inter", system-ui, sans-serif);
margin: 0 auto;
line-height: 1.6;
color: var(--color-base-content);
background-color: var(--color-base-100);
}
.profile-image {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
border: calc(var(--border) * 2) solid var(--color-base-100);
box-shadow: calc(var(--depth) * 3px) calc(var(--depth) * 3px)
calc(var(--depth) * 6px)
oklch(from var(--color-base-content) l c h / 0.15),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 4px) oklch(from var(--color-base-100) l c h / 0.6);
transition: transform 0.3s, box-shadow 0.3s;
margin: 0 auto;
}
.profile-image:hover {
transform: scale(1.05);
box-shadow: calc(var(--depth) * 4px) calc(var(--depth) * 4px)
calc(var(--depth) * 8px) oklch(from var(--color-accent) l c h / 0.3),
calc(var(--depth) * -2px) calc(var(--depth) * -2px)
calc(var(--depth) * 6px) oklch(from var(--color-base-100) l c h / 0.6);
}
.profile-header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
`;
@state() private loading = true;
@state() private saving = false;
@state() private profile: NDKUserProfile | undefined;
@state() private error: string | undefined;
@state() private darkMode = false;
protected override async firstUpdated() {
try {
this.profile = await getUserProfile();
this.darkMode = localStorage.getItem('darkMode') === 'true';
this.loading = false;
} catch (err) {
this.error = 'Failed to load profile';
console.error(err);
this.loading = false;
}
}
private handleInputChange(e: Event) {
const target = e.target as HTMLInputElement;
this.profile = {
...this.profile,
[target.name]: target.value,
};
}
private async saveProfile() {
if (this.saving) return;
this.saving = true;
try {
await getSigner();
const event = new NDKEvent(ndk);
event.kind = 0;
event.content = JSON.stringify(this.profile);
await event.sign();
await event.publish();
} catch (err) {
alert(err);
console.error(err);
} finally {
this.saving = false;
}
}
private toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode.toString());
document.body.classList.toggle('dark', this.darkMode);
}
override render() {
if (this.error) return html`<arx-error-view .error=${this.error}></arx-error-view>`;
if (this.loading) return html`<arx-loading-view></arx-loading-view>`;
const breadcrumbItems = [{ text: 'Home', href: '/' }, { text: 'Settings' }];
return html`
<arx-breadcrumbs .items=${breadcrumbItems}></arx-breadcrumbs>
<arx-card>
<arx-fieldset legend="Dark Mode">
<arx-toggle
label="Dark Mode"
.checked=${this.darkMode}
@change=${() => this.toggleDarkMode()}
></arx-toggle>
</arx-fieldset>
<arx-fieldset legend="Profile">
${when(
this.profile.picture,
() => html`
<div class="profile-header">
<img
class="profile-image"
src=${this.profile!.picture}
alt="Profile"
@error=${(e: Event) => {
(e.target as HTMLImageElement).src = defaultAvatar;
}}
/>
</div>
`,
)}
<arx-input
label="Name"
type="text"
name="name"
.value=${this.profile.name}
@input=${this.handleInputChange}
placeholder="Your display name"
></arx-input>
<arx-input
label="Profile Image URL"
type="text"
name="image"
.value=${this.profile.picture}
@input=${this.handleInputChange}
placeholder="https://example.com/your-image.jpg"
></arx-input>
<arx-input
label="Banner URL"
type="text"
name="banner"
.value=${this.profile.banner}
@input=${this.handleInputChange}
placeholder="https://example.com/your-image.jpg"
></arx-input>
</arx-fieldset>
<arx-date-time-settings></arx-date-time-settings>
<arx-button
.label=${this.saving ? 'Saving...' : 'Save Changes'}
@click=${this.saveProfile}
?disabled=${this.saving}
>
</arx-button>
</arx-card>
`;
}
}

67
src/routes/router.ts
View file

@ -1,6 +1,7 @@
import '@routes/404Page';
import '@routes/Home';
import '@routes/Profile';
import '@routes/Settings';
import '@routes/Arbor/Home';
import '@routes/Arbor/NewTopic';
import '@routes/Arbor/TopicView';
@ -10,6 +11,7 @@ import '@components/InitialSetup';
import { spread } from '@open-wc/lit-helpers';
import { LitElement, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { keyed } from 'lit/directives/keyed.js';
import { type StaticValue, html, literal } from 'lit/static-html.js';
export interface RouteParams {
@ -58,6 +60,11 @@ export default class EveRouter extends LitElement {
params: {},
component: literal`arx-arbor-post-creator`,
},
{
pattern: 'settings',
params: {},
component: literal`arx-settings`,
},
{
pattern: '404',
params: {},
@ -85,25 +92,16 @@ export default class EveRouter extends LitElement {
overflow: hidden;
}
input {
width: 100%;
}
button {
background: var(--primary);
color: white;
border: 1px solid var(--border);
margin: 1rem 0;
width: 100%;
}
.window {
max-width: 1200px;
overflow: auto;
}
.window-content {
max-width: 1200px;
overflow: visible;
height: 100%;
position: relative;
left: 50%;
transform: translateX(-50%);
margin: 0 auto;
padding: 1rem;
}
`;
@ -261,24 +259,29 @@ export default class EveRouter extends LitElement {
override render() {
if (!this.ccnSetup) return this.renderSetup();
return html`
<arx-header
?canGoBack=${this.currentIndex > 0}
?canGoForward=${this.currentIndex < this.history.length - 1}
url="eve://${this.currentPath}"
@navigate=${(e: CustomEvent) => this.navigate(e.detail)}
@go-back=${this.goBack}
@go-forward=${this.goForward}
title="Eve"
></arx-header>
<arx-header
?canGoBack=${this.currentIndex > 0}
?canGoForward=${this.currentIndex < this.history.length - 1}
url="eve://${this.currentPath}"
@navigate=${(e: CustomEvent) => this.navigate(e.detail)}
@go-back=${this.goBack}
@go-forward=${this.goForward}
title="Eve"
></arx-header>
<div class="window">
<div class="window-content">
<${this.currentRoute.component}
${spread(this.currentRoute.params)}
path=${this.currentPath}
@navigate=${this.navigate}
@go-back=${this.goBack}
@go-forward=${this.goForward}
></${this.currentRoute.component}>
${keyed(
this.currentRoute.params,
html`
<${this.currentRoute.component}
${spread(this.currentRoute.params)}
path=${this.currentPath}
@navigate=${this.navigate}
@go-back=${this.goBack}
@go-forward=${this.goForward}
></${this.currentRoute.component}>
`,
)}
</div>
</div>
`;

90
src/style.css Normal file
View file

@ -0,0 +1,90 @@
:root {
--font-md: clamp(1.333rem, 1.5vw, 1.5rem);
--font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
--space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
--space-sm: clamp(1rem, 1.5vw, 1.5rem);
--space-md: clamp(2rem, 3vw, 3rem);
--animation-curve: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--transition: 0.3s var(--animation-curve);
--color-base-100: oklch(98% 0.016 73.684);
--color-base-200: oklch(95% 0.038 75.164);
--color-base-300: oklch(90% 0.076 70.697);
--color-base-content: oklch(40% 0.123 38.172);
--color-primary: oklch(0% 0 0);
--color-primary-content: oklch(100% 0 0);
--color-secondary: oklch(22.45% 0.075 37.85);
--color-secondary-content: oklch(90% 0.076 70.697);
--color-accent: oklch(46.44% 0.111 37.85);
--color-accent-content: oklch(90% 0.076 70.697);
--color-neutral: oklch(55% 0.195 38.402);
--color-neutral-content: oklch(98% 0.016 73.684);
--color-info: oklch(42% 0.199 265.638);
--color-info-content: oklch(90% 0.076 70.697);
--color-success: oklch(43% 0.095 166.913);
--color-success-content: oklch(90% 0.076 70.697);
--color-warning: oklch(82% 0.189 84.429);
--color-warning-content: oklch(41% 0.112 45.904);
--color-error: oklch(70% 0.191 22.216);
--color-error-content: oklch(39% 0.141 25.723);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 2px;
--depth: 1;
--noise: 1;
}
body.dark {
--color-base-100: oklch(28.822% 0.022 277.508);
--color-base-200: oklch(26.805% 0.02 277.508);
--color-base-300: oklch(24.787% 0.019 277.508);
--color-base-content: oklch(97.747% 0.007 106.545);
--color-primary: oklch(75.461% 0.183 346.812);
--color-primary-content: oklch(15.092% 0.036 346.812);
--color-secondary: oklch(74.202% 0.148 301.883);
--color-secondary-content: oklch(14.84% 0.029 301.883);
--color-accent: oklch(83.392% 0.124 66.558);
--color-accent-content: oklch(16.678% 0.024 66.558);
--color-neutral: oklch(39.445% 0.032 275.524);
--color-neutral-content: oklch(87.889% 0.006 275.524);
--color-info: oklch(88.263% 0.093 212.846);
--color-info-content: oklch(17.652% 0.018 212.846);
--color-success: oklch(87.099% 0.219 148.024);
--color-success-content: oklch(17.419% 0.043 148.024);
--color-warning: oklch(95.533% 0.134 112.757);
--color-warning-content: oklch(19.106% 0.026 112.757);
--color-error: oklch(68.22% 0.206 24.43);
--color-error-content: oklch(13.644% 0.041 24.43);
--radius-selector: 1rem;
--radius-field: 0.5rem;
--radius-box: 1rem;
--size-selector: 0.25rem;
--size-field: 0.25rem;
--border: 1px;
--depth: 0;
--noise: 0;
}
body {
background-color: var(--color-base-100);
color: var(--color-base-content);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
box-sizing: border-box;
border: var(--border) solid var(--color-base-300);
border-radius: var(--radius-box);
margin: 0;
padding: 0;
overflow: hidden;
}

443
src/style.scss
View file

@ -1,443 +0,0 @@
:root {
--primary: oklch(25% 0.09 210);
--secondary: oklch(from var(--primary) calc(l + 0.05) calc(c * 1.1) h);
--accent: oklch(from var(--primary) calc(l + 0.35) calc(c + 0.15) h);
--light: oklch(from var(--primary) 96% calc(c * 0.3) h);
--dark: oklch(from var(--primary) 20% calc(c * 0.3) h);
--border: oklch(from var(--primary) 80% calc(c * 0.5) h);
--success: oklch(from var(--primary) 70% calc(c + 0.2) 142);
--warning: oklch(from var(--primary) 85% calc(c + 0.2) 85);
--error: oklch(from var(--primary) 65% calc(c + 0.2) 25);
--shadow-color: oklch(from var(--primary) 20% calc(c * 0.3) h);
--shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.1);
--shadow-md: 0 2px 4px oklch(from var(--shadow-color) l c h / 0.1),
0 1px 2px oklch(from var(--shadow-color) l c h / 0.05);
--shadow-lg: 0 4px 6px oklch(from var(--shadow-color) l c h / 0.1),
0 2px 4px oklch(from var(--shadow-color) l c h / 0.06);
--shadow-xl: 0 10px 15px oklch(from var(--shadow-color) l c h / 0.1),
0 4px 6px oklch(from var(--shadow-color) l c h / 0.08);
--font-xs: clamp(0.65rem, 0.7vw, 0.8rem);
--font-sm: clamp(0.8rem, 0.9vw, 0.9rem);
--font-base: clamp(1rem, 1.1vw, 1.125rem);
--font-md: clamp(1.333rem, 1.5vw, 1.5rem);
--font-lg: clamp(1.777rem, 2vw, 2rem);
--font-xl: clamp(2.369rem, 2.7vw, 2.666rem);
--font-2xl: clamp(3.157rem, 3.6vw, 3.555rem);
--font-3xl: clamp(4.209rem, 4.8vw, 4.74rem);
--space-xs: clamp(0.5rem, 0.75vw, 0.75rem);
--space-sm: clamp(1rem, 1.5vw, 1.5rem);
--space-md: clamp(2rem, 3vw, 3rem);
--space-lg: clamp(3rem, 4.5vw, 4.5rem);
--header-height: var(--font-2xl);
}
.window {
display: grid;
gap: 0;
grid-template-rows: var(--header-height) 1fr;
height: 100vh;
width: 100vw;
overflow: hidden;
}
header {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
z-index: 999999;
margin-bottom: var(--font-2xl);
background: var(--primary);
height: var(--font-2xl);
font-size: var(--header-height);
transition: all 0.3s ease;
display: flex;
align-items: center;
padding: 0 var(--space-md);
.search-container {
flex: 1;
position: relative;
input {
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 16px;
color: var(--light);
width: 100%;
text-align: center;
cursor: text;
font-size: 0.9rem;
width: 100%;
padding: var(--space-xs);
text-align: center;
&:not(:focus)::placeholder {
color: var(--light);
opacity: 1;
}
&:focus {
background: rgba(0, 0, 0, 0.2);
}
}
}
.nav-buttons {
display: flex;
gap: var(--space-xs);
padding-right: var(--space-xs);
button {
text-decoration: none;
color: var(--light);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: var(--space-xs);
border-radius: 100%;
font-size: var(--font-md);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
&:hover {
background: rgba(255, 255, 255, 0.2);
}
&.disabled {
pointer-events: none;
opacity: 0.5;
}
}
}
}
::selection {
background: oklch(from var(--accent) l c h / 0.2);
color: var(--accent);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Inter var", system-ui, -apple-system, sans-serif;
font-size: var(--font-base);
line-height: 1.7;
font-feature-settings: "liga" 1, "kern" 1, "calt" 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
background: oklch(from var(--primary) 97% calc(c * 0.25) h);
color: oklch(from var(--primary) 20% calc(c * 0.1) h);
letter-spacing: -0.01em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Inter var", system-ui, sans-serif;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.03em;
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
h1 {
font-size: var(--font-2xl);
font-weight: 800;
letter-spacing: -0.04em;
}
h2 {
font-size: var(--font-xl);
font-weight: 700;
}
h3 {
font-size: var(--font-lg);
font-weight: 600;
}
section {
max-width: 1200px;
margin-inline: auto;
padding-inline: 1rem;
display: flex;
justify-content: center;
place-items: center;
align-items: center;
}
ul,
ol {
margin: var(--space-sm) 0;
padding-left: var(--space-md);
& li {
margin-bottom: var(--space-xs);
position: relative;
}
& li::marker {
color: var(--accent);
}
}
code {
font-family: "JetBrains Mono", "SF Mono", monospace;
font-size: 0.9em;
padding: 0.2em 0.4em;
border-radius: 4px;
background: oklch(from var(--primary) 97% calc(c * 0.15) h);
border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
}
blockquote {
position: relative;
padding: var(--space-md);
border-radius: 1rem;
background: linear-gradient(135deg,
oklch(from var(--primary) calc(l + 0.02) calc(c * 0.8) h),
oklch(from var(--secondary) calc(l + 0.02) calc(c * 0.8) h));
backdrop-filter: blur(10px);
box-shadow: var(--shadow-lg), inset 0 2px 4px oklch(from var(--primary) 100% 0 h / 0.1);
color: var(--light);
& p {
font-size: var(--font-md);
font-weight: 500;
font-style: italic;
line-height: 1.6;
margin-bottom: var(--space-sm);
color: var(--light);
}
&::before {
position: absolute;
font-family: Georgia, serif;
opacity: 0.15;
content: "❞";
bottom: -1rem;
right: 1rem;
font-size: 5rem;
color: var(--light);
}
}
small {
font-size: var(--font-xs);
line-height: var(--leading-normal);
}
p {
margin: 0 auto;
margin-bottom: var(--space-md);
max-width: 80ch;
opacity: 0.9;
}
a {
color: var(--accent);
text-decoration: none;
background-image: linear-gradient(transparent calc(100% - 2px),
var(--accent) 2px);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 0.3s ease-in-out;
&:hover {
background-size: 100% 100%;
}
}
hr {
height: 5px;
border: 0;
margin: var(--space-md);
background: linear-gradient(90deg,
transparent,
var(--primary) 20%,
var(--accent) 50%,
var(--primary) 80%,
transparent);
position: relative;
&::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: inherit;
top: 2px;
filter: blur(2px);
opacity: 0.7;
}
}
.blurfade-enter-active {
transition: all 0.5s ease-out;
}
.blurfade-leave-active {
transition: all 0.25s cubic-bezier(1, 0.5, 0.8, 1);
}
.blurfade-enter-from,
.blurfade-leave-to {
overflow: hidden;
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
right: 0;
top: 0;
bottom: 0;
transform: translate(0, 0) !important;
transform-style: preserve-3d;
z-index: 9999;
opacity: 0;
backdrop-filter: blur(1000px);
filter: blur(1000px);
}
.w-full {
width: 100%;
}
input {
font-family: "Inter var", system-ui, -apple-system, sans-serif;
font-size: var(--font-base);
line-height: 1.7;
color: oklch(from var(--primary) 20% calc(c * 0.1) h);
background: oklch(from var(--primary) 97% calc(c * 0.25) h);
border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
border-radius: 6px;
padding: var(--space-xs) var(--space-sm);
outline: none;
transition: all 0.2s ease-in-out;
&:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
}
&:hover {
border-color: oklch(from var(--primary) 80% calc(c * 0.3) h);
}
&::placeholder {
color: oklch(from var(--primary) 60% calc(c * 0.2) h);
opacity: 0.7;
}
&[type="submit"],
&[type="button"] {
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
color: var(--light);
border: none;
font-weight: 600;
cursor: pointer;
&:hover {
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
}
&:active {
transform: scale(0.98);
}
}
&[type="checkbox"],
&[type="radio"] {
width: 1.2em;
height: 1.2em;
accent-color: var(--accent);
margin-right: var(--space-xs);
}
&[type="range"] {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
&::-webkit-slider-runnable-track {
height: 6px;
background: oklch(from var(--primary) 90% calc(c * 0.2) h);
border-radius: 3px;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
margin-top: -5px;
}
&::-moz-range-track {
height: 6px;
background: oklch(from var(--primary) 90% calc(c * 0.2) h);
border-radius: 3px;
}
&::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--accent);
border-radius: 50%;
}
}
}
textarea {
font-family: "Inter var", system-ui, -apple-system, sans-serif;
font-size: var(--font-base);
line-height: 1.7;
color: oklch(from var(--primary) 20% calc(c * 0.1) h);
background: oklch(from var(--primary) 97% calc(c * 0.25) h);
border: 1px solid oklch(from var(--primary) 90% calc(c * 0.2) h);
border-radius: 6px;
padding: var(--space-xs) var(--space-sm);
outline: none;
transition: all 0.2s ease-in-out;
resize: vertical;
min-height: 120px;
&:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.2);
}
&:hover {
border-color: oklch(from var(--primary) 80% calc(c * 0.3) h);
}
&::placeholder {
color: oklch(from var(--primary) 60% calc(c * 0.2) h);
opacity: 0.7;
}
}

26
src/utils/formatDateTime.ts
View file

@ -1,6 +1,8 @@
export default function formatDateTime(date: Date | string | number): string {
const properDate = new Date(date);
return properDate.toLocaleString('en-US', {
const defaultOptions = {
locale: 'en-US',
weekday: 'short',
year: 'numeric',
month: 'long',
@ -8,5 +10,27 @@ export default function formatDateTime(date: Date | string | number): string {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true,
};
let formattingOptions = defaultOptions;
const savedOptions = localStorage.getItem('dateTimeFormatOptions');
if (savedOptions)
try {
formattingOptions = { ...defaultOptions, ...JSON.parse(savedOptions) };
} catch (e) {
console.error('Failed to parse date format options from localStorage', e);
}
return properDate.toLocaleString(formattingOptions.locale, {
weekday: formattingOptions.weekday === '' ? undefined : formattingOptions.weekday,
year: formattingOptions.year === '' ? undefined : formattingOptions.year,
month: formattingOptions.month === '' ? undefined : formattingOptions.month,
day: formattingOptions.day === '' ? undefined : formattingOptions.day,
hour: formattingOptions.hour === '' ? undefined : formattingOptions.hour,
minute: formattingOptions.minute === '' ? undefined : formattingOptions.minute,
second: formattingOptions.second === '' ? undefined : formattingOptions.second,
hour12: formattingOptions.hour12,
});
}

50
src/utils/lastBlock.ts Normal file
View file

@ -0,0 +1,50 @@
const MEMPOOL_API = 'https://mempool.space/api/blocks/tip';
export interface LastBlock {
id: string;
height: number;
version: number;
timestamp: number;
tx_count: number;
size: number;
weight: number;
merkle_root: string;
previousblockhash: string;
mediantime: number;
nonce: number;
bits: number;
difficulty: number;
error?: string;
}
export async function getLastBlock(): Promise<LastBlock> {
try {
const response = await fetch(MEMPOOL_API);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
const latestBlock = data[0];
if (!latestBlock) throw new Error('Failed to fetch block');
return latestBlock;
} catch (e) {
return {
id: '',
height: 0,
version: 0,
timestamp: 0,
tx_count: 0,
size: 0,
weight: 0,
merkle_root: '',
previousblockhash: '',
mediantime: 0,
nonce: 0,
bits: 0,
difficulty: 0,
error: e instanceof Error ? e.message : 'Failed to fetch block',
};
}
}

26
src/utils/lastBlockHeight.ts
View file

@ -1,26 +0,0 @@
const MEMPOOL_API = 'https://mempool.space/api/blocks/tip/height';
export interface LastBlockHeight {
height: number;
error?: string;
}
export async function getLastBlockHeight(): Promise<LastBlockHeight> {
try {
const response = await fetch(MEMPOOL_API);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.text();
return {
height: Number.parseInt(data, 10),
};
} catch (e) {
return {
height: 0,
error: e instanceof Error ? e.message : 'Failed to fetch block height',
};
}
}