enhancement: open folder log and change data folder dialog confirm (#5159)

* enhancement: ux change data folder with confirmation and reveal in finder logs

* chore: update button open logs local api server

* Update web-app/src/components/ui/button.tsx

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

* chore: handle error when change location data folder failed

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

src-tauri/Cargo.toml

@@ -25,6 +25,7 @@ tauri = { version = "2.4.0", features = [ "protocol-asset", "macos-private-api",
 tauri-plugin-log = "2.0.0-rc"
 tauri-plugin-shell = "2.2.0"
 tauri-plugin-os = "2.2.1"
+tauri-plugin-opener = "2.2.7"
 flate2 = "1.0"
 tar = "0.4"
 rand = "0.8"

src-tauri/capabilities/default.json

@@ -2,13 +2,9 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "enables the default permissions",
-  "windows": [
+  "windows": ["main"],
-    "main"
-  ],
   "remote": {
-    "urls": [
+    "urls": ["http://*"]
-      "http://*"
-    ]
   },
   "permissions": [
     "core:default",
@@ -19,6 +15,7 @@
     "core:app:allow-set-app-theme",
     "core:window:allow-set-focus",
     "os:default",
+    "opener:default",
     "log:default",
     "updater:default",
     "dialog:default",

src-tauri/src/lib.rs

@@ -17,6 +17,7 @@ pub fn run() {
     tauri::Builder::default()
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_store::Builder::new().build())
         .plugin(tauri_plugin_updater::Builder::new().build())

web-app/package.json

@@ -31,6 +31,7 @@
     "@tanstack/react-router-devtools": "^1.116.0",
     "@tauri-apps/api": "^2.5.0",
     "@tauri-apps/plugin-dialog": "^2.2.1",
+    "@tauri-apps/plugin-opener": "^2.2.7",
     "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-updater": "^2.7.1",
     "@types/react-syntax-highlighter": "^15.5.13",

web-app/src/components/ui/button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-7 px-3 py-2 has-[>svg]:px-3 rounded-sm',
-        sm: 'h-6 rounded gap-1.5 px-2 has-[>svg]:px-2.5',
+        sm: 'h-6 gap-1.5 px-2 has-[>svg]:px-2.5 rounded-sm',
         lg: 'h-9 rounded-md px-4 has-[>svg]:px-4',
         icon: 'size-8',
       },

web-app/src/containers/dialogs/ChangeDataFolderLocation.tsx

@@ -0,0 +1,81 @@
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { IconFolder } from '@tabler/icons-react'
+
+interface ChangeDataFolderLocationProps {
+  children: React.ReactNode
+  currentPath: string
+  newPath: string
+  onConfirm: () => void
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export default function ChangeDataFolderLocation({
+  children,
+  currentPath,
+  newPath,
+  onConfirm,
+  open,
+  onOpenChange,
+}: ChangeDataFolderLocationProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogTrigger asChild>{children}</DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <IconFolder size={20} />
+            Change Data Folder Location
+          </DialogTitle>
+          <DialogDescription>
+            Are you sure you want to change the data folder location? This will
+            move all your data to the new location and restart the application.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div>
+            <h4 className="text-sm font-medium text-main-view-fg/80 mb-2">
+              Current Location:
+            </h4>
+            <div className="bg-main-view-fg/5 border border-main-view-fg/10 rounded">
+              <code className="text-xs text-main-view-fg/70 break-all">
+                {currentPath}
+              </code>
+            </div>
+          </div>
+
+          <div>
+            <h4 className="text-sm font-medium text-main-view-fg/80 mb-2">
+              New Location:
+            </h4>
+            <div className="bg-accent/10 border border-accent/20 rounded">
+              <code className="text-xs text-accent break-all">{newPath}</code>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="flex items-center gap-2">
+          <DialogClose asChild>
+            <Button variant="link" size="sm">
+              Cancel
+            </Button>
+          </DialogClose>
+          <DialogClose asChild>
+            <Button onClick={onConfirm}>Change Location</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

web-app/src/routes/settings/general.tsx

@@ -10,6 +10,8 @@ import { useTranslation } from 'react-i18next'
 import { useGeneralSetting } from '@/hooks/useGeneralSetting'
 import { useEffect, useState } from 'react'
 import { open } from '@tauri-apps/plugin-dialog'
+import { revealItemInDir } from '@tauri-apps/plugin-opener'
+import ChangeDataFolderLocation from '@/containers/dialogs/ChangeDataFolderLocation'
 
 import {
   Dialog,
@@ -32,19 +34,35 @@ import {
   IconExternalLink,
   IconFolder,
   IconLogs,
+  IconCopy,
+  IconCopyCheck,
 } from '@tabler/icons-react'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { windowKey } from '@/constants/windows'
+import { toast } from 'sonner'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const Route = createFileRoute(route.settings.general as any)({
   component: General,
 })
 
+const openFileTitle = (): string => {
+  if (IS_MACOS) {
+    return 'Show in Finder'
+  } else if (IS_WINDOWS) {
+    return 'Show in File Explorer'
+  } else {
+    return 'Open Containing Folder'
+  }
+}
+
 function General() {
   const { t } = useTranslation()
   const { spellCheckChatInput, setSpellCheckChatInput } = useGeneralSetting()
   const [janDataFolder, setJanDataFolder] = useState<string | undefined>()
+  const [isCopied, setIsCopied] = useState(false)
+  const [selectedNewPath, setSelectedNewPath] = useState<string | null>(null)
+  const [isDialogOpen, setIsDialogOpen] = useState(false)
 
   useEffect(() => {
     const fetchDataFolder = async () => {
@@ -97,6 +115,52 @@ function General() {
     }
   }
 
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text)
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 2000) // Reset after 2 seconds
+    } catch (error) {
+      console.error('Failed to copy to clipboard:', error)
+    }
+  }
+
+  const handleDataFolderChange = async () => {
+    const selectedPath = await open({
+      multiple: false,
+      directory: true,
+      defaultPath: janDataFolder,
+    })
+
+    if (selectedPath === janDataFolder) return
+    if (selectedPath !== null) {
+      setSelectedNewPath(selectedPath)
+      setIsDialogOpen(true)
+    }
+  }
+
+  const confirmDataFolderChange = async () => {
+    if (selectedNewPath) {
+      try {
+        setJanDataFolder(selectedNewPath)
+        await relocateJanDataFolder(selectedNewPath)
+        // Only relaunch if relocation was successful
+        window.core?.api?.relaunch()
+        setSelectedNewPath(null)
+        setIsDialogOpen(false)
+      } catch (error) {
+        console.error('Failed to relocate data folder:', error)
+        // Revert the data folder path on error
+        const originalPath = await getJanDataFolder()
+        setJanDataFolder(originalPath)
+
+        toast.error(
+          'Failed to relocate data folder. Please try again or choose a different location.'
+        )
+      }
+    }
+  }
+
   return (
     <div className="flex flex-col h-full">
       <HeaderPage>
@@ -133,42 +197,71 @@ function General() {
                       {t('settings.dataFolder.appDataDesc', {
                         ns: 'settings',
                       })}
+                      &nbsp;
                     </span>
+                    <div className="flex items-center gap-2 mt-1">
                       <span
                         title={janDataFolder}
-                      className="bg-main-view-fg/10 text-xs mt-1 px-1 py-0.5 rounded-sm text-main-view-fg/80 line-clamp-1"
+                        className="bg-main-view-fg/10 text-xs px-1 py-0.5 rounded-sm text-main-view-fg/80"
                       >
                         {janDataFolder}
                       </span>
+                      <button
+                        onClick={() =>
+                          janDataFolder && copyToClipboard(janDataFolder)
+                        }
+                        className="cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out p-1"
+                        title={isCopied ? 'Copied!' : 'Copy path'}
+                      >
+                        {isCopied ? (
+                          <div className="flex items-center gap-1">
+                            <IconCopyCheck size={12} className="text-accent" />
+                            <span className="text-xs leading-0">Copied</span>
+                          </div>
+                        ) : (
+                          <IconCopy
+                            size={12}
+                            className="text-main-view-fg/50"
+                          />
+                        )}
+                      </button>
+                    </div>
                   </>
                 }
                 actions={
+                  <>
                     <Button
                       variant="link"
                       size="sm"
-                    className="hover:no-underline"
+                      className="p-0"
                       title="App Data Folder"
-                    onClick={async () => {
+                      onClick={handleDataFolderChange}
-                      const selectedPath = await open({
+                    >
-                        multiple: false,
+                      <div className="cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1 gap-1">
-                        directory: true,
+                        <IconFolder
-                        defaultPath: janDataFolder,
+                          size={12}
-                      })
+                          className="text-main-view-fg/50"
-                      if (selectedPath === janDataFolder) return
+                        />
-                      if (selectedPath !== null) {
+                        <span>Change Location</span>
-                        setJanDataFolder(selectedPath)
+                      </div>
-                        await relocateJanDataFolder(selectedPath)
+                    </Button>
-                        window.core?.api?.relaunch()
+                    {selectedNewPath && (
-                        // TODO: we need function to move everything into new folder selectedPath
+                      <ChangeDataFolderLocation
-                        // eg like this
+                        currentPath={janDataFolder || ''}
-                        // await window.core?.api?.moveDataFolder(selectedPath)
+                        newPath={selectedNewPath}
+                        onConfirm={confirmDataFolderChange}
+                        open={isDialogOpen}
+                        onOpenChange={(open) => {
+                          setIsDialogOpen(open)
+                          if (!open) {
+                            setSelectedNewPath(null)
                           }
                         }}
                       >
-                    <div className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out">
+                        <div />
-                      <IconFolder size={18} className="text-main-view-fg/50" />
+                      </ChangeDataFolderLocation>
-                    </div>
+                    )}
-                  </Button>
+                  </>
                 }
               />
               <CardItem
@@ -177,17 +270,47 @@ function General() {
                 })}
                 description="View detailed logs of the App"
                 actions={
+                  <div className="flex items-center gap-2">
                     <Button
                       variant="link"
                       size="sm"
+                      className="p-0"
                       onClick={handleOpenLogs}
                       title="App Logs"
                     >
-                    {/* Open Logs */}
+                      <div className="cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1 gap-1">
-                    <div className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out">
+                        <IconLogs size={12} className="text-main-view-fg/50" />
-                      <IconLogs size={18} className="text-main-view-fg/50" />
+                        <span>Open Logs</span>
                       </div>
                     </Button>
+                    <Button
+                      variant="link"
+                      size="sm"
+                      className="p-0"
+                      onClick={async () => {
+                        if (janDataFolder) {
+                          try {
+                            const logsPath = `${janDataFolder}/logs`
+                            await revealItemInDir(logsPath)
+                          } catch (error) {
+                            console.error(
+                              'Failed to reveal logs folder:',
+                              error
+                            )
+                          }
+                        }
+                      }}
+                      title="Reveal logs folder in file explorer"
+                    >
+                      <div className="cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1 gap-1">
+                        <IconFolder
+                          size={12}
+                          className="text-main-view-fg/50"
+                        />
+                        <span>{openFileTitle()}</span>
+                      </div>
+                    </Button>
+                  </div>
                 }
               />
             </Card>

web-app/src/routes/settings/local-api-server.tsx

@@ -140,11 +140,13 @@ function LocalAPIServer() {
                   <Button
                     variant="link"
                     size="sm"
+                    className="p-0"
                     onClick={handleOpenLogs}
                     title="Server Logs"
                   >
-                    <div className="size-6 cursor-pointer flex items-center justify-center rounded hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out">
+                    <div className="cursor-pointer flex items-center justify-center rounded-sm hover:bg-main-view-fg/15 bg-main-view-fg/10 transition-all duration-200 ease-in-out px-2 py-1 gap-1">
                       <IconLogs size={18} className="text-main-view-fg/50" />
+                      <span>Open Logs</span>
                     </div>
                   </Button>
                 }