fix: truncate long custom status text in sidebar (#6776)

[vps-time-1]

🧩 Summary

This PR fixes issue #6776 where the custom status text in the sidebar wrapped onto multiple lines.
Now the text is displayed on a single line and truncated with an ellipsis (…) when it’s too long.

---

🧪 Steps to Test

1. Open the app and login.
2. Set a long custom status — for example:

   “I am on a very long vacation at the Himalayas right now 🌄”

3. Open the sidebar.
4. Observe that the status text:
   • Appears on a single line ✅
   • Shows ellipsis (…) at the end when too long ✅
   • Does not wrap onto multiple lines ❌

---

Summary by CodeRabbit

• Bug Fixes

  • Custom status title now truncates with an ellipsis and is constrained to a single line for consistent display.
  • Edit-control rendering adjusted to behave correctly when notification limits are active.

• Style

  • Added styling to ensure status text truncates correctly and fits available space.

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[coderabbitai]

Walkthrough

Refactors CustomStatus so List.Item's title is rendered via a single-line, ellipsized Text element (adds Text import) and adds a matching statusText style to SidebarView styles to constrain layout.

Changes

Cohort / File(s)	Change Summary
Title rendering refactor app/views/SidebarView/components/CustomStatus.tsx	Added Text to React Native imports. Replaced List.Item title string (`statusText
Style addition app/views/SidebarView/styles.ts	Added exported statusText style with flex: 1 and overflow: 'hidden' to support the single-line ellipsized title.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check numberOfLines={1} and ellipsizeMode="tail" visually across narrow widths.
• Verify styles.statusText (flex + overflow) doesn't disrupt List.Item layout or adjacent controls.
• Confirm I18n.t('Edit_Status') fallback and that removing translateTitle doesn't change behavior.

Poem

🐰 I nibble code where titles bloom,
A single line, a tidy plume,
Tail tucked neat, no overflow fuss,
Status snug — concise for us. ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix: truncate long custom status text in sidebar (#6776)' directly and clearly describes the main change: fixing truncation of long custom status text in the sidebar.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 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.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 3532447 and 6ed56b4.

📒 Files selected for processing (1)

• app/views/SidebarView/components/CustomStatus.tsx (2 hunks)

🔇 Additional comments (1)

app/views/SidebarView/components/CustomStatus.tsx (1)

2-2: LGTM! Text import added for ellipsis handling.

The addition of Text to the React Native imports is necessary to support the new truncation behavior in the title render function.

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 6ed56b4 and 11c9fc7.

📒 Files selected for processing (2)

• app/views/SidebarView/components/CustomStatus.tsx (2 hunks)
• app/views/SidebarView/styles.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

app/views/SidebarView/components/CustomStatus.tsx (1)

app/views/SidebarView/methods/sidebarNavigate.ts (1)

• sidebarNavigate (4-8)

🪛 Biome (2.1.2)

app/views/SidebarView/components/CustomStatus.tsx

[error] 91-91: Shouldn't redeclare 'styles'. Consider to delete it or rename it.

'styles' is defined here:

(lint/suspicious/noRedeclare)

🪛 ESLint

app/views/SidebarView/components/CustomStatus.tsx

[error] 91-91: 'styles' is already defined.

(no-redeclare)

🔇 Additional comments (3)

app/views/SidebarView/styles.ts (1)

38-42: LGTM! Style addition supports text truncation.

The statusText style correctly provides flex: 1 and overflow: 'hidden' properties necessary for the Text component's ellipsize behavior to work properly in the CustomStatus component.

app/views/SidebarView/components/CustomStatus.tsx (2)

2-2: LGTM! Text import required for truncation implementation.

The Text component import is necessary for the render-based title with ellipsizing behavior.

---

69-73: LGTM! Truncation implementation is correct.

The title render function properly implements single-line text truncation using numberOfLines={1} and ellipsizeMode='tail'. The styles.statusText reference will work correctly once the local styles redeclaration is removed.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

app/views/SidebarView/components/CustomStatus.tsx (1)

69-73: Excellent truncation implementation—consider accessibility enhancement.

The single-line truncation is correctly implemented:

• numberOfLines={1} ensures single-line display
• ellipsizeMode='tail' adds the ellipsis
• styles.statusText provides the necessary flex layout

The logic correctly falls back to the localized 'Edit_Status' label when statusText is empty, and all past review feedback has been properly addressed.

Optional enhancement: For better screen reader support, consider adding accessibilityLabel with the full (untruncated) status text:

 <Text numberOfLines={1} ellipsizeMode='tail' style={styles.statusText}>
+	accessibilityLabel={statusText || I18n.t('Edit_Status')}
 	{statusText || I18n.t('Edit_Status')}
 </Text>

Wait, that's not valid syntax. Let me correct that:

-<Text numberOfLines={1} ellipsizeMode='tail' style={styles.statusText}>
+<Text 
+	numberOfLines={1} 
+	ellipsizeMode='tail' 
+	style={styles.statusText}
+	accessibilityLabel={statusText || I18n.t('Edit_Status')}
+>
 	{statusText || I18n.t('Edit_Status')}
 </Text>

This ensures screen readers announce the complete status text even when it's visually truncated.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 11c9fc7 and 14be5d2.

📒 Files selected for processing (1)

• app/views/SidebarView/components/CustomStatus.tsx (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

app/views/SidebarView/components/CustomStatus.tsx (2)

app/containers/CustomIcon/index.tsx (1)

• CustomIcon (38-38)

app/views/SidebarView/methods/sidebarNavigate.ts (1)

• sidebarNavigate (4-8)

🔇 Additional comments (1)

app/views/SidebarView/components/CustomStatus.tsx (1)

2-2: LGTM: Text import correctly added.

The Text import is necessary for the new truncation implementation and is properly added to the existing react-native import statement.

[Rohit3523]

We already have an PR for the same issue #6778