Commit c183b88

aurorac183b88

aurora: nothing os redesign, phase 5 (settings app)

Settings app opens maximized (window rule) in glyph's prefs layout: Doto section words,
captioned pages, key hints. Switch/Choice/Knob/Field restyled as glyph pill toggles,
segmented pills, dotted sliders and pill fields; key caps, credits on about.

Author: krolyxon
Date: 2026-10-28 20:49 +0530
Parent: b7d60e8
Commit: c183b8898f05406168dbdef280e80469cc361ff3

+291 −238

14 files changed

Browse files Patch

−Context 3+

M .config/hypr/source/window_rules.lua +2 −4
M .config/quickshell/aurora/Choice.qml +11 −19
M .config/quickshell/aurora/Field.qml +31 −19
M .config/quickshell/aurora/Knob.qml +18 −12
M .config/quickshell/aurora/SetAbout.qml +26 −10
M .config/quickshell/aurora/SetAppearance.qml +8 −6
M .config/quickshell/aurora/SetDisplay.qml +16 −12
M .config/quickshell/aurora/SetInput.qml +6 −4
M .config/quickshell/aurora/SetKeys.qml +14 −15
M .config/quickshell/aurora/SetPower.qml +23 −15
M .config/quickshell/aurora/SetShell.qml +5 −4
M .config/quickshell/aurora/SetWindows.qml +6 −4
M .config/quickshell/aurora/SettingsApp.qml +88 −92
M .config/quickshell/aurora/Switch.qml +37 −22

M .config/hypr/source/window_rules.lua View

M .config/quickshell/aurora/Choice.qml View

M .config/quickshell/aurora/Field.qml View

M .config/quickshell/aurora/Knob.qml View

M .config/quickshell/aurora/SetAbout.qml View

M .config/quickshell/aurora/SetAppearance.qml View

M .config/quickshell/aurora/SetDisplay.qml View

M .config/quickshell/aurora/SetInput.qml View

M .config/quickshell/aurora/SetKeys.qml View

M .config/quickshell/aurora/SetPower.qml View

M .config/quickshell/aurora/SetShell.qml View

M .config/quickshell/aurora/SetWindows.qml View

M .config/quickshell/aurora/SettingsApp.qml View

M .config/quickshell/aurora/Switch.qml View

		@@ -37,7 +37,7 @@ hl.window_rule({
37	37		float = true,
38	38		})
39	39
40		−	-- aurora's settings app: a normal window, floating and centred by default
	40	+	-- aurora's settings app: a normal window, opened maximized (glyph's full-screen prefs layout, but still a window)
41	41		hl.window_rule({
42	42		name = "aurora-settings",
43	43
		@@ -46,7 +46,5 @@ hl.window_rule({
46	46		title = "^aurora settings$",
47	47		},
48	48
49		−	float = true,
50		−	size = "960 680",
51		−	center = true,
	49	+	maximize = true,
52	50		})

		@@ -1,7 +1,7 @@
1	1		import QtQuick
2	2		import QtQuick.Layouts
3	3
4		−	// label + segmented buttons. options: [{value, label}] (settings app)
	4	+	// A settings row: label + a segmented pill where the primary cell slides to the choice. options: [{value, label}]
5	5		RowLayout {
6	6		id: c
7	7		property string label: ""
		@@ -9,29 +9,21 @@ RowLayout {
9	9		property var value
10	10		signal picked(var v)
11	11		Layout.fillWidth: true
12		−	spacing: 8
	12	+	Layout.leftMargin: 18
	13	+	spacing: 16
13	14		Text {
14		−	Layout.preferredWidth: 150
	15	+	Layout.preferredWidth: 200
15	16		text: c.label
16	17		color: Theme.fg
17	18		elide: Text.ElideRight
18		−	font.family: Theme.font
19		−	font.pixelSize: Theme.fontSize
	19	+	font.family: Theme.ui
	20	+	font.pixelSize: 15
20	21		}
21		−	RowLayout {
	22	+	Segmented {
22	23		Layout.fillWidth: true
23		−	spacing: 2
24		−	Repeater {
25		−	model: c.options
26		−	delegate: IconBtn {
27		−	required property var modelData
28		−	Layout.fillWidth: true
29		−	Layout.preferredWidth: 1 // equal widths, whatever the label length
30		−	implicitHeight: 26
31		−	label: modelData.label
32		−	active: c.value === modelData.value
33		−	onClicked: c.picked(modelData.value)
34		−	}
35		−	}
	24	+	implicitHeight: 46
	25	+	options: c.options
	26	+	value: c.value
	27	+	onPicked: v => c.picked(v)
36	28		}
37	29		}

		@@ -1,43 +1,54 @@
1	1		import QtQuick
2	2		import QtQuick.Layouts
3	3
4		−	// label + one-line text input; `submitted` fires on Enter or when focus leaves with a changed value (settings app)
	4	+	// A settings row: label + a one-line text pill with the live caret; `submitted` fires on Enter or when focus leaves
	5	+	// with a changed value, `edited` on every keystroke (live filters)
5	6		RowLayout {
6	7		id: f
7	8		property string label: ""
8	9		property string value: ""
9	10		property string placeholder: ""
10	11		signal submitted(string v)
11		−	signal edited(string v) // every keystroke (live filters)
	12	+	signal edited(string v)
12	13		Layout.fillWidth: true
13		−	spacing: 8
	14	+	Layout.leftMargin: 18
	15	+	Layout.rightMargin: 14
	16	+	spacing: 16
14	17		Text {
15		−	Layout.preferredWidth: 150
	18	+	Layout.preferredWidth: 200
	19	+	visible: f.label !== ""
16	20		text: f.label
17	21		color: Theme.fg
18	22		elide: Text.ElideRight
19		−	font.family: Theme.font
20		−	font.pixelSize: Theme.fontSize
	23	+	font.family: Theme.ui
	24	+	font.pixelSize: 15
21	25		}
22	26		Rectangle {
23	27		Layout.fillWidth: true
24		−	implicitHeight: 28
25		−	color: Theme.surface
	28	+	implicitHeight: 46
	29	+	radius: 23
	30	+	color: Theme.s2
26	31		border.width: 1
27		−	border.color: input.activeFocus ? Theme.accent : Theme.line
	32	+	border.color: input.activeFocus ? Theme.fill : Theme.s2
28	33		TextInput {
29	34		id: input
30	35		anchors.fill: parent
31		−	anchors.leftMargin: 8
32		−	anchors.rightMargin: 8
	36	+	anchors.leftMargin: 20
	37	+	anchors.rightMargin: 20
33	38		verticalAlignment: TextInput.AlignVCenter
34	39		clip: true
35	40		text: f.value
36	41		color: Theme.fg
37		−	selectionColor: Theme.accent
38		−	selectedTextColor: Theme.bg
39		−	font.family: Theme.font
40		−	font.pixelSize: Theme.fontSize
	42	+	selectionColor: Theme.fill
	43	+	selectedTextColor: Theme.fillFg
	44	+	font.family: Theme.ui
	45	+	font.pixelSize: 15
	46	+	cursorDelegate: Rectangle {
	47	+	width: 2
	48	+	color: Theme.live
	49	+	visible: input.activeFocus
	50	+	Timer { running: input.activeFocus; interval: 500; repeat: true; onTriggered: parent.opacity = 1 - parent.opacity }
	51	+	}
41	52		onTextEdited: f.edited(text)
42	53		onAccepted: { if (text !== f.value) f.submitted(text); focus = false }
43	54		onActiveFocusChanged: if (!activeFocus && text !== f.value) f.submitted(text)
		@@ -45,13 +56,14 @@ RowLayout {
45	56		}
46	57		Text {
47	58		anchors.fill: parent
48		−	anchors.leftMargin: 8
	59	+	anchors.leftMargin: 20
49	60		verticalAlignment: Text.AlignVCenter
50	61		visible: input.text === "" && !input.activeFocus
51	62		text: f.placeholder
52		−	color: Theme.dim
53		−	font.family: Theme.font
54		−	font.pixelSize: Theme.fontSize
	63	+	elide: Text.ElideRight
	64	+	color: Theme.mute
	65	+	font.family: Theme.ui
	66	+	font.pixelSize: 15
55	67		}
56	68		}
57	69		}

		@@ -1,7 +1,7 @@
1	1		import QtQuick
2	2		import QtQuick.Layouts
3	3
4		−	// label + slider + value, for an integer or real setting (settings app)
	4	+	// A settings row: label + dotted slider + value, for an integer or real setting
5	5		RowLayout {
6	6		id: k
7	7		property string label: ""
		@@ -12,14 +12,17 @@ RowLayout {
12	12		property string unit: ""
13	13		signal moved(real v)
14	14		Layout.fillWidth: true
15		−	spacing: 8
	15	+	Layout.leftMargin: 18
	16	+	Layout.rightMargin: 14
	17	+	implicitHeight: 48
	18	+	spacing: 16
16	19		Text {
17		−	Layout.preferredWidth: 150
	20	+	Layout.preferredWidth: 200
18	21		text: k.label
19	22		color: Theme.fg
20	23		elide: Text.ElideRight
21		−	font.family: Theme.font
22		−	font.pixelSize: Theme.fontSize
	24	+	font.family: Theme.ui
	25	+	font.pixelSize: 15
23	26		}
24	27		BarSlider {
25	28		Layout.fillWidth: true
		@@ -29,12 +32,15 @@ RowLayout {
29	32		value: k.value
30	33		onMoved: v => k.moved(k.decimals ? Math.round(v * 100) / 100 : Math.round(v))
31	34		}
32		−	Text {
33		−	Layout.preferredWidth: 56
34		−	horizontalAlignment: Text.AlignRight
35		−	text: (k.decimals ? k.value.toFixed(k.decimals) : String(Math.round(k.value))) + k.unit
36		−	color: Theme.fg
37		−	font.family: Theme.font
38		−	font.pixelSize: Theme.fontSize
	35	+	Rectangle {
	36	+	Layout.preferredWidth: 76
	37	+	implicitHeight: 32
	38	+	radius: 16
	39	+	color: Theme.s2
	40	+	Lb {
	41	+	anchors.centerIn: parent
	42	+	text: (k.decimals ? k.value.toFixed(k.decimals) : String(Math.round(k.value))) + k.unit
	43	+	color: Theme.fg
	44	+	}
39	45		}
40	46		}

		@@ -50,7 +50,7 @@ Flickable {
50	50		Text {
51	51		text: Theme.iArch
52	52		color: Theme.accent
53		−	font.family: Theme.font
	53	+	font.family: Theme.ui
54	54		font.pixelSize: 56
55	55		}
56	56		ColumnLayout {
		@@ -58,16 +58,16 @@ Flickable {
58	58		Text {
59	59		text: flick.info.length ? flick.info[0][1] : ""
60	60		color: Theme.fg
61		−	font.family: Theme.font
62		−	font.pixelSize: Theme.fontSize + 6
	61	+	font.family: Theme.ui
	62	+	font.pixelSize: 21
63	63		font.bold: true
64	64		}
65	65		Text {
66	66		text: Quickshell.env("USER") + "@" + (flick.info.length > 2 ? flick.info[2][1] : "")
67	67		+ " · up " + Theme.fmtTime(SysStats.uptime)
68	68		color: Theme.dim
69		−	font.family: Theme.font
70		−	font.pixelSize: Theme.fontSize
	69	+	font.family: Theme.ui
	70	+	font.pixelSize: 15
71	71		}
72	72		}
73	73		}
		@@ -83,16 +83,17 @@ Flickable {
83	83		Layout.preferredWidth: 150
84	84		text: modelData[0]
85	85		color: Theme.accent
86		−	font.family: Theme.font
87		−	font.pixelSize: Theme.fontSize
	86	+	font.family: Theme.ui
	87	+	font.pixelSize: 15
88	88		}
89	89		Text {
90	90		Layout.fillWidth: true
	91	+	Layout.leftMargin: 18
91	92		text: modelData[1]
92	93		color: Theme.fg
93	94		elide: Text.ElideRight
94		−	font.family: Theme.font
95		−	font.pixelSize: Theme.fontSize
	95	+	font.family: Theme.ui
	96	+	font.pixelSize: 15
96	97		}
97	98		}
98	99		}
		@@ -109,9 +110,24 @@ Flickable {
109	110		required property var modelData
110	111		label: modelData.label
111	112		frac: modelData.used / modelData.size
112		−	fill: frac > 0.9 ? Theme.err : Theme.accent
	113	+	fill: frac > 0.9 ? Theme.err : Theme.fill
113	114		valueText: flick.size(modelData.used) + " / " + flick.size(modelData.size)
114	115		}
115	116		}
	117	+
	118	+	SectionLabel { text: "credits"; Layout.topMargin: 6 }
	119	+	Text {
	120	+	Layout.fillWidth: true
	121	+	Layout.leftMargin: 18
	122	+	wrapMode: Text.WordWrap
	123	+	lineHeight: 1.3
	124	+	color: Theme.fgDim
	125	+	font.family: Theme.ui
	126	+	font.pixelSize: 14
	127	+	text: "The look follows Nothing OS through glyph-rice by Nebelung-cloud (GPL-3.0): its design language, "
	128	+	+ "dot-matrix shaders and several components. Fonts: Doto, Space Grotesk, Space Mono (SIL OFL). "
	129	+	+ "Colours: matugen (Material You). Nothing, Nothing OS and Glyph are trademarks of Nothing Technology Ltd; "
	130	+	+ "this is a fan setup, not affiliated with Nothing."
	131	+	}
116	132		}
117	133		}

		@@ -20,11 +20,12 @@ Flickable {
20	20		SectionLabel { text: "wallpaper" }
21	21		Text {
22	22		Layout.fillWidth: true
	23	+	Layout.leftMargin: 18
23	24		text: Wall.current !== "" ? Wall.current.replace(Wall.home, "~") : "-"
24	25		elide: Text.ElideLeft
25	26		color: Theme.dim
26		−	font.family: Theme.font
27		−	font.pixelSize: Theme.fontSize - 1
	27	+	font.family: Theme.ui
	28	+	font.pixelSize: 14
28	29		}
29	30		RowLayout {
30	31		Layout.fillWidth: true
		@@ -45,8 +46,8 @@ Flickable {
45	46		Text {
46	47		text: "random picks from"
47	48		color: Theme.fg
48		−	font.family: Theme.font
49		−	font.pixelSize: Theme.fontSize
	49	+	font.family: Theme.ui
	50	+	font.pixelSize: 15
50	51		}
51	52		Flow {
52	53		Layout.fillWidth: true
		@@ -89,11 +90,12 @@ Flickable {
89	90		SectionLabel { text: "colours" }
90	91		Text {
91	92		Layout.fillWidth: true
	93	+	Layout.leftMargin: 18
92	94		text: "matugen scheme from the wallpaper, accent = its primary"
93	95		elide: Text.ElideRight
94	96		color: Theme.dim
95		−	font.family: Theme.font
96		−	font.pixelSize: Theme.fontSize - 1
	97	+	font.family: Theme.ui
	98	+	font.pixelSize: 14
97	99		}
98	100		Flow {
99	101		Layout.fillWidth: true

		@@ -155,10 +155,11 @@ Flickable {
155	155		anchors.margins: 6
156	156		Text {
157	157		Layout.fillWidth: true
	158	+	Layout.leftMargin: 18
158	159		text: "keep this display setup? reverting in " + flick.countdown + "s"
159	160		color: Theme.fg
160		−	font.family: Theme.font
161		−	font.pixelSize: Theme.fontSize
	161	+	font.family: Theme.ui
	162	+	font.pixelSize: 15
162	163		}
163	164		IconBtn { icon: Theme.iCheck; label: "keep"; active: true; onClicked: flick.keep() }
164	165		IconBtn { icon: Theme.iRefresh; label: "revert"; onClicked: flick.revert() }
		@@ -166,12 +167,13 @@ Flickable {
166	167		}
167	168		Text {
168	169		Layout.fillWidth: true
	170	+	Layout.leftMargin: 18
169	171		visible: flick.message !== ""
170	172		text: flick.message
171	173		color: Theme.err
172	174		wrapMode: Text.WordWrap
173		−	font.family: Theme.font
174		−	font.pixelSize: Theme.fontSize - 1
	175	+	font.family: Theme.ui
	176	+	font.pixelSize: 14
175	177		}
176	178
177	179		SectionLabel { text: "layout" }
		@@ -184,11 +186,12 @@ Flickable {
184	186		}
185	187		Text {
186	188		Layout.fillWidth: true
	189	+	Layout.leftMargin: 18
187	190		text: "applies whenever a monitor is plugged in. external only turns the laptop panel back on when the last external screen is unplugged."
188	191		color: Theme.dim
189	192		wrapMode: Text.WordWrap
190		−	font.family: Theme.font
191		−	font.pixelSize: Theme.fontSize - 1
	193	+	font.family: Theme.ui
	194	+	font.pixelSize: 14
192	195		}
193	196
194	197		Repeater {
		@@ -204,20 +207,21 @@ Flickable {
204	207		SectionLabel { text: mon.m.name }
205	208		Text {
206	209		Layout.fillWidth: true
	210	+	Layout.leftMargin: 18
207	211		text: mon.m.description + (mon.m.disabled ? " · disabled"
208	212		: " · " + mon.curMode + " @ " + mon.m.refreshRate.toFixed(2) + "Hz · scale " + mon.m.scale
209	213		+ " · at " + mon.m.x + "," + mon.m.y)
210	214		color: Theme.dim
211	215		elide: Text.ElideRight
212		−	font.family: Theme.font
213		−	font.pixelSize: Theme.fontSize - 1
	216	+	font.family: Theme.ui
	217	+	font.pixelSize: 14
214	218		}
215	219		Text {
216	220		visible: !mon.m.disabled
217	221		text: "mode"
218	222		color: Theme.fg
219		−	font.family: Theme.font
220		−	font.pixelSize: Theme.fontSize
	223	+	font.family: Theme.ui
	224	+	font.pixelSize: 15
221	225		}
222	226		Flow {
223	227		Layout.fillWidth: true
		@@ -278,8 +282,8 @@ Flickable {
278	282		visible: !Toggles.hasNightLight
279	283		text: "night light: gammastep isn't running"
280	284		color: Theme.dim
281		−	font.family: Theme.font
282		−	font.pixelSize: Theme.fontSize - 1
	285	+	font.family: Theme.ui
	286	+	font.pixelSize: 14
283	287		}
284	288		}
285	289		}

		@@ -19,12 +19,13 @@ Flickable {
19	19
20	20		Text {
21	21		Layout.fillWidth: true
	22	+	Layout.leftMargin: 18
22	23		visible: HyprConf.message !== ""
23	24		text: HyprConf.message
24	25		color: Theme.err
25	26		wrapMode: Text.WordWrap
26		−	font.family: Theme.font
27		−	font.pixelSize: Theme.fontSize - 1
	27	+	font.family: Theme.ui
	28	+	font.pixelSize: 14
28	29		}
29	30
30	31		SectionLabel { text: "keyboard" }
		@@ -70,11 +71,12 @@ Flickable {
70	71		Layout.fillWidth: true
71	72		Text {
72	73		Layout.fillWidth: true
	74	+	Layout.leftMargin: 18
73	75		text: "per-device settings (hl.device) stay in source/input.lua"
74	76		elide: Text.ElideRight
75	77		color: Theme.dim
76		−	font.family: Theme.font
77		−	font.pixelSize: Theme.fontSize - 2
	78	+	font.family: Theme.ui
	79	+	font.pixelSize: 13
78	80		}
79	81		IconBtn { icon: Theme.iRefresh; label: "reset to config"; onClicked: HyprConf.resetAll(["input:", "cursor:", "gestures:"]) }
80	82		}

		@@ -113,21 +113,20 @@ ColumnLayout {
113	113		}
114	114		Rectangle {
115	115		visible: !parent.isHeader
116		−	Layout.preferredWidth: 220
117		−	implicitHeight: 24
118		−	color: Theme.surface
119		−	border.width: 1
120		−	border.color: Theme.line
121		−	Text {
	116	+	Layout.preferredWidth: 240
	117	+	Layout.leftMargin: 18
	118	+	implicitHeight: 30
	119	+	radius: 15
	120	+	color: Theme.s2
	121	+	Lb {
122	122		anchors.fill: parent
123		−	anchors.leftMargin: 6
	123	+	anchors.leftMargin: 14
	124	+	anchors.rightMargin: 10
124	125		verticalAlignment: Text.AlignVCenter
125	126		text: modelData.keys \|\| ""
126		−	color: Theme.accent
	127	+	color: Theme.fill
127	128		elide: Text.ElideRight
128		−	font.family: Theme.font
129		−	font.pixelSize: Theme.fontSize - 1
130		−	font.bold: true
	129	+	px: 10
131	130		}
132	131		}
133	132		Text {
		@@ -136,15 +135,15 @@ ColumnLayout {
136	135		text: modelData.action \|\| ""
137	136		color: Theme.fg
138	137		elide: Text.ElideRight
139		−	font.family: Theme.font
140		−	font.pixelSize: Theme.fontSize - 1
	138	+	font.family: Theme.ui
	139	+	font.pixelSize: 14
141	140		}
142	141		}
143	142		}
144	143		Text {
145	144		text: page.binds.length + " binds · " + page.file.replace(Quickshell.env("HOME"), "~")
146	145		color: Theme.dim
147		−	font.family: Theme.font
148		−	font.pixelSize: Theme.fontSize - 2
	146	+	font.family: Theme.ui
	147	+	font.pixelSize: 13
149	148		}
150	149		}

		@@ -21,6 +21,7 @@ Flickable {
21	21		}
22	22
23	23		// one timeout row: slider in 30s steps (0 = never) + readable value
	24	+	// one timeout row, like a Knob: slider in 30s steps (0 = never) + the readable value in a chip
24	25		component Timeout: RowLayout {
25	26		id: t
26	27		property string label: ""
		@@ -28,13 +29,16 @@ Flickable {
28	29		property int value: 0
29	30		property int max: 1800
30	31		Layout.fillWidth: true
31		−	spacing: 8
	32	+	Layout.leftMargin: 18
	33	+	Layout.rightMargin: 14
	34	+	implicitHeight: 48
	35	+	spacing: 16
32	36		Text {
33		−	Layout.preferredWidth: 150
	37	+	Layout.preferredWidth: 200
34	38		text: t.label
35	39		color: Theme.fg
36		−	font.family: Theme.font
37		−	font.pixelSize: Theme.fontSize
	40	+	font.family: Theme.ui
	41	+	font.pixelSize: 15
38	42		}
39	43		BarSlider {
40	44		Layout.fillWidth: true
		@@ -44,13 +48,16 @@ Flickable {
44	48		value: t.value
45	49		onMoved: v => Idle.setTimeout(t.key, Math.round(v / 30) * 30)
46	50		}
47		−	Text {
48		−	Layout.preferredWidth: 70
49		−	horizontalAlignment: Text.AlignRight
50		−	text: flick.dur(t.value)
51		−	color: t.value > 0 ? Theme.fg : Theme.dim
52		−	font.family: Theme.font
53		−	font.pixelSize: Theme.fontSize
	51	+	Rectangle {
	52	+	Layout.preferredWidth: 76
	53	+	implicitHeight: 32
	54	+	radius: 16
	55	+	color: Theme.s2
	56	+	Lb {
	57	+	anchors.centerIn: parent
	58	+	text: flick.dur(t.value)
	59	+	color: t.value > 0 ? Theme.fg : Theme.grey
	60	+	}
54	61		}
55	62		}
56	63
		@@ -78,8 +85,8 @@ Flickable {
78	85		+ (Battery.capOn ? "on" : "off") + "."
79	86		: "charges to 100%"
80	87		color: Theme.dim
81		−	font.family: Theme.font
82		−	font.pixelSize: Theme.fontSize - 2
	88	+	font.family: Theme.ui
	89	+	font.pixelSize: 13
83	90		}
84	91		Knob {
85	92		visible: Battery.hasBat
		@@ -141,11 +148,12 @@ Flickable {
141	148		}
142	149		Text {
143	150		Layout.fillWidth: true
	151	+	Layout.leftMargin: 18
144	152		text: "saved to ~/.config/aurora/hypridle.conf, hypridle restarts on change"
145	153		color: Theme.dim
146	154		elide: Text.ElideLeft
147		−	font.family: Theme.font
148		−	font.pixelSize: Theme.fontSize - 2
	155	+	font.family: Theme.ui
	156	+	font.pixelSize: 13
149	157		}
150	158		}
151	159		}

		@@ -24,8 +24,8 @@ Flickable {
24	24		Text {
25	25		text: "pinned apps (pin more from the dock's right-click)"
26	26		color: Theme.dim
27		−	font.family: Theme.font
28		−	font.pixelSize: Theme.fontSize - 1
	27	+	font.family: Theme.ui
	28	+	font.pixelSize: 14
29	29		}
30	30		Flow {
31	31		Layout.fillWidth: true
		@@ -67,11 +67,12 @@ Flickable {
67	67		Layout.fillWidth: true
68	68		Text {
69	69		Layout.fillWidth: true
	70	+	Layout.leftMargin: 18
70	71		text: "~/.config/aurora/settings.json"
71	72		elide: Text.ElideLeft
72	73		color: Theme.dim
73		−	font.family: Theme.font
74		−	font.pixelSize: Theme.fontSize - 2
	74	+	font.family: Theme.ui
	75	+	font.pixelSize: 13
75	76		}
76	77		IconBtn { icon: Theme.iRefresh; label: "reset shell settings"; onClicked: Settings.reset() }
77	78		}

		@@ -20,12 +20,13 @@ Flickable {
20	20
21	21		Text {
22	22		Layout.fillWidth: true
	23	+	Layout.leftMargin: 18
23	24		visible: HyprConf.message !== ""
24	25		text: HyprConf.message
25	26		color: Theme.err
26	27		wrapMode: Text.WordWrap
27		−	font.family: Theme.font
28		−	font.pixelSize: Theme.fontSize - 1
	28	+	font.family: Theme.ui
	29	+	font.pixelSize: 14
29	30		}
30	31
31	32		SectionLabel { text: "gaps & borders" }
		@@ -98,11 +99,12 @@ Flickable {
98	99		Layout.fillWidth: true
99	100		Text {
100	101		Layout.fillWidth: true
	102	+	Layout.leftMargin: 18
101	103		text: "saved to ~/.config/aurora/hypr.lua (loaded last by hyprland.lua)"
102	104		elide: Text.ElideLeft
103	105		color: Theme.dim
104		−	font.family: Theme.font
105		−	font.pixelSize: Theme.fontSize - 2
	106	+	font.family: Theme.ui
	107	+	font.pixelSize: 13
106	108		}
107	109		IconBtn {
108	110		icon: Theme.iRefresh

		@@ -1,10 +1,11 @@
1	1		import QtQuick
2		−	import QtQuick.Layouts
3	2		import Quickshell
4	3
5		−	// The settings app: a normal Hyprland window (class org.quickshell, title "aurora settings"; floated + sized by a
6		−	// window rule). Sidebar of sections, one Loader so only the shown section runs (net scans, bt discovery).
7		−	// Esc closes, Ctrl+Tab / Ctrl+Shift+Tab (or Ctrl+J/K) cycle sections. Opened with the `settings [section]` IPC.
	4	+	// The settings app: a normal Hyprland window (class org.quickshell, title "aurora settings"), opened maximized by a
	5	+	// window rule. glyph's prefs layout: the sections as a column of Doto words (the selected one large with the live dot),
	6	+	// the page on the right under a caption, key hints at the bottom. One Loader, so only the shown section runs.
	7	+	// Up/Down (outside text fields), Ctrl+Tab / Ctrl+Shift+Tab or Ctrl+J/K = sections, Esc closes.
	8	+	// Opened with the `settings [section]` IPC. After glyph-rice (github.com/Nebelung-cloud/glyph-rice, GPL-3.0), prefs/Prefs.qml.
8	9		FloatingWindow {
9	10		id: win
10	11		property bool opened: false
		@@ -15,32 +16,35 @@ FloatingWindow {
15	16
16	17		visible: opened
17	18		title: "aurora settings"
18		−	implicitWidth: 960
19		−	implicitHeight: 680
	19	+	implicitWidth: 1600
	20	+	implicitHeight: 900
20	21		color: Theme.bg
21	22		// closed by the compositor (killactive): keep shell state in sync
22	23		onVisibleChanged: if (!visible && opened) closeRequested()
23	24
24	25		readonly property var sections: [
25		−	{ id: "network", icon: Theme.iWifi, name: "network", group: "connections" },
26		−	{ id: "bluetooth", icon: Theme.iBt, name: "bluetooth", group: "connections" },
27		−	{ id: "sound", icon: Theme.iVolHigh, name: "sound", group: "connections" },
28		−	{ id: "appearance", icon: Theme.iPalette, name: "appearance", group: "look" },
29		−	{ id: "shell", icon: Theme.iDock, name: "shell", group: "look" },
30		−	{ id: "windows", icon: Theme.iWindow, name: "windows", group: "hyprland" },
31		−	{ id: "input", icon: Theme.iMouse, name: "input", group: "hyprland" },
32		−	{ id: "keybinds", icon: Theme.iKeyboard, name: "keybinds", group: "hyprland" },
33		−	{ id: "display", icon: Theme.iMonitor, name: "display", group: "system" },
34		−	{ id: "power", icon: Theme.iPower, name: "power", group: "system" },
35		−	{ id: "about", icon: Theme.iArch, name: "about", group: "system" }
	26	+	{ id: "network", word: "network", caption: "network · wi-fi, wired, tethering" },
	27	+	{ id: "bluetooth", word: "bluetooth", caption: "bluetooth · devices, pairing" },
	28	+	{ id: "sound", word: "sound", caption: "sound · levels, devices, apps" },
	29	+	{ id: "appearance", word: "look", caption: "look · wallpaper, home screen, colours, sizes" },
	30	+	{ id: "shell", word: "shell", caption: "shell · home screen, dock, osd, notifications" },
	31	+	{ id: "windows", word: "windows", caption: "windows · hyprland gaps, borders, effects, layout" },
	32	+	{ id: "input", word: "input", caption: "input · keyboard, mouse, touchpad" },
	33	+	{ id: "keybinds", word: "keys", caption: "keys · hyprland binds" },
	34	+	{ id: "display", word: "display", caption: "display · monitors, layout, night light" },
	35	+	{ id: "power", word: "power", caption: "power · battery, profiles, idle" },
	36	+	{ id: "about", word: "about", caption: "about · this system" }
36	37		]
37	38		readonly property int index: {
38	39		for (var i = 0; i < sections.length; i++) if (sections[i].id === section) return i
39	40		return 0
40	41		}
41	42		function cycle(d) { sectionRequested(sections[(index + d + sections.length) % sections.length].id) }
	43	+	// typing in a field: arrows belong to it
	44	+	function inText() { var a = win.activeFocusItem; return a !== null && a.cursorPosition !== undefined }
42	45
43	46		Item {
	47	+	id: root
44	48		anchors.fill: parent
45	49		focus: true
46	50		Keys.onPressed: e => {
		@@ -49,92 +53,70 @@ FloatingWindow {
49	53		else if (ctrl && (e.key === Qt.Key_Tab \|\| e.key === Qt.Key_J)) { win.cycle(1); e.accepted = true }
50	54		else if (ctrl && (e.key === Qt.Key_Backtab \|\| e.key === Qt.Key_K)) { win.cycle(-1); e.accepted = true }
51	55		}
	56	+	// a click outside the page drops the focus out of text fields (arrows switch sections again)
	57	+	MouseArea { anchors.fill: parent; onClicked: root.forceActiveFocus() }
52	58
53		−	RowLayout {
	59	+	Item {
	60	+	id: stage
54	61		anchors.fill: parent
55		−	spacing: 0
	62	+	Keys.forwardTo: [root]
56	63
57		−	// sidebar
58		−	Rectangle {
59		−	Layout.fillHeight: true
60		−	Layout.preferredWidth: 200
61		−	color: Theme.surface
62		−	ColumnLayout {
63		−	anchors.fill: parent
64		−	anchors.margins: 10
65		−	spacing: 2
66		−	Text {
67		−	Layout.bottomMargin: 8
68		−	text: Theme.iCog + " aurora settings"
69		−	color: Theme.accent
70		−	font.family: Theme.font
71		−	font.pixelSize: Theme.fontSize + 1
72		−	font.bold: true
73		−	}
74		−	Repeater {
75		−	model: win.sections
76		−	delegate: ColumnLayout {
77		−	id: entry
78		−	required property var modelData
79		−	required property int index
80		−	readonly property bool current: win.section === modelData.id
81		−	readonly property bool firstOfGroup: index === 0 \|\| win.sections[index - 1].group !== modelData.group
82		−	Layout.fillWidth: true
83		−	spacing: 2
84		−	Text {
85		−	visible: entry.firstOfGroup
86		−	Layout.topMargin: entry.index === 0 ? 0 : 8
87		−	text: entry.modelData.group.toUpperCase()
88		−	color: Theme.dim
89		−	font.family: Theme.font
90		−	font.pixelSize: Theme.fontSize - 3
91		−	font.letterSpacing: 1.5
92		−	}
93		−	Rectangle {
94		−	Layout.fillWidth: true
95		−	implicitHeight: 30
96		−	color: entry.current ? Theme.accent : (em.containsMouse ? Theme.surfaceHi : "transparent")
97		−	Text {
98		−	anchors.verticalCenter: parent.verticalCenter
99		−	x: 10
100		−	text: entry.modelData.icon + " " + entry.modelData.name
101		−	color: entry.current ? Theme.bg : Theme.fg
102		−	font.family: Theme.font
103		−	font.pixelSize: Theme.fontSize
104		−	font.bold: entry.current
105		−	}
106		−	MouseArea {
107		−	id: em
108		−	anchors.fill: parent
109		−	hoverEnabled: true
110		−	cursorShape: Qt.PointingHandCursor
111		−	onClicked: win.sectionRequested(entry.modelData.id)
112		−	}
	64	+	// ---- sections ----
	65	+	Column {
	66	+	id: words
	67	+	x: Math.round(Math.min(150, win.width * 0.07))
	68	+	anchors.verticalCenter: parent.verticalCenter
	69	+	spacing: 12
	70	+	Repeater {
	71	+	model: win.sections
	72	+	Row {
	73	+	id: w
	74	+	required property var modelData
	75	+	required property int index
	76	+	readonly property bool on: win.index === index
	77	+	spacing: 20
	78	+	Rectangle {
	79	+	anchors.verticalCenter: parent.verticalCenter
	80	+	visible: w.on
	81	+	width: 20
	82	+	height: 20
	83	+	radius: 10
	84	+	color: Theme.live
	85	+	}
	86	+	Num {
	87	+	text: w.modelData.word.toUpperCase()
	88	+	font.pixelSize: w.on ? 76 : 32
	89	+	color: w.on ? Theme.fg : wm.hovered ? Theme.grey : Theme.mute
	90	+	Behavior on font.pixelSize {
	91	+	enabled: Theme.motion
	92	+	NumberAnimation { duration: Theme.t; easing.type: Easing.BezierSpline; easing.bezierCurve: Theme.glide }
113	93		}
	94	+	Behavior on color { enabled: Theme.motion; ColorAnimation { duration: Theme.t } }
114	95		}
	96	+	HoverHandler { id: wm; cursorShape: Qt.PointingHandCursor }
	97	+	TapHandler { onTapped: { win.sectionRequested(w.modelData.id); root.forceActiveFocus() } }
115	98		}
116		−	Item { Layout.fillHeight: true }
117	99		}
118	100		}
119		−	Rectangle { Layout.fillHeight: true; Layout.preferredWidth: 1; color: Theme.line }
120	101
121		−	// content
122		−	ColumnLayout {
123		−	Layout.fillWidth: true
124		−	Layout.fillHeight: true
125		−	Layout.margins: 16
126		−	spacing: 12
127		−	Text {
128		−	text: win.sections[win.index].name.toUpperCase()
129		−	color: Theme.fg
130		−	font.family: Theme.font
131		−	font.pixelSize: Theme.fontSize + 4
132		−	font.bold: true
133		−	font.letterSpacing: 2
	102	+	// ---- the page ----
	103	+	Item {
	104	+	id: pageBox
	105	+	x: Math.max(words.x + 560, Math.round(win.width * 0.42))
	106	+	y: 96
	107	+	width: Math.min(900, win.width - x - 80)
	108	+	height: parent.height - y - 110
	109	+	Lb {
	110	+	id: caption
	111	+	x: 18
	112	+	text: win.sections[win.index].caption
134	113		}
135	114		Loader {
136		−	Layout.fillWidth: true
137		−	Layout.fillHeight: true
	115	+	anchors.top: caption.bottom
	116	+	anchors.topMargin: 24
	117	+	anchors.left: parent.left
	118	+	anchors.right: parent.right
	119	+	anchors.bottom: parent.bottom
138	120		active: win.opened
139	121		sourceComponent: {
140	122		switch (win.section) {
		@@ -153,7 +135,21 @@ FloatingWindow {
153	135		}
154	136		}
155	137		}
	138	+
	139	+	Row {
	140	+	x: words.x
	141	+	anchors.bottom: parent.bottom
	142	+	anchors.bottomMargin: 50
	143	+	spacing: 34
	144	+	Repeater {
	145	+	model: ["↑↓ section", "ctrl tab next", "esc close"]
	146	+	Lb { required property string modelData; text: modelData }
	147	+	}
	148	+	}
156	149		}
	150	+	// ↑↓ switch sections unless a text field has the keyboard
	151	+	Keys.onUpPressed: e => { if (win.inText()) { e.accepted = false; return } win.cycle(-1) }
	152	+	Keys.onDownPressed: e => { if (win.inText()) { e.accepted = false; return } win.cycle(1) }
157	153		}
158	154
159	155		Component { id: netC; NetPage { active: true } }

		@@ -1,7 +1,9 @@
1	1		import QtQuick
2	2		import QtQuick.Layouts
3	3
4		−	// label (+ optional hint) and an on/off box; the whole row is clickable (settings app)
	4	+	// A settings row: label (+ optional hint) and glyph's pill toggle on the right; the whole row is clickable.
	5	+	// The toggle: off = a dark pill with a dim knob on the left, on = the primary fill runs to the right with a dot.
	6	+	// After glyph-rice (github.com/Nebelung-cloud/glyph-rice, GPL-3.0), prefs/Toggle.qml.
5	7		Rectangle {
6	8		id: s
7	9		property string label: ""
		@@ -10,49 +12,62 @@ Rectangle {
10	12		signal toggled(bool on)
11	13
12	14		Layout.fillWidth: true
13		−	implicitHeight: Math.max(30, txt.implicitHeight + 10)
14		−	color: m.containsMouse ? Theme.surface : "transparent"
	15	+	implicitHeight: Math.max(56, txt.implicitHeight + 20)
	16	+	radius: 28
	17	+	color: m.containsMouse ? Theme.s2 : "transparent"
15	18
16	19		ColumnLayout {
17	20		id: txt
18	21		anchors.left: parent.left
	22	+	anchors.leftMargin: 18
19	23		anchors.right: box.left
20		−	anchors.rightMargin: 10
	24	+	anchors.rightMargin: 16
21	25		anchors.verticalCenter: parent.verticalCenter
22		−	spacing: 0
	26	+	spacing: 3
23	27		Text {
24	28		Layout.fillWidth: true
25	29		text: s.label
26	30		color: Theme.fg
27	31		elide: Text.ElideRight
28		−	font.family: Theme.font
29		−	font.pixelSize: Theme.fontSize
	32	+	font.family: Theme.ui
	33	+	font.pixelSize: 15
30	34		}
31		−	Text {
	35	+	Lb {
32	36		Layout.fillWidth: true
33	37		visible: s.hint !== ""
34	38		text: s.hint
35		−	color: Theme.dim
36	39		wrapMode: Text.WordWrap
37		−	font.family: Theme.font
38		−	font.pixelSize: Theme.fontSize - 2
	40	+	px: 10
39	41		}
40	42		}
41		−	Rectangle { // the switch: square track, knob left (off) / right (on)
	43	+	Rectangle {
42	44		id: box
43	45		anchors.right: parent.right
	46	+	anchors.rightMargin: 14
44	47		anchors.verticalCenter: parent.verticalCenter
45		−	width: 36
46		−	height: 18
47		−	color: s.checked ? Theme.accent : Theme.surfaceHi
48		−	border.width: 1
49		−	border.color: s.checked ? Theme.accent : Theme.line
	48	+	width: 64
	49	+	height: 34
	50	+	radius: 17
	51	+	color: Theme.s3
50	52		Rectangle {
51		−	width: 12
52		−	height: 12
53		−	anchors.verticalCenter: parent.verticalCenter
54		−	x: s.checked ? parent.width - width - 3 : 3
55		−	color: s.checked ? Theme.bg : Theme.dim
	53	+	x: 4
	54	+	y: 4
	55	+	width: s.checked ? parent.width - 8 : height
	56	+	height: parent.height - 8
	57	+	radius: height / 2
	58	+	color: s.checked ? Theme.fill : Theme.mute
	59	+	Behavior on width { enabled: Theme.motion; NumberAnimation { duration: Theme.t; easing.type: Easing.BezierSpline; easing.bezierCurve: Theme.glide } }
	60	+	Behavior on color { enabled: Theme.motion; ColorAnimation { duration: Theme.t } }
	61	+	Rectangle {
	62	+	anchors.right: parent.right
	63	+	anchors.rightMargin: 8
	64	+	anchors.verticalCenter: parent.verticalCenter
	65	+	visible: s.checked
	66	+	width: 10
	67	+	height: 10
	68	+	radius: 5
	69	+	color: Theme.fillFg
	70	+	}
56	71		}
57	72		}
58	73		MouseArea {

aurora/c183b88

aurora: nothing os redesign, phase 5 (settings app)

aurorac183b88