feat(files): download from anywhere — a link box, a pasted link, the palette; the running downloads in a tray
- Files toolbar link box (paste button, Enter); a lone http(s) link pasted onto any page opens the one app-wide download dialog, which now names the link; the palette's "Download from a link…" focuses the box on its history entry. - The download tray, bottom right on every page: what waits, runs, is paused or failed (reason + Retry, the queue's right-click / "…" menu), and what finished in this tab as "Done · Open" until closed; folds to a pill (per-account pref); closed, it stays shut — across a reload — until the work changes or something finishes. Back to top steps up over it, the page end keeps clear. - A finish is announced once: "Downloaded: …", whether a phone plays it, Copy link + Open (toasts and notices may carry a second action). - The inbox's ready notice opens the file in its folder: download_done carries job_id + folder_id. - GET /api/downloads is the queue only (in flight, failed, finished in the last 10 minutes), with each row's source key.
This commit is contained in:
@@ -4,7 +4,7 @@ import { ArrowUp } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Pressable } from "./Pressable";
|
||||
import { SURFACE } from "./surfaces";
|
||||
import { backToTopShown, useBackToTopShown } from "./backToTopState";
|
||||
import { backToTopShown, useBackToTopShown, useCornerLift } from "./backToTopState";
|
||||
|
||||
// A floating "back to top" button that fades in once the current page's scroll container is
|
||||
// scrolled past a threshold, and smooth-scrolls it back to the top. Every page scrolls inside a
|
||||
@@ -15,6 +15,8 @@ export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; thr
|
||||
const { t } = useTranslation();
|
||||
// Shared, not local: PageScroller keeps the page's end clear of the button while it is up.
|
||||
const show = useBackToTopShown();
|
||||
// Over the download tray when it is up: the tray's 1rem inset, its height, then a gap.
|
||||
const lift = useCornerLift();
|
||||
const scrollerRef = useRef<HTMLElement | null>(null);
|
||||
|
||||
// Listen on the document in the CAPTURE phase and read the scroller off the event, rather than
|
||||
@@ -63,6 +65,7 @@ export default function BackToTop({ dep, threshold = 600 }: { dep?: unknown; thr
|
||||
// Hidden, it only goes transparent (so it can fade): out of the Tab order as well.
|
||||
tabIndex={show ? undefined : -1}
|
||||
aria-hidden={show ? undefined : true}
|
||||
style={lift ? { bottom: `calc(${lift}px + 1.5rem)` } : undefined}
|
||||
className={`fixed bottom-5 right-5 z-chrome inline-flex items-center justify-center size-12 ${SURFACE.floating} glass-hover text-fg hover:text-accent transition-all duration-200 ${
|
||||
show ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"
|
||||
}`}
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
import { useScrollFade } from "../../lib/useScrollFade";
|
||||
import { FOCUS_REST_ATTRS, useFocusKeeper } from "../../lib/useFocusKeeper";
|
||||
import { StickyTopProvider } from "./stickyTop";
|
||||
import { useBackToTopShown } from "./backToTopState";
|
||||
import { useBackToTopShown, useCornerLift } from "./backToTopState";
|
||||
import { CONTENT_ID } from "./landmarks";
|
||||
import { ensureNavId, peekNavId, subscribeNav } from "../../lib/history";
|
||||
|
||||
@@ -139,6 +139,7 @@ export default function PageScroller({
|
||||
}, []);
|
||||
const { ref: fadeRef, style: fadeStyle } = useScrollFade(20, stickyTops === 0);
|
||||
const fabUp = useBackToTopShown();
|
||||
const cornerLift = useCornerLift();
|
||||
const elRef = useRef<HTMLElement | null>(null);
|
||||
// Stable identity: an inline ref callback changes every render, which makes React detach and
|
||||
// re-attach the ref each commit — and since fadeRef is a state setter, that re-attach loops it
|
||||
@@ -217,7 +218,15 @@ export default function PageScroller({
|
||||
{/* While Back to top floats over the corner, the page ends a button's height (3rem + its 1.25rem
|
||||
inset) later, so its last row or pager can scroll out from under it. Only then: a spacer
|
||||
always there would give a full-height layout a scrollbar it does not need. */}
|
||||
{fabUp && <div aria-hidden="true" className="h-18" />}
|
||||
{cornerLift > 0 ? (
|
||||
// The download tray sits in the same corner (and the button, when up, over it).
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{ height: `calc(${cornerLift}px + ${fabUp ? "5.25rem" : "1.5rem"})` }}
|
||||
/>
|
||||
) : (
|
||||
fabUp && <div aria-hidden="true" className="h-18" />
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -208,3 +208,25 @@ describe("Toaster — handing the toasts to another host", () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Toaster — a toast's actions", () => {
|
||||
it("shows a second action beside the first; either runs and closes the toast", () => {
|
||||
const copy = vi.fn();
|
||||
const open = vi.fn();
|
||||
render(<Toaster />);
|
||||
act(
|
||||
() =>
|
||||
void notify({
|
||||
level: "success",
|
||||
message: "Downloaded",
|
||||
action: { label: "Copy link", onClick: copy },
|
||||
secondaryAction: { label: "Open", onClick: open },
|
||||
}),
|
||||
);
|
||||
expect(screen.getByRole("button", { name: "Copy link" })).toBeTruthy();
|
||||
fireEvent.click(screen.getByRole("button", { name: "Open" }));
|
||||
expect(open).toHaveBeenCalled();
|
||||
expect(copy).not.toHaveBeenCalled();
|
||||
expect(screen.queryByText("Downloaded")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -171,17 +171,25 @@ export default function Toaster({
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{toast.action && (
|
||||
<Button
|
||||
variant="link"
|
||||
onClick={() => {
|
||||
toast.action!.onClick();
|
||||
dismiss(toast.id);
|
||||
}}
|
||||
className="mt-1 text-sm"
|
||||
>
|
||||
{toast.action.label}
|
||||
</Button>
|
||||
{(toast.action || toast.secondaryAction) && (
|
||||
<div className="mt-1 flex flex-wrap gap-x-4">
|
||||
{[toast.action, toast.secondaryAction].map(
|
||||
(action) =>
|
||||
action && (
|
||||
<Button
|
||||
key={action.label}
|
||||
variant="link"
|
||||
onClick={() => {
|
||||
action.onClick();
|
||||
dismiss(toast.id);
|
||||
}}
|
||||
className="text-sm"
|
||||
>
|
||||
{action.label}
|
||||
</Button>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<IconButton
|
||||
|
||||
@@ -8,3 +8,15 @@ export const backToTopShown = createStore(false);
|
||||
export function useBackToTopShown(): boolean {
|
||||
return backToTopShown.useValue();
|
||||
}
|
||||
|
||||
// How tall the thing docked in the same corner under the button is (px; 0 = nothing) — the download
|
||||
// tray. The button steps up over it, and PageScroller keeps the page's end clear of both.
|
||||
const cornerLift = createStore(0);
|
||||
|
||||
export function setCornerLift(px: number): void {
|
||||
if (cornerLift.get() !== px) cornerLift.set(px);
|
||||
}
|
||||
|
||||
export function useCornerLift(): number {
|
||||
return cornerLift.useValue();
|
||||
}
|
||||
|
||||
@@ -17,6 +17,10 @@ const files = readSources(__dirname, [
|
||||
|
||||
/** file → [how many plain Pressables, why they are not titles]. */
|
||||
const PLAIN: Record<string, [number, string]> = {
|
||||
"DownloadTray.tsx": [
|
||||
2,
|
||||
"the folded pill (its summary is its label); a failure's reason, which opens its details",
|
||||
],
|
||||
"FileCard.tsx": [1, "a card's picture (named by aria-label; its title is the caption)"],
|
||||
"FilesRail.tsx": [2, "the load-error retry; the New-folder command"],
|
||||
"Home.tsx": [
|
||||
|
||||
Reference in New Issue
Block a user