Files
plebeian-signer/projects/chrome/public/options.html
mleku 578f3e08ff Add NIP-65 relay list display and improve identity UI
- Add NIP-65 relay list service to fetch kind 10002 events from relays
- Replace configurable relay page with read-only NIP-65 relay display
- Update identity page to show display name and username in same badge
- Use reglisse heading font for titles throughout the UI
- Navigate to You page after vault unlock instead of identities list
- Add autofocus to vault password input field
- Add profile metadata service for fetching kind 0 events
- Add readonly mode to relay-rw component

Files modified:
- package.json (version bump to 0.0.6)
- projects/common/src/lib/services/relay-list/relay-list.service.ts (new)
- projects/common/src/lib/services/profile-metadata/profile-metadata.service.ts (new)
- projects/common/src/lib/constants/fallback-relays.ts (new)
- projects/*/src/app/components/home/identity/* (UI improvements)
- projects/*/src/app/components/edit-identity/relays/* (NIP-65 display)
- projects/*/src/app/components/vault-login/* (autofocus, navigation)
- projects/common/src/lib/styles/* (heading fonts)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-17 15:21:57 +01:00

180 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Plebeian Signer - Options</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="scripts.js"></script>
<style>
/* Prevent white flash on load */
html { background-color: #0a0a0a; }
@media (prefers-color-scheme: light) {
html { background-color: #ffffff; }
}
body {
background: var(--background);
height: 100vh;
width: 100vw;
color: var(--foreground);
font-size: 16px;
box-sizing: border-box;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto;
}
.container {
max-width: 1200px;
box-sizing: border-box;
width: 100%;
padding-left: 1rem;
padding-right: 1rem;
}
.logo {
height: 60px;
width: 60px;
border-radius: 100%;
border: 2px solid var(--secondary);
img {
height: 100%;
width: 100%;
}
}
.brand-name {
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 4px;
color: var(--secondary);
}
.main-header {
padding-top: 50px;
font-size: 50px;
font-weight: 500;
}
.sub-header {
padding-top: 28px;
font-size: 20px;
max-width: 460px;
text-align: right;
line-height: 1.4;
.accent {
color: var(--secondary);
border: 1px solid var(--secondary);
border-radius: 4px;
padding: 2px 4px;
}
}
.middle {
margin-top: 68px;
width: 100%;
background: var(--background-light);
display: flex;
flex-direction: row;
justify-content: center;
padding-bottom: 24px;
}
.option-label {
font-size: 20px;
margin-bottom: 0px;
margin-top: 16px;
}
.option-text {
color: gray;
margin-top: 4px;
}
.snapshots-list {
margin-top: 8px;
}
</style>
</head>
<body>
<div class="page">
<div class="container sam-flex-row gap" style="margin-top: 16px">
<div class="logo">
<img src="logo.svg" alt="" />
</div>
<span class="brand-name">Plebeian Signer</span>
<span>OPTIONS</span>
</div>
<div class="container sam-flex-column center">
<span class="main-header"> Nostr Identity Manager & Signer </span>
<span class="sub-header">
Manage and switch between
<span class="accent">multiple identities</span>
while interacting with Nostr apps
</span>
</div>
<div class="middle">
<div class="container sam-flex-column">
<!-- VAULT SNAPSHOTS -->
<span class="option-label">Vault Snapshots</span>
<span class="option-text">
Importing a previously exported vault snapshot is not
<b>directly</b>
possible in the extension's popup window. This is due to the
browser's limitation of automatically closing the popup when it
looses focus, making it impossible to drop or select a file there.
</span>
<span class="option-text">
To circumvent this limitation, you need to upload your snapshot here
and make it available for the extension to import in the popup.
</span>
<span class="option-text">
<b>
Uploading a snapshot here does NOT automatically start an import!
</b>
</span>
<span class="option-text">
<b>
The data remains inside this browser and is NOT uploaded to
any server!
</b>
</span>
<div class="sam-mt-h sam-flex-row gap">
<button id="uploadSnapshotsButton" class="btn btn-primary">
Upload Snapshots
</button>
<button id="deleteSnapshotsButton" class="btn btn-danger">
Delete Snapshots
</button>
</div>
<ul id="snapshotsList" class="snapshots-list">
<!-- will be filled by JS -->
</ul>
</div>
</div>
</div>
<input
id="uploadSnapshotInput"
type="file"
multiple
style="position: absolute; top: 0; display: none"
accept=".json"
/>
<script src="options.js"></script>
</body>
</html>