Bugfixes

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "build:assets": "cpx \"src/**/*.{json,png,svg}\" dist/",
     "watch:assets": "cpx --watch -v \"src/**/*.{json,png,svg}\" dist/",
-    "build:parcel": "cross-env NODE_ENV=production parcel build --no-source-maps --no-minify \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\"",
-    "watch:parcel": "parcel watch --no-hmr --no-source-maps \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\"",
+    "build:parcel": "cross-env NODE_ENV=production parcel build --no-source-maps --no-minify \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\" \"src/**/*.md\"",
+    "watch:parcel": "parcel watch --no-hmr --no-source-maps \"src/**/*.{js,jsx,ts,tsx}\" \"src/**/*.html\" \"src/**/*.md\"",
     "build:webext": "web-ext build --source-dir ./dist --overwrite-dest",
     "build": "npm-run-all -l -p build:parcel build:assets",
     "watch": "npm-run-all -l -p watch:parcel watch:assets",

src/assets/styles/common.css

@@ -9,8 +9,8 @@
     --gradient-animation: gradient-animation 5s linear infinite alternate;
 }
 
-:root {
-    font-size: .95rem;
+body {
+    font-size: .75rem;
     font-family: Arial, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
     letter-spacing: .2ch;
 }
@@ -59,13 +59,17 @@ h6 {
     margin: 0;
 }
 
+pre {
+    margin: 0;
+    white-space: break-spaces;
+}
+
 .options {
     display: grid;
     width: 100%;
     grid-template-columns: repeat(auto-fit, minmax(3em, 1fr));
     justify-content: center;
     gap: .25em;
-    padding: 0 1.5em;
 }
 
 .button {
@@ -81,7 +85,8 @@ h6 {
     border-radius: .5em;
     border: unset;
 
-    font-size: inherit;
+    font: inherit;
+    cursor: pointer;
 }
 
 .button.active {

src/components/dialogs.tsx

@@ -0,0 +1,146 @@
+import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+
+type Message = string
+type Alert = { type: 'alert' | 'prompt' | 'confirm', message: Message, resolve: (data: string | boolean | null) => void }
+export type DialogManager = ReturnType<typeof createDialogManager>
+
+export function createDialogManager() {
+    const [alerts, setAlerts] = useState({} as Record<string, Alert>)
+    const id = crypto.randomUUID()
+
+    function add(alert: Alert) {
+        setAlerts({ ...alerts, alert })
+    }
+    function remove() {
+        delete alerts[id]
+        setAlerts({ ...alerts })
+    }
+
+    return {
+        useAlerts() { return alerts },
+        async alert(message: Message) {
+            return await new Promise<void>((resolve) => add({
+                message, type: 'alert', resolve: () => {
+                    resolve()
+                    remove()
+                }
+            }))
+        },
+        async prompt(message: Message) {
+            return await new Promise<string | null>((resolve) => add({
+                message, type: 'prompt', resolve: (data) => {
+                    resolve(data?.toString() ?? null)
+                    remove()
+                }
+            }))
+        },
+        async confirm(message: Message) {
+            return await new Promise<boolean>((resolve) => add({
+                message, type: 'confirm', resolve: (data) => {
+                    resolve(!!data)
+                    remove()
+                }
+            }))
+        }
+    }
+}
+
+interface DialogElement extends HTMLDivElement {
+    open: boolean
+    showModal(): void
+}
+
+export function Dialogs(params: { manager: ReturnType<typeof createDialogManager> }) {
+    const alerts = params.manager.useAlerts()
+    let currentAlert = Object.values(alerts)[0]
+    if (!currentAlert) return <noscript></noscript>
+
+    const [value, setValue] = useState(null as Parameters<typeof currentAlert['resolve']>[0])
+
+    let cancelled = false
+
+    const dialog = useRef(null as any as DialogElement)
+    useEffect(() => {
+        if (!dialog.current) return
+        if (!dialog.current.open) dialog.current.showModal()
+        const onClose = () => currentAlert.resolve(null)
+        dialog.current.addEventListener('close', onClose)
+        return dialog.current.removeEventListener('close', onClose)
+    })
+    return <dialog class="alert-dialog" ref={dialog}>
+        <style>
+            {`
+.alert-dialog
+{
+    border: none;
+    background: var(--color-dark);
+    color: var(--color-light);
+    margin-bottom: 0;
+    width: 100%;
+    max-width: unset;
+    padding: 1.5em;
+}
+
+.alert-dialog::before {
+    content: "";
+    display: block;
+    background: var(--color-gradient-0);
+    height: 0.1em;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.alert-dialog form {
+    display: grid;
+    gap: 2em
+}
+
+.alert-dialog form .fields {
+    display: grid;
+    gap: .5em
+}
+
+.alert-dialog form .fields pre {
+    font: inherit;
+}
+
+.alert-dialog form .actions {
+    display: flex;
+    gap: .5em;
+    font-size: 1.1em;
+    font-weight: bold;
+}
+
+.alert-dialog form .actions::before {
+    content: "";
+    flex-grow: 1111111111111;
+}`}
+        </style>
+        <form method='dialog' onSubmit={(event) => {
+            event.preventDefault()
+            currentAlert.resolve(cancelled ? null : currentAlert.type === 'confirm' ? true : value)
+        }}>
+            <div class="fields">
+                <pre>{currentAlert.message}</pre>
+                {currentAlert.type === 'prompt' && <input type='text' onInput={(event) => setValue(event.currentTarget.value)} />}
+            </div>
+            <div class="actions">
+                {/* This is here to capture, return key */}
+                <button style="position:0;opacity:0;pointer-events:none"></button>
+
+                {currentAlert.type !== 'alert' && <button className='button' onClick={() => cancelled = true}>Cancel</button>}
+                <button className='button active'>
+                    {
+                        currentAlert.type === 'alert' ? 'Ok'
+                            : currentAlert.type === 'confirm' ? 'Confirm'
+                                : currentAlert.type === 'prompt' ? 'Apply'
+                                    : 'Ok'
+                    }
+                </button>
+            </div>
+        </form>
+    </dialog>
+}

src/manifest.json

@@ -43,6 +43,7 @@
   "web_accessible_resources": [
     "pages/popup/index.html",
     "pages/YTtoLBRY/index.html",
+    "pages/import/index.html",
     "assets/icons/lbry/lbry-logo.svg",
     "assets/icons/lbry/odysee-logo.svg",
     "assets/icons/lbry/madiator-logo.svg"