fix: hide placeholder when tags exist in allowed file extensions input

[Bhaaru2]

What does this PR do?

Fixes the placeholder behavior in the allowed file extensions input.

Previously, when users added file extensions (tags), the placeholder text shifted to the right instead of disappearing. This change hides the placeholder once tags exist, ensuring consistent input behavior.

Test Plan

1. Go to Storage → Bucket → Settings
2. Add file extensions (e.g. mp4, jpg, pdf)
3. The placeholder should disappear instead of shifting to the right.

Related Issues

Fixes #1018

Summary by CodeRabbit

• Bug Fixes
  • Improved the input tags component behavior. The placeholder text now hides when tags are present, providing a cleaner and more intuitive user interface.

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Queued	Authorize	Preview URL

Tip

MCP server integration brings LLM superpowers to Claude Desktop and Cursor IDE

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0dd2a611-4481-4283-8b2f-3c9d4b06f3d3

📥 Commits

Reviewing files that changed from the base of the PR and between 6138b73 and 745c6ca.

📒 Files selected for processing (1)

• src/lib/elements/forms/inputTags.svelte

---

Walkthrough

This change modifies the placeholder behavior in the inputTags component. The placeholder prop passed to the Input.Tags element is now conditionally set: when tags exist (tags.length is truthy), the placeholder displays as an empty string; otherwise, it displays the provided placeholder value. This is a single-line logic change affecting how the input field's placeholder text is rendered based on tag presence.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main change: hiding the placeholder when tags exist in the allowed file extensions input, which aligns with the changeset's modification.
Linked Issues check	✅ Passed	The PR addresses issue #1018 by implementing conditional placeholder visibility: showing it only when no tags exist, meeting the requirement to hide the placeholder when input contains tags.
Out of Scope Changes check	✅ Passed	The change is limited to the placeholder behavior in the inputTags component, directly addressing the linked issue with no unrelated modifications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[greptile-apps]

Greptile Summary

This PR fixes a minor UX issue in the inputTags.svelte element where the placeholder text would remain visible and shift to the right when tags were added, instead of disappearing. The fix is a single-line change that conditionally passes an empty string as the placeholder prop when tags.length > 0, and restores the original placeholder when the array is empty.

Key changes:

• src/lib/elements/forms/inputTags.svelte: Replace {placeholder} with placeholder={tags.length ? '' : placeholder} so the placeholder is hidden whenever at least one tag is present.

The fix is minimal, correct, and idiomatic Svelte — the template expression is automatically reactive because tags is bound via bind:value={tags}, so the placeholder will reappear correctly if all tags are removed.

Confidence Score: 5/5

• This PR is safe to merge — the change is a minimal, correct one-line fix with no side effects.
• The diff is a single-line change in a leaf UI component. The fix correctly leverages Svelte's reactive template expressions: since tags is bound via bind:value={tags}, any change to the array (add/remove) will trigger a re-render and re-evaluate the ternary, ensuring the placeholder appears and disappears at the right times. No logic, accessibility, or behavioral regressions are introduced.
• No files require special attention.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[InputTags renders] --> B{tags.length > 0?}
    B -- Yes --> C[placeholder = '' empty string]
    B -- No --> D[placeholder = original placeholder prop]
    C --> E[Input.Tags rendered — no placeholder shown]
    D --> F[Input.Tags rendered — placeholder text visible]
    E --> G{User removes all tags?}
    G -- Yes --> B
    G -- No --> E
    F --> H{User adds a tag?}
    H -- Yes --> B
    H -- No --> F

Loading

_{Last reviewed commit: 745c6ca}

[Bhaaru2]

Tested the fix locally.

Steps:

1. Go to Storage → Bucket → Settings
2. Add file extensions (e.g. mp4, jpg)

Result:
The placeholder now disappears when tags are present instead of shifting to the right.