Skip to content

Commit 5ef5952

Browse files
binarypieclaude
andauthored
Redesign shell theme from Material Design to Neovim TUI style (#60)
Transform the Quickshell desktop shell from a GNOME-like Material Design 3 interface to a Neovim/LazyVim-inspired TUI aesthetic: - Replace MD3 surface layer tinting with flat Tokyo Night colors - Change from rounded corners to sharp/minimal TUI-style borders - Add lualine-inspired status bar with mode indicator and segmented sections - Create TuiPanel component for vim-style floating windows with title bars - Add which-key style keyboard hint bars to sidebars and switcher - Redesign ApplicationView with vim-style line numbers, command-line search - Update OSD to minimal TUI style with mode badges - Restyle notifications with vim-style bracketed labels - Add vim keybindings (j/k/h/l) to app switcher - Use monospace font throughout for consistent TUI look --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent 7a9bf9d commit 5ef5952

12 files changed

Lines changed: 1768 additions & 1086 deletions

File tree

dot_files/quickshell/modules/bar/StatusBar.qml

Lines changed: 595 additions & 383 deletions
Large diffs are not rendered by default.

dot_files/quickshell/modules/common/Appearance.qml

Lines changed: 230 additions & 152 deletions
Large diffs are not rendered by default.
Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import QtQuick
2+
import QtQuick.Layouts
3+
4+
// Vim-style floating panel with TUI borders and title bar
5+
Rectangle {
6+
id: root
7+
8+
// Panel title (displayed in title bar, vim-style)
9+
property string title: ""
10+
11+
// Keyboard hints shown at bottom
12+
property var keyHints: [] // Array of {key: "Esc", action: "close"}
13+
14+
// Content item
15+
default property alias content: contentContainer.data
16+
17+
// Colors
18+
color: Qt.rgba(
19+
Appearance.colors.bg.r,
20+
Appearance.colors.bg.g,
21+
Appearance.colors.bg.b,
22+
Appearance.panelOpacity
23+
)
24+
25+
// TUI-style border
26+
border.width: Appearance.borderWidth.thin
27+
border.color: Appearance.colors.border
28+
29+
// Match Hyprland window rounding
30+
radius: Appearance.rounding.window
31+
32+
// Layout
33+
ColumnLayout {
34+
anchors.fill: parent
35+
spacing: 0
36+
37+
// Title bar (vim-style)
38+
Rectangle {
39+
Layout.fillWidth: true
40+
Layout.preferredHeight: root.title !== "" ? 24 : 0
41+
visible: root.title !== ""
42+
color: Appearance.colors.bgHighlight
43+
44+
// Bottom border
45+
Rectangle {
46+
anchors.left: parent.left
47+
anchors.right: parent.right
48+
anchors.bottom: parent.bottom
49+
height: 1
50+
color: Appearance.colors.border
51+
}
52+
53+
// Title text (centered, vim-style)
54+
Text {
55+
anchors.centerIn: parent
56+
text: root.title
57+
font.family: Appearance.fonts.mono
58+
font.pixelSize: Appearance.fontSize.small
59+
font.bold: true
60+
color: Appearance.colors.fg
61+
}
62+
}
63+
64+
// Content area
65+
Item {
66+
id: contentContainer
67+
Layout.fillWidth: true
68+
Layout.fillHeight: true
69+
Layout.margins: Appearance.spacing.medium
70+
}
71+
72+
// Keyboard hints bar (like which-key)
73+
Rectangle {
74+
Layout.fillWidth: true
75+
Layout.preferredHeight: root.keyHints.length > 0 ? 22 : 0
76+
visible: root.keyHints.length > 0
77+
color: Appearance.colors.bgDark
78+
79+
// Top border
80+
Rectangle {
81+
anchors.left: parent.left
82+
anchors.right: parent.right
83+
anchors.top: parent.top
84+
height: 1
85+
color: Appearance.colors.border
86+
}
87+
88+
RowLayout {
89+
anchors.fill: parent
90+
anchors.leftMargin: Appearance.spacing.medium
91+
anchors.rightMargin: Appearance.spacing.medium
92+
spacing: Appearance.spacing.large
93+
94+
Repeater {
95+
model: root.keyHints
96+
97+
Row {
98+
spacing: Appearance.spacing.tiny
99+
100+
// Key badge
101+
Rectangle {
102+
width: keyText.implicitWidth + Appearance.spacing.small * 2
103+
height: 16
104+
radius: Appearance.rounding.tiny
105+
color: Appearance.colors.bgVisual
106+
anchors.verticalCenter: parent.verticalCenter
107+
108+
Text {
109+
id: keyText
110+
anchors.centerIn: parent
111+
text: modelData.key
112+
font.family: Appearance.fonts.mono
113+
font.pixelSize: Appearance.fontSize.tiny
114+
font.bold: true
115+
color: Appearance.colors.cyan
116+
}
117+
}
118+
119+
// Action text
120+
Text {
121+
anchors.verticalCenter: parent.verticalCenter
122+
text: modelData.action
123+
font.family: Appearance.fonts.mono
124+
font.pixelSize: Appearance.fontSize.tiny
125+
color: Appearance.colors.fgDark
126+
}
127+
}
128+
}
129+
130+
Item { Layout.fillWidth: true }
131+
}
132+
}
133+
}
134+
}

dot_files/quickshell/modules/common/qmldir

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ singleton Directories 1.0 Directories.qml
66
singleton Icons 1.0 Icons.qml
77
ClickCatcher 1.0 ClickCatcher.qml
88
Icon 1.0 Icon.qml
9+
TuiPanel 1.0 TuiPanel.qml

0 commit comments

Comments
 (0)