Download functionality

Signed-off-by: FTCHD <144691102+FTCHD@users.noreply.github.com>

lib/menu.ts

@@ -511,6 +511,20 @@ export async function buildMenu() {
         menuItems.push(syncMenuItem)
     }
 
+    if (!persistedStoreState.disabledActions?.includes('tray-download')) {
+        const downloadMenuItem = await MenuItem.new({
+            id: 'download',
+            text: 'Download',
+            action: async () => {
+                await openWindow({
+                    name: 'Download',
+                    url: '/download',
+                })
+            },
+        })
+        // menuItems.push(downloadMenuItem)
+    }
+
     const allowsAdditional =
         !persistedStoreState.disabledActions?.includes('tray-move') ||
         !persistedStoreState.disabledActions?.includes('tray-serve') ||

lib/rclone/api.ts

@@ -711,6 +711,36 @@ export async function startPurge({
     }
 }
 
+export async function startDownload({
+    fs,
+    remote,
+    url,
+    autoFilename = true,
+}: {
+    fs: string // a remote name string e.g. "drive:"
+    remote: string // a path within that remote e.g. "dir"
+    url: string // string, URL to read from
+    autoFilename?: boolean // boolean, set to true to retrieve destination file name from url
+}) {
+    const params = new URLSearchParams()
+    params.set('fs', fs)
+    params.set('remote', remote)
+    params.set('url', url)
+    params.set('autoFilename', autoFilename.toString())
+    params.set('_async', 'true')
+
+    const r = await fetch(`http://localhost:5572/operations/copyurl?${params.toString()}`, {
+        method: 'POST',
+        headers: getAuthHeader(),
+    })
+
+    console.log('[startDownload] operation started:', r)
+
+    if (!r.ok) {
+        throw new Error('Failed to start download job')
+    }
+}
+
 /* FLAGS */
 export async function getCurrentGlobalFlags() {
     console.log('[getCurrentGlobalFlags]')

lib/store.ts

@@ -50,31 +50,24 @@ interface State {
     startupDisplayed: boolean
 }
 
+type SupportedAction =
+    | 'tray-mount'
+    | 'tray-sync'
+    | 'tray-copy'
+    | 'tray-serve'
+    | 'tray-move'
+    | 'tray-delete'
+    | 'tray-purge'
+    | 'tray-download'
+
 interface PersistedState {
     remoteConfigList: Record<string, RemoteConfig>
     setRemoteConfig: (remote: string, config: RemoteConfig) => void
     mergeRemoteConfig: (remote: string, config: RemoteConfig) => void
 
-    disabledActions: (
+    disabledActions: SupportedAction[]
-        | 'tray-mount'
+
-        | 'tray-sync'
+    setDisabledActions: (actions: SupportedAction[]) => void
-        | 'tray-copy'
-        | 'tray-serve'
-        | 'tray-move'
-        | 'tray-delete'
-        | 'tray-purge'
-    )[]
-    setDisabledActions: (
-        actions: (
-            | 'tray-mount'
-            | 'tray-sync'
-            | 'tray-copy'
-            | 'tray-serve'
-            | 'tray-move'
-            | 'tray-delete'
-            | 'tray-purge'
-        )[]
-    ) => void
 
     proxy:
         | {
@@ -175,17 +168,8 @@ export const usePersistedStore = create<PersistedState>()(
                 })),
 
             disabledActions: [],
-            setDisabledActions: (
+            setDisabledActions: (actions: SupportedAction[]) =>
-                actions: (
+                set((_) => ({ disabledActions: actions })),
-                    | 'tray-mount'
-                    | 'tray-sync'
-                    | 'tray-copy'
-                    | 'tray-serve'
-                    | 'tray-move'
-                    | 'tray-delete'
-                    | 'tray-purge'
-                )[]
-            ) => set((_) => ({ disabledActions: actions })),
 
             favoritePaths: [],
 

src-tauri/capabilities/default.json

@@ -14,6 +14,7 @@
         "Jobs",
         "Cron",
         "Serve",
+        "Download",
         "Browse",
         "Startup",
         "Test"

src/main.tsx

@@ -8,6 +8,7 @@ import { debug, error, info, trace, warn } from '@tauri-apps/plugin-log'
 import Copy from './pages/Copy'
 import Cron from './pages/Cron'
 import Delete from './pages/Delete'
+import Download from './pages/Download'
 import Jobs from './pages/Jobs'
 import Mount from './pages/Mount'
 import Move from './pages/Move'
@@ -70,6 +71,10 @@ const router = createBrowserRouter([
         path: '/purge',
         element: <Purge />,
     },
+    {
+        path: '/download',
+        element: <Download />,
+    },
     {
         path: '/serve',
         element: <Serve />,

src/pages/Download.tsx

@@ -0,0 +1,179 @@
+import { Button, Input } from '@heroui/react'
+import { getCurrentWindow } from '@tauri-apps/api/window'
+import { message } from '@tauri-apps/plugin-dialog'
+import { DownloadIcon, FoldersIcon, XIcon } from 'lucide-react'
+import { useState } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { startDownload } from '../../lib/rclone/api'
+import { PathField } from '../components/PathFinder'
+
+export default function Download() {
+    const [searchParams] = useSearchParams()
+
+    const [url, setUrl] = useState<string | undefined>()
+    const [source, setSource] = useState<string | undefined>(
+        searchParams.get('initialSource') ? searchParams.get('initialSource')! : undefined
+    )
+
+    const [isStarted, setIsStarted] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+
+    async function handleStartDownload() {
+        setIsLoading(true)
+
+        if (!url) {
+            await message('Please enter a URL', {
+                title: 'Error',
+                kind: 'error',
+            })
+            setIsLoading(false)
+            return
+        }
+
+        if (!source) {
+            await message('Please select a destination path', {
+                title: 'Error',
+                kind: 'error',
+            })
+            setIsLoading(false)
+            return
+        }
+
+        const [fs, remote] = source.split(':')
+
+        if (!fs || !remote) {
+            await message('Invalid destination path', {
+                title: 'Error',
+                kind: 'error',
+            })
+            setIsLoading(false)
+            return
+        }
+
+        try {
+            await startDownload({
+                fs,
+                remote,
+                url,
+            })
+
+            setIsStarted(true)
+
+            await message('Download job started', {
+                title: 'Success',
+                okLabel: 'OK',
+            })
+            setIsLoading(false)
+        } catch (error) {
+            await message(`Failed to start download job, ${error}`, {
+                title: 'Error',
+                kind: 'error',
+                okLabel: 'OK',
+            })
+            setIsLoading(false)
+        }
+    }
+
+    const buttonText = (() => {
+        if (isLoading) return 'STARTING...'
+        if (!source) return 'Please select a destination path'
+        return 'DOWNLOAD'
+    })()
+
+    const buttonIcon = (() => {
+        if (isLoading) return
+        if (!source) return <FoldersIcon className="w-5 h-5" />
+        return <DownloadIcon className="w-5 h-5 fill-current" />
+    })()
+
+    return (
+        <div className="flex flex-col h-screen gap-10 pt-10">
+            {/* Main Content */}
+            <div className="flex flex-col flex-1 w-full max-w-3xl gap-6 mx-auto">
+                <Input
+                    label="URL"
+                    placeholder="Enter a URL"
+                    value={url}
+                    onChange={(e) => setUrl(e.target.value)}
+                    fullWidth={true}
+                    size="lg"
+                    data-focus-visible="false"
+                    autoComplete="off"
+                    autoCorrect="off"
+                    autoCapitalize="off"
+                    spellCheck="false"
+                    endContent={
+                        <Button
+                            variant="faded"
+                            onPress={() => {
+                                setTimeout(() => {
+                                    navigator.clipboard.readText().then((text) => {
+                                        setUrl(text)
+                                    })
+                                }, 10)
+                            }}
+                        >
+                            Paste
+                        </Button>
+                    }
+                />
+
+                {/* Path Display */}
+                <PathField
+                    path={source || ''}
+                    setPath={setSource}
+                    label="Destination"
+                    placeholder="Enter a remote:/path as destination"
+                    showPicker={true}
+                    showFiles={false}
+                />
+            </div>
+
+            <div className="sticky bottom-0 z-50 flex items-center justify-center flex-none gap-2 p-4 border-t border-neutral-500/20 bg-neutral-900/50 backdrop-blur-lg">
+                {isStarted ? (
+                    <>
+                        <Button
+                            fullWidth={true}
+                            color="primary"
+                            size="lg"
+                            onPress={() => {
+                                setSource(undefined)
+                                setIsStarted(false)
+                            }}
+                            data-focus-visible="false"
+                        >
+                            RESET
+                        </Button>
+
+                        <Button
+                            size="lg"
+                            isIconOnly={true}
+                            onPress={async () => {
+                                await getCurrentWindow().hide()
+                                await getCurrentWindow().destroy()
+                            }}
+                            data-focus-visible="false"
+                        >
+                            <XIcon />
+                        </Button>
+                    </>
+                ) : (
+                    <Button
+                        onPress={handleStartDownload}
+                        size="lg"
+                        fullWidth={true}
+                        type="button"
+                        color="primary"
+                        isDisabled={isLoading || !source}
+                        isLoading={isLoading}
+                        endContent={buttonIcon}
+                        className="max-w-2xl gap-2"
+                        data-focus-visible="false"
+                    >
+                        {buttonText}
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}

src/pages/Settings.tsx

@@ -573,6 +573,22 @@ function GeneralSection() {
                     >
                         Show <span className="font-mono text-blue-300">Move</span> option
                     </Checkbox>
+                    <Checkbox
+                        isSelected={!disabledActions?.includes('tray-download')}
+                        onValueChange={(value) => {
+                            if (value) {
+                                setDisabledActions(
+                                    disabledActions?.filter(
+                                        (action) => action !== 'tray-download'
+                                    ) || []
+                                )
+                            } else {
+                                setDisabledActions([...(disabledActions || []), 'tray-download'])
+                            }
+                        }}
+                    >
+                        Show <span className="font-mono text-blue-300">Download</span> option
+                    </Checkbox>
                     <Checkbox
                         isSelected={!disabledActions?.includes('tray-serve')}
                         onValueChange={(value) => {