[⚡] Statusbar revamp

src/modules/apps.ts

@@ -9,15 +9,17 @@ export const meta = {
 export const run = (element: HTMLDivElement): void => {
   element.style.display = 'flex'
   element.style.alignItems = 'center'
-  element.style.gap = '10px'
+  element.style.gap = '5px'
-  element.style.paddingLeft = '15px'
+  element.style.flex = '1'
-  element.style.paddingRight = '15px'
 
   window.addEventListener('app_opened', (e: AppOpenedEvent): void => {
     const appIcon = document.createElement('app')
     const app = e.detail.app
     const win = e.detail.win
-    appIcon.innerHTML = `<img data-id="${win.id}" src="${app.icon}"/>`
+    appIcon.style.background = 'var(--surface-0)'
+    appIcon.style.padding = '5px 7.5px'
+    appIcon.style.borderRadius = '5px'
+    appIcon.innerHTML = `<img data-id="${win.id}" src="${app.icon}"/> ${app.name}`
     appIcon.onclick = async () => {
       const win = await e.detail.win
       win.focus()

src/modules/battery.ts

@@ -0,0 +1,13 @@
+export const meta = {
+  name: 'Battery',
+  description: 'Tells you your device\'s battery.',
+  id: 'battery'
+}
+
+export const run = (element: HTMLDivElement): void => {
+  element.style.display = 'flex'
+  element.style.alignItems = 'center'
+  element.style.paddingLeft = '15px'
+  element.style.paddingRight = '15px'
+  element.innerHTML = '100%'
+}

src/modules/clock.ts

@@ -5,6 +5,8 @@ export const meta = {
 }
 
 export const run = (element: HTMLDivElement): void => {
+  let date: Date = new Date()
+
   element.style.display = 'flex'
   element.style.flexDirection = 'column'
   element.style.padding = '5px 10px'
@@ -20,8 +22,6 @@ export const run = (element: HTMLDivElement): void => {
     return date.toLocaleTimeString('en-US', { hour12: false, hour: 'numeric', minute: 'numeric' })
   }
 
-  let date: Date = new Date()
-
   refreshDate()
   refreshClock()
 

src/modules/weather.ts

@@ -0,0 +1,13 @@
+export const meta = {
+  name: 'Weather',
+  description: 'Tells you the weather.',
+  id: 'weather'
+}
+
+export const run = (element: HTMLDivElement): void => {
+  element.style.display = 'flex'
+  element.style.alignItems = 'center'
+  element.style.paddingLeft = '15px'
+  element.style.paddingRight = '15px'
+  element.innerHTML = '☁️ 26*C'
+}

src/statusbar.ts

@@ -2,6 +2,8 @@ import * as clock from './modules/clock.ts'
 import * as switcher from './modules/switcher.ts'
 import * as appView from './modules/appView.ts'
 import * as apps from './modules/apps.ts'
+import * as weather from './modules/weather.ts'
+import * as battery from './modules/battery.ts'
 
 import { StatusItem } from './types'
 
@@ -16,8 +18,10 @@ class StatusBar {
 
     this.add(appView)
     this.add(apps)
+    this.add(weather)
     this.add(clock)
     this.add(switcher)
+    this.add(battery)
   }
 
   add (item: StatusItem): void {

src/style.less

@@ -44,10 +44,10 @@ body, html {
 }
 
 toolbar {
-  width: 100%;
+  width: calc(100% - 40px);
   display: flex;
   gap: 10px;
-  margin-bottom: 10px;
+  margin: 0 0 0 0;
   justify-content: center;
 
   & > div {
@@ -75,7 +75,7 @@ toolbar {
 window-area {
   position: relative;
   width: calc(100% - 40px);
-  margin-left: 20px;
+  margin-top: 20px;
   margin-bottom: 20px;
   height: 100%;
   overflow: hidden;