Skip to content

Add tutorial in readme - #11

Merged
swarfte merged 8 commits into
mainfrom
dev
May 31, 2026
Merged

Add tutorial in readme#11
swarfte merged 8 commits into
mainfrom
dev

Conversation

@swarfte

@swarfte swarfte commented May 31, 2026

Copy link
Copy Markdown
Owner

This pull request introduces several major usability improvements to the netcat command builder app, focusing on enhanced profile management, improved search and organization features, and expanded documentation. The sidebar now supports searching, drag-and-drop for organizing profiles, and import/export of profiles and folders. The documentation (README.md) has been updated to reflect these new features, clarify payload modes, and improve formatting for better readability.

Profile Management & Sidebar Enhancements

  • Added a search bar to filter folders and profiles in the sidebar, including logic to display only matching folders and profiles, and an empty state when there are no matches. [1] [2] [3]
  • Implemented drag-and-drop support for moving profiles between folders and visual feedback for drag-over state. [1] [2]
  • Added context menu options and handlers to import/export individual profiles and folders as JSON files, with hidden file input for import functionality. [1] [2] [3] [4]

Documentation & Usability

  • Updated README.md with a new "Tutorial / How to Use" section, expanded feature list, and improved descriptions of payload modes (including the new Cookie mode), profile management, and example commands. [1] [2]
  • Improved table formatting and added missing details for configuration and options in the documentation. [1] [2]
  • Expanded architecture and data flow documentation for clarity. [1] [2] [3]

UI/UX Improvements

  • Adjusted the layout of query parameter input fields in PayloadArea.vue for better usability (wider value field, narrower key field, larger checkbox).

These changes collectively make the app more user-friendly, especially for users managing many profiles or needing to share configurations.

swarfte added 8 commits May 31, 2026 17:14
Tweak layout classes in src/components/PayloadArea.vue to rebalance input widths: change the Key input from col-span-5 to col-span-3 and the Value input from col-span-4 to col-span-6. No functional logic changes—just UI layout adjustments to improve proportions.
Update the query parameter enabled checkbox in PayloadArea.vue: change Tailwind class from `w-4` to `w-5` to slightly enlarge the checkbox for better visual alignment and a larger click target.
Wire up a search input and implement client-side filtering for folders and profiles. Added v-model for searchQuery and computed values (normalizedSearch, isSearchActive, filteredFolderList) to filter folders and profiles. Introduced helper functions isFolderExpanded and getVisibleProfiles so folders auto-expand during search, profile lists and counts reflect visible items, and an empty-state message appears when no matches are found. Existing behavior is preserved when the search is empty.
Enable dragging profiles between folders with visual feedback and safe checks. Template: make profile rows draggable and add drag/drop listeners on folder headers, plus a class binding to highlight the folder being dragged over. Logic: add dragOverFolderId ref and handlers for dragstart/dragend/dragover/dragleave/drop; use dataTransfer to carry {profileId, fromFolderId}, prevent moving the built-in default profile, ignore drops into the same folder, and update the folder store by removing from source and adding to target. Also auto-expands the target folder after a successful drop.
Add Export Profile and Export Folder actions to the profile/folder context menus and UI. Introduces new context options (showExportProfile, showExportFolder), template buttons with icons, and a unified handleExport that triggers exportProfile/exportFolder. Exports produce versioned JSON payloads (nc-profile-export / nc-folder-export) with timestamps, safe file names, and are downloaded via a temporary blob link. Keeps existing behavior by closing the context menu after export.
Add UI and logic to import exported profiles and folders. This adds Import Profile/Import Folder items to the context menu, a hidden file input, and handlers to open the file picker. Implementation includes parsing/validating JSON exports (expecting 'nc-profile-export' or 'nc-folder-export'), importing profiles into a target folder (generating new IDs with crypto.randomUUID()), importing entire folders (with unique-name generation to avoid collisions), and updating expanded folder state. Also wires context menu option flags and provides user feedback on invalid files or errors.
Remove duplicated Import Profile and Import Folder buttons from the context menu in ProfileArea.vue by placing the buttons once earlier in the menu and deleting the redundant block. Cleans up the template to avoid repeated UI elements; no intended functional changes.
Add a Tutorial / How to Use section (includes demo link and step-by-step usage) and expand the README with new examples and formatting improvements. Introduce a Cookie payload mode and update the Payload Editor header to reflect four modes; add details about supported content types. Enhance Profile Management features (search, drag-and-drop, import/export), reformat configuration and advanced-options tables for readability, and add example commands for various modes (GET, POST, listen, UDP). Also update the main screenshot image (screenshot/main_screen.png).
Copilot AI review requested due to automatic review settings May 31, 2026 15:07
@vercel

vercel Bot commented May 31, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nc-command-builder Ready Ready Preview, Comment May 31, 2026 3:07pm

@swarfte
swarfte merged commit baa8ed1 into main May 31, 2026
2 of 3 checks passed

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants