Using Tags for Organization

Relevant source files

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

• renderer.js
• index.html
• main.js
• README.md
• README_zh.md
• package.json

Introduction

The Tag System in GeekEZ Browser is a feature designed to help users organize and manage browser profiles effectively. By assigning one or more text labels (tags) to each profile, users can categorize them based on purpose, platform, or any other criteria. These tags are displayed with unique, dynamically generated colors for quick visual identification.

The system is integrated into the core profile management workflow, allowing users to add, edit, and filter profiles based on their assigned tags. This functionality is particularly useful for managing a large number of accounts by providing a flexible and intuitive method for grouping and searching.

Sources: [README.md:39-40](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/README.md#L39-L40), [README_zh.md:39-40](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/README_zh.md#L39-L40)

Tag Management UI

The user interface for managing tags is integrated into the "New Profile" and "Edit Profile" modals.

Sources: [index.html:1108-1111, 1132-1135](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/index.html#L1108-L1111)

UI Components

Element	ID	Modal	Description
input	addTags	New Profile	A text field for entering comma-separated tags for a new profile. The placeholder text is "tiktok, fb...".
input	editTags	Edit Profile	A text field for viewing and modifying the comma-separated tags of an existing profile.
label	data-i18n="tagsLabel"	Both	A label for the tag input fields, which displays "Tags (comma separated)".

Sources: [index.html:1109-1110, 1133-1134](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/index.html#L1109-L1110), [renderer.js:116](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L116)

The following diagram shows the location of the tag input field within the "New Profile" modal.

Sources: [index.html:1106-1116](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/index.html#L1106-L1116)

Data Structure and Storage

Tags are stored as an array of strings within the main profile object. This object is part of a larger array of profiles saved in the profiles.json file located in the application's user data directory.

Sources: [main.js:18, 280-285](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/main.js#L18)

Profile Class Diagram

This diagram illustrates the structure of a Profile object, showing that tags is an array of strings.

Sources: [main.js:283-285](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/main.js#L283-L285)

When a user saves a new profile, the save-profile IPC handler in main.js constructs a newProfile object, which includes the tags array parsed from the user's input.

Sources: [main.js:280-285](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/main.js#L280-L285)

Creating and Editing Tags

The process of creating or editing tags involves user input in the renderer process, which is then communicated to the main process for persistence.

Data Flow

The sequence diagram below details the flow of data when a user saves a profile with tags.

Sources: [renderer.js:717-727](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L717-L727), [main.js:280-286](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/main.js#L280-L286)

The tag string parsing logic in renderer.js handles both English (,) and Chinese (，) commas, trims whitespace, and filters out any empty strings resulting from multiple separators.

// From renderer.js
const tagsStr = document.getElementById('addTags').value;
const tags = tagsStr.split(/[,，]/).map(s => s.trim()).filter(s => s);

Sources: [renderer.js:720-721](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L720-L721)

Displaying Tags

Tags are rendered as distinct, colored lozenges on each profile card in the main list view. This allows for quick visual categorization.

Sources: [renderer.js:670-673](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L670-L673)

Rendering Logic

1. The loadProfiles function in renderer.js iterates through each profile.
2. If a profile has a non-empty tags array, the function maps each tag string to an HTML <span> element with the class tag.
3. A helper function, stringToColor, generates a unique color hash based on the tag's string content. This color is applied via inline styles to the tag's background, color, and border.
4. The resulting HTML for all tags is injected into the profile card.

Sources: [renderer.js:636-641, 670-678](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L636-L641)

The following code snippet shows how the tag HTML is generated:

// From renderer.js
let tagsHtml = '';
if (p.tags && p.tags.length > 0) {
    tagsHtml = p.tags.map(tag =>
        `<span class="tag" style="background:${stringToColor(tag)}33; color:${stringToColor(tag)}; border:1px solid ${stringToColor(tag)}44;">${tag}</span>`
    ).join('');
}

Sources: [renderer.js:670-674](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L670-L674)

The base styling for the .tag class is defined in index.html.

Sources: [index.html:442-446](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/index.html#L442-L446)

Filtering by Tags

The application's search functionality is enhanced to include filtering by tags. When a user types into the search box, the profile list is dynamically filtered to show only profiles that match the search term in their name, proxy string, or any of their tags.

Sources: [renderer.js:660-663](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L660-L663)

Filtering Flow

This flowchart illustrates how the search logic incorporates tags.

Sources: [renderer.js:631-634, 659-663](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L631-L634)

The core filtering logic is implemented within the Array.prototype.filter call inside the loadProfiles function.

// From renderer.js
const filtered = profiles.filter(p => {
    const text = searchText;
    // ...
    return p.name.toLowerCase().includes(text) ||
        p.proxyStr.toLowerCase().includes(text) ||
        (p.tags && p.tags.some(t => t.toLowerCase().includes(text)));
});

Sources: [renderer.js:659-663](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L659-L663)

Summary

The tag system is a simple yet powerful feature in GeekEZ Browser for profile organization. It is seamlessly integrated into the UI for creating, editing, and viewing profiles. Tags are stored as a flexible array of strings within the profiles.json data file, and the application leverages this data to provide both visual categorization through colored labels and functional filtering via the main search bar. This enhances user workflow, especially when managing a large and diverse set of browser environments.

Sources: [README.md:39-40](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/README.md#L39-L40), [renderer.js:660-663, 670-674](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/renderer.js#L660-L663), [main.js:283-285](https://github.com/CurtisLu1/GeekezBrowser/blob/HEAD/main.js#L283-L285)