Frontend Architecture
Relevant source files
The following files were used as context for generating this wiki page:
The Scripty frontend is a modern single-page application built with React and Vite, designed to run within a Tauri desktop container. Its primary purpose is to provide a user interface for managing and executing PowerShell scripts. The architecture is component-based, utilizing a centralized state management solution for a predictable and maintainable state.
The frontend is responsible for rendering the UI, handling user interactions, managing application state (scripts, tags, UI visibility), and communicating with the Rust backend through Tauri's API for file system operations and script execution. Styling is handled by Tailwind CSS with a custom theming system.
Technology Stack and Build Process
The frontend relies on a set of modern JavaScript libraries and tools. The build process is managed by Vite, configured specifically for Tauri development.
Sources: package.json, vite.config.js
Key Dependencies
| Library | Version | Description |
|---|---|---|
react | ^19.2.0 | A JavaScript library for building user interfaces. |
vite | ^6.0.3 | A build tool that provides a fast development experience. |
zustand | ^5.0.7 | A small, fast, and scalable state-management solution. |
tailwindcss | ^4.1.11 | A utility-first CSS framework for rapid UI development. |
@tauri-apps/api | ^2 | Provides the JavaScript API for interacting with the Tauri backend. |
motion | ^12.23.12 | A library for creating animations in React. |
@heroicons/react | ^2.2.0 | A set of SVG icons for use in React projects. |
Sources: package.json:13-26
Build Configuration
Vite is configured in vite.config.js to work seamlessly with Tauri. Key configurations include:
- React Plugin:
@vitejs/plugin-reactenables React support, including Fast Refresh. - Tailwind CSS Plugin:
@tailwindcss/viteintegrates Tailwind CSS into the build process. - Development Server: The server is configured to run on a fixed port (
1420) as expected by Tauri. - Ignored Watch Paths: The
src-tauridirectory is ignored by Vite's watcher to prevent unnecessary rebuilds when backend code changes.
Sources: vite.config.js:8-30
Application Initialization
The application bootstraps through a standard web flow, starting with index.html and culminating in the rendering of the main App component.
This diagram shows the sequence from loading the initial HTML to rendering the main application component.
Sources: index.html:11-12, src/main.jsx:5-9
- The Tauri window loads
index.html. index.htmlcontains a<div id="root"></div>and a script tag pointing to/src/main.jsx.src/main.jsxusesReactDOM.createRootto take control of thediv#rootelement.- It then renders the main
<App />component within a<React.StrictMode>wrapper.
Component Architecture
The UI is broken down into a hierarchy of reusable React components. The App component serves as the root, managing layout and the visibility of major UI sections.
This diagram illustrates the primary component hierarchy of the application.
Core Components
| Component | File Path | Description |
|---|---|---|
App | src/App.jsx | The main application component. Manages the overall layout and the visibility of modal-like views (Form, FormTag, DetailView). Also handles the auto-updater check on startup. |
TopBar | src/components/TopBar.jsx | A custom title bar with window controls (close, minimize, maximize) that uses Tauri's window API. |
List | src/components/Form/List.jsx | Displays a scrollable list of script items (ListItem). Filters items based on the global state. |
DetailView | src/components/DetailView/DetailView.jsx | Displays the content of a selected script. Provides controls to run the script with different permissions (User, Admin) or delete it. |
Form | src/components/Form/Form.jsx | A form for adding a new script. It allows the user to specify a name, select tags, and load a .ps1 file from disk. |
FormTag | src/components/Form/FormTag.jsx | A simple form for adding new tags to the system. |
Sources: src/App.jsx, src/components/TopBar.jsx, src/components/Form/List.jsx, src/components/DetailView/DetailView.jsx, src/components/Form/Form.jsx, src/components/Form/FormTag.jsx
State Management with Zustand
Global application state is managed by Zustand, defined in the useListStore hook. This store is the single source of truth for scripts, tags, and UI state like the currently selected item. The state is persisted to a JSON file in the application's data directory using zustand/middleware/persist and Tauri's FS plugin.
Sources: src/Hooks/useListStore.js
State Structure
The useListStore manages the following state properties:
| Property | Type | Description |
|---|---|---|
items | Array<Object> | An array of script objects. Each object has an id, title, content, tags, and date. |
tags | Array<String> | An array of available tags. |
selectedItem | Object | null | The currently selected script object for the detail view. |
filterTag | String | null | The tag used to filter the displayed list of scripts. |
Sources: src/Hooks/useListStore.js:29-37
State Persistence
The store uses a custom storage implementation that leverages @tauri-apps/plugin-fs to read from and write to scriptStorage.json in the user's app data directory. Only the items and tags parts of the state are persisted.
This diagram shows the flow of persisting and rehydrating the application state.
Interaction with Tauri Backend
The frontend communicates with the Rust backend using the invoke function from @tauri-apps/api/core. This is used for tasks that require native capabilities, such as accessing the file system or executing shell commands.
Sources: src-tauri/src/lib.rs:59-65, src/components/Form/Form.jsx:19-25, src/components/DetailView/DetailView.jsx:15-29
Invoked Commands
The following commands are defined in the Rust backend and called from the frontend:
| Command | Frontend Caller(s) | Description |
|---|---|---|
read_ps1 | Form.jsx | Reads the content of a .ps1 file selected by the user. |
open_terminal | DetailView.jsx | Runs the script content in a new PowerShell terminal with user privileges. |
open_admin_terminal | DetailView.jsx | Runs the script content in a new PowerShell terminal with administrator privileges. |
run_sys_terminal | DetailView.jsx | Runs the script content with SYSTEM privileges using an embedded syspwsh.exe. |
Sources: src-tauri/src/lib.rs:27-65, src/components/Form/Form.jsx:19, src/components/DetailView/DetailView.jsx:16, 20, 24
This sequence diagram shows how a user runs a script from the DetailView.
Styling and Theming
The application uses Tailwind CSS for utility-first styling. A custom theming system is implemented in src/App.css using CSS variables. This allows for dynamic theme changes.
The default theme is defined in the :root selector. The current theme is stored in localStorage and applied to the <html> element via the data-theme attribute on application startup.
/* src/App.css:21-28 */
:root {
--main: #677397;
--main2: #5a6380;
--back: #515a77;
--acc: #857cbf;
--form: #363c4e;
--text: #ffffff;
--radius: 15px 15px 15px 15px;
}
Sources: src/App.css:9-28, src/App.jsx:43-44, src/components/TopBar.jsx:19-22