Component: List

Relevant source files

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

• src/components/Form/List.jsx
• src/Hooks/useListStore.js
• src/App.jsx
• src/components/DetailView/DetailView.jsx
• src/components/Form/Form.jsx

The List component is a core UI element in the Scripty application, responsible for rendering a dynamic, scrollable list of script entries. It retrieves its data from a global state managed by Zustand via the useListStore hook. The displayed items are filtered based on the currently selected filterTag in the application's state.

Interaction with the list is a primary user workflow; clicking on a ListItem selects that script and triggers the display of the DetailView component, allowing the user to view and execute the script's content. The component also handles the asynchronous nature of state hydration from the file system, ensuring that the list is only rendered after the persisted data is loaded.

Sources: src/components/Form/List.jsx, src/App.jsx:59, 62, src/Hooks/useListStore.js

Component Architecture

The List component is a functional React component that renders a list of ListItem components, which are themselves defined as a sub-component within the List.jsx file. The entire list is wrapped in <AnimatePresence> from the motion/react library to provide enter and exit animations for list items as they are added, removed, or filtered from view.

Sources: src/components/Form/List.jsx:6-8, 48-58

This diagram shows the parent-child relationship of the List component within the main application view.

State Management and Data Flow

The List component is decoupled from direct data management, instead relying on the useListStore Zustand store. This hook provides the component with both the data (filtered script items) and the functions to interact with the state.

Sources: src/components/Form/List.jsx:2, 36

Key Store Interactions

• getFilteredItems(): A selector function that returns an array of script items based on the current filterTag. The List component calls this to get the items to render.
• selectItem(item): An action that is called when a user clicks a ListItem. It updates the selectedItem in the store, which is then consumed by the DetailView component.
• filterTag: A state value that determines which tag is used to filter the list.
• Hydration: The component uses a useEffect hook to wait for the Zustand store's persist middleware to finish hydrating the state from scriptStorage.json before rendering the list. This prevents a flash of an empty list on application startup.

Sources: src/components/Form/List.jsx:35-46, src/Hooks/useListStore.js:31, 56, 68

Item Selection Flow

The following sequence diagram illustrates what happens when a user clicks on an item in the list.

Rendering and Filtering Logic

The core logic for which items are displayed in the list resides within the getFilteredItems function in useListStore. The List component simply calls this function and maps over the returned array to render ListItem components.

Sources: src/components/Form/List.jsx:37-38, 50

Filtering Rules

The getFilteredItems function implements the following logic:

1. If filterTag is set to "Archive", it returns only the items that include "Archive" in their tags array.
2. If filterTag is set to any other string, it returns items that include that tag and do not include the "Archive" tag.
3. If filterTag is null or undefined, it returns all items that do not include the "Archive" tag.

This ensures that archived items are generally hidden unless the user specifically chooses to view the archive.

Sources: src/Hooks/useListStore.js:68-79

The filtering logic can be visualized as follows:

ListItem Sub-Component

The ListItem is a small, presentational component responsible for rendering a single entry in the list. It displays the item's title and the date it was added.

Sources: src/components/Form/List.jsx:8-25

Properties

Prop	Type	Description
item	Object	The script item object to display.
onSelect	Function	Callback function executed on click, passing the item. Mapped to selectItem from useListStore.
setVisible	Function	Callback function executed on click. Mapped to setPrewOpen from App.jsx to show the DetailView.

Sources: src/components/Form/List.jsx:8, 14-15

Item Data Structure

The item object passed to ListItem is created in the Form component and stored in useListStore. It has the following structure:

Field	Type	Description
id	String	A unique identifier generated by crypto.randomUUID().
title	String	The name of the script, with a max length of 12 characters.
content	String	The actual PowerShell script content, read from a .ps1 or .txt file.
tags	Array<String>	An array of tags associated with the script.
date	String	The date the script was added, formatted as a toLocaleDateString().

Sources: src/components/Form/Form.jsx:52-58, 81, src/Hooks/useListStore.js:41-44

Behavior

On click, the ListItem component performs two actions:

1. It calls onSelect(item), which updates the selectedItem in the global state.
2. It calls setVisible(true), which updates the local state in App.jsx to render the DetailView component.

// src/components/Form/List.jsx:13-16
onClick={() => {
  onSelect(item);
  setVisible(true);
}}

Sources: src/components/Form/List.jsx:13-16

Conclusion

The List component serves as the primary navigation and selection interface for scripts in the application. By leveraging a centralized Zustand store for state management (useListStore), it remains a relatively simple, presentation-focused component. Its main responsibilities are to display filtered data provided by the store, handle user selection, and trigger the visibility of other components like DetailView in response to user actions. The built-in animation and asynchronous hydration handling make for a smooth and responsive user experience.

Sources: src/components/Form/List.jsx, src/Hooks/useListStore.js