diff --git a/src/components/Header.ts b/src/components/Header.ts
index e8745c9..2ef9272 100644
--- a/src/components/Header.ts
+++ b/src/components/Header.ts
@@ -35,10 +35,6 @@ export class Header extends LitElement {
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;
diff --git a/src/components/NostrAvatar.ts b/src/components/NostrAvatar.ts
index fbd43d3..caad32d 100644
--- a/src/components/NostrAvatar.ts
+++ b/src/components/NostrAvatar.ts
@@ -1,8 +1,8 @@
+import defaultAvatar from '@assets/default-avatar.png';
import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit-element';
import { customElement, property } from 'lit/decorators.js';
type AvatarSize = 'short' | 'medium' | 'large' | 'huge';
-import defaultAvatar from '@/default-avatar.png';
@customElement('arx-nostr-avatar')
export class ArxNostrAvatar extends LitElement {
diff --git a/src/components/Sidebar.ts b/src/components/Sidebar.ts
new file mode 100644
index 0000000..253f7a1
--- /dev/null
+++ b/src/components/Sidebar.ts
@@ -0,0 +1,267 @@
+import defaultAvatar from '@assets/default-avatar.png';
+import logo from '@assets/logo.png';
+import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+
+@customElement('arx-sidebar')
+export default class Sidebar extends LitElement {
+ @property({ type: String })
+ currentPath = '';
+
+ @property({ type: String })
+ userNpub = '';
+
+ @property({ type: Object })
+ userProfile: NDKUserProfile | undefined = undefined;
+
+ @property({ type: Array })
+ apps = [
+ {
+ id: 1,
+ href: 'beacon',
+ name: 'Beacon',
+ color: '#FF8C00',
+ icon: 'fa-solid:sun',
+ },
+ {
+ id: 2,
+ href: 'arbor',
+ name: 'Arbor',
+ color: '#FF4040',
+ icon: 'fa-solid:tree',
+ },
+ {
+ id: 3,
+ href: 'wallet',
+ name: 'Wallet',
+ color: '#1E90FF',
+ icon: 'fa-solid:spa',
+ },
+ {
+ id: 4,
+ href: 'settings',
+ name: 'Settings',
+ color: '#7B68EE',
+ icon: 'fa-solid:tools',
+ },
+ ];
+
+ static override styles = css`
+ :host {
+ overflow-x: hidden;
+ background: var(--color-base-200);
+ padding: 0 0 1.5rem 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ overflow-y: overlay;
+ scrollbar-width: none;
+ position: relative;
+ height: 100%;
+ }
+
+ ::-webkit-scrollbar {
+ width: 4px;
+ height: 4px;
+ background: transparent;
+ }
+
+ ::-webkit-scrollbar-track {
+ background: transparent;
+ margin: 3px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ background: rgba(100, 100, 100, 0.4);
+ border-radius: 10px;
+ transition: all 0.3s ease;
+ }
+
+ ::-webkit-scrollbar-thumb:hover {
+ background: rgba(100, 100, 100, 0.7);
+ }
+
+ :host:hover {
+ scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
+ }
+
+ :host::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 10px;
+ height: 100%;
+ opacity: 0;
+ pointer-events: none;
+ background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.03));
+ transition: opacity 0.3s ease;
+ }
+
+ :host:hover::after {
+ opacity: 1;
+ }
+
+ .app-icon-small {
+ margin-bottom: 1.5rem;
+ width: 80px;
+ }
+
+ .logo {
+ height: 64px;
+ margin-bottom: 1.5rem;
+ cursor: pointer;
+ transition: transform 0.2s ease, filter 0.3s ease;
+ border-radius: var(--radius-field);
+ padding: 8px;
+ background: none;
+ filter:
+ drop-shadow(0 0 2px rgba(0, 0, 0, 1))
+ drop-shadow(0 0 1px rgba(255, 255, 255, 1));
+ }
+
+ .logo-container {
+ width: 100%;
+ background: var(--color-accent);
+ display: flex;
+ justify-content: center;
+ padding: 12px 0;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ .logo-container::after {
+ content: '';
+ position: absolute;
+ bottom: -5px;
+ left: 0;
+ right: 0;
+ height: 6px;
+ background: rgba(0, 0, 0, 0.08);
+ border-radius: 50%;
+ filter: blur(3px);
+ }
+
+ .logo-container .logo {
+ margin-bottom: 0;
+ transform: translateY(0);
+ }
+
+ .logo:hover {
+ transform: translateY(-2px) scale(1.02);
+ filter:
+ drop-shadow(0 0 3px rgba(0, 0, 0, 0.8))
+ drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
+ }
+
+ .logo:active {
+ transform: translateY(1px) scale(0.98);
+ filter:
+ drop-shadow(0 0 1px rgba(0, 0, 0, 0.6));
+ transition-duration: 0.1s;
+ }
+
+ .app-icon-small.active {
+ transform: scale(1.15);
+ position: relative;
+ z-index: 10;
+ }
+
+ .app-icon-small.active::before {
+ content: '';
+ position: absolute;
+ top: -8px;
+ left: -8px;
+ right: -8px;
+ bottom: -8px;
+ background: var(--color-accent);
+ z-index: -1;
+ }
+
+ .sidebar-item {
+ position: relative;
+ margin-bottom: 1.5rem;
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+ }
+
+ .sidebar-item:hover {
+ transform: translateY(-2px);
+ }
+
+ .profile-avatar {
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ object-fit: cover;
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+ border: 2px solid var(--color-base-300);
+ }
+
+ .profile-avatar.active {
+ border-color: var(--color-primary);
+ transform: scale(1.15);
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
+ }
+
+ .profile-item {
+ margin-bottom: 1.5rem;
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+ display: flex;
+ justify-content: center;
+ }
+
+ .profile-item:hover .profile-avatar {
+ transform: translateY(-2px) scale(1.05);
+ }
+ `;
+
+ private handleLogoClick() {
+ this.dispatchEvent(new CustomEvent('navigate', { detail: 'home' }));
+ }
+
+ override render() {
+ const activePath = this.currentPath.split('/')[0];
+
+ return html`
+
+ 
+
+ ${map(
+ this.apps,
+ (app) => html`
+
+ `,
+ )}
+
+
+ `;
+ }
+}
diff --git a/src/default-avatar.png b/src/default-avatar.png
deleted file mode 100644
index 02e81ef..0000000
Binary files a/src/default-avatar.png and /dev/null differ
diff --git a/src/electron/main.ts b/src/electron/main.ts
index c2eb3d8..14a0d67 100644
--- a/src/electron/main.ts
+++ b/src/electron/main.ts
@@ -38,9 +38,11 @@ ipcMain.handle('relay:status', () => {
function createWindow(): void {
const mainWindow = new BrowserWindow({
- width: 1024,
+ width: 1366,
height: 768,
show: false,
+ minWidth: 1366,
+ minHeight: 768,
autoHideMenuBar: true,
webPreferences: {
preload: path.join(__dirname, '../preload/preload.mjs'),
diff --git a/src/main.ts b/src/main.ts
index 45d1d50..af68c9c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,13 +1,12 @@
-import './style.css';
-import '@components/ErrorView';
-import '@components/NostrAvatar';
-import '@components/LoadingView';
-import '@components/NostrProfile';
import '@components/Breadcrumbs';
+import '@components/ErrorView';
import '@components/Header';
-import '@routes/router';
import '@components/LoadingView';
+import '@components/NostrAvatar';
+import '@components/NostrProfile';
+import '@routes/router';
import type EveRouter from '@routes/router';
+import './style.css';
function checkRelayUp() {
return new Promise((resolve, reject) => {
diff --git a/src/routes/Home.ts b/src/routes/Home.ts
index 081c5a7..929dddf 100644
--- a/src/routes/Home.ts
+++ b/src/routes/Home.ts
@@ -193,7 +193,7 @@ export class Home extends LitElement {
diff --git a/src/routes/Settings.ts b/src/routes/Settings.ts
index ab245d3..ec13bab 100644
--- a/src/routes/Settings.ts
+++ b/src/routes/Settings.ts
@@ -1,5 +1,5 @@
-import defaultAvatar from '@/default-avatar.png';
import { getSigner, getUserProfile, ndk } from '@/ndk';
+import defaultAvatar from '@assets/default-avatar.png';
import type { ArxInputChangeEvent } from '@components/General/Input';
import { NDKEvent, type NDKUserProfile } from '@nostr-dev-kit/ndk';
import { LitElement, css, html } from 'lit';
@@ -62,6 +62,7 @@ export class EveSettings extends LitElement {
@state() private profile: NDKUserProfile | undefined;
@state() private error: string | undefined;
@state() private darkMode = false;
+ @state() private pageTransitions = true;
@state() private relayStatus: { running: boolean; pid: number | null; logs: string[] } = {
running: false,
pid: null,
@@ -77,6 +78,7 @@ export class EveSettings extends LitElement {
try {
this.profile = await getUserProfile();
this.darkMode = localStorage.getItem('darkMode') === 'true';
+ this.pageTransitions = localStorage.getItem('pageTransitions') !== 'false';
this.updateRelayStatus();
this.loading = false;
} catch (err) {
@@ -117,6 +119,12 @@ export class EveSettings extends LitElement {
document.body.classList.toggle('dark', this.darkMode);
}
+ private togglePageTransitions() {
+ this.pageTransitions = !this.pageTransitions;
+ localStorage.setItem('pageTransitions', this.pageTransitions.toString());
+ location.reload();
+ }
+
private reset() {
if (!confirm('Are you sure you want to reset the app?')) return;
localStorage.clear();
@@ -133,12 +141,17 @@ export class EveSettings extends LitElement {
return html`
-
+
this.toggleDarkMode()}
>
+ this.togglePageTransitions()}
+ >
${when(
diff --git a/src/routes/router.ts b/src/routes/router.ts
index 82cd92c..51410f4 100644
--- a/src/routes/router.ts
+++ b/src/routes/router.ts
@@ -1,4 +1,5 @@
import '@components/InitialSetup';
+import '@components/Sidebar';
import '@routes/404Page';
import '@routes/Arbor/Home';
import '@routes/Arbor/NewPost';
@@ -10,10 +11,14 @@ import '@routes/Profile';
import '@routes/Settings';
import '@routes/Wallet';
+import { getNpub, getUserProfile } from '@/ndk';
+import type { NDKUserProfile } from '@nostr-dev-kit/ndk';
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 Ref, createRef, ref } from 'lit/directives/ref.js';
+import { when } from 'lit/directives/when.js';
import { type StaticValue, html, literal } from 'lit/static-html.js';
export interface RouteParams {
@@ -24,7 +29,6 @@ interface Route {
pattern: string;
params: RouteParams;
component: StaticValue;
- // component: typeof LitElement | ((params: RouteParams) => typeof LitElement);
title?: string;
meta?: Record;
}
@@ -90,17 +94,34 @@ export default class EveRouter extends LitElement {
@state()
private currentIndex = -1;
+ @state()
+ private isTransitioning = false;
+
@property()
public ccnSetup = false;
+ windowContentRef: Ref = createRef();
+ pageTransitions = true;
+
private beforeEachGuards: ((to: Route, from: Route | null) => boolean)[] = [];
private afterEachHooks: ((to: Route, from: Route | null) => void)[] = [];
+ @state()
+ private userProfile: NDKUserProfile | undefined = undefined;
+
+ @state()
+ private userNpub = '';
+
static override styles = css`
:host {
- height: 100vh;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
display: grid;
grid-template-rows: auto 1fr;
+ grid-template-columns: 100px 1fr;
overflow: hidden;
}
@@ -124,9 +145,34 @@ export default class EveRouter extends LitElement {
::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral);
}
-
+
.window {
overflow: auto;
+ grid-column: 2;
+ grid-row: 2;
+ position: relative;
+ }
+
+ .window::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 10px;
+ height: 100%;
+ opacity: 0;
+ pointer-events: none;
+ background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.03));
+ transition: opacity 0.3s ease;
+ }
+
+ .window:hover::after {
+ opacity: 1;
+ }
+
+ arx-sidebar {
+ grid-column: 1;
+ grid-row: 1 / span 2;
}
.window-content {
@@ -135,22 +181,58 @@ export default class EveRouter extends LitElement {
height: 100%;
margin: 0 auto;
padding: 1rem;
+ opacity: 1;
+ transform-origin: left center;
+ transform: perspective(1200px) translateX(0);
+ transition: var(--transition);
+ backface-visibility: hidden;
+ filter: blur(0px);
+ }
+
+ .window-content::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 4px;
+ height: 100%;
+ opacity: 0;
+ transition: var(--transition);
+ }
+
+ .window-content.transitioning {
+ overflow: hidden;
+ transform: perspective(1200px) translateX(50vw);
+ filter: blur(50px);
+ }
+
+ .window-content.transitioning::after {
+ opacity: 1;
}
.hide-overflow {
overflow: hidden;
}
+
+ arx-header {
+ grid-column: 2;
+ grid-row: 1;
+ }
`;
constructor() {
super();
this.initializeRouter();
+ this.pageTransitions = localStorage.getItem('pageTransitions') !== 'false';
if (this.ccnSetup) window.relay.start(localStorage.getItem('encryption_key')!);
}
override connectedCallback(): void {
super.connectedCallback();
this.setupEventListeners();
+ if (this.ccnSetup) {
+ this.loadUserProfile();
+ }
}
override disconnectedCallback(): void {
@@ -171,11 +253,11 @@ export default class EveRouter extends LitElement {
window.addEventListener('popstate', this.handlePopState.bind(this));
}
- private handleHashChange(): void {
+ private async handleHashChange(): Promise {
const newPath = this.currentPath;
if (newPath !== this.history[this.currentIndex]) {
+ await this.requestUpdateWithTransition();
this.updateHistory(newPath);
- this.requestUpdate();
}
}
@@ -252,7 +334,7 @@ export default class EveRouter extends LitElement {
const canProceed = this.beforeEachGuards.every((guard) => guard(to, from));
if (canProceed) {
- this.requestUpdate();
+ await this.requestUpdateWithTransition();
for (const hook of this.afterEachHooks) {
hook(to, from);
}
@@ -263,6 +345,25 @@ export default class EveRouter extends LitElement {
}
}
+ async requestUpdateWithTransition(): Promise {
+ if (!this.windowContentRef.value) return this.requestUpdate();
+ if (!this.pageTransitions) return this.requestUpdate();
+ this.isTransitioning = true;
+ this.requestUpdate();
+
+ await new Promise((resolve) => {
+ this.windowContentRef.value!.addEventListener(
+ 'transitionend',
+ () => {
+ this.isTransitioning = false;
+ resolve(true);
+ },
+ { once: true },
+ );
+ });
+ this.requestUpdate();
+ }
+
goBack(): void {
if (this.currentIndex > 0) {
this.currentIndex--;
@@ -283,7 +384,7 @@ export default class EveRouter extends LitElement {
renderSetup() {
return html`
-
+
this.finishSetup()}
@@ -293,9 +394,25 @@ export default class EveRouter extends LitElement {
`;
}
+ async loadUserProfile() {
+ try {
+ this.userNpub = await getNpub();
+ this.userProfile = await getUserProfile();
+ } catch (error) {
+ console.error('Failed to load user profile:', error);
+ }
+ }
+
override render() {
if (!this.ccnSetup) return this.renderSetup();
+
return html`
+ this.navigate(e.detail)}
+ >
0}
?canGoForward=${this.currentIndex < this.history.length - 1}
@@ -306,10 +423,14 @@ export default class EveRouter extends LitElement {
title="Eve"
>
-
- ${keyed(
- this.currentRoute.params,
- html`
+
diff --git a/src/style.css b/src/style.css
index cee2999..a66b6de 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,8 +6,13 @@
--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);
+ --undershoot-curve: cubic-bezier(0.38, 0, 0.618, 0.88);
+ --animation-curve: cubic-bezier(0.18, 0, 0.618, 1);
+ --overshoot-curve: cubic-bezier(0.38, 0, 0.618, 1.12);
+ --animation-duration: 275ms;
+ --transition: var(--animation-duration) var(--animation-curve);
+ --overshoot-transition: calc(var(--animation-duration) * 1.2) var(--overshoot-curve);
+ --undershoot-transition: calc(var(--animation-duration) * 0.8) var(--undershoot-curve);
--color-base-100: oklch(98% 0.016 73.684);
--color-base-200: oklch(95% 0.038 75.164);
+ ${when(
+ this.isTransitioning,
+ () => html`