dwindown/emoji-chrome-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor extension to account-auth flow and health-only diagnostics

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-02-18 17:52:13 +07:00
parent 901f81b7a9
commit bcbbab7922
4 changed files with 202 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
panel.html
View File

@@ -19,7 +19,7 @@
</head>
<body>
<header class="hdr">
<h1 class="ttl">Find Your Emoji <span id="dewemoji-status" class="tag free">Free</span></h1>
<h1 class="ttl">Find Your Emoji <span id="dewemoji-status" class="tag free">Guest</span></h1>
<div class="bar">
<input id="q" class="inp" type="text" placeholder="Search (e.g. love)" aria-label="Search emojis" />
<button id="clear" class="btn icon" title="Clear" aria-label="Clear">✕</button>
@@ -47,7 +47,7 @@
<!-- Settings sheet -->
<div id="sheet-backdrop" class="backdrop" hidden></div>
<aside id="settings-sheet" class="sheet" hidden role="dialog" aria-modal="true" aria-labelledby="settings-title" aria-describedby="license-status">
<aside id="settings-sheet" class="sheet" hidden role="dialog" aria-modal="true" aria-labelledby="settings-title" aria-describedby="account-status">
<div class="sheet-head">
<h3 id="settings-title">Settings</h3>
<button id="sheet-close" class="btn icon" title="Close" aria-label="Close">✕</button>
@@ -56,7 +56,7 @@
<div class="sheet-body">
<div class="tabs">
<button class="tab active" data-tab="general">General</button>
<button class="tab" data-tab="pro">Pro</button>
<button class="tab" data-tab="pro">Account</button>
</div>
<div id="tab-general" class="tabpane active">
@@ -72,12 +72,12 @@
<label class="radio">
<input type="radio" name="actionMode" value="insert">
<span>Insert to input</span>
<span class="tag pro">Pro</span>
<span class="tag free">Available</span>
</label>
<label class="radio">
<input type="radio" name="actionMode" value="auto">
<span>Automatic</span>
<span class="tag pro">Pro</span>
<span class="tag free">Available</span>
</label>
</div>
<p class="hint muted">Automatic tries to insert at the last caret; if not possible, it copies instead.</p>
@@ -85,23 +85,20 @@
</div>
<div id="tab-pro" class="tabpane">
<!-- License (first) -->
<div class="field">
<label class="lbl">License</label>
<label class="lbl">Account</label>
<div class="row">
<input id="license-key" class="inp" placeholder="Enter license key" type="password" autocomplete="off">
<button id="license-activate" class="btn">Activate</button>
<button id="license-deactivate" class="btn ghost">Deactivate</button>
<input id="account-email" class="inp" placeholder="Email" type="email" autocomplete="username">
</div>
<div class="row" style="margin-top:6px;">
<button id="license-edit" class="link" style="width: fit-content">Change key</button>
<button id="license-cancel-edit" class="link" style="display:none;width: fit-content">Cancel</button>
<span id="license-status" class="muted">
Free mode — Pro features locked.
<br><a href="https://dewemoji.com/pricing" target="_blank" class="cta-link" style="margin-left:6px; text-decoration: underline; font-weight: 500;">
🔓 Upgrade to Pro
</a>
</span>
<input id="account-password" class="inp" placeholder="Password" type="password" autocomplete="current-password">
</div>
<div class="row">
<button id="account-login" class="btn">Connect</button>
<button id="account-logout" class="btn ghost">Logout</button>
</div>
<div class="row" style="margin-top:6px;">
<span id="account-status" class="muted">Not connected. Public keywords only.</span>
</div>
</div>
@@ -109,14 +106,13 @@
<!-- Diagnostics -->
<div class="field">
<label class="lbl">Diagnostics</label>
<label class="lbl">Extension Health</label>
<div class="row">
<button id="diag-run" class="btn">Run diagnostics</button>
<button id="diag-force" class="btn ghost">Force token refresh</button>
<button id="diag-run" class="btn">Run health check</button>
<span id="diag-spin" class="muted" style="display:none;">Running…</span>
</div>
<div id="diag-out" class="diagbox muted"></div>
<p class="hint muted">Tip: Click in a text box on the page first, then run diagnostics.</p>
<p class="hint muted">Tip: Click in a text box on the page first, then run health check.</p>
</div>
</div>
</div>