Skip to content

feat(settings): improve battery status layout #3103

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

Open
hthienloc wants to merge 7 commits into
base: master
Choose a base branch
from
+118 −89
Open

feat(settings): improve battery status layout #3103

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dbd6e83
feat(settings): improve battery status layout
hthienloc Aug 18, 2026
6515395
fix(settings): shorten battery power label
hthienloc Aug 18, 2026
f2451b3
refactor(settings): remove duplicate power source
hthienloc Aug 18, 2026
df40aa0
chore(settings): update search index
hthienloc Aug 18, 2026
5a768b9
fix(settings): combine battery estimate time
hthienloc Aug 20, 2026
d1df7b3
merge: update battery status branch
hthienloc Aug 20, 2026
7f32ebb
fix(settings): address battery layout review
hthienloc Aug 21, 2026
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
205 changes: 117 additions & 88 deletions quickshell/Modules/Settings/BatteryTab.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ import qs.Modules.Settings.Widgets
Item {
id: root

readonly property color batteryStatusColor: {
if (BatteryService.isLowBattery && !BatteryService.isCharging)
return Theme.error;
if (BatteryService.isCharging || BatteryService.isPluggedIn)
return Theme.primary;
return Theme.surfaceText;
}

Process {
id: applyLimitProcess
command: ["pkexec", "sh", "-c", "
Expand Down Expand Up @@ -47,8 +55,6 @@ done
// 1. Information Card
SettingsCard {
width: parent.width
iconName: "battery_charging_full"
title: I18n.tr("Status")
settingKey: "batteryStatusCard"

@claude claude Bot Aug 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Dropping title: here breaks the settings-search label for this card. extract_settings_index.py falls back to the block's first text: when there's no title (find_settings_components, lines 368-377), so it picked up the no-battery fallback string: the regenerated index now lists batteryStatusCard as "Power" (and with no icon) instead of "Status". Users searching settings will see the battery card titled "Power" under the "Power & Security" tab, which reads as a different setting.

If the header-less card is intentional, keep the searchable title but hide the header — or at minimum reorder so the first text: in the block is a meaningful label rather than the !batteryAvailable fallback.

tags: ["battery", "status", "charge", "health"]

Expand All @@ -57,108 +63,131 @@ done
x: Theme.spacingM
spacing: Theme.spacingM

SettingsDivider {}

Row {
width: parent.width
StyledText {
text: I18n.tr("Power source")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
}
StyledText {
text: BatteryService.isPluggedIn ? I18n.tr("AC Adapter (Plugged In)") : I18n.tr("Battery Power")
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
}
}
spacing: Theme.spacingM

SettingsDivider {}

Row {
width: parent.width
StyledText {
text: I18n.tr("Charge Level")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
DankIcon {
name: BatteryService.getBatteryIcon()
size: Theme.iconSizeLarge
color: root.batteryStatusColor
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: `${BatteryService.batteryLevel}%`
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
}
}

SettingsDivider {}

Row {
width: parent.width
StyledText {
text: I18n.tr("Status")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
}
StyledText {
text: BatteryService.batteryStatus
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
Column {
spacing: Theme.spacingXS
width: parent.width - Theme.iconSizeLarge - Theme.spacingM
anchors.verticalCenter: parent.verticalCenter

Row {
spacing: Theme.spacingS
width: parent.width

StyledText {
text: BatteryService.batteryAvailable ? `${BatteryService.batteryLevel}%` : I18n.tr("Power")
font.pixelSize: Theme.fontSizeXLarge
font.weight: Font.Bold
color: root.batteryStatusColor
}

StyledText {
text: BatteryService.batteryAvailable ? BatteryService.batteryStatus : I18n.tr("Management")
font.pixelSize: Theme.fontSizeLarge
font.weight: Font.Medium
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
elide: Text.ElideRight
width: Math.max(0, parent.width - 100)
}
}

StyledText {
text: BatteryService.isPluggedIn ? I18n.tr("Plugged In (AC)") : I18n.tr("Battery Power")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceTextMedium
width: parent.width
elide: Text.ElideRight
}
}
}

SettingsDivider {}

Row {
Item {
width: parent.width
StyledText {
text: I18n.tr("Estimated Time")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
height: 4

Rectangle {
anchors.fill: parent
radius: height / 2
color: Theme.withAlpha(Theme.primary, 0.16)
}
StyledText {
text: BatteryService.formatTimeRemaining()
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft

Rectangle {
width: parent.width * Math.max(0, Math.min(1, BatteryService.batteryLevel / 100))
height: parent.height
radius: height / 2
color: root.batteryStatusColor
visible: BatteryService.batteryAvailable
}
}

SettingsDivider {}

Row {
width: parent.width
StyledText {
text: I18n.tr("Battery Health")
font.pixelSize: Theme.fontSizeMedium
color: Theme.surfaceVariantText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft
spacing: Theme.spacingM

Item {
width: (parent.width - Theme.spacingM) / 2
height: timeColumn.implicitHeight

Column {
id: timeColumn
width: parent.width
spacing: Theme.spacingXXS

StyledText {
text: I18n.tr("Estimated time")

@claude claude Bot Aug 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

These re-cased/reworded labels create brand-new untranslated terms and orphan already-translated ones. quickshell/translations/en.json has Estimated Time (line 8809), Battery Health (3262) and AC Adapter (Plugged In) (964), each referenced only from this file — so this PR drops every existing locale's translation for them in exchange for identical strings that differ only in casing/wording. CONTRIBUTING asks to reuse existing terms.

Please restore the exact existing terms:

  • line 147: I18n.tr("Estimated Time")
  • line 177: I18n.tr("Battery Health")
  • line 105: I18n.tr("AC Adapter (Plugged In)")
Suggested change
text: I18n.tr("Estimated time")
text: I18n.tr("Estimated Time")

font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceTextMedium
}

StyledText {
text: {
const remaining = BatteryService.formatTimeRemaining();
const estimated = BatteryService.formatEstimatedTime();
return estimated ? `${remaining} (${estimated})` : remaining;
}
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width
elide: Text.ElideRight
}
}
}
StyledText {
text: BatteryService.batteryHealth
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width / 2
horizontalAlignment: Text.AlignLeft

Item {
width: (parent.width - Theme.spacingM) / 2
height: healthColumn.implicitHeight

Column {
id: healthColumn
width: parent.width
spacing: Theme.spacingXXS

StyledText {
text: I18n.tr("Battery health")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceTextMedium
}

StyledText {
text: BatteryService.batteryHealth
font.pixelSize: Theme.fontSizeMedium
font.weight: Font.Medium
color: Theme.surfaceText
width: parent.width
elide: Text.ElideRight
}
}
}
}
}
Expand Down
35 changes: 20 additions & 15 deletions quickshell/translations/settings_search_index.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11141,6 +11141,26 @@
],
"description": "Show a notification when battery reaches the charge limit."
},
{
"section": "batteryStatusCard",
"label": "Power",
"tabIndex": 42,
"category": "Power & Security",
"keywords": [
"battery",
"charge",
"health",
"hibernate",
"power",
"reboot",
"restart",
"security",
"shutdown",
"sleep",
"status",
"suspend"
]
},
{
"section": "_tab_42",
"label": "Power & Security",
Expand Down Expand Up @@ -11233,21 +11253,6 @@
"icon": "tune",
"description": "Limit the maximum battery charge level to extend lifespan."
},
{
"section": "batteryStatusCard",
"label": "Status",
"tabIndex": 42,
"category": "Power & Security",
"keywords": [
"battery",
"charge",
"health",
"power",
"security",
"status"
],
"icon": "battery_charging_full"
},
{
"section": "_tab_43",
"label": "Widgets & Notifications",
Expand Down
Loading