Skip to content

fix: Add preset loading functionality for multiple tabs #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
May 29, 2025
Merged

fix: Add preset loading functionality for multiple tabs #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b7062f5
feat: add presets module
iAmNsengi May 28, 2025
5103762
feat: add presets examples
iAmNsengi May 28, 2025
3835cfc
feat: apply presets && styling
iAmNsengi May 28, 2025
afbea65
feat: Add preset loading functionality for multiple tabs
iAmNsengi May 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1197,3 +1197,25 @@ body.dark-mode .mock-preview-table tr.error td {
border-radius: 8px;
overflow: hidden;
}

.preset-select {
margin-left: 10px;
padding: 5px 10px;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--bg-color);
color: var(--text-color);
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s;
}

.preset-select:hover {
border-color: var(--primary-color);
}

.preset-select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px var(--primary-color-light);
}
Comment on lines +1201 to +1221
Copy link

@coderabbitai coderabbitai bot May 28, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue

CSS variables are undefined and may cause styling issues.

The .preset-select class uses CSS variables (--border-color, --bg-color, --text-color, --primary-color, --primary-color-light) that are not defined anywhere in the CSS file. This will cause the styles to fall back to browser defaults.

Additionally, this introduces inconsistency as the rest of the CSS file uses hardcoded color values (e.g., #007bff for primary color).

Consider either:

  1. Define the CSS variables at the root level:
+:root {
+  --border-color: #ccc;
+  --bg-color: #ffffff;
+  --text-color: #333;
+  --primary-color: #007bff;
+  --primary-color-light: rgba(0, 123, 255, 0.2);
+}
+
+body.dark-mode {
+  --border-color: #555;
+  --bg-color: #2e2e2e;
+  --text-color: #e0e0e0;
+}
+
 .preset-select {
   margin-left: 10px;
   padding: 5px 10px;
  1. Or use hardcoded values consistent with the rest of the file:
 .preset-select {
   margin-left: 10px;
   padding: 5px 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid #ccc;
   border-radius: 4px;
-  background-color: var(--bg-color);
-  color: var(--text-color);
+  background-color: #ffffff;
+  color: #333;
   font-size: 14px;
   cursor: pointer;
   transition: border-color 0.2s;
 }
 
 .preset-select:hover {
-  border-color: var(--primary-color);
+  border-color: #007bff;
 }
 
 .preset-select:focus {
   outline: none;
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px var(--primary-color-light);
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
 }
🤖 Prompt for AI Agents 
In index.css around lines 1201 to 1221, the CSS variables used in the
.preset-select class are not defined, causing fallback to browser defaults and
inconsistency with the rest of the file. Fix this by either defining these
variables (e.g., --border-color, --bg-color, --text-color, --primary-color,
--primary-color-light) at the :root selector with appropriate color values or
replace the variables in the .preset-select styles with the hardcoded color
values used elsewhere in the CSS to maintain consistency.

10 changes: 10 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script src="presets.js"></script>
</head>

<body>
Expand Down Expand Up @@ -99,6 +100,9 @@ <h1 class="text-center animate__animated animate__fadeInDown">
<button class="add-tab-button" onclick="addFormatterTab()">
+ Add Tab
</button>
<select onchange="loadFormatterPreset(this.value)" class="preset-select">
<option value="">-- Load Preset --</option>
</select>
Comment on lines +103 to +105
Copy link

@coderabbitai coderabbitai bot May 28, 2025

Choose a reason for hiding this comment

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

🛠️ Refactor suggestion

Add accessibility attributes to preset select elements.

The preset select elements lack accessibility attributes, which makes it difficult for screen reader users to understand their purpose.

Add aria-label attributes to improve accessibility:

-<select onchange="loadFormatterPreset(this.value)" class="preset-select">
+<select onchange="loadFormatterPreset(this.value)" class="preset-select" aria-label="Load formatter preset">
   <option value="">-- Load Preset --</option>
 </select>
-<select onchange="loadComparePreset(this.value)" class="preset-select">
+<select onchange="loadComparePreset(this.value)" class="preset-select" aria-label="Load compare preset">
   <option value="">-- Load Preset --</option>
 </select>
-<select onchange="loadCodegenPreset(this.value)" class="preset-select">
+<select onchange="loadCodegenPreset(this.value)" class="preset-select" aria-label="Load code generator preset">
   <option value="">-- Load Preset --</option>
 </select>

Also applies to: 118-120, 133-135

🤖 Prompt for AI Agents 
In index.html at lines 103-105, 118-120, and 133-135, the preset select elements
lack accessibility attributes, specifically aria-labels, which are necessary for
screen readers to convey their purpose. Add appropriate aria-label attributes to
each select element to describe their function clearly for assistive
technologies.

</div>
<div id="formatter-tab-contents">
<!-- Formatter tab contents will be dynamically added here -->
Expand All @@ -111,6 +115,9 @@ <h1 class="text-center animate__animated animate__fadeInDown">
<button class="add-tab-button" onclick="addCompareTab()">
+ Add Tab
</button>
<select onchange="loadComparePreset(this.value)" class="preset-select">
<option value="">-- Load Preset --</option>
</select>
</div>
<div id="compare-tab-contents">
<!-- Compare tab contents will be dynamically added here -->
Expand All @@ -123,6 +130,9 @@ <h1 class="text-center animate__animated animate__fadeInDown">
<button class="add-tab-button" onclick="addCodegenTab()">
+ Add Tab
</button>
<select onchange="loadCodegenPreset(this.value)" class="preset-select">
<option value="">-- Load Preset --</option>
</select>
</div>
<div id="codegen-tab-contents">
<!-- CodeGen tab contents will be dynamically added here -->
Expand Down
Loading