From ca7d3c657b06d7263b007d214c79f591954cdcee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Padez?= Date: Sun, 23 Aug 2026 02:47:41 +0000 Subject: [PATCH] a send form for SendOff, and no receiving one MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit /sendoff — pick files, pick one of your own machines or a person who has allowed you, send. The consent list sits on the same screen rather than in settings, because the two questions arrive together: the first time somebody opens this and finds nobody to send to, the reason is that consent runs the other way, and the answer has to be visible where the question was asked. There is deliberately no received view. Files land in Documents/SendOff/ inside the recipient's own tree, so the file browser already IS the inbox — a second view of the same directory would be a worse copy of one that works, kept in sync by hand. Two details worth keeping. The file input resets its value after every pick, or choosing the same file twice in a row does nothing, because `change` does not fire on an unchanged value. And a send clears the files but keeps the target, since several batches to the same place is the common second action and re-picking it each time is the sort of small tax that stops somebody using a thing. The multipart goes through `client.post`, which already recognises a FormData and drops the JSON content-type so the browser picks the boundary. That was the only thing making this look like it needed a raw fetch, and a raw fetch would have carried its own copy of the token resolution — which is a chain of seven sources. Co-Authored-By: Claude Opus 5 --- src/apps/officer-web/App.tsx | 1 + .../Screens/Dashboard/Layout/Dock.tsx | 5 + .../Dashboard/SendOff/SendOffScreen.tsx | 16 ++ .../Dashboard/SendOff/defaultLayout.ts | 9 + .../Screens/Dashboard/SendOff/index.tsx | 1 + .../officer-web/Screens/Dashboard/index.tsx | 1 + .../src/AppRegistry/AppRegistry.tsx | 2 + .../src/apps/SendOff/SendOffPanel.tsx | 219 ++++++++++++++++++ .../officerdev/src/apps/SendOff/index.ts | 10 + .../officerdev/src/apps/SendOff/useSendOff.ts | 83 +++++++ 10 files changed, 347 insertions(+) create mode 100644 src/apps/officer-web/Screens/Dashboard/SendOff/SendOffScreen.tsx create mode 100644 src/apps/officer-web/Screens/Dashboard/SendOff/defaultLayout.ts create mode 100644 src/apps/officer-web/Screens/Dashboard/SendOff/index.tsx create mode 100644 src/workspaces/officerdev/src/apps/SendOff/SendOffPanel.tsx create mode 100644 src/workspaces/officerdev/src/apps/SendOff/index.ts create mode 100644 src/workspaces/officerdev/src/apps/SendOff/useSendOff.ts diff --git a/src/apps/officer-web/App.tsx b/src/apps/officer-web/App.tsx index 64b3e4ef..ef5ec3a4 100644 --- a/src/apps/officer-web/App.tsx +++ b/src/apps/officer-web/App.tsx @@ -107,6 +107,7 @@ export function App() { {/* TEMPORARY / EXPERIMENTAL — offline file transfer over animated QR codes */} } /> } /> + } /> } /> } /> diff --git a/src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx b/src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx index 2fb814ca..cc89abda 100644 --- a/src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx +++ b/src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx @@ -155,6 +155,7 @@ import { Store, Puzzle, Radar, + Send, } from 'lucide-react'; /** @@ -180,6 +181,10 @@ export const CORE_DOCK_ITEMS: DockItem[] = [ { label: 'Monitor', to: '/system-monitor', icon: Activity, color: '#0ea5e9' }, { label: 'Activity', to: '/activity', icon: Radio, color: '#f59e0b' }, { label: 'Dashboards', to: '/dashboards', icon: LayoutGrid, color: '#8b5cf6' }, + // Core because it is the door into another account's filesystem, and the permission that gates it is + // `kind: 'app'` — so `canVisit()` hides the tile from anyone not granted it, which is the same treatment + // every other grantable tile here gets. + { label: 'SendOff', to: '/sendoff', icon: Send, color: '#22d3ee' }, // Core since 2026-08-19. These were contributed by the app-store `caldav` entry until calendar and // contacts became core, and deleting that entry took their tiles with it — the routes kept working // while the dock and the settings list went silent about them, which is exactly the shape of failure diff --git a/src/apps/officer-web/Screens/Dashboard/SendOff/SendOffScreen.tsx b/src/apps/officer-web/Screens/Dashboard/SendOff/SendOffScreen.tsx new file mode 100644 index 00000000..e6c56cce --- /dev/null +++ b/src/apps/officer-web/Screens/Dashboard/SendOff/SendOffScreen.tsx @@ -0,0 +1,16 @@ +import type { LayoutNode } from 'officerdev'; +import { WorkspaceView } from 'officerdev'; +import { useDashboardState } from 'state/useDashboardState'; +import { defaultLayout } from './defaultLayout'; + +// /sendoff — pick files, pick a machine of your own or a person who has allowed you, send. +// +// There is no receiving half. Files land in `Documents/SendOff/` inside the recipient's own tree, so the +// file browser already IS the inbox — and a second view of the same directory would be a worse copy of +// one that already works, kept in sync by hand. + +export const SendOffScreen = () => { + const workspace = useDashboardState('screens/sendoff', defaultLayout); + + return ; +}; diff --git a/src/apps/officer-web/Screens/Dashboard/SendOff/defaultLayout.ts b/src/apps/officer-web/Screens/Dashboard/SendOff/defaultLayout.ts new file mode 100644 index 00000000..06458b4e --- /dev/null +++ b/src/apps/officer-web/Screens/Dashboard/SendOff/defaultLayout.ts @@ -0,0 +1,9 @@ +import type { LayoutNode } from 'officerdev'; + +// One panel. The form is a column and there is nothing to put beside it — receiving already has a UI, +// which is the file browser. +export const defaultLayout: LayoutNode = { + type: 'panel', + id: 'sendoff', + appType: 'sendoff', +}; diff --git a/src/apps/officer-web/Screens/Dashboard/SendOff/index.tsx b/src/apps/officer-web/Screens/Dashboard/SendOff/index.tsx new file mode 100644 index 00000000..29e49e54 --- /dev/null +++ b/src/apps/officer-web/Screens/Dashboard/SendOff/index.tsx @@ -0,0 +1 @@ +export * from './SendOffScreen'; diff --git a/src/apps/officer-web/Screens/Dashboard/index.tsx b/src/apps/officer-web/Screens/Dashboard/index.tsx index 45b80443..1104195f 100644 --- a/src/apps/officer-web/Screens/Dashboard/index.tsx +++ b/src/apps/officer-web/Screens/Dashboard/index.tsx @@ -23,3 +23,4 @@ export * from './Terminal'; export * from './Jobs'; export * from './QrTransfer'; export * from './Minesweeper'; +export * from './SendOff'; diff --git a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx index b3ab92d6..24829c8e 100644 --- a/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx +++ b/src/workspaces/officerdev/src/AppRegistry/AppRegistry.tsx @@ -12,6 +12,7 @@ import { appRegistryMetas as widgetMetas } from '../apps/Widgets'; import { appRegistryMetas as monitorMetas } from '../apps/SystemMonitor'; import { appRegistryMetas as qrTransferMetas } from '../apps/QrTransfer'; import { appRegistryMetas as minesweeperMetas } from '../apps/Minesweeper'; +import { appRegistryMetas as sendOffMetas } from '../apps/SendOff'; import { appRegistryMetas as davMetas } from '../apps/Dav'; import { appRegistryMetas as commandHqMetas } from '../apps/CommandHQ'; import type { QueryClient } from '@tanstack/react-query'; @@ -30,6 +31,7 @@ export const apps = [ ...monitorMetas, ...qrTransferMetas, ...minesweeperMetas, + ...sendOffMetas, ...davMetas, ...commandHqMetas, ...appStoreMetas, diff --git a/src/workspaces/officerdev/src/apps/SendOff/SendOffPanel.tsx b/src/workspaces/officerdev/src/apps/SendOff/SendOffPanel.tsx new file mode 100644 index 00000000..ce9aab49 --- /dev/null +++ b/src/workspaces/officerdev/src/apps/SendOff/SendOffPanel.tsx @@ -0,0 +1,219 @@ +import { useRef, useState } from 'react'; +import { Laptop, Send, Upload, User, X } from 'lucide-react'; +import { Button } from '@/components/ui/button'; +import { useSendOff, useSendOffSenders, useSendOffTargets } from './useSendOff'; + +const label = (p: { name: string | null; email: string }): string => p.name || p.email.split('@')[0] || p.email; +const kb = (n: number): string => + n < 1024 ? `${n} B` : n < 1024 * 1024 ? `${Math.round(n / 1024)} KB` : `${(n / 1024 / 1024).toFixed(1)} MB`; + +type Target = { kind: 'machine'; name: string } | { kind: 'user'; id: number; name: string }; + +/** + * SendOff — pick files, pick where, send. + * + * Deliberately has no "received" view. Files land in `Documents/SendOff/` in the recipient's own tree, so + * the file browser is already the receiving UI and a second one here would be a worse copy of it that + * needed keeping in sync. + */ +export const SendOffPanel = () => { + const { devices, people, isLoading } = useSendOffTargets(); + const send = useSendOff(); + const [files, setFiles] = useState([]); + const [target, setTarget] = useState(null); + const picker = useRef(null); + + const total = files.reduce((n, f) => n + f.size, 0); + const ready = files.length > 0 && target !== null; + + const doSend = async () => { + if (!target) return; + await send + .mutateAsync({ files, target: target.kind === 'machine' ? { machine: target.name } : { toUser: target.id } }) + // Clear only the files. The target stays selected because sending several batches to the same place + // is the common second action, and re-picking it every time is the kind of small tax that stops + // somebody using a thing. + .then(() => setFiles([])) + .catch(() => {}); + }; + + return ( +
+
+
+

Files

+ { + setFiles((prev) => [...prev, ...Array.from(ev.target.files ?? [])]); + // Reset the input, or picking the same file twice in a row does nothing: `change` does not + // fire when the value is unchanged. + ev.target.value = ''; + }} + /> + + + {files.length > 0 && ( +
    + {files.map((f, i) => ( +
  • + {f.name} + {kb(f.size)} + +
    • + ))} +
  • + {files.length} file{files.length === 1 ? '' : 's'} · {kb(total)} +
    • +
+ )} +
+ +
+

Where

+ {isLoading ? ( +

Loading…

+ ) : ( +
+ ({ + key: `m:${d.id}`, + name: d.name, + target: { kind: 'machine' as const, name: d.name }, + }))} + selected={target} + onSelect={setTarget} + /> + ({ + key: `u:${p.id}`, + name: label(p), + target: { kind: 'user' as const, id: p.id, name: label(p) }, + }))} + selected={target} + onSelect={setTarget} + /> +
+ )} +
+ +
+ + {/* The server's own message, not a generic one: a file over the limit and a recipient who has + revoked you are different problems with different answers. */} + {send.error &&

{send.error.message}

} + {send.data && ( +

+ Landed in {send.data.path} —{' '} + {send.data.files.map((f) => f.name).join(', ')} +

+ )} +
+ + +
+
+ ); +}; + +type TargetGroupProps = { + icon: typeof Laptop; + heading: string; + empty: string; + options: { key: string; name: string; target: Target }[]; + selected: Target | null; + onSelect: (t: Target) => void; +}; + +const sameTarget = (a: Target | null, b: Target): boolean => + a !== null && + a.kind === b.kind && + (b.kind === 'machine' ? a.kind === 'machine' && a.name === b.name : a.kind === 'user' && a.id === b.id); + +const TargetGroup = ({ icon: Icon, heading, empty, options, selected, onSelect }: TargetGroupProps) => ( +
+

+ + {heading} +

+ {options.length === 0 ? ( +

{empty}

+ ) : ( +
+ {options.map((o) => ( + + ))} +
+ )} +
+); + +/** + * The consent list, on the same screen as sending. + * + * It belongs here rather than in settings because the two questions arrive together: the first time + * somebody opens SendOff and finds nobody to send to, the reason is that consent runs the other way, and + * the answer has to be visible in the same place the question was asked. + */ +const WhoMaySend = () => { + const { candidates, isLoading, setAllowed, isSaving } = useSendOffSenders(); + if (isLoading || candidates.length === 0) return null; + + return ( +
+

Who may send to me

+

+ Files from anyone you allow land in Documents/SendOff/their-name. + Turning someone off stops future sends and leaves what they already sent alone. +

+
+ {candidates.map((p) => ( + + ))} +
+
+ ); +}; diff --git a/src/workspaces/officerdev/src/apps/SendOff/index.ts b/src/workspaces/officerdev/src/apps/SendOff/index.ts new file mode 100644 index 00000000..f30b418a --- /dev/null +++ b/src/workspaces/officerdev/src/apps/SendOff/index.ts @@ -0,0 +1,10 @@ +import type { AppRegistryMeta } from '../../AppRegistry'; +import { Send } from 'lucide-react'; +import { SendOffPanel } from './SendOffPanel'; + +export { SendOffPanel } from './SendOffPanel'; +export { useSendOff, useSendOffSenders, useSendOffTargets } from './useSendOff'; + +export const appRegistryMetas: AppRegistryMeta[] = [ + { key: 'sendoff', name: 'SendOff', icon: Send, component: SendOffPanel }, +]; diff --git a/src/workspaces/officerdev/src/apps/SendOff/useSendOff.ts b/src/workspaces/officerdev/src/apps/SendOff/useSendOff.ts new file mode 100644 index 00000000..bb909215 --- /dev/null +++ b/src/workspaces/officerdev/src/apps/SendOff/useSendOff.ts @@ -0,0 +1,83 @@ +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useClient } from 'hooks/useClient'; + +export type SendOffDevice = { id: string; name: string; platform: string | null; lastSeenAt: string }; +export type SendOffPerson = { id: number; email: string; name: string | null }; +type Targets = { devices: SendOffDevice[]; people: SendOffPerson[] }; +type Senders = { allowed: SendOffPerson[]; candidates: (SendOffPerson & { allowed: boolean })[] }; + +const TARGETS = ['sendoff', 'targets']; +const SENDERS = ['sendoff', 'senders']; + +/** Where a file can go: my own named machines, and the accounts that have allowed me. */ +export function useSendOffTargets() { + const client = useClient(); + const { data, isLoading, error } = useQuery({ + queryKey: TARGETS, + queryFn: () => client.get('/sendoff/targets'), + // A machine registered from a phone a moment ago should appear without a reload, and this is a + // two-row query — the panel is the only reader and it is open for seconds at a time. + staleTime: 0, + }); + return { devices: data?.devices ?? [], people: data?.people ?? [], isLoading, error }; +} + +/** Who I have allowed to send to me — the consent list, which only I can change. */ +export function useSendOffSenders() { + const client = useClient(); + const qc = useQueryClient(); + const { data, isLoading } = useQuery({ + queryKey: SENDERS, + queryFn: () => client.get('/sendoff/senders'), + staleTime: 0, + }); + + const allow = useMutation({ + mutationFn: (userId: number) => client.post('/sendoff/senders', { userId }), + // Both: granting changes who may send to ME, and on somebody else's screen it changes who they may + // send TO. Only this browser's cache is reachable from here, so it invalidates its own of each. + onSuccess: () => { + void qc.invalidateQueries({ queryKey: SENDERS }); + void qc.invalidateQueries({ queryKey: TARGETS }); + }, + }); + + const revoke = useMutation({ + mutationFn: (userId: number) => client.delete(`/sendoff/senders/${userId}`), + onSuccess: () => { + void qc.invalidateQueries({ queryKey: SENDERS }); + void qc.invalidateQueries({ queryKey: TARGETS }); + }, + }); + + return { + candidates: data?.candidates ?? [], + isLoading, + setAllowed: (userId: number, allowed: boolean) => + allowed ? allow.mutateAsync(userId) : revoke.mutateAsync(userId), + isSaving: allow.isPending || revoke.isPending, + }; +} + +export type SendResult = { path: string; files: { name: string; size: number }[] }; + +/** + * The send itself — multipart, through the ordinary client. + * + * `client.post` already recognises a `FormData` and drops the JSON content-type when it sees one, so the + * browser picks the boundary. That is the only thing that made this look like it needed a raw `fetch`. + */ +export function useSendOff() { + const client = useClient(); + const qc = useQueryClient(); + return useMutation({ + mutationFn: ({ files, target }) => { + const form = new FormData(); + for (const f of files) form.append('file', f); + if ('machine' in target) form.append('machine', target.machine); + else form.append('toUser', String(target.toUser)); + return client.post('/sendoff/send', form); + }, + onSuccess: () => void qc.invalidateQueries({ queryKey: TARGETS }), + }); +}