feat: make running hamster widget a standalone bottom-left desktop widget with larger size and tight card padding

This commit is contained in:
Sho 2026-08-01 23:49:26 +09:00
parent 19bb1399e8
commit 4d202257b7
5 changed files with 186 additions and 75 deletions

View File

@ -0,0 +1,89 @@
{
"$schema": "https://github.com/fastfetch-cli/fastfetch/raw/dev/doc/json_schema.json",
"logo": {
"source": "~/.config/fastfetch/hamster_cookie.txt",
"color": {
"1": "magenta",
"2": "yellow"
},
"padding": {
"top": 1,
"left": 2,
"right": 2
}
},
"display": {
"separator": " ",
"color": {
"keys": "magenta",
"title": "bright_magenta"
}
},
"modules": [
{
"type": "custom",
"format": "╭──────────────╮"
},
{
"type": "uptime",
"key": "│ 󰅐 uptime │",
"keyColor": "cyan"
},
{
"type": "os",
"key": "│ 󰣇 distro │",
"keyColor": "green"
},
{
"type": "packages",
"key": "│ 󰏖 packages │",
"keyColor": "magenta"
},
{
"type": "terminal",
"key": "│ 󰞅 term │",
"keyColor": "red"
},
{
"type": "shell",
"key": "│ 󰞷 shell │",
"keyColor": "yellow"
},
{
"type": "custom",
"format": "├──────────────┤"
},
{
"type": "cpu",
"key": "│ % cpu load │",
"keyColor": "magenta",
"temp": false
},
{
"type": "memory",
"key": "│ 󰍛 memory │",
"keyColor": "red",
"format": "{1} / {2} ({3})"
},
{
"type": "disk",
"key": "│ 󰋊 SSD1 │",
"keyColor": "green",
"format": "{1} / {2} ({3})"
},
{
"type": "custom",
"format": "├──────────────┤"
},
{
"type": "colors",
"key": "│ 🎨 colors │",
"keyColor": "yellow",
"symbol": "circle"
},
{
"type": "custom",
"format": "╰──────────────╯"
}
]
}

View File

@ -0,0 +1,4 @@
(\_/)
( •_•)
/ >🍪 "nom nom"

View File

@ -0,0 +1,79 @@
import Quickshell
import Quickshell.Wayland
import QtQuick
import QtQuick.Layouts
import "../../theme"
import "../../services"
PanelWindow {
id: hamsterWindow
anchors {
bottom: true
left: true
}
margins {
bottom: 74
left: 20
}
WlrLayershell.layer: WlrLayershell.Bottom
exclusionMode: ExclusionMode.Ignore
color: "transparent"
mask: Region {}
implicitWidth: card.implicitWidth
implicitHeight: card.implicitHeight
// Standalone Bigger Running Hamster Engine Card (Bottom Left)
Rectangle {
id: card
implicitWidth: 190
implicitHeight: 205
radius: 18
color: Theme.surface
border.color: Qt.rgba(Theme.accent.r, Theme.accent.g, Theme.accent.b, 0.35)
border.width: 1.5
ColumnLayout {
anchors.fill: parent
anchors.margins: 6
spacing: 2
// Hamster GIF Image (Tight fit with minimal border space & bigger size)
Item {
Layout.alignment: Qt.AlignHCenter
Layout.fillWidth: true
implicitHeight: 155
AnimatedImage {
id: hamsterGif
anchors.centerIn: parent
width: 150
height: 150
source: "file://" + Quickshell.env("HOME") + "/.config/quickshell/assets/hampter_transparent.gif"
fillMode: Image.PreserveAspectFit
smooth: true
playing: !TaskService.isFullscreen
speed: Math.max(0.6, Math.min(3.5, 0.8 + (SystemMonitorService.cpuPct * 0.035)))
}
}
Text {
text: "🐹 Hamster Engine"
color: Theme.accent
font.pixelSize: 12
font.weight: Font.Bold
Layout.alignment: Qt.AlignHCenter
}
Text {
text: (60 + SystemMonitorService.cpuPct * 3) + " RPM • " + (SystemMonitorService.cpuPct > 70 ? "🔥 Sprinting" : (SystemMonitorService.cpuPct > 20 ? "⚡ Running" : "💤 Trotting"))
color: Theme.comment
font.pixelSize: 10
Layout.alignment: Qt.AlignHCenter
}
}
}
}

View File

@ -32,62 +32,15 @@ PanelWindow {
spacing: 12 spacing: 12
implicitWidth: 640 implicitWidth: 640
// TOP ROW: 3 Plasmoid Blocks // TOP ROW: 2 Wide Plasmoid Blocks (CPU & GPU)
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 12 spacing: 12
// Top Card 1: Transparent Running Hamster Engine // Top Card 1: CPU Plasmoid Block
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: 200 Layout.preferredWidth: 314
implicitHeight: 165
radius: 16
color: Theme.surface
border.color: Qt.rgba(Theme.accent.r, Theme.accent.g, Theme.accent.b, 0.3)
border.width: 1
ColumnLayout {
anchors.fill: parent
anchors.margins: 10
Item {
Layout.alignment: Qt.AlignHCenter
width: 84
height: 84
AnimatedImage {
id: hamsterGif
anchors.fill: parent
source: "file://" + Quickshell.env("HOME") + "/.config/quickshell/assets/hampter_transparent.gif"
fillMode: Image.PreserveAspectFit
smooth: false
playing: !TaskService.isFullscreen
speed: Math.max(0.6, Math.min(3.5, 0.8 + (SystemMonitorService.cpuPct * 0.035)))
}
}
Text {
text: "Hamster Engine"
color: Theme.accent
font.pixelSize: 12
font.weight: Font.Bold
Layout.alignment: Qt.AlignHCenter
}
Text {
text: (60 + SystemMonitorService.cpuPct * 3) + " RPM • " + (SystemMonitorService.cpuPct > 70 ? "🔥 Sprinting" : (SystemMonitorService.cpuPct > 20 ? "⚡ Running" : "💤 Trotting"))
color: Theme.comment
font.pixelSize: 10
Layout.alignment: Qt.AlignHCenter
}
}
}
// Top Card 2: CPU Plasmoid Block
Rectangle {
Layout.fillWidth: true
Layout.preferredWidth: 210
implicitHeight: 165 implicitHeight: 165
radius: 16 radius: 16
color: Theme.surface color: Theme.surface
@ -157,10 +110,10 @@ PanelWindow {
} }
} }
// Top Card 3: GPU Plasmoid Block // Top Card 2: GPU Plasmoid Block
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: 210 Layout.preferredWidth: 314
implicitHeight: 165 implicitHeight: 165
radius: 16 radius: 16
color: Theme.surface color: Theme.surface
@ -230,7 +183,7 @@ PanelWindow {
} }
} }
// BOTTOM ROW: 2 Larger Plasmoid Blocks // BOTTOM ROW: 2 Wide Plasmoid Blocks (RAM & Sensors/Network)
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 12 spacing: 12
@ -253,7 +206,7 @@ PanelWindow {
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
Text { Text {
text: "🧠 RAM & Memory" text: "🧠 RAM"
color: Theme.fg color: Theme.fg
font.pixelSize: 12 font.pixelSize: 12
font.weight: Font.Bold font.weight: Font.Bold
@ -287,14 +240,7 @@ PanelWindow {
Layout.fillWidth: true Layout.fillWidth: true
Text { text: "Used: " + SystemMonitorService.ramUsed + " / " + SystemMonitorService.ramTotal + " GB"; color: Theme.comment; font.pixelSize: 10 } Text { text: "Used: " + SystemMonitorService.ramUsed + " / " + SystemMonitorService.ramTotal + " GB"; color: Theme.comment; font.pixelSize: 10 }
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
Text { text: "Free: " + (Math.max(0, SystemMonitorService.ramTotal - SystemMonitorService.ramUsed)).toFixed(1) + " GB"; color: Theme.green; font.pixelSize: 10 }
}
RowLayout {
Layout.fillWidth: true
Text { text: "Swap: " + SystemMonitorService.swapUsed + " / " + SystemMonitorService.swapTotal + " GB"; color: Theme.yellow; font.pixelSize: 10 } Text { text: "Swap: " + SystemMonitorService.swapUsed + " / " + SystemMonitorService.swapTotal + " GB"; color: Theme.yellow; font.pixelSize: 10 }
Item { Layout.fillWidth: true }
Text { text: "Uptime: " + SystemMonitorService.uptime; color: Theme.cyan; font.pixelSize: 10 }
} }
Item { Layout.fillHeight: true } Item { Layout.fillHeight: true }
@ -324,7 +270,7 @@ PanelWindow {
spacing: 4 spacing: 4
Text { Text {
text: "🌡️ Sensors, Network & Storage" text: "🌡️ Sensors & Net"
color: Theme.fg color: Theme.fg
font.pixelSize: 12 font.pixelSize: 12
font.weight: Font.Bold font.weight: Font.Bold
@ -339,22 +285,12 @@ PanelWindow {
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
Text { text: "⬇ RX: " + SystemMonitorService.netRx; color: Theme.green; font.pixelSize: 10; font.weight: Font.Bold } Text { text: "⬇ " + SystemMonitorService.netRx; color: Theme.green; font.pixelSize: 10; font.weight: Font.Bold }
Item { Layout.fillWidth: true } Item { Layout.fillWidth: true }
Text { text: "⬆ TX: " + SystemMonitorService.netTx; color: Theme.subAccent; font.pixelSize: 10; font.weight: Font.Bold } Text { text: "⬆ " + SystemMonitorService.netTx; color: Theme.subAccent; font.pixelSize: 10; font.weight: Font.Bold }
} }
RowLayout { Text { text: "🔥 " + SystemMonitorService.topProc + " (" + SystemMonitorService.procCount + " procs)"; color: Theme.pink; font.pixelSize: 10 }
Layout.fillWidth: true
Text { text: "🔥 Top Task: " + SystemMonitorService.topProc; color: Theme.pink; font.pixelSize: 10 }
Item { Layout.fillWidth: true }
Text { text: SystemMonitorService.procCount + " Processes"; color: Theme.comment; font.pixelSize: 10 }
}
RowLayout {
Layout.fillWidth: true
Text { text: "💾 Disk: " + SystemMonitorService.diskUsed + " / " + SystemMonitorService.diskTotal + " GB (" + SystemMonitorService.diskPct + "%)"; color: Theme.comment; font.pixelSize: 10 }
}
// Disk Usage Gauge Bar // Disk Usage Gauge Bar
Rectangle { Rectangle {

View File

@ -15,6 +15,9 @@ Scope {
// Desktop Plasmoid System Monitor (Layer: Bottom, Non-restricting) // Desktop Plasmoid System Monitor (Layer: Bottom, Non-restricting)
SystemWidget {} SystemWidget {}
// Standalone Running Hamster Engine Widget (Layer: Bottom, Bottom-Left)
HamsterWidget {}
// Full-screen transparent dismiss overlay (Layer: Top) // Full-screen transparent dismiss overlay (Layer: Top)
PanelWindow { PanelWindow {
id: dismissOverlay id: dismissOverlay