cesnimda
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import React, { useEffect, useRef } from "react";
|
|
|
|
import { Box, TextField, Typography } from "@mui/material";
|
|
import { PageSection } from "../layout/PageLayout";
|
|
|
|
import { useI18n } from "../i18n/I18nProvider";
|
|
import { useToast } from "../toast";
|
|
|
|
/** The bookmarklet opens the app at /?add=<current page url>, which triggers quick-capture. */
|
|
function buildBookmarklet(origin: string): string {
|
|
// Kept as a single minified expression; opens a small popup so the user's tab is undisturbed.
|
|
return `javascript:void(window.open('${origin}/?add='+encodeURIComponent(location.href),'jobbjakt','width=520,height=720'))`;
|
|
}
|
|
|
|
export default function QuickCaptureCard() {
|
|
const { t } = useI18n();
|
|
const { toast } = useToast();
|
|
const linkRef = useRef<HTMLAnchorElement>(null);
|
|
const origin = typeof window !== "undefined" ? window.location.origin : "";
|
|
const bookmarklet = buildBookmarklet(origin);
|
|
|
|
// React refuses to render javascript: hrefs, so set it directly on the DOM node.
|
|
useEffect(() => {
|
|
if (linkRef.current) linkRef.current.setAttribute("href", bookmarklet);
|
|
}, [bookmarklet]);
|
|
|
|
return (
|
|
<PageSection surface title={t("settingsQuickCaptureTitle")} description={t("settingsQuickCaptureSubtitle")}>
|
|
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 1.5, flexWrap: "wrap", mb: 1.5 }}>
|
|
<Box
|
|
component="a"
|
|
ref={linkRef}
|
|
onClick={(e: React.MouseEvent) => {
|
|
// Clicking (vs dragging) shouldn't navigate; the value is meant to be dragged to the bar.
|
|
e.preventDefault();
|
|
toast(t("settingsQuickCaptureDragHint"), "info");
|
|
}}
|
|
sx={{
|
|
display: "inline-block",
|
|
px: 2,
|
|
py: 1,
|
|
borderRadius: 2,
|
|
border: "1px solid",
|
|
borderColor: "primary.main",
|
|
color: "primary.main",
|
|
fontWeight: 800,
|
|
textDecoration: "none",
|
|
cursor: "grab",
|
|
userSelect: "none",
|
|
}}
|
|
>
|
|
{t("settingsQuickCaptureButton")}
|
|
</Box>
|
|
<Typography variant="body2" sx={{ color: "text.secondary" }}>{t("settingsQuickCaptureDragHint")}</Typography>
|
|
</Box>
|
|
|
|
<TextField
|
|
label={t("settingsQuickCaptureManual")}
|
|
value={bookmarklet}
|
|
fullWidth
|
|
size="small"
|
|
InputProps={{ readOnly: true }}
|
|
onFocus={(e) => e.target.select()}
|
|
/>
|
|
</PageSection>
|
|
);
|
|
}
|