@nuraly/lumenjs 0.1.2 → 0.1.4

package/templates/social/pages/settings.ts

@@ -0,0 +1,185 @@
+import { LitElement, html, css } from 'lit';
+
+const svg = {
+  user: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`,
+  lock: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>`,
+  bell: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>`,
+  eye: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>`,
+  palette: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="8" r="1.5" fill="currentColor"/><circle cx="8" cy="12" r="1.5" fill="currentColor"/><circle cx="16" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="16" r="1.5" fill="currentColor"/></svg>`,
+  globe: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>`,
+  shield: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>`,
+  help: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`,
+  logout: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>`,
+  chevron: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 18 15 12 9 6"/></svg>`,
+};
+
+export async function loader() {
+  return {
+    profile: {
+      display_name: 'Aymen Labidi',
+      username: 'aymen',
+      email: 'aymen@nuraly.io',
+      avatar: 'https://avatars.githubusercontent.com/u/3775924?v=4',
+    },
+  };
+}
+
+export class PageSettings extends LitElement {
+  static properties = { loaderData: { type: Object }, _dark: { state: true } };
+  loaderData: any = {};
+  _dark: boolean = typeof localStorage !== 'undefined' && localStorage.getItem('theme') === 'dark';
+
+  static styles = css`
+    :host { display: block; }
+    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
+    h2 { font-size: 20px; font-weight: 700; padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--border-light); }
+
+    /* Profile card */
+    .profile-card { display: flex; gap: 14px; padding: 20px; align-items: center; }
+    .profile-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
+    .profile-info { flex: 1; }
+    .profile-name { font-size: 16px; font-weight: 700; }
+    .profile-email { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
+    .profile-handle { font-size: 13px; color: var(--text-secondary); }
+    .edit-btn { padding: 6px 16px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
+    .edit-btn:hover { background: var(--bg-secondary); }
+
+    /* Menu items */
+    .menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--border); color: var(--text); font-size: 14px; text-decoration: none; }
+    .menu-item:last-child { border-bottom: none; }
+    .menu-item:hover { background: var(--bg-secondary); }
+    .menu-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
+    .menu-body { flex: 1; }
+    .menu-label { font-weight: 600; }
+    .menu-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
+    .menu-chevron { color: var(--text-tertiary); }
+    .menu-item.danger { color: #e53935; }
+    .menu-item.danger .menu-icon { background: #fef2f2; color: #e53935; }
+
+    /* Toggle */
+    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); }
+    .toggle-row:last-child { border-bottom: none; }
+    .toggle-label { font-size: 14px; font-weight: 500; }
+    .toggle-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
+    .toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; border-radius: 24px; transition: 0.2s; }
+    .toggle-slider:before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: var(--bg); border-radius: 50%; transition: 0.2s; }
+    .toggle input:checked + .toggle-slider { background: var(--accent); }
+    .toggle input:checked + .toggle-slider:before { transform: translateX(18px); }
+
+    .section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px 6px; }
+  `;
+
+  render() {
+    const profile = this.loaderData.profile || {};
+    return html`
+      <div class="card">
+        <h2>Settings</h2>
+        <div class="profile-card">
+          <img class="profile-avatar" src="${profile.avatar}" alt="">
+          <div class="profile-info">
+            <div class="profile-name">${profile.display_name}</div>
+            <div class="profile-handle">@${profile.username}</div>
+            <div class="profile-email">${profile.email}</div>
+          </div>
+          <a class="edit-btn" href="/settings/account">Edit profile</a>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="section-title">Account</div>
+        <a class="menu-item" href="/settings/account">
+          <div class="menu-icon">${svg.user}</div>
+          <div class="menu-body">
+            <div class="menu-label">Account information</div>
+            <div class="menu-desc">Username, email, phone number</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </a>
+        <a class="menu-item" href="/settings/security">
+          <div class="menu-icon">${svg.lock}</div>
+          <div class="menu-body">
+            <div class="menu-label">Password and security</div>
+            <div class="menu-desc">Password, two-factor authentication</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </a>
+        <a class="menu-item" href="/settings/privacy">
+          <div class="menu-icon">${svg.shield}</div>
+          <div class="menu-body">
+            <div class="menu-label">Privacy and safety</div>
+            <div class="menu-desc">Control who can see your content</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </a>
+      </div>
+
+      <div class="card">
+        <div class="section-title">Preferences</div>
+        <div class="toggle-row">
+          <div>
+            <div class="toggle-label">Dark mode</div>
+            <div class="toggle-desc">Switch between light and dark theme</div>
+          </div>
+          <label class="toggle"><input type="checkbox" .checked=${this._dark} @change=${(e: Event) => { this._dark = (e.target as HTMLInputElement).checked; (window as any).__nk_toggle_theme?.(this._dark); }}><span class="toggle-slider"></span></label>
+        </div>
+        <div class="toggle-row">
+          <div>
+            <div class="toggle-label">Push notifications</div>
+            <div class="toggle-desc">Receive push notifications on this device</div>
+          </div>
+          <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
+        </div>
+        <div class="toggle-row">
+          <div>
+            <div class="toggle-label">Email notifications</div>
+            <div class="toggle-desc">Receive email about activity and updates</div>
+          </div>
+          <label class="toggle"><input type="checkbox" checked><span class="toggle-slider"></span></label>
+        </div>
+        <div class="toggle-row">
+          <div>
+            <div class="toggle-label">Sound effects</div>
+            <div class="toggle-desc">Play sounds for notifications and messages</div>
+          </div>
+          <label class="toggle"><input type="checkbox"><span class="toggle-slider"></span></label>
+        </div>
+      </div>
+
+      <div class="card">
+        <div class="section-title">More</div>
+        <a class="menu-item" href="/settings/accessibility">
+          <div class="menu-icon">${svg.eye}</div>
+          <div class="menu-body">
+            <div class="menu-label">Accessibility</div>
+            <div class="menu-desc">Font size, color contrast, motion</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </a>
+        <a class="menu-item" href="/settings/language">
+          <div class="menu-icon">${svg.globe}</div>
+          <div class="menu-body">
+            <div class="menu-label">Language</div>
+            <div class="menu-desc">English</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </a>
+        <a class="menu-item" href="/settings/help">
+          <div class="menu-icon">${svg.help}</div>
+          <div class="menu-body">
+            <div class="menu-label">Help center</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </a>
+        <div class="menu-item danger">
+          <div class="menu-icon">${svg.logout}</div>
+          <div class="menu-body">
+            <div class="menu-label">Log out</div>
+          </div>
+          <span class="menu-chevron">${svg.chevron}</span>
+        </div>
+      </div>
+    `;
+  }
+}