@nuraly/lumenjs 0.1.4 → 0.2.0

package/templates/social/pages/settings/help.ts

@@ -1,141 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  back: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></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>`,
-  chevronDown: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>`,
-  search: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
-  book: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>`,
-  messageCircle: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z"/></svg>`,
-  mail: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>`,
-  flag: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>`,
-};
-
-const FAQ = [
-  { q: 'How do I change my password?', a: 'Go to Settings > Password and security > Change password. Enter your current password, then your new password twice to confirm.' },
-  { q: 'How do I make my account private?', a: 'Go to Settings > Privacy and safety and enable "Private profile". Only approved followers will be able to see your posts.' },
-  { q: 'How do I delete my account?', a: 'Go to Settings > Account information and scroll to the bottom. Click "Deactivate" to disable your account. For permanent deletion, contact support.' },
-  { q: 'How do I block or mute someone?', a: 'Visit their profile and click the three-dot menu. Select "Block" or "Mute". You can manage blocked and muted accounts in Settings > Privacy and safety.' },
-  { q: 'How do I change the app language?', a: 'Go to Settings > Language and select your preferred language from the list. The interface will update immediately.' },
-  { q: 'How do I enable dark mode?', a: 'Go to Settings and toggle "Dark mode" under the Preferences section. You can also use the keyboard shortcut Ctrl+Shift+D.' },
-  { q: 'How do I report a bug?', a: 'Use the "Report a bug" option below to send us details about the issue. Include steps to reproduce and screenshots if possible.' },
-  { q: 'How do I enable two-factor authentication?', a: 'Go to Settings > Password and security and enable the "Authenticator app" toggle. Follow the instructions to link your authenticator app.' },
-];
-
-export async function loader() {
-  return {};
-}
-
-export class PageSettingsHelp extends LitElement {
-  static properties = {
-    loaderData: { type: Object },
-    _search: { state: true },
-    _openFaq: { state: true },
-  };
-  loaderData: any = {};
-  _search: string = '';
-  _openFaq: number = -1;
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-
-    .header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
-    .back { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
-    .back:hover { background: var(--bg-secondary); }
-    .header h2 { font-size: 20px; font-weight: 700; margin: 0; }
-
-    .search-wrap { position: relative; padding: 12px 20px; border-bottom: 1px solid var(--border); }
-    .search-icon { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); display: flex; }
-    .search-input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; background: var(--input-bg); color: var(--text); }
-    .search-input:focus { border-color: var(--accent); background: var(--bg); }
-
-    .section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px 6px; }
-
-    .faq-item { border-bottom: 1px solid var(--border); }
-    .faq-item:last-child { border-bottom: none; }
-    .faq-q { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); }
-    .faq-q:hover { background: var(--bg-secondary); }
-    .faq-q span { flex: 1; }
-    .faq-q .faq-chevron { color: var(--text-tertiary); transition: transform 0.2s; }
-    .faq-q .faq-chevron.open { transform: rotate(90deg); }
-    .faq-a { padding: 0 20px 14px 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
-
-    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px; }
-    @media (max-width: 500px) { .contact-grid { grid-template-columns: 1fr; } }
-    .contact-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
-    .contact-card:hover { background: var(--bg-secondary); border-color: var(--accent); }
-    .contact-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; }
-    .contact-body { flex: 1; }
-    .contact-label { font-size: 14px; font-weight: 600; }
-    .contact-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
-
-    .empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
-  `;
-
-  render() {
-    const q = this._search.toLowerCase();
-    const filtered = FAQ.filter(f => f.q.toLowerCase().includes(q) || f.a.toLowerCase().includes(q));
-
-    return html`
-      <div class="card">
-        <div class="header">
-          <a class="back" href="/settings">${svg.back}</a>
-          <h2>Help center</h2>
-        </div>
-
-        <div class="search-wrap">
-          <span class="search-icon">${svg.search}</span>
-          <input class="search-input" type="text" placeholder="Search help articles..." .value=${this._search} @input=${(e: Event) => { this._search = (e.target as HTMLInputElement).value; }}>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Frequently asked questions</div>
-        ${filtered.length === 0 ? html`<div class="empty">No results found</div>` : filtered.map((f, i) => html`
-          <div class="faq-item">
-            <div class="faq-q" @click=${() => { this._openFaq = this._openFaq === i ? -1 : i; }}>
-              <span>${f.q}</span>
-              <span class="faq-chevron ${this._openFaq === i ? 'open' : ''}">${svg.chevron}</span>
-            </div>
-            ${this._openFaq === i ? html`<div class="faq-a">${f.a}</div>` : ''}
-          </div>
-        `)}
-      </div>
-
-      <div class="card">
-        <div class="section-title">Contact us</div>
-        <div class="contact-grid">
-          <div class="contact-card">
-            <div class="contact-icon">${svg.messageCircle}</div>
-            <div class="contact-body">
-              <div class="contact-label">Live chat</div>
-              <div class="contact-desc">Chat with our support team</div>
-            </div>
-          </div>
-          <div class="contact-card">
-            <div class="contact-icon">${svg.mail}</div>
-            <div class="contact-body">
-              <div class="contact-label">Email support</div>
-              <div class="contact-desc">support@nuraly.io</div>
-            </div>
-          </div>
-          <div class="contact-card">
-            <div class="contact-icon">${svg.book}</div>
-            <div class="contact-body">
-              <div class="contact-label">Documentation</div>
-              <div class="contact-desc">Browse the full docs</div>
-            </div>
-          </div>
-          <div class="contact-card">
-            <div class="contact-icon">${svg.flag}</div>
-            <div class="contact-body">
-              <div class="contact-label">Report a bug</div>
-              <div class="contact-desc">Help us improve</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}

package/templates/social/pages/settings/language.ts

@@ -1,103 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  back: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>`,
-  check: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`,
-  search: html`<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>`,
-};
-
-const LANGUAGES = [
-  { code: 'en', name: 'English', native: 'English' },
-  { code: 'fr', name: 'French', native: 'Fran\u00e7ais' },
-  { code: 'ar', name: 'Arabic', native: '\u0627\u0644\u0639\u0631\u0628\u064a\u0629' },
-  { code: 'es', name: 'Spanish', native: 'Espa\u00f1ol' },
-  { code: 'de', name: 'German', native: 'Deutsch' },
-  { code: 'it', name: 'Italian', native: 'Italiano' },
-  { code: 'pt', name: 'Portuguese', native: 'Portugu\u00eas' },
-  { code: 'ja', name: 'Japanese', native: '\u65e5\u672c\u8a9e' },
-  { code: 'ko', name: 'Korean', native: '\ud55c\uad6d\uc5b4' },
-  { code: 'zh', name: 'Chinese', native: '\u4e2d\u6587' },
-  { code: 'ru', name: 'Russian', native: '\u0420\u0443\u0441\u0441\u043a\u0438\u0439' },
-  { code: 'tr', name: 'Turkish', native: 'T\u00fcrk\u00e7e' },
-  { code: 'nl', name: 'Dutch', native: 'Nederlands' },
-  { code: 'hi', name: 'Hindi', native: '\u0939\u093f\u0928\u094d\u0926\u0940' },
-  { code: 'sv', name: 'Swedish', native: 'Svenska' },
-];
-
-export async function loader() {
-  return { currentLang: 'en' };
-}
-
-export class PageSettingsLanguage extends LitElement {
-  static properties = {
-    loaderData: { type: Object },
-    _selected: { state: true },
-    _search: { state: true },
-  };
-  loaderData: any = {};
-  _selected: string = 'en';
-  _search: string = '';
-
-  connectedCallback() { super.connectedCallback(); this._selected = this.loaderData.currentLang || 'en'; }
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-
-    .header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
-    .back { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
-    .back:hover { background: var(--bg-secondary); }
-    .header h2 { font-size: 20px; font-weight: 700; margin: 0; }
-
-    .search-wrap { position: relative; padding: 12px 20px; border-bottom: 1px solid var(--border); }
-    .search-icon { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); display: flex; }
-    .search-input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; outline: none; background: var(--input-bg); color: var(--text); }
-    .search-input:focus { border-color: var(--accent); background: var(--bg); }
-
-    .lang-item { display: flex; align-items: center; gap: 12px; padding: 14px 20px; cursor: pointer; border-bottom: 1px solid var(--border); }
-    .lang-item:last-child { border-bottom: none; }
-    .lang-item:hover { background: var(--bg-secondary); }
-    .lang-item.selected { background: var(--bg-secondary); }
-    .lang-body { flex: 1; }
-    .lang-name { font-size: 14px; font-weight: 600; }
-    .lang-native { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
-    .lang-check { width: 20px; display: flex; align-items: center; justify-content: center; }
-
-    .section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px 6px; }
-
-    .info { padding: 12px 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
-
-    .empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
-  `;
-
-  render() {
-    const q = this._search.toLowerCase();
-    const filtered = LANGUAGES.filter(l => l.name.toLowerCase().includes(q) || l.native.toLowerCase().includes(q));
-    return html`
-      <div class="card">
-        <div class="header">
-          <a class="back" href="/settings">${svg.back}</a>
-          <h2>Language</h2>
-        </div>
-
-        <div class="search-wrap">
-          <span class="search-icon">${svg.search}</span>
-          <input class="search-input" type="text" placeholder="Search languages..." .value=${this._search} @input=${(e: Event) => { this._search = (e.target as HTMLInputElement).value; }}>
-        </div>
-
-        <div class="info">Select your preferred language. This changes the interface language across the app.</div>
-
-        <div class="section-title">Available languages</div>
-        ${filtered.length === 0 ? html`<div class="empty">No languages match your search</div>` : filtered.map(l => html`
-          <div class="lang-item ${this._selected === l.code ? 'selected' : ''}" @click=${() => { this._selected = l.code; }}>
-            <div class="lang-body">
-              <div class="lang-name">${l.name}</div>
-              <div class="lang-native">${l.native}</div>
-            </div>
-            <div class="lang-check">${this._selected === l.code ? svg.check : ''}</div>
-          </div>
-        `)}
-      </div>
-    `;
-  }
-}

package/templates/social/pages/settings/privacy.ts

@@ -1,183 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  back: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></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>`,
-  eyeOff: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`,
-  userX: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M16 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="18" y1="8" x2="23" y2="13"/><line x1="23" y1="8" x2="18" y2="13"/></svg>`,
-  volumeX: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>`,
-  filter: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>`,
-  mapPin: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>`,
-  tag: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>`,
-};
-
-export async function loader() {
-  return {
-    blockedUsers: [
-      { username: 'spammer42', display_name: 'Spam Bot', blockedDate: 'Mar 15, 2026' },
-      { username: 'troll_account', display_name: 'Troll', blockedDate: 'Feb 28, 2026' },
-    ],
-    mutedUsers: [
-      { username: 'loud_poster', display_name: 'Loud Poster', mutedDate: 'Mar 10, 2026' },
-    ],
-    mutedWords: ['spoiler', 'nsfw', 'spam'],
-  };
-}
-
-export class PageSettingsPrivacy extends LitElement {
-  static properties = {
-    loaderData: { type: Object },
-    _privateProfile: { state: true },
-    _hideActivity: { state: true },
-    _allowTagging: { state: true },
-    _showLocation: { state: true },
-    _sensitiveFilter: { state: true },
-  };
-  loaderData: any = {};
-  _privateProfile = false;
-  _hideActivity = false;
-  _allowTagging = true;
-  _showLocation = true;
-  _sensitiveFilter = true;
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-
-    .header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
-    .back { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
-    .back:hover { background: var(--bg-secondary); }
-    .header h2 { font-size: 20px; font-weight: 700; margin: 0; }
-
-    .section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px 6px; }
-
-    .toggle-row { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
-    .toggle-row:last-child { border-bottom: none; }
-    .toggle-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; }
-    .toggle-body { flex: 1; }
-    .toggle-label { font-size: 14px; font-weight: 600; }
-    .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); }
-
-    .list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); }
-    .list-item:last-child { border-bottom: none; }
-    .list-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
-    .list-body { flex: 1; }
-    .list-name { font-size: 14px; font-weight: 600; }
-    .list-meta { font-size: 12px; color: var(--text-secondary); }
-    .btn-unblock { padding: 4px 14px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text-secondary); }
-    .btn-unblock:hover { background: var(--bg-secondary); color: var(--text); }
-
-    .muted-words { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px; }
-    .muted-word { display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 9999px; background: var(--bg-secondary); font-size: 13px; color: var(--text-secondary); }
-    .muted-word-remove { width: 16px; height: 16px; border-radius: 50%; border: none; background: none; cursor: pointer; color: var(--text-tertiary); font-size: 14px; display: flex; align-items: center; justify-content: center; }
-    .muted-word-remove:hover { color: #e53935; }
-    .btn-add-word { padding: 4px 12px; border-radius: 9999px; border: 1px dashed var(--border); background: none; font-size: 13px; color: var(--text-tertiary); cursor: pointer; }
-    .btn-add-word:hover { border-color: var(--accent); color: var(--accent); }
-
-    .empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
-  `;
-
-  render() {
-    const { blockedUsers = [], mutedUsers = [], mutedWords = [] } = this.loaderData;
-    return html`
-      <div class="card">
-        <div class="header">
-          <a class="back" href="/settings">${svg.back}</a>
-          <h2>Privacy and safety</h2>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Profile visibility</div>
-        <div class="toggle-row">
-          <div class="toggle-icon">${svg.eyeOff}</div>
-          <div class="toggle-body">
-            <div class="toggle-label">Private profile</div>
-            <div class="toggle-desc">Only approved followers can see your posts</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._privateProfile} @change=${(e: Event) => { this._privateProfile = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-        <div class="toggle-row">
-          <div class="toggle-icon">${svg.eye}</div>
-          <div class="toggle-body">
-            <div class="toggle-label">Hide online activity</div>
-            <div class="toggle-desc">Don't show when you were last active</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._hideActivity} @change=${(e: Event) => { this._hideActivity = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-        <div class="toggle-row">
-          <div class="toggle-icon">${svg.tag}</div>
-          <div class="toggle-body">
-            <div class="toggle-label">Allow tagging</div>
-            <div class="toggle-desc">Let others tag you in posts and comments</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._allowTagging} @change=${(e: Event) => { this._allowTagging = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-        <div class="toggle-row">
-          <div class="toggle-icon">${svg.mapPin}</div>
-          <div class="toggle-body">
-            <div class="toggle-label">Show location</div>
-            <div class="toggle-desc">Display your location on your profile</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._showLocation} @change=${(e: Event) => { this._showLocation = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Content filtering</div>
-        <div class="toggle-row">
-          <div class="toggle-icon">${svg.filter}</div>
-          <div class="toggle-body">
-            <div class="toggle-label">Filter sensitive content</div>
-            <div class="toggle-desc">Hide content flagged as potentially sensitive</div>
-          </div>
-          <label class="toggle"><input type="checkbox" .checked=${this._sensitiveFilter} @change=${(e: Event) => { this._sensitiveFilter = (e.target as HTMLInputElement).checked; }}><span class="toggle-slider"></span></label>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Muted words</div>
-        <div class="muted-words">
-          ${mutedWords.map((w: string) => html`
-            <span class="muted-word">${w}<button class="muted-word-remove">&times;</button></span>
-          `)}
-          <button class="btn-add-word">+ Add word</button>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Blocked accounts (${blockedUsers.length})</div>
-        ${blockedUsers.length === 0 ? html`<div class="empty">No blocked accounts</div>` : blockedUsers.map((u: any) => html`
-          <div class="list-item">
-            <div class="list-avatar">${u.display_name.charAt(0)}</div>
-            <div class="list-body">
-              <div class="list-name">${u.display_name} <span style="font-weight:400;color:var(--text-secondary)">@${u.username}</span></div>
-              <div class="list-meta">Blocked ${u.blockedDate}</div>
-            </div>
-            <button class="btn-unblock">Unblock</button>
-          </div>
-        `)}
-      </div>
-
-      <div class="card">
-        <div class="section-title">Muted accounts (${mutedUsers.length})</div>
-        ${mutedUsers.length === 0 ? html`<div class="empty">No muted accounts</div>` : mutedUsers.map((u: any) => html`
-          <div class="list-item">
-            <div class="list-avatar">${u.display_name.charAt(0)}</div>
-            <div class="list-body">
-              <div class="list-name">${u.display_name} <span style="font-weight:400;color:var(--text-secondary)">@${u.username}</span></div>
-              <div class="list-meta">Muted ${u.mutedDate}</div>
-            </div>
-            <button class="btn-unblock">Unmute</button>
-          </div>
-        `)}
-      </div>
-    `;
-  }
-}

package/templates/social/pages/settings/security.ts

@@ -1,133 +0,0 @@
-import { LitElement, html, css } from 'lit';
-
-const svg = {
-  back: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></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>`,
-  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>`,
-  monitor: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>`,
-  smartphone: html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>`,
-  check: html`<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>`,
-};
-
-export async function loader() {
-  return {
-    passwordLastChanged: '2 months ago',
-    twoFactor: false,
-    sessions: [
-      { device: 'Chrome on macOS', location: 'Tunis, Tunisia', current: true, lastActive: 'Now', type: 'desktop' },
-      { device: 'Safari on iPhone', location: 'Tunis, Tunisia', current: false, lastActive: '3 hours ago', type: 'mobile' },
-      { device: 'Firefox on Ubuntu', location: 'Sfax, Tunisia', current: false, lastActive: '2 days ago', type: 'desktop' },
-    ],
-  };
-}
-
-export class PageSettingsSecurity extends LitElement {
-  static properties = { loaderData: { type: Object }, _2fa: { state: true } };
-  loaderData: any = {};
-  _2fa: boolean = false;
-
-  connectedCallback() { super.connectedCallback(); this._2fa = this.loaderData.twoFactor || false; }
-
-  static styles = css`
-    :host { display: block; }
-    .card { background: var(--bg); border-radius: 6px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 12px; }
-
-    .header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-light); }
-    .back { width: 32px; height: 32px; border-radius: 50%; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
-    .back:hover { background: var(--bg-secondary); }
-    .header h2 { font-size: 20px; font-weight: 700; margin: 0; }
-
-    .section-title { font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 20px 6px; }
-
-    .row { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
-    .row:last-child { border-bottom: none; }
-    .row-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; }
-    .row-body { flex: 1; }
-    .row-label { font-size: 14px; font-weight: 600; }
-    .row-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
-    .row-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); }
-    .row-btn:hover { background: var(--bg-secondary); }
-
-    .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); }
-
-    .session { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); }
-    .session:last-child { border-bottom: none; }
-    .session-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; }
-    .session-body { flex: 1; }
-    .session-device { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
-    .session-meta { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
-    .badge-current { font-size: 11px; background: #dcfce7; color: #16a34a; padding: 1px 8px; border-radius: 9999px; font-weight: 600; }
-    .btn-revoke { padding: 4px 12px; border-radius: 6px; border: 1px solid #e53935; background: none; color: #e53935; font-size: 12px; font-weight: 600; cursor: pointer; }
-    .btn-revoke:hover { background: #fef2f2; }
-    .btn-revoke-all { padding: 8px 20px; border-radius: 6px; border: 1px solid #e53935; background: none; color: #e53935; font-size: 13px; font-weight: 600; cursor: pointer; margin: 12px 20px 16px; }
-    .btn-revoke-all:hover { background: #fef2f2; }
-  `;
-
-  render() {
-    const { passwordLastChanged, sessions = [] } = this.loaderData;
-    return html`
-      <div class="card">
-        <div class="header">
-          <a class="back" href="/settings">${svg.back}</a>
-          <h2>Password and security</h2>
-        </div>
-
-        <div class="section-title">Password</div>
-        <div class="row">
-          <div class="row-icon">${svg.lock}</div>
-          <div class="row-body">
-            <div class="row-label">Change password</div>
-            <div class="row-desc">Last changed ${passwordLastChanged}</div>
-          </div>
-          <button class="row-btn">Update</button>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Two-factor authentication</div>
-        <div class="row">
-          <div class="row-icon">${svg.shield}</div>
-          <div class="row-body">
-            <div class="row-label">Authenticator app</div>
-            <div class="row-desc">${this._2fa ? 'Enabled — your account has extra protection' : 'Add an extra layer of security to your account'}</div>
-          </div>
-          <label class="toggle">
-            <input type="checkbox" .checked=${this._2fa} @change=${(e: Event) => { this._2fa = (e.target as HTMLInputElement).checked; }}>
-            <span class="toggle-slider"></span>
-          </label>
-        </div>
-        <div class="row">
-          <div class="row-icon">${svg.smartphone}</div>
-          <div class="row-body">
-            <div class="row-label">SMS backup</div>
-            <div class="row-desc">Use your phone number as a backup verification method</div>
-          </div>
-          <button class="row-btn">Set up</button>
-        </div>
-      </div>
-
-      <div class="card">
-        <div class="section-title">Active sessions</div>
-        ${sessions.map((s: any) => html`
-          <div class="session">
-            <div class="session-icon">${s.type === 'mobile' ? svg.smartphone : svg.monitor}</div>
-            <div class="session-body">
-              <div class="session-device">
-                ${s.device}
-                ${s.current ? html`<span class="badge-current">${svg.check} Current</span>` : ''}
-              </div>
-              <div class="session-meta">${s.location} &middot; ${s.lastActive}</div>
-            </div>
-            ${!s.current ? html`<button class="btn-revoke">Revoke</button>` : ''}
-          </div>
-        `)}
-        <button class="btn-revoke-all">Revoke all other sessions</button>
-      </div>
-    `;
-  }
-}