+
+ ) : !context || !postType ? (
+ {contextError}
+
+ {context ? "Your role can't create or edit content on this site." : "Loading…"}
+ ) : view.kind === "editor" ? (
+
+
+ {sites.length === 0 ? (
+ void leaveEditor()}
+ />
+ ) : (
+
+ {adding && (
+ {
+ setAuthError(null);
+ setWaitingForBrowser(true);
+ }}
+ onAdded={onSiteAdded}
+ onCancel={() => setAdding(false)}
+ />
+ )}
+
+ );
+}
+
+function Welcome({ onAdd, platform }: { onAdd: () => void; platform: Platform }) {
+ return (
+
+
+ );
+}
diff --git a/src/components/AddSiteSheet.tsx b/src/components/AddSiteSheet.tsx
new file mode 100644
index 0000000..07a9523
--- /dev/null
+++ b/src/components/AddSiteSheet.tsx
@@ -0,0 +1,202 @@
+import { useEffect, useRef, useState } from "react";
+import { api, errorMessage, type SiteDiscovery, type SiteSummary } from "../lib/api";
+import { hostOf } from "../lib/format";
+import { Icon } from "./Icon";
+
+interface Props {
+ waitingForBrowser: boolean;
+ authError: string | null;
+ onStartedAuthorization: () => void;
+ onAdded: (site: SiteSummary) => void;
+ onCancel: () => void;
+}
+
+type Step = "address" | "signin" | "manual";
+
+export function AddSiteSheet({ waitingForBrowser, authError, onStartedAuthorization, onAdded, onCancel }: Props) {
+ const [step, setStep] = useState
+
+ Welcome to WordPress Remote Editor
++ Write and publish on your WordPress sites with the full block editor, including blocks from your plugins. + Your sign-in is kept in the {platform === "macos" ? "macOS Keychain" : platform === "windows" ? "Windows Credential Manager" : "system keyring"}. +
+ + e.target === e.currentTarget && onCancel()}>
+
+ );
+}
diff --git a/src/components/EditorView.tsx b/src/components/EditorView.tsx
new file mode 100644
index 0000000..797812e
--- /dev/null
+++ b/src/components/EditorView.tsx
@@ -0,0 +1,145 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import { api, errorMessage, type Bounds, type EditorReport, type PostTypeAccess, type SiteContext } from "../lib/api";
+import { statusLabel } from "../lib/format";
+import { Icon } from "./Icon";
+
+interface Props {
+ context: SiteContext;
+ postType: PostTypeAccess;
+ postId: number | null;
+ report: EditorReport | null;
+ onBack: () => void;
+}
+
+type Device = "Desktop" | "Tablet" | "Mobile";
+
+function measure(el: HTMLElement): Bounds {
+ const r = el.getBoundingClientRect();
+ return { x: r.left, y: r.top, width: r.width, height: r.height };
+}
+
+/**
+ * Native toolbar plus a placeholder region. The Rust core places the site's
+ * block editor (a separate, isolated webview) exactly over the placeholder.
+ */
+export function EditorView({ context, postType, postId, report, onBack }: Props) {
+ const host = useRef
+
+ Add a WordPress Site
+ + {step === "address" && ( + + )} + + {step === "signin" && discovery && ( +
+
+ )}
+
+ {step === "manual" && (
+
+ )}
+
+
+ {waitingForBrowser ? (
+
+
+ {discovery.name}
+ {hostOf(discovery.siteUrl)}
+ + Approve WordPress Remote Editor in the sign-in window. This sheet updates when you're done. +
+ ) : ( ++ You'll sign in on your site and approve this app. WordPress creates an Application Password just for this app, which you can revoke from your profile at any time. +
+ )} + {error &&{error}
} +
+
+
+
+
+
+
+
+ {title}
+ {isEditor && (
+
+ {report?.saving ? "Saving…" : report?.dirty ? "Edited" : statusLabel(status)}
+
+ )}
+
+
+ {isEditor && (
+ <>
+
+
+
+
+
+ {(["Desktop", "Tablet", "Mobile"] as Device[]).map((d) => (
+
+ ))}
+
+ {report?.link && status === "publish" && (
+
+ )}
+
+ {!published && (
+
+ )}
+
+
+ )}
+
+ Sign in to {context.site.name} once below to open the editor.
+ {!context.site.bridgeAvailable && " Install the Remote Editor Bridge plugin on the site to skip this step."}
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+
+
+ Loading the block editor…
+ {postType.name}
+
+ {FILTERS.map((f) => (
+
+ ))}
+
+
+
+
+ {postType.canCreate && (
+
+ )}
+
+
+
+ )}
+
+ {error && (
+
+ {error}
+
+ )}
+
+
+ {items.map((p) => (
+
+ setSelected(p.id)}
+ onDoubleClick={() => p.canEdit && onOpen(p.id)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" && p.canEdit) onOpen(p.id);
+ }}
+ >
+
+ ))}
+
+ {!loading && items.length === 0 && !error && (
+
+
+ {p.title || (no title)}
+
+ {statusLabel(p.status)}
+ {relativeTime(p.modified)}
+
+
+ {p.link && p.status === "publish" && (
+
+ )}
+ {p.canEdit && postType.canDelete && (
+
+ )}
+ {p.canEdit && (
+
+ )}
+
+
+
+ )}
+
+ {loading && No {postType.name.toLowerCase()} here yet.
+ {postType.canCreate && ( + + )} +Loading…
}
+ {!loading && page < totalPages && (
+
+
+
+ )}
+