feat: block quick search #229

sapayth · 2025-09-19T05:18:32Z

fixes #156

User Story
As a site admin,
I want to add a “Quick Search” block to my documentation pages,
So that readers can instantly search and access relevant documentation (sections, articles, or popular docs) without leaving the page.

Summary by CodeRabbit

New Features
- Added “weDocs – Quick Search” block with a modal, live search, and keyboard shortcut (Cmd/Ctrl+K).
- Configurable sources (None, Sections, Articles, Helpful) with adjustable count and optional result icons.
- Extensive styling controls for search box and modal, plus result highlighting.
Improvements
- Accessible modal with ARIA, keyboard navigation, and screen reader updates.
- Expanded frontend CSS utilities and components; integrated Quick Search initialization on load.
Chores
- Set project Node.js version to 18.
- Updated asset manifests, versions, and build metadata.

coderabbitai · 2025-09-19T05:18:42Z

Walkthrough

Introduces a new server-rendered “Quick Search” block with PHP render and AJAX search, templates, and editor UI. Adds a dynamic block render loader. Refactors data store into modular docs/settings stores. Updates build artifacts, CSS utilities, and asset manifests/versions. Adds Node version file. Minor dependency tweak adds wp-data.

Changes

Cohort / File(s)	Summary
Environment config `/.nvmrc`	New Node version file specifying 18.
Asset manifests and versions `/assets/build/block.asset.php`, `/assets/build/frontend.asset.php`, `/assets/build/index.asset.php`, `/assets/build/print.asset.php`, `/assets/build/store.asset.php`	Version hashes updated; `block.asset.php` adds `wp-data` to dependencies; others unchanged structurally.
Frontend build artifacts `/assets/build/frontend.css`, `/assets/build/frontend.js`, `/assets/build/print.css`, `/assets/build/print.js`, `/assets/build/index.css`	Generated headers/source maps added; webpack bootstrap added for CSS bundles; large CSS additions including modal, badges, steps, utilities, and animations.
QuickSearch block (build + source + templates + wiring) `/assets/build/blocks/QuickSearch/`, `/src/blocks/QuickSearch/`, `/src/blocks/QuickSearch/templates/*`, `/includes/Ajax.php`, `/assets/js/frontend.js`, `/src/blocks/index.js`	Adds block metadata, attributes, edit/save components, server render with helpers, templates (empty-state, item, results), AJAX search endpoint, frontend init hook, and build outputs.
Dynamic render loader `/wedocs.php`	Adds init-time loader to require each block’s render.php under assets/build/blocks/*; replaces single hard-coded include.
Data store modularization `/assets/build/store.js`	Replaces monolithic store with modular docs/settings stores (actions, controls, reducers, resolvers, selectors) and registers both.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

Add Promotional Banner to weDocs Dashboard #209 — Touches promo-notice and store logic similar to the modular store changes (actions/controls like dismissPromoNotice and isProLoaded gating).
Add docs grid #203 — Alters block registration/render loading in wedocs.php, related to this PR’s dynamic render loader and new block addition.

Suggested reviewers

iftakharul-islam

Poem

A bunny taps “⌘K” with cheer,
A modal blooms, the docs appear.
With badges bright and steps that spin,
I sniff the queries, dive right in.
New stores are tidy, renders load—
Hop, search, and find along the road! 🐇🔎

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Linked Issues Check	⚠️ Warning	The PR implements a Quick Search feature (block, templates, AJAX handler) and a client-store refactor, but it does not satisfy the explicit requirements of linked issue #156 because there are no package.json or lockfile updates for fast-xml-parser/is-svg nor code adaptations to v4 APIs, and it does not provide explicit, verifiable migration-focused fixes or tests for issue #190 — the store refactor may help reactivity but the diff lacks targeted migration fixes or test evidence that "migrated docs reactivity" is resolved.	Add the dependency updates (fast-xml-parser v4.2.7 and is-svg v4.4.0) with corresponding package-lock/yarn-lock changes and adapt code to the v4 API (plus CI/tests for XML/SVG paths), and either provide targeted changes and automated tests that reproduce-and-fix the migrated-docs reactivity for #190 or split the store/refactor into a focused PR that includes those verifications before marking the linked issues as fixed.
Out of Scope Changes Check	⚠️ Warning	This PR contains substantial additions beyond the linked-issue scope (a full Quick Search feature, many new templates, large CSS and built-asset changes, .nvmrc, and multiple asset version bumps) that are not required to satisfy the stated linked issues (#156 and #190) and significantly expand the review surface.	Separate concerns into focused PRs: place the Quick Search feature in its own feature PR, put dependency/security upgrades (#156) in a dedicated PR with package and code adaptations plus tests, and isolate any migration/reactivity fixes (#190) into a minimal PR with reproducible tests; also minimize or separate compiled/build artifact commits to reduce review noise.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "feat: block quick search" is concise and accurately describes the primary change in this PR — the addition of a Quick Search block and its supporting render/templates — making it clear and appropriate for changelog/history scanning.
Docstring Coverage	✅ Passed	Docstring coverage is 81.25% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 15

🧹 Nitpick comments (29)

assets/js/frontend.js (1)
266-271: Security nit: add rel="noopener noreferrer" to _blank links.
Prevents tabnabbing and removes window.opener linkage.
-          <a
+          <a
             href="${ url }"
             target="_blank"
+            rel="noopener noreferrer"
             class="${ bootstrapTemplate + tailwindTemplate }doc-search-hit-result"
           >
assets/build/frontend.css (1)

1-3: Source maps in production: confirm policy.
Header and /*# sourceMappingURL=frontend.css.map*/ added. Either ship the .map file or strip the comment in release to avoid 404s and reduce asset size.

Also applies to: 1223-1224

assets/build/print.css (1)

1-3: Source maps in production: confirm policy.
Same as frontend.css—ensure .map is shipped or the comment is removed for releases.

Also applies to: 185-186
src/blocks/QuickSearch/templates/empty-state.php (1)
22-22: Consider escaping the icon output.

The icon is output directly without escaping. If this contains user-controlled content, it could pose an XSS risk.
-            <?php echo $icon; ?>
+            <?php echo wp_kses( $icon, wp_kses_allowed_html( 'post' ) ); ?>
src/blocks/QuickSearch/templates/search-item.php (1)
27-29: Security: Consider validating the permalink URL.

While esc_url() is used, the URL comes from $doc['permalink'] which could potentially contain unsafe URLs like javascript: schemes.
-     onclick="window.open('<?php echo esc_url( $permalink ); ?>', '_blank')">
+     onclick="window.open('<?php echo esc_url( $permalink, ['http', 'https'] ); ?>', '_blank')">
src/blocks/QuickSearch/save.js (1)
90-94: Consider improving the keyboard shortcut icon.

The current SVG shows an "X" pattern rather than the typical command key symbol. Consider using a more appropriate icon for keyboard shortcuts.
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <path d="M9 9l6 6m0-6l-6 6"/>
-                        </svg>
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M6 4h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V14c.58.45 1 1.27 1 2.25C12 17.31 10.31 19 8.5 19H4c-.83 0-1.5-.67-1.5-1.5v-11C2.5 5.67 3.17 5 4 5h2V4z"/>
+                        </svg>
assets/build/index.css (3)
2006-2015: Duplicate @Keyframes spin definitions detected.

There are two @keyframes spin blocks in the CSS, which could cause conflicts. The static analysis tool correctly identified this duplication.

Remove one of the duplicate @keyframes spin definitions to avoid potential conflicts:
-@keyframes spin {
-
-  to {
-    transform: rotate(360deg);
-  }
-}
Also applies to: 4108-4116

1913-1914: Handle duplicate property declarations.

The static analysis tool identified duplicate transition-property and grid-template-columns declarations that could cause unexpected behavior.

Review and consolidate the duplicate property declarations to ensure consistent styling behavior.

Also applies to: 2259-2260

6332-6335: External carousel library CSS causing parse errors.

The included react-responsive-carousel CSS is causing multiple parse errors in the static analysis tool. Consider extracting this to a separate CSS file or reviewing if it's needed.
+/* External carousel library styles - consider extracting to separate file */
-/*!************************************************************************************************************************************************************************************************************************!*\
-  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/react-responsive-carousel/lib/styles/carousel.min.css ***!
-  \************************************************************************************************************************************************************************************************************************/
assets/build/store.js (1)
321-330: Wrap switch case declarations in blocks to prevent scope leakage.

The variables setDocState and isNotInParent can leak to other switch cases. This matches the static analysis findings.

Apply this fix to properly scope the declarations:
-    case 'SET_DOC':
-      const setDocState = {
+    case 'SET_DOC': {
+      const setDocState = {
         ...state,
         docs: [...state.docs, action.doc]
       };
       const isNotInParent = !state.parents.some(parent => parent?.id === action?.doc?.id);
       if (!action.doc.parent && isNotInParent) {
         setDocState.parents = [{
           ...action.doc
         }, ...state.parents];
       }
       return setDocState;
+    }
src/blocks/QuickSearch/style.scss (1)
1-8: Consider scoping the editor panel styles more specifically.

The CSS selector .components-grid.components-tools-panel.block-editor-panel-color-gradient-settings is quite generic and could affect other blocks' color panels. Consider adding a more specific parent selector to avoid unintended side effects.

Apply this fix to scope the styles to your block:
+.wedocs-quick-search-editor {
   .components-grid.components-tools-panel.block-editor-panel-color-gradient-settings {
       padding: 0;
       margin-bottom: 1rem;
   }
+}
wedocs.php (1)
184-195: Add error handling for the block loader.

Consider adding error handling to gracefully handle cases where a render file might be malformed.

Apply this improvement:
 public function load_block_render_files() {
     $blocks_dir = plugin_dir_path( __FILE__ ) . 'assets/build/blocks/';
     if ( is_dir( $blocks_dir ) ) {
         $block_dirs = glob( $blocks_dir . '*', GLOB_ONLYDIR );
         foreach ( $block_dirs as $block_dir ) {
             $render_file = $block_dir . '/render.php';
             if ( file_exists( $render_file ) ) {
-                require_once $render_file;
+                try {
+                    require_once $render_file;
+                } catch ( \Exception $e ) {
+                    error_log( 'weDocs: Failed to load block render file: ' . $render_file . ' - ' . $e->getMessage() );
+                }
             }
         }
     }
 }
src/blocks/QuickSearch/block.json (1)

35-37: Validate helpfulDocsCount range.

Consider adding min/max constraints for the helpfulDocsCount attribute to prevent unreasonable values.

You might want to add validation in your edit.js component to ensure this value stays within a reasonable range (e.g., 1-50).
includes/Ajax.php (1)
320-321: Consider using a more robust template path resolution.

The hardcoded relative path could break if the plugin structure changes.

Use the plugin constants for more reliable path resolution:
-            $template_path = plugin_dir_path( __FILE__ ) . '../src/blocks/QuickSearch/templates/search-results.php';
+            $template_path = WEDOCS_PATH . '/src/blocks/QuickSearch/templates/search-results.php';
src/blocks/QuickSearch/templates/search-results.php (2)
58-75: Clickable row: add noopener/noreferrer and keyboard/ARIA support.

Opening new tabs without noopener allows reverse‑tabnabbing; divs aren’t keyboard‑accessible.

Apply:
-            <div class="flex items-start cursor-pointer transition-colors"
+            <div class="flex items-start cursor-pointer transition-colors"
                  style="
@@
-                 onmouseover="this.style.backgroundColor='#F3F4F6'"
-                 onmouseout="this.style.backgroundColor='<?php echo esc_js( $modal_styles['listItemBackgroundColor'] ?? 'transparent' ); ?>'"
-                 onclick="window.open('<?php echo esc_url( $permalink ); ?>', '_blank')">
+                 onmouseover="this.style.backgroundColor='#F3F4F6'"
+                 onmouseout="this.style.backgroundColor='<?php echo esc_js( $modal_styles['listItemBackgroundColor'] ?? 'transparent' ); ?>'"
+                 role="link"
+                 tabindex="0"
+                 onkeydown="if(event.key==='Enter'||event.key===' '){window.open('<?php echo esc_url( $permalink ); ?>','_blank','noopener,noreferrer');event.preventDefault();}"
+                 onclick="window.open('<?php echo esc_url( $permalink ); ?>', '_blank','noopener,noreferrer')">
49-55: Optional: Pass $query into the template explicitly.

This template uses $query implicitly. Make it an explicit arg from the render/AJAX loader to avoid hidden globals.
src/blocks/QuickSearch/edit.js (5)
103-104: Remove stray console.log in production.

Apply:
-                            console.log('Updating search box placeholder:', newPlaceholder);
45-63: Remove unused searchBoxStyle object.

It’s never referenced.

Apply:
-    const searchBoxStyle = {
-        backgroundColor: searchBoxStyles.backgroundColor,
-        borderColor: searchBoxStyles.borderColor,
-        borderWidth: searchBoxStyles.borderWidth,
-        borderRadius: searchBoxStyles.borderRadius,
-        paddingTop: searchBoxStyles.padding.top,
-        paddingRight: searchBoxStyles.padding.right,
-        paddingBottom: searchBoxStyles.padding.bottom,
-        paddingLeft: searchBoxStyles.padding.left,
-        marginTop: searchBoxStyles.margin.top,
-        marginRight: searchBoxStyles.margin.right,
-        marginBottom: searchBoxStyles.margin.bottom,
-        marginLeft: searchBoxStyles.margin.left,
-        fontSize: searchBoxStyles.fontSize,
-        fontWeight: searchBoxStyles.fontWeight,
-        letterSpacing: searchBoxStyles.letterSpacing,
-        lineHeight: searchBoxStyles.lineHeight,
-        color: searchBoxStyles.placeholderColor,
-    };
83-91: Remove unused colorOptions.

Apply:
-    const colorOptions = [
-        { name: 'Default', color: '#9CA3AF' },
-        { name: 'Black', color: '#000000' },
-        { name: 'White', color: '#FFFFFF' },
-        { name: 'Gray', color: '#6B7280' },
-        { name: 'Blue', color: '#3B82F6' },
-        { name: 'Red', color: '#EF4444' },
-        { name: 'Green', color: '#10B981' },
-    ];
262-263: Fix className typo.

Apply:
-                    <p className="'mb-0'">{__('The styling will be shown in the frontend, not in the editor', 'wedocs')}</p>
+                    <p className="mb-0">{__('The styling will be shown in the frontend, not in the editor', 'wedocs')}</p>
380-385: Use a unique input id and proper boolean for disabled.

Duplicate IDs are possible if multiple blocks exist; also React props should use boolean for disabled.

Apply:
-import { Fragment } from '@wordpress/element';
+import { Fragment } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
@@
-    const blockProps = useBlockProps();
+    const blockProps = useBlockProps();
+    const inputId = useInstanceId( Edit, 'wedocs-quick-search' );
@@
-                            <input
-                                id="wedocs-quick-search"
+                            <input
+                                id={ inputId }
@@
-                                disabled="disabled"
+                                disabled
assets/build/blocks/QuickSearch/render.php (4)
411-418: Add rel="noopener noreferrer" to external links.

Prevents reverse‑tabnabbing.

Apply:
-                        <a href="<?php echo esc_url( $item['permalink'] ); ?>" 
+                        <a href="<?php echo esc_url( $item['permalink'] ); ?>" 
                            class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium mr-2 mb-2 transition-colors hover:opacity-80"
                            style="background-color: <?php echo esc_attr( $modal_styles['docLabelColor'] ?? '#3B82F6' ); ?>20; color: <?php echo esc_attr( $modal_styles['docLabelColor'] ?? '#3B82F6' ); ?>;"
-                           target="_blank">
+                           target="_blank" rel="noopener noreferrer">
620-624: Honor the configured list item background color when clearing selection.

Avoid hard‑coded #F9FAFB.

Apply:
-                    item.style.backgroundColor = '#F9FAFB';
+                    item.style.backgroundColor = '<?php echo esc_js( $modal_styles['listItemBackgroundColor'] ?? '#F9FAFB' ); ?>';
33-52: Parity with src/ logic: validate doc types in get_modal_docs_data.

The build version doesn’t validate section/article IDs and marks “helpful” without deriving the actual type. Port the stricter checks from src/blocks/QuickSearch/render.php.

Also applies to: 66-75, 118-127

343-764: Race condition on rapid input: last‑response wins.

Out‑of‑order AJAX responses can overwrite newer results. Use AbortController or a monotonically increasing request id to drop stale responses.

I can patch this if you want.
src/blocks/QuickSearch/render.php (4)
466-471: Add rel="noopener noreferrer" to chips links.

Apply:
-                        <a href="<?php echo esc_url( $item['permalink'] ); ?>" 
+                        <a href="<?php echo esc_url( $item['permalink'] ); ?>" 
                            class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium mr-2 mb-2 transition-colors hover:opacity-80 no-underline"
                            style="background-color: <?php echo esc_attr( $modal_styles['docLabelColor'] ?? '#3B82F6' ); ?>20; color: <?php echo esc_attr( $modal_styles['docLabelColor'] ?? '#3B82F6' ); ?>;"
-                           target="_blank">
+                           target="_blank" rel="noopener noreferrer">
677-681: Honor configured background when clearing selection.

Apply:
-                    item.style.backgroundColor = '#F9FAFB';
+                    item.style.backgroundColor = '<?php echo esc_js( $modal_styles['listItemBackgroundColor'] ?? '#F9FAFB' ); ?>';
722-729: Dead code: highlightSearchTerms is defined but unused.

Remove or wire it to template rendering to avoid duplication with PHP highlighting.

300-304: Out‑of‑order AJAX responses can override newer results.

Add AbortController or a request counter to drop stale responses.

I can patch with a minimal let currentController pattern if you’d like.

Also applies to: 561-574

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7d2fc7e and 6419b10.

⛔ Files ignored due to path filters (10)

assets/build/block.js.map is excluded by !**/*.map
assets/build/frontend.css.map is excluded by !**/*.map
assets/build/frontend.js.map is excluded by !**/*.map
assets/build/index.css.map is excluded by !**/*.map
assets/build/index.js.map is excluded by !**/*.map
assets/build/print.css.map is excluded by !**/*.map
assets/build/print.js.map is excluded by !**/*.map
assets/build/store.js.map is excluded by !**/*.map
assets/build/style-block.css.map is excluded by !**/*.map
package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (28)

.nvmrc (1 hunks)
assets/build/block.asset.php (1 hunks)
assets/build/blocks/QuickSearch/block.json (1 hunks)
assets/build/blocks/QuickSearch/render.php (1 hunks)
assets/build/frontend.asset.php (1 hunks)
assets/build/frontend.css (2 hunks)
assets/build/frontend.js (1 hunks)
assets/build/index.asset.php (1 hunks)
assets/build/index.css (42 hunks)
assets/build/print.asset.php (1 hunks)
assets/build/print.css (2 hunks)
assets/build/print.js (1 hunks)
assets/build/store.asset.php (1 hunks)
assets/build/store.js (1 hunks)
assets/js/frontend.js (1 hunks)
includes/Ajax.php (2 hunks)
src/blocks/QuickSearch/attributes.js (1 hunks)
src/blocks/QuickSearch/block.json (1 hunks)
src/blocks/QuickSearch/edit.js (1 hunks)
src/blocks/QuickSearch/index.js (1 hunks)
src/blocks/QuickSearch/render.php (1 hunks)
src/blocks/QuickSearch/save.js (1 hunks)
src/blocks/QuickSearch/style.scss (1 hunks)
src/blocks/QuickSearch/templates/empty-state.php (1 hunks)
src/blocks/QuickSearch/templates/search-item.php (1 hunks)
src/blocks/QuickSearch/templates/search-results.php (1 hunks)
src/blocks/index.js (1 hunks)
wedocs.php (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (7)

src/blocks/QuickSearch/attributes.js (2)

src/blocks/QuickSearch/edit.js (1)

attributes (17-27)

src/blocks/QuickSearch/save.js (1)

attributes (4-17)

src/blocks/QuickSearch/index.js (2)

src/blocks/QuickSearch/save.js (1)

Save (3-99)

src/blocks/QuickSearch/edit.js (1)

Edit (14-431)

includes/Ajax.php (1)

wedocs.php (1)

template_path (317-319)

src/blocks/QuickSearch/edit.js (2)

src/blocks/QuickSearch/save.js (3)

blockProps (23-25)

attributes (4-17)

searchBoxStyle (27-47)

src/blocks/QuickSearch/attributes.js (1)

attributes (3-89)

src/blocks/QuickSearch/render.php (4)

assets/build/blocks/QuickSearch/render.php (3)

get_modal_docs_data (22-131)

render_wedocs_quick_search (139-765)

wedocs_block_quick_search_get_template (230-243)

assets/js/frontend.js (1)

article (74-74)

src/blocks/QuickSearch/attributes.js (1)

attributes (3-89)

includes/Frontend.php (2)

Frontend (10-179)

enqueue_assets (113-118)

src/blocks/QuickSearch/save.js (2)

src/blocks/QuickSearch/attributes.js (1)

attributes (3-89)

src/blocks/QuickSearch/edit.js (3)

attributes (17-27)

blockProps (15-15)

searchBoxStyle (45-63)

assets/build/blocks/QuickSearch/render.php (4)

src/blocks/QuickSearch/render.php (3)

get_modal_docs_data (55-182)

render_wedocs_quick_search (190-822)

wedocs_block_quick_search_get_template (284-297)

src/blocks/QuickSearch/attributes.js (1)

attributes (3-89)

wedocs.php (2)

template_path (317-319)

WeDocs (55-329)

includes/Frontend.php (2)

Frontend (10-179)

enqueue_assets (113-118)

🪛 Biome (2.1.2)

assets/build/index.css

[error] 1913-1913: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

transition-property is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)

[error] 2259-2259: Duplicate properties can lead to unexpected behavior and may override previous declarations unintentionally.

grid-template-columns is already defined here.

Remove or rename the duplicate property to ensure consistent styling.

(lint/suspicious/noDuplicateProperties)