Overview
This prompt aims to guide developers in implementing a new “Listener” feature in a programming application. Programmers and UI/UX designers will benefit from the structured requirements and clear implementation steps.
Prompt Overview
Purpose: The Listener option enhances user control over proxy settings within the application.
Audience: This feature is designed for developers and users who require advanced proxy configurations.
Distinctive Feature: The popup includes two distinct tabs, allowing for organized management of SSL proxify settings and proxy port configurations.
Outcome: Users will efficiently manage proxy settings, improving the application’s functionality and user experience.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Creative Writing & Storytelling, Cryptocurrency & Blockchain, Development Tools & DevOps
- Techniques: Function Calling / Tool Use, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are an expert coder and UI/UX designer, renowned for perfection and bug-free implementations. Your task is to update the menubar by adding a “Listener” option under the “Settings” menubar item, similar to the existing “Certificate Settings”.
**Listener Popup Requirements:**
– The Listener should open a popup similar to the existing SettingsModal, featuring two tabs:
– “SSL Proxify”
– “Proxy & Port”
**Details for Each Tab:**
1. Proxy & Port Tab:
– Contains a single number-input field styled according to the existing theme.ts.
– This field is for specifying the proxy port number.
2. SSL Proxify Tab:
– Layout: Split screen with two boxes side-by-side: “Include” and “Exclude”.
– Each box has a title at the top (“Include” on the left, “Exclude” on the right).
– Each box contains a table with rows having two columns:
– A checkbox (nameless) on the left.
– A “Location” column on the right displaying host:port.
– Below each table, provide “Add” and “Remove” buttons for managing entries.
**Add Popup for SSL Proxify Entries:**
– Must contain:
– A “Host” input that supports regex and wildcard characters (e.g., ‘*’) to match all hosts.
– A “Port” input that also supports wildcards.
**Backend Implementation Requirements:**
– The SSL Proxify logic dictates that hosts listed under “Include” are the only ones proxied; hosts not included should pass through without SSL proxying.
– The Proxy & Port change should be persisted in the backend with a method to update the listening port.
**Rules to Follow:**
– Follow all given rules meticulously.
– Provide full code for all modified files without comments.
– Prior to coding, ask for any necessary components, import code, or interface details required to fully understand the existing structure.
– Your code must be flawless, bug-free, and polished.
**# Steps**
3. Request any missing component or interface code relevant to the SettingsModal and menubar if needed.
4. Implement adding “Listener” to the Settings menubar.
5. Create the Listener popup with two tabs: SSL Proxify and Proxy & Port.
6. Implement the Proxy & Port tab with a themed number input for the port.
7. Implement the SSL Proxify tab as a split-screen layout with Include and Exclude boxes.
8. Each box should have a checkbox and Location columns in a table alongside Add and Remove buttons.
9. Create Add Popup dialogs supporting regex and wildcard inputs for Host and Port.
10. Integrate backend support to save/update SSL Proxy include/exclude rules and the proxy port.
**# Output Format**
Provide full updated source code files that have been modified or created during this task, strictly without any inline comments. If you require additional code or interface definitions to proceed, ask clearly before starting the implementation.
Screenshot Examples
How to Use This Prompt
- Copy the prompt.
- Identify necessary components for the SettingsModal and menubar.
- Implement the “Listener” option in the Settings menubar.
- Create the Listener popup with SSL Proxify and Proxy & Port tabs.
- Develop the Proxy & Port tab with a themed number input.
- Build the SSL Proxify tab with Include and Exclude tables.
Tips for Best Results
- Plan Your Structure: Outline the components and their interactions before coding.
- Use Consistent Styling: Ensure all UI elements follow the existing theme for a cohesive look.
- Test Thoroughly: Validate both frontend and backend functionalities to catch any bugs early.
- Document Your Code: Maintain clear documentation for future reference and team collaboration.
FAQ
- What is the purpose of the Listener option in the menubar?
The Listener option allows users to configure SSL proxy settings and manage proxy ports. - What tabs are included in the Listener popup?
The Listener popup features two tabs: 'SSL Proxify' and 'Proxy & Port'. - What does the Proxy & Port tab contain?
It contains a single themed number-input field for specifying the proxy port number. - How are hosts managed in the SSL Proxify tab?
Hosts are managed in 'Include' and 'Exclude' boxes with tables for adding or removing entries.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
