refactor(file-browser): Granular item rendering and programmatic DOM list construction - #2722
Closed
AuDevTist1C wants to merge 2 commits into
Hidden character warning
The head ref may contain hidden characters: "\u200brefactor/fb-list-item"
Closed
refactor(file-browser): Granular item rendering and programmatic DOM list construction#2722AuDevTist1C wants to merge 2 commits into
AuDevTist1C wants to merge 2 commits into
Conversation
Isolate the file system rename operation into its own dedicated commit to preserve continuous history tracking within Git. Renaming `list.hbs` to `listItem.hbs` without altering any content ensures Git records this change as a 100% file rename. Decoupling this step prevents Git from misinterpreting subsequent structural template refactors as a destructive file deletion followed by the addition of an entirely new file. * **Template File Rename (`src/pages/fileBrowser/`):** * Renamed `src/pages/fileBrowser/list.hbs` to `src/pages/fileBrowser/listItem.hbs` with zero line changes (100% similarity score), guaranteeing clean `git blame` and file history continuity across structural revisions. (AI generated commit message)
…eholder
Overhaul the directory rendering logic in the file browser by replacing monolithic template compilation with programmatic DOM element construction and individual item parsing.
Previously, directory list rendering relied on a single template (`list.hbs`) that wrapped the outer `<ul>` element, handled list iteration (`{{#list}}`), and relied on the `mustache` package's built-in capability to render placeholder text if the element had no children when the `empty-msg` HTML attribute was provided.
This commit refactors the template down to a granular single-item scale and adds the empty state placeholder back explicitly via programmatic rendering. By splitting template rendering into granular helper functions (`createListEl`, `createListItemEl`, and `createPlaceholderEl`), directory rendering now builds list elements individually and explicitly appends a styled placeholder node whenever a directory contains no files or folders.
* **Template Scope Reduction (`src/pages/fileBrowser/listItem.hbs`):**
* Removed the enclosing `<ul class="list" id="list">` container tag and the surrounding `{{#list}}...{{/list}}` iteration block from the Handlebars template.
* Converted the file into a standalone item partial that takes an entry object and produces a single `<li>` element representing a file or directory row.
* **DOM Element Construction Helpers (`src/pages/fileBrowser/fileBrowser.js`):**
* Added `createListEl()` to dynamically generate the parent `<ul className="list" id="list">` element.
* Added `createListItemEl(obj)` to parse individual item objects through `mustache.render(_listItem, obj)` into single `HTMLLIElement` nodes.
* Added `createPlaceholderEl(msg)` to create dedicated empty-state DOM elements (`<div id="placeholder">{msg}</div>`).
* **Render Loop & Empty State Logic (`src/pages/fileBrowser/fileBrowser.js`):**
* Updated `render(dir)` to construct list containers programmatically and append rendered child elements via standard DOM iteration (`$list.appendChild(el)`).
* Re-implemented empty directory handling: if `list.length` is zero, a placeholder element containing the localized empty folder string is appended to the list, restoring the empty message functionality previously supplied via Mustache's `empty-msg` attribute.
* **Placeholder Layout Styling (`src/pages/fileBrowser/fileBrowser.scss`):**
* Defined CSS rules for `#placeholder` utilizing Flexbox (`display: flex`, `align-items: center`, `justify-content: center`) to ensure empty folder messages are centered within the file browser container.
(AI generated commit message)
Contributor
Author
Oh s...
|
github-project-automation
Bot
moved this from Backlog
to Done
in The Code Board - Acode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
(See #2723)