mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Refine profile and edit modals with design system tokens
This commit is contained in:
thePR0M3TH3AN committed
1 parent
56af3e33da
commit
35a041d1be
6 files changed
+224
-195
No files matched your search
@@ -12,29 +12,29 @@
|
||||
class="bv-modal__panel modal-content bg-gray-900 w-full max-w-[90%] lg:max-w-4xl my-0 overflow-y-auto relative max-h-[90vh]"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150 p-4 flex items-center justify-between"
|
||||
>
|
||||
<h2 class="text-xl font-bold text-white">Edit Video Note</h2>
|
||||
<button
|
||||
id="closeEditVideoModal"
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 transition-all duration-200 backdrop-blur focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-gray-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
<div class="sticky top-0 p-4">
|
||||
<div class="card flex items-center justify-between gap-4 p-4">
|
||||
<h2 class="text-xl font-bold text-white">Edit Video Note</h2>
|
||||
<button
|
||||
id="closeEditVideoModal"
|
||||
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 space-y-6">
|
||||
@@ -56,7 +56,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoTitle"
|
||||
>
|
||||
Edit field
|
||||
@@ -210,7 +210,7 @@
|
||||
<h3 id="editNip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-xs font-semibold"
|
||||
data-nip71-add="imeta"
|
||||
aria-describedby="editNip71ImetaHelp"
|
||||
>
|
||||
@@ -223,7 +223,7 @@
|
||||
</p>
|
||||
<div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
|
||||
<template id="editNip71ImetaTemplate" data-nip71-template="imeta">
|
||||
<article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="imeta">
|
||||
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="imeta">
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-300">
|
||||
@@ -280,7 +280,7 @@
|
||||
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-nested-add="image"
|
||||
>
|
||||
Add image URL
|
||||
@@ -297,7 +297,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="nested"
|
||||
aria-label="Remove image URL"
|
||||
>
|
||||
@@ -312,7 +312,7 @@
|
||||
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-nested-add="fallback"
|
||||
>
|
||||
Add fallback
|
||||
@@ -329,7 +329,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="nested"
|
||||
aria-label="Remove fallback URL"
|
||||
>
|
||||
@@ -344,7 +344,7 @@
|
||||
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-nested-add="service"
|
||||
>
|
||||
Add service
|
||||
@@ -361,7 +361,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="nested"
|
||||
aria-label="Remove service entry"
|
||||
>
|
||||
@@ -374,7 +374,7 @@
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="imeta"
|
||||
>
|
||||
Remove variant
|
||||
@@ -391,7 +391,7 @@
|
||||
</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-xs font-semibold"
|
||||
data-nip71-add="text-track"
|
||||
aria-describedby="editNip71TextTracksHelp"
|
||||
>
|
||||
@@ -403,7 +403,7 @@
|
||||
</p>
|
||||
<div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
|
||||
<template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
|
||||
<article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="text-track">
|
||||
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="text-track">
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-300">Track URL</label>
|
||||
@@ -436,7 +436,7 @@
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="text-track"
|
||||
>
|
||||
Remove track
|
||||
@@ -451,7 +451,7 @@
|
||||
<h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters & segments (segment)</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-xs font-semibold"
|
||||
data-nip71-add="segment"
|
||||
aria-describedby="editNip71SegmentsHelp"
|
||||
>
|
||||
@@ -463,7 +463,7 @@
|
||||
</p>
|
||||
<div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
|
||||
<template id="editNip71SegmentTemplate" data-nip71-template="segment">
|
||||
<article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="segment">
|
||||
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="segment">
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-300">Start (seconds)</label>
|
||||
@@ -507,7 +507,7 @@
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="segment"
|
||||
>
|
||||
Remove segment
|
||||
@@ -522,7 +522,7 @@
|
||||
<h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-xs font-semibold"
|
||||
data-nip71-add="t"
|
||||
>
|
||||
Add hashtag
|
||||
@@ -542,7 +542,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="t"
|
||||
>
|
||||
Remove
|
||||
@@ -556,7 +556,7 @@
|
||||
<h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-xs font-semibold"
|
||||
data-nip71-add="p"
|
||||
>
|
||||
Add participant
|
||||
@@ -564,7 +564,7 @@
|
||||
</div>
|
||||
<div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
|
||||
<template id="editNip71ParticipantTemplate" data-nip71-template="p">
|
||||
<article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="p">
|
||||
<article class="card space-y-3 bg-gray-900/60 p-4" data-nip71-entry="p">
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-300">Participant pubkey</label>
|
||||
@@ -588,7 +588,7 @@
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="p"
|
||||
>
|
||||
Remove participant
|
||||
@@ -603,7 +603,7 @@
|
||||
<h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-xs font-semibold"
|
||||
data-nip71-add="r"
|
||||
>
|
||||
Add reference
|
||||
@@ -620,7 +620,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
|
||||
class="btn-ghost focus-ring text-[11px] font-medium"
|
||||
data-nip71-remove="r"
|
||||
>
|
||||
Remove
|
||||
@@ -643,7 +643,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoUrl"
|
||||
>
|
||||
Edit field
|
||||
@@ -664,7 +664,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoWs"
|
||||
>
|
||||
Edit field
|
||||
@@ -685,7 +685,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoXs"
|
||||
>
|
||||
Edit field
|
||||
@@ -706,7 +706,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoMagnet"
|
||||
>
|
||||
Edit field
|
||||
@@ -727,7 +727,7 @@
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoThumbnail"
|
||||
>
|
||||
Edit field
|
||||
@@ -748,7 +748,7 @@
|
||||
></textarea>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button self-start hidden"
|
||||
class="btn-ghost focus-ring hidden self-start text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoDescription"
|
||||
>
|
||||
Edit field
|
||||
@@ -773,7 +773,7 @@
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="video-visibility-toggle__option"
|
||||
class="video-visibility-toggle__option focus-ring"
|
||||
data-visibility-option="public"
|
||||
aria-pressed="false"
|
||||
>
|
||||
@@ -781,7 +781,7 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="video-visibility-toggle__option"
|
||||
class="video-visibility-toggle__option focus-ring"
|
||||
data-visibility-option="private"
|
||||
aria-pressed="false"
|
||||
>
|
||||
@@ -801,7 +801,7 @@
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoIsPrivate"
|
||||
>
|
||||
Edit field
|
||||
@@ -829,7 +829,7 @@
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoIsNsfw"
|
||||
>
|
||||
Edit field
|
||||
@@ -857,7 +857,7 @@
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editVideoIsForKids"
|
||||
>
|
||||
Edit field
|
||||
@@ -886,7 +886,7 @@
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="edit-field-button hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs font-semibold uppercase tracking-wide"
|
||||
data-edit-target="editEnableComments"
|
||||
>
|
||||
Edit field
|
||||
@@ -898,14 +898,14 @@
|
||||
<button
|
||||
type="button"
|
||||
id="cancelEditVideo"
|
||||
class="w-full sm:w-auto px-4 py-2 rounded-md bg-gray-800 text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500"
|
||||
class="btn-ghost focus-ring w-full sm:w-auto"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
id="submitEditVideo"
|
||||
class="w-full sm:w-auto px-4 py-2 rounded-md bg-blue-600 text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500"
|
||||
class="btn focus-ring w-full sm:w-auto"
|
||||
>
|
||||
Save changes
|
||||
</button>
|
||||
|
||||
@@ -14,29 +14,29 @@
|
||||
tabindex="-1"
|
||||
>
|
||||
<!-- Modal Header -->
|
||||
<div
|
||||
class="sticky top-0 bg-gradient-to-b from-black/80 to-transparent p-4 flex items-center justify-between"
|
||||
>
|
||||
<h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
|
||||
<button
|
||||
id="closeProfileModal"
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full bg-black/50 hover:bg-black/70 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black focus:ring-blue-500"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-6 h-6 text-gray-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
<div class="sticky top-0 p-4">
|
||||
<div class="card flex items-center justify-between gap-4 p-4">
|
||||
<h2 id="profileModalTitle" class="text-xl font-bold text-white">Profile</h2>
|
||||
<button
|
||||
id="closeProfileModal"
|
||||
class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full bg-black/50 text-gray-300 transition hover:bg-black/70"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Body -->
|
||||
@@ -44,22 +44,23 @@
|
||||
<div class="flex flex-col lg:flex-row gap-6 h-full">
|
||||
<!-- Left navigation column -->
|
||||
<nav
|
||||
class="flex lg:flex-col gap-2 flex-shrink-0"
|
||||
class="flex flex-wrap gap-2 flex-shrink-0 lg:flex-col"
|
||||
aria-label="Profile sections"
|
||||
>
|
||||
<button
|
||||
id="profileNavAccount"
|
||||
type="button"
|
||||
class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-white bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
|
||||
aria-controls="profilePaneAccount"
|
||||
aria-selected="true"
|
||||
data-state="active"
|
||||
>
|
||||
Account
|
||||
</button>
|
||||
<button
|
||||
id="profileNavRelays"
|
||||
type="button"
|
||||
class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
|
||||
aria-controls="profilePaneRelays"
|
||||
aria-selected="false"
|
||||
>
|
||||
@@ -68,7 +69,7 @@
|
||||
<button
|
||||
id="profileNavWallet"
|
||||
type="button"
|
||||
class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
|
||||
aria-controls="profilePaneWallet"
|
||||
aria-selected="false"
|
||||
>
|
||||
@@ -77,7 +78,7 @@
|
||||
<button
|
||||
id="profileNavBlocked"
|
||||
type="button"
|
||||
class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
|
||||
aria-controls="profilePaneBlocked"
|
||||
aria-selected="false"
|
||||
>
|
||||
@@ -86,7 +87,7 @@
|
||||
<button
|
||||
id="profileNavHistory"
|
||||
type="button"
|
||||
class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
|
||||
aria-controls="profilePaneHistory"
|
||||
aria-selected="false"
|
||||
>
|
||||
@@ -95,7 +96,7 @@
|
||||
<button
|
||||
id="profileNavAdmin"
|
||||
type="button"
|
||||
class="profile-nav-button px-4 py-2 rounded-md text-sm font-medium text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900 hidden"
|
||||
class="btn-ghost focus-ring hidden w-full justify-start gap-3 px-4 py-2 text-sm font-medium"
|
||||
aria-controls="profilePaneAdmin"
|
||||
aria-selected="false"
|
||||
>
|
||||
@@ -116,61 +117,72 @@
|
||||
"Profile modal account pane") so we are not dependent on utility
|
||||
classes that may be purged or overridden by other builds.
|
||||
-->
|
||||
<div class="profile-switcher" id="profileSwitcherTray">
|
||||
<div class="profile-switcher__header">
|
||||
<div class="profile-switcher__intro">
|
||||
<h3 class="profile-switcher__title">Switch profiles</h3>
|
||||
<p class="profile-switcher__subtitle">
|
||||
<div id="profileSwitcherTray" class="card space-y-6 p-6">
|
||||
<div class="flex flex-wrap items-start justify-between gap-4">
|
||||
<div class="space-y-2">
|
||||
<h3 class="text-lg font-semibold text-white">Switch profiles</h3>
|
||||
<p class="text-sm text-gray-400">
|
||||
Save multiple Nostr profiles so you can swap identities without leaving BitVid.
|
||||
</p>
|
||||
</div>
|
||||
<span class="profile-switcher__badge">Preview</span>
|
||||
<span class="badge" data-variant="info">Preview</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="profile-card profile-card--active"
|
||||
class="card focus-ring flex items-center gap-4 p-4"
|
||||
aria-label="Current Nostr profile"
|
||||
aria-pressed="true"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
data-state="active"
|
||||
>
|
||||
<span class="profile-card__avatar">
|
||||
<span
|
||||
class="flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-blue-400/50 bg-slate-900"
|
||||
>
|
||||
<img
|
||||
id="profileModalAvatar"
|
||||
src="assets/svg/default-profile.svg"
|
||||
alt="Active profile avatar"
|
||||
class="h-full w-full object-cover"
|
||||
/>
|
||||
</span>
|
||||
<span class="profile-card__meta">
|
||||
<span class="profile-card__topline">
|
||||
<span class="profile-card__label">Active profile</span>
|
||||
<div class="flex min-w-0 flex-1 flex-col gap-2">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200">
|
||||
Active profile
|
||||
</span>
|
||||
<a
|
||||
id="profileChannelLink"
|
||||
href="#"
|
||||
class="profile-card__action hidden"
|
||||
class="btn-ghost focus-ring hidden text-xs"
|
||||
>
|
||||
View channel
|
||||
</a>
|
||||
</span>
|
||||
<span id="profileModalName" class="profile-card__name">Loading...</span>
|
||||
<span id="profileModalNpub" class="profile-card__npub">npub1...</span>
|
||||
</span>
|
||||
</div>
|
||||
<span id="profileModalName" class="truncate text-sm font-semibold text-white">Loading...</span>
|
||||
<span id="profileModalNpub" class="break-all font-mono text-xs text-gray-400">npub1...</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="profileSwitcherList"
|
||||
class="profile-switcher__list"
|
||||
class="grid-stack"
|
||||
aria-live="polite"
|
||||
aria-label="Additional Nostr profiles"
|
||||
role="list"
|
||||
data-orientation="vertical"
|
||||
></div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
id="profileAddAccountBtn"
|
||||
class="profile-switcher__add"
|
||||
class="btn focus-ring w-full justify-start gap-4 p-4"
|
||||
aria-label="Add a new Nostr profile"
|
||||
>
|
||||
<span class="profile-switcher__addAvatar">
|
||||
<span
|
||||
class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500/20 text-blue-400"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
@@ -179,19 +191,18 @@
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<line x1="12" y1="5" x2="12" y2="19" />
|
||||
<line x1="5" y1="12" x2="19" y2="12" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="profile-switcher__addCopy">
|
||||
<span class="profile-switcher__addTitle">Add profile</span>
|
||||
<span class="profile-switcher__addHint">Link another npub</span>
|
||||
<span class="flex flex-col text-left">
|
||||
<span data-profile-add-title class="text-sm font-semibold text-white">Add profile</span>
|
||||
<span data-profile-add-hint class="text-xs text-gray-300">Link another npub</span>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<p class="profile-switcher__helper">
|
||||
<p class="text-sm text-gray-400">
|
||||
Profiles you add here will stay on this device so you can quickly switch before posting or moderating.
|
||||
</p>
|
||||
</div>
|
||||
@@ -221,21 +232,21 @@
|
||||
<button
|
||||
id="addRelayBtn"
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
>
|
||||
Add relay
|
||||
</button>
|
||||
<button
|
||||
id="restoreRelaysBtn"
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-md bg-gray-800 text-sm font-medium text-gray-200 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring"
|
||||
>
|
||||
Restore defaults
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul id="relayList" class="space-y-3"></ul>
|
||||
<ul id="relayList" class="grid-stack" data-orientation="vertical"></ul>
|
||||
</section>
|
||||
|
||||
<section
|
||||
@@ -275,21 +286,22 @@
|
||||
<button
|
||||
id="profileWalletSave"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
>
|
||||
Save wallet
|
||||
</button>
|
||||
<button
|
||||
id="profileWalletTest"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200 transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring"
|
||||
>
|
||||
Test connection
|
||||
</button>
|
||||
<button
|
||||
id="profileWalletDisconnect"
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center rounded-md bg-red-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-red-500 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
data-variant="danger"
|
||||
>
|
||||
Disconnect wallet
|
||||
</button>
|
||||
@@ -328,18 +340,18 @@
|
||||
<button
|
||||
id="addBlockedBtn"
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
>
|
||||
Block creator
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="blockedEmpty"
|
||||
class="rounded-lg border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
|
||||
class="card border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
|
||||
>
|
||||
You haven’t blocked any creators yet.
|
||||
</div>
|
||||
<ul id="blockedList" class="space-y-3"></ul>
|
||||
<ul id="blockedList" class="grid-stack" data-orientation="vertical"></ul>
|
||||
</section>
|
||||
<section
|
||||
id="profilePaneHistory"
|
||||
@@ -352,7 +364,7 @@
|
||||
</p>
|
||||
<div
|
||||
id="profileHistoryFeatureBanner"
|
||||
class="hidden rounded-md border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-100"
|
||||
class="card hidden border border-amber-500/40 bg-amber-500/10 px-4 py-3 text-sm text-amber-100"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
></div>
|
||||
@@ -366,14 +378,14 @@
|
||||
<button
|
||||
id="profileHistoryClear"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-md bg-gray-800 px-4 py-2 text-sm font-medium text-gray-200 transition hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn-ghost focus-ring inline-flex items-center gap-2"
|
||||
>
|
||||
Clear local cache
|
||||
</button>
|
||||
<button
|
||||
id="profileHistoryRepublish"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring inline-flex items-center gap-2"
|
||||
>
|
||||
Republish now
|
||||
</button>
|
||||
@@ -396,7 +408,7 @@
|
||||
<button
|
||||
id="profileHistoryMetadataToggle"
|
||||
type="button"
|
||||
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="focus-ring relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border border-gray-600 bg-gray-700 transition"
|
||||
role="switch"
|
||||
aria-checked="true"
|
||||
aria-labelledby="profileHistoryMetadataLabel"
|
||||
@@ -446,20 +458,22 @@
|
||||
</div>
|
||||
<div
|
||||
id="profileHistoryError"
|
||||
class="hidden rounded-md border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
|
||||
class="card hidden border border-red-500/40 bg-red-500/10 px-4 py-3 text-sm text-red-100"
|
||||
role="alert"
|
||||
aria-live="assertive"
|
||||
></div>
|
||||
<div
|
||||
id="profileHistoryEmpty"
|
||||
class="hidden rounded-lg border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
|
||||
class="card hidden border border-dashed border-gray-700 p-6 text-center text-sm text-gray-400"
|
||||
>
|
||||
You haven’t watched any videos yet.
|
||||
</div>
|
||||
<div id="profileHistoryScroll" class="relative max-h-[420px] overflow-y-auto pr-1">
|
||||
<div
|
||||
id="profileHistoryGrid"
|
||||
class="watch-history-grid watch-history-grid--modal hidden"
|
||||
class="grid-stack hidden"
|
||||
data-variant="cards"
|
||||
data-orientation="vertical"
|
||||
role="list"
|
||||
></div>
|
||||
<div id="profileHistorySentinel" class="h-1 w-full"></div>
|
||||
@@ -504,18 +518,18 @@
|
||||
<button
|
||||
id="adminAddModeratorBtn"
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
>
|
||||
Add moderator
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="adminModeratorsEmpty"
|
||||
class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
|
||||
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
|
||||
>
|
||||
No moderators configured yet.
|
||||
</div>
|
||||
<ul id="adminModeratorList" class="space-y-3"></ul>
|
||||
<ul id="adminModeratorList" class="grid-stack" data-orientation="vertical"></ul>
|
||||
</div>
|
||||
|
||||
<div id="adminWhitelistSection" class="space-y-4">
|
||||
@@ -540,18 +554,18 @@
|
||||
<button
|
||||
id="adminAddWhitelistBtn"
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
>
|
||||
Add to whitelist
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="adminWhitelistEmpty"
|
||||
class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
|
||||
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
|
||||
>
|
||||
No whitelisted creators yet.
|
||||
</div>
|
||||
<ul id="adminWhitelistList" class="space-y-3"></ul>
|
||||
<ul id="adminWhitelistList" class="grid-stack" data-orientation="vertical"></ul>
|
||||
</div>
|
||||
|
||||
<div id="adminBlacklistSection" class="space-y-4">
|
||||
@@ -576,18 +590,18 @@
|
||||
<button
|
||||
id="adminAddBlacklistBtn"
|
||||
type="button"
|
||||
class="px-4 py-2 rounded-md bg-blue-600 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
class="btn focus-ring"
|
||||
>
|
||||
Add to blacklist
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="adminBlacklistEmpty"
|
||||
class="rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
|
||||
class="card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400"
|
||||
>
|
||||
No blacklisted creators yet.
|
||||
</div>
|
||||
<ul id="adminBlacklistList" class="space-y-3"></ul>
|
||||
<ul id="adminBlacklistList" class="grid-stack" data-orientation="vertical"></ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@@ -595,11 +609,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Modal Footer -->
|
||||
<div class="p-4 border-t border-gray-700 flex items-center justify-end">
|
||||
<button
|
||||
id="profileLogoutBtn"
|
||||
class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-gray-900"
|
||||
>
|
||||
<div class="flex items-center justify-end gap-3 border-t border-gray-700 p-4">
|
||||
<button id="profileLogoutBtn" class="btn focus-ring" data-variant="danger">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -1655,8 +1655,8 @@ class Application {
|
||||
return;
|
||||
}
|
||||
|
||||
const titleEl = button.querySelector(".profile-switcher__addTitle");
|
||||
const hintEl = button.querySelector(".profile-switcher__addHint");
|
||||
const titleEl = button.querySelector('[data-profile-add-title]');
|
||||
const hintEl = button.querySelector('[data-profile-add-hint]');
|
||||
const originalTitle = titleEl ? titleEl.textContent : "";
|
||||
const originalHint = hintEl ? hintEl.textContent : "";
|
||||
const originalAriaLabel = button.getAttribute("aria-label");
|
||||
|
||||
+26
-19
@@ -345,14 +345,16 @@ export function buildHistoryCard({
|
||||
metadataPreference,
|
||||
}) {
|
||||
const article = document.createElement("article");
|
||||
article.className = "watch-history-card";
|
||||
article.className = "card flex flex-wrap items-stretch gap-6 p-5";
|
||||
article.dataset.pointerKey = item.pointerKey;
|
||||
if (video?.isPrivate) {
|
||||
article.classList.add("watch-history-card--private");
|
||||
article.dataset.state = "private";
|
||||
} else {
|
||||
delete article.dataset.state;
|
||||
}
|
||||
|
||||
const primary = document.createElement("div");
|
||||
primary.className = "watch-history-card__primary";
|
||||
primary.className = "flex min-w-0 flex-1 gap-4";
|
||||
|
||||
const playbackData = (() => {
|
||||
if (!video) {
|
||||
@@ -371,7 +373,8 @@ export function buildHistoryCard({
|
||||
const pointerVideoId = getPointerVideoId(video, item.pointer);
|
||||
|
||||
const thumbnailLink = document.createElement("a");
|
||||
thumbnailLink.className = "watch-history-card__thumbnail";
|
||||
thumbnailLink.className =
|
||||
"focus-ring block max-w-[14rem] flex-shrink-0 overflow-hidden rounded-lg bg-slate-900 transition hover:opacity-90";
|
||||
thumbnailLink.href = "#";
|
||||
thumbnailLink.dataset.historyAction = "play";
|
||||
thumbnailLink.dataset.pointerKey = item.pointerKey;
|
||||
@@ -386,8 +389,9 @@ export function buildHistoryCard({
|
||||
}
|
||||
|
||||
const thumbnailInner = document.createElement("div");
|
||||
thumbnailInner.className = "watch-history-card__thumbnailInner";
|
||||
thumbnailInner.className = "aspect-video w-full overflow-hidden rounded-lg bg-slate-900";
|
||||
const thumbnailImg = document.createElement("img");
|
||||
thumbnailImg.className = "h-full w-full object-cover";
|
||||
thumbnailImg.alt = video?.title || "Video thumbnail";
|
||||
const thumbnailSrc =
|
||||
(video && typeof video.thumbnail === "string" && video.thumbnail.trim())
|
||||
@@ -400,10 +404,11 @@ export function buildHistoryCard({
|
||||
thumbnailLink.appendChild(thumbnailInner);
|
||||
|
||||
const details = document.createElement("div");
|
||||
details.className = "watch-history-card__details";
|
||||
details.className = "flex min-w-0 flex-col justify-center gap-2";
|
||||
|
||||
const titleLink = document.createElement("a");
|
||||
titleLink.className = "watch-history-card__title";
|
||||
titleLink.className =
|
||||
"focus-ring text-left text-lg font-semibold text-white transition hover:text-blue-400";
|
||||
titleLink.href = "#";
|
||||
titleLink.dataset.historyAction = "play";
|
||||
titleLink.dataset.pointerKey = item.pointerKey;
|
||||
@@ -419,7 +424,7 @@ export function buildHistoryCard({
|
||||
titleLink.textContent = video?.title || "Untitled video";
|
||||
|
||||
const created = document.createElement("p");
|
||||
created.className = "watch-history-card__created";
|
||||
created.className = "text-sm text-gray-400";
|
||||
const createdAt = Number.isFinite(video?.created_at) ? video.created_at : null;
|
||||
created.textContent = createdAt
|
||||
? `Published ${formatRelativeTime(createdAt)}`
|
||||
@@ -432,27 +437,29 @@ export function buildHistoryCard({
|
||||
primary.appendChild(details);
|
||||
|
||||
const meta = document.createElement("div");
|
||||
meta.className = "watch-history-card__meta";
|
||||
meta.className = "flex min-w-[14rem] flex-col justify-between gap-4";
|
||||
|
||||
const watched = document.createElement("p");
|
||||
watched.className = "watch-history-card__watched";
|
||||
watched.className = "text-sm text-gray-500";
|
||||
watched.textContent = item.watchedAt
|
||||
? `Watched ${formatRelativeTime(item.watchedAt)}`
|
||||
: "Watched time unavailable";
|
||||
meta.appendChild(watched);
|
||||
|
||||
const creator = document.createElement("div");
|
||||
creator.className = "watch-history-card__creator";
|
||||
creator.className = "flex items-center gap-3";
|
||||
|
||||
const creatorAvatarButton = document.createElement("button");
|
||||
creatorAvatarButton.type = "button";
|
||||
creatorAvatarButton.className = "watch-history-card__creatorAvatar";
|
||||
creatorAvatarButton.className =
|
||||
"focus-ring flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-800";
|
||||
creatorAvatarButton.dataset.historyAction = "channel";
|
||||
creatorAvatarButton.dataset.pointerKey = item.pointerKey;
|
||||
if (video?.pubkey) {
|
||||
creatorAvatarButton.dataset.author = video.pubkey;
|
||||
}
|
||||
const avatarImg = document.createElement("img");
|
||||
avatarImg.className = "h-full w-full object-cover";
|
||||
const avatarSrc =
|
||||
(profile && typeof profile.picture === "string" && profile.picture.trim())
|
||||
? profile.picture.trim()
|
||||
@@ -463,7 +470,8 @@ export function buildHistoryCard({
|
||||
|
||||
const creatorNameButton = document.createElement("button");
|
||||
creatorNameButton.type = "button";
|
||||
creatorNameButton.className = "watch-history-card__creatorName";
|
||||
creatorNameButton.className =
|
||||
"focus-ring text-left text-sm font-medium text-gray-200 transition hover:text-blue-400";
|
||||
creatorNameButton.dataset.historyAction = "channel";
|
||||
creatorNameButton.dataset.pointerKey = item.pointerKey;
|
||||
if (video?.pubkey) {
|
||||
@@ -483,12 +491,11 @@ export function buildHistoryCard({
|
||||
meta.appendChild(creator);
|
||||
|
||||
const actions = document.createElement("div");
|
||||
actions.className = "watch-history-card__actions";
|
||||
actions.className = "flex flex-wrap items-center gap-3";
|
||||
|
||||
const playButton = document.createElement("button");
|
||||
playButton.type = "button";
|
||||
playButton.className =
|
||||
"watch-history-card__action watch-history-card__action--primary";
|
||||
playButton.className = "btn focus-ring";
|
||||
playButton.dataset.historyAction = "play";
|
||||
playButton.dataset.pointerKey = item.pointerKey;
|
||||
if (pointerVideoId) {
|
||||
@@ -504,7 +511,7 @@ export function buildHistoryCard({
|
||||
|
||||
const channelButton = document.createElement("button");
|
||||
channelButton.type = "button";
|
||||
channelButton.className = "watch-history-card__action";
|
||||
channelButton.className = "btn-ghost focus-ring";
|
||||
channelButton.dataset.historyAction = "channel";
|
||||
channelButton.dataset.pointerKey = item.pointerKey;
|
||||
if (video?.pubkey) {
|
||||
@@ -514,8 +521,8 @@ export function buildHistoryCard({
|
||||
|
||||
const removeButton = document.createElement("button");
|
||||
removeButton.type = "button";
|
||||
removeButton.className =
|
||||
"watch-history-card__action watch-history-card__action--danger";
|
||||
removeButton.className = "btn-ghost focus-ring";
|
||||
removeButton.dataset.variant = "danger";
|
||||
removeButton.dataset.historyAction = "remove";
|
||||
removeButton.dataset.pointerKey = item.pointerKey;
|
||||
removeButton.textContent = "Remove from history";
|
||||
|
||||
@@ -1258,7 +1258,7 @@ export class ProfileModalController {
|
||||
if (!entriesToRender.length) {
|
||||
listEl.setAttribute("data-profile-switcher-empty", "true");
|
||||
const helper = document.createElement("p");
|
||||
helper.className = "profile-switcher__empty text-sm text-gray-400";
|
||||
helper.className = "text-sm text-gray-400";
|
||||
helper.textContent = "No other profiles saved yet.";
|
||||
helper.setAttribute("role", "note");
|
||||
listEl.appendChild(helper);
|
||||
@@ -1269,7 +1269,8 @@ export class ProfileModalController {
|
||||
const meta = resolveMeta(entry);
|
||||
const button = document.createElement("button");
|
||||
button.type = "button";
|
||||
button.classList.add("profile-card");
|
||||
button.className =
|
||||
"card focus-ring flex w-full items-center gap-4 p-4 text-left transition";
|
||||
button.dataset.pubkey = entry.pubkey;
|
||||
if (meta.npub) {
|
||||
button.dataset.npub = meta.npub;
|
||||
@@ -1282,15 +1283,19 @@ export class ProfileModalController {
|
||||
const isSelected =
|
||||
normalizedSelection && normalizedPubkey === normalizedSelection;
|
||||
if (isSelected) {
|
||||
button.classList.add("profile-card--active");
|
||||
button.dataset.state = "active";
|
||||
button.classList.add("ring-1", "ring-blue-400/60", "bg-blue-500/10");
|
||||
button.setAttribute("aria-pressed", "true");
|
||||
} else {
|
||||
delete button.dataset.state;
|
||||
button.setAttribute("aria-pressed", "false");
|
||||
}
|
||||
|
||||
const avatarSpan = document.createElement("span");
|
||||
avatarSpan.className = "profile-card__avatar";
|
||||
avatarSpan.className =
|
||||
"flex h-12 w-12 flex-shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-slate-500/50 bg-slate-900";
|
||||
const avatarImg = document.createElement("img");
|
||||
avatarImg.className = "h-full w-full object-cover";
|
||||
avatarImg.src = meta.picture || FALLBACK_PROFILE_AVATAR;
|
||||
const cardDisplayName =
|
||||
meta.name?.trim() ||
|
||||
@@ -1298,30 +1303,31 @@ export class ProfileModalController {
|
||||
avatarImg.alt = `${cardDisplayName} avatar`;
|
||||
avatarSpan.appendChild(avatarImg);
|
||||
|
||||
const metaSpan = document.createElement("span");
|
||||
metaSpan.className = "profile-card__meta";
|
||||
const metaSpan = document.createElement("div");
|
||||
metaSpan.className = "flex min-w-0 flex-1 flex-col gap-2";
|
||||
|
||||
const topLine = document.createElement("span");
|
||||
topLine.className = "profile-card__topline";
|
||||
const topLine = document.createElement("div");
|
||||
topLine.className = "flex flex-wrap items-center gap-3";
|
||||
|
||||
const label = document.createElement("span");
|
||||
label.className = "profile-card__label";
|
||||
label.className =
|
||||
"text-[11px] font-semibold uppercase tracking-[0.2em] text-blue-200";
|
||||
label.textContent =
|
||||
entry.authType === "nsec" ? "Direct key" : "Saved profile";
|
||||
|
||||
const action = document.createElement("span");
|
||||
action.className = "profile-card__action";
|
||||
action.className = "text-xs font-medium text-gray-400";
|
||||
action.setAttribute("aria-hidden", "true");
|
||||
action.textContent = isSelected ? "Selected" : "Switch";
|
||||
|
||||
topLine.append(label, action);
|
||||
|
||||
const nameSpan = document.createElement("span");
|
||||
nameSpan.className = "profile-card__name";
|
||||
nameSpan.className = "truncate text-sm font-semibold text-white";
|
||||
nameSpan.textContent = cardDisplayName;
|
||||
|
||||
const npubSpan = document.createElement("span");
|
||||
npubSpan.className = "profile-card__npub";
|
||||
npubSpan.className = "break-all font-mono text-xs text-gray-400";
|
||||
npubSpan.textContent = meta.npub
|
||||
? truncate(meta.npub, 48)
|
||||
: "npub unavailable";
|
||||
@@ -1424,9 +1430,11 @@ export class ProfileModalController {
|
||||
}
|
||||
const isActive = key === target;
|
||||
button.setAttribute("aria-selected", isActive ? "true" : "false");
|
||||
button.classList.toggle("bg-gray-800", isActive);
|
||||
button.classList.toggle("text-white", isActive);
|
||||
button.classList.toggle("text-gray-400", !isActive);
|
||||
if (isActive) {
|
||||
button.dataset.state = "active";
|
||||
} else {
|
||||
delete button.dataset.state;
|
||||
}
|
||||
});
|
||||
|
||||
this.setActivePane(target);
|
||||
@@ -1483,7 +1491,7 @@ export class ProfileModalController {
|
||||
if (!relays.length) {
|
||||
const emptyState = document.createElement("li");
|
||||
emptyState.className =
|
||||
"rounded-lg border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400";
|
||||
"card border border-dashed border-gray-700 p-4 text-center text-sm text-gray-400";
|
||||
emptyState.textContent = "No relays configured.";
|
||||
this.relayList.appendChild(emptyState);
|
||||
return;
|
||||
@@ -1492,7 +1500,7 @@ export class ProfileModalController {
|
||||
relays.forEach((entry) => {
|
||||
const item = document.createElement("li");
|
||||
item.className =
|
||||
"flex items-start justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
|
||||
"card flex items-start justify-between gap-4 p-4";
|
||||
|
||||
const info = document.createElement("div");
|
||||
info.className = "flex-1 min-w-0";
|
||||
@@ -1519,8 +1527,7 @@ export class ProfileModalController {
|
||||
|
||||
const editBtn = document.createElement("button");
|
||||
editBtn.type = "button";
|
||||
editBtn.className =
|
||||
"px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
|
||||
editBtn.className = "btn-ghost focus-ring text-xs";
|
||||
editBtn.textContent = "Change mode";
|
||||
editBtn.title = "Cycle between read-only, write-only, or read/write modes.";
|
||||
editBtn.addEventListener("click", () => {
|
||||
@@ -1529,8 +1536,8 @@ export class ProfileModalController {
|
||||
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.type = "button";
|
||||
removeBtn.className =
|
||||
"px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
|
||||
removeBtn.className = "btn-ghost focus-ring text-xs";
|
||||
removeBtn.dataset.variant = "danger";
|
||||
removeBtn.textContent = "Remove";
|
||||
removeBtn.addEventListener("click", () => {
|
||||
void this.handleRemoveRelay(entry.url);
|
||||
@@ -1838,21 +1845,21 @@ export class ProfileModalController {
|
||||
deduped.forEach(({ hex, label }) => {
|
||||
const item = document.createElement("li");
|
||||
item.className =
|
||||
"flex items-center justify-between gap-4 rounded-lg bg-gray-800 px-4 py-3";
|
||||
"card flex items-center justify-between gap-4 p-4";
|
||||
|
||||
const info = document.createElement("div");
|
||||
info.className = "min-w-0";
|
||||
info.className = "min-w-0 flex-1";
|
||||
|
||||
const title = document.createElement("p");
|
||||
title.className = "text-sm font-medium text-gray-100 break-all";
|
||||
title.className = "break-all text-sm font-medium text-gray-100";
|
||||
title.textContent = label;
|
||||
|
||||
info.appendChild(title);
|
||||
|
||||
const actionBtn = document.createElement("button");
|
||||
actionBtn.type = "button";
|
||||
actionBtn.className =
|
||||
"px-3 py-1 rounded-md bg-gray-700 text-xs font-medium text-gray-100 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
|
||||
actionBtn.className = "btn-ghost focus-ring text-xs";
|
||||
actionBtn.dataset.variant = "danger";
|
||||
actionBtn.textContent = "Remove";
|
||||
actionBtn.dataset.blockedHex = hex;
|
||||
actionBtn.addEventListener("click", () => {
|
||||
@@ -2618,18 +2625,17 @@ export class ProfileModalController {
|
||||
values.forEach((npub) => {
|
||||
const item = document.createElement("li");
|
||||
item.className =
|
||||
"flex flex-col gap-2 rounded-lg bg-gray-800 px-4 py-3 sm:flex-row sm:items-center sm:justify-between";
|
||||
"card flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between";
|
||||
|
||||
const label = document.createElement("p");
|
||||
label.className = "text-sm font-medium text-gray-100 break-all";
|
||||
label.className = "break-all text-sm font-medium text-gray-100";
|
||||
label.textContent = npub;
|
||||
item.appendChild(label);
|
||||
|
||||
if (removable && typeof onRemove === "function") {
|
||||
const removeBtn = document.createElement("button");
|
||||
removeBtn.type = "button";
|
||||
removeBtn.className =
|
||||
"self-start rounded-md bg-gray-700 px-3 py-1 text-xs font-medium text-gray-100 transition hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2 focus:ring-offset-gray-900";
|
||||
removeBtn.className = "btn-ghost focus-ring text-xs";
|
||||
removeBtn.textContent = removeLabel;
|
||||
removeBtn.addEventListener("click", () => {
|
||||
if (confirmMessage) {
|
||||
@@ -2759,7 +2765,7 @@ export class ProfileModalController {
|
||||
this.setAdminLoading(false);
|
||||
if (
|
||||
adminNav instanceof HTMLElement &&
|
||||
adminNav.classList.contains("bg-gray-800")
|
||||
adminNav.dataset.state === "active"
|
||||
) {
|
||||
this.selectPane("account");
|
||||
}
|
||||
|
||||
+6
-1
@@ -88,7 +88,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="watchHistoryGrid" class="watch-history-grid hidden"></div>
|
||||
<div
|
||||
id="watchHistoryGrid"
|
||||
class="grid-stack hidden"
|
||||
data-variant="cards"
|
||||
data-orientation="vertical"
|
||||
></div>
|
||||
<p id="watchHistoryEmpty" class="hidden text-gray-400 text-center py-12">
|
||||
Your watch history is empty. Watch some videos to populate this list.
|
||||
</p>
|
||||
|
||||
Reference in new issue
Block a user