Component: DetailView

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/DetailView/DetailView.jsx
• src/App.jsx
• src/Hooks/useListStore.js
• src-tauri/src/lib.rs
• src/components/Form/List.jsx
• package.json

The DetailView component is a core part of the Scripty user interface, responsible for displaying the contents of a selected script. It provides the user with the ability to view the script's code, execute it with different privilege levels, and delete it from the application's storage. This component serves as the primary interaction point for a single script item.

It is rendered conditionally within the main App component and relies on a global state management store (useListStore) to receive data about the selected script. It also communicates directly with the Tauri Rust backend to perform system-level operations like running PowerShell commands.

Sources: src/components/DetailView/DetailView.jsx, src/App.jsx:49, 90, src/Hooks/useListStore.js

Architecture and Data Flow

The DetailView component is not always visible. Its appearance is controlled by the prewOpen state in the parent App component. When a user clicks on a script in the List component, it triggers a state change that renders DetailView.

Sources: src/App.jsx:49, 86, 90, src/components/Form/List.jsx:15-18

Component Visibility Flow

The following diagram illustrates how user interaction leads to the DetailView being displayed.

State Management

DetailView is a state-driven component that retrieves its primary data from a Zustand store, defined in useListStore.js. It does not receive the script data via props, but instead subscribes to the store.

• selectedItem: An object containing the details of the script to be displayed, including id, title, and content.
• removeItem(id): A function from the store used to delete the currently viewed script.

The component also maintains its own local state:

• runtime: A string that tracks the selected execution privilege level from the dropdown ('User', 'Admin').

Sources: src/components/DetailView/DetailView.jsx:9, 10, 11, src/Hooks/useListStore.js:28, 44

This diagram shows the data dependency between DetailView and the useListStore.

Core Functionalities

The component's main features are displaying, running, and deleting scripts. These actions are handled by dedicated functions within the component.

Script Display

The component displays the title and content of the script retrieved from the selectedItem object in the useListStore. The title is shown in an h1 tag, and the script content is rendered within a <pre> tag to preserve formatting.

// src/components/DetailView/DetailView.jsx:70-72
<h1 className="text-text font-normal text-2xl">
  {selectedItem ? selectedItem.title : "File has No name"}
</h1>

// src/components/DetailView/DetailView.jsx:97-101
{selectedItem && (
    <pre className="text-text p-4 text-[15px] 2xl:text-[20px]">
        {selectedItem.content}
    </pre>
)}

Sources: src/components/DetailView/DetailView.jsx:70-72, 97-101

Script Execution

Users can execute the displayed script using the "Run" button. A dropdown menu allows the selection of the execution context (privilege level). The chruntime function is responsible for invoking the appropriate Tauri command based on the selected runtime state.

Sources: src/components/DetailView/DetailView.jsx:16-29, 89-92

Execution Runtimes

The component maps user-friendly names in the UI to specific values that correspond to different backend functions.

UI Option	runtime Value	Tauri Command Invoked	Backend Function (lib.rs)	Description
User	"3" (default)	open_terminal	open_terminal	Runs the script in a standard PowerShell.
Admin	"2"	open_admin_terminal	open_admin_terminal	Runs the script in an elevated PowerShell.
System	"1" (commented out)	run_sys_terminal	run_sys_terminal	Runs the script as the SYSTEM user.

Sources: src/components/DetailView/DetailView.jsx:16-29, 81-87, src-tauri/src/lib.rs:32, 37, 50

Execution Sequence Diagram

This diagram shows the sequence of events when a user clicks the "Run" button.

Script Deletion

The deleteItem function handles the removal of a script. It first uses the @tauri-apps/plugin-dialog to show a confirmation dialog to the user. If the user confirms, it calls the removeItem function from useListStore with the script's ID and then calls setIsVisible(false) to close the detail view.

Sources: src/components/DetailView/DetailView.jsx:31-43

Deletion Flowchart

UI and Styling

The component is styled using Tailwind CSS and uses the motion/react library for entry and exit animations, providing a smooth sliding effect from the right side of the screen. Key interactive elements include:

• Close Button (XMarkIcon): Closes the view by calling setIsVisible(false).
• Delete Button (TrashIcon): Initiates the deletion flow.
• Runtime <select>: Dropdown to choose execution context.
• Run Button: Executes the script.

Sources: src/components/DetailView/DetailView.jsx:7, 47-50, 65-68, 75-78, 89-92, package.json:25

Summary

The DetailView component is a crucial element for script management in Scripty. It effectively decouples its state logic by using a global Zustand store, while directly interfacing with the Tauri backend for powerful script execution capabilities. Its clear separation of concerns—display, execution, and deletion—makes it a focused and integral part of the application's user experience.