Remove visual noise: drop AppBar, battery/brightness widgets, OS selector

- Remove AppBar, BatteryIcon, BrightIcon and related store state
  (battery, brightness, currentOs, isCharging, batteryLevel, isSupportFullApi)
- Remove OS selector and osList from settings
- Comment out zoom slider
- Drop unused syncBodyClassWithStore/syncStoreWithQuery calls
- Simplify checkbox icon and tighten its styles
- Round login input corners
- Add global nody-greeter-types reference in env.d.ts

env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="nody-greeter-types" />
 
 declare module '*.svg' {
   import type { DefineComponent } from 'vue'

src/App.tsx

@@ -5,7 +5,6 @@ import { useAppStore } from '@/store/app'
 import { usePageStore } from '@/store/page'
 import { focusInputPassword, setCSSVariable } from '@/utils/helper'
 import { hotkeys } from '@/utils/hotkeys'
-import { initTimer } from '@/utils/time'
 
 export default defineComponent({
   name: 'MainApp',
@@ -46,7 +45,6 @@ export default defineComponent({
 
     appStore.setUpSettings()
     initKeybinds()
-    initTimer()
     initZoom()
 
     watch(

src/assets/icons/checkbox.svg

@@ -1,14 +1,3 @@
-<svg
-    width="37"
-    height="28"
-    viewBox="0 0 37 28"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3 16.0213L11.9362 24.9574L33.8936 3"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 8.06838L7.30838 16.5001L16.5 0.500061" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/base/BatteryIcon.tsx

@@ -1,22 +0,0 @@
-import AppIcon from '@/components/app/AppIcon.vue'
-import { defineComponent } from 'vue'
-import { useAppStore } from '@/store/app'
-
-export default defineComponent({
-  name: 'BatteryIcon',
-  setup() {
-    const appStore = useAppStore()
-    return () => (
-      <div class="app-bar-battery">
-        <div class="app-bar-battery-icon">
-          <div
-            class={`app-bar-battery-icon__fill ${appStore.isCharging ? 'charging' : ''}`}
-            style={{ width: `${appStore.batteryLevel}%` }}
-          />
-          {appStore.isCharging && <AppIcon name="charge" class="app-bar-battery-icon__charge" />}
-        </div>
-        <span class="app-bar-battery__percent">{appStore.batteryLevel}%</span>
-      </div>
-    )
-  }
-})

src/components/base/BrightIcon.tsx

@@ -1,16 +0,0 @@
-import AppIcon from '@/components/app/AppIcon.vue'
-import { defineComponent } from 'vue'
-import { useAppStore } from '@/store/app'
-
-export default defineComponent({
-  name: 'BrightIcon',
-  setup() {
-    const appStore = useAppStore()
-    return () => (
-      <div class="app-bar__bright">
-        <AppIcon name="brightness" class="brightness-icon" />
-        {appStore.brightness}
-      </div>
-    )
-  }
-})

src/components/base/LoginComponent.tsx

@@ -32,7 +32,6 @@ export default defineComponent({
       <div class={`block-${activeBlock.value?.id}`}>
         <div class={`active-interface login-view login-view--${pageStore.loginPosition}`}>
           <AppIcon name={currentDesktopIcon.value} onClick={openSettingsTab} class="desktop-icon" />
-          <AppIcon name={appStore.currentOs} onClick={openSettingsTab} class="system-icon" />
           <UserAvatar />
           <UserInput />
         </div>

src/components/base/settings/general/SettingsCheckboxes.tsx

@@ -15,7 +15,6 @@ export default defineComponent({
         modelValue={appStore.bodyClass[name]}
         onUpdate:modelValue={(value: boolean) => {
           appStore.changeBodyClass({ key: name, value })
-          appStore.syncStoreWithQuery()
         }}
       />
     )

src/components/base/settings/general/SettingsSelectors.tsx

@@ -6,7 +6,6 @@ import { useRouter } from 'vue-router'
 import AppSelector from '@/components/app/AppSelector'
 import AppSlider from '@/components/app/AppSlider'
 import { createDebounce, generateDesktopIcons, languageMap, setCSSVariable } from '@/utils/helper'
-import { osList } from '@/utils/constant'
 import type { LoginPosition } from '@/models/page'
 
 export default defineComponent({
@@ -18,7 +17,6 @@ export default defineComponent({
     const router = useRouter()
 
     const isViewThemeOnly = computed(() => appStore.viewThemeOnly)
-    const isSupportFullApi = computed(() => appStore.isSupportFullApi)
 
     const languageList = computed(() =>
       pageStore.languages.map((lang) => ({ text: languageMap[lang] || lang, value: lang }))
@@ -51,10 +49,6 @@ export default defineComponent({
       appStore.saveStateApp({ key: 'desktop', value })
     }
 
-    const changeOs = (value: string) => {
-      appStore.saveStateApp({ key: 'currentOs', value })
-    }
-
     const updateZoom = createDebounce((value: number) => {
       setCSSVariable('--zoom', value + '' || '1')
       appStore.zoom = parseFloat(value + '')
@@ -83,15 +77,7 @@ export default defineComponent({
             onUpdate:modelValue={changeDesktop}
           />
         )}
-        {!isViewThemeOnly.value && (
-          <AppSelector
-            label={t('settings.choice-os')}
-            items={osList}
-            modelValue={appStore.currentOs}
-            onUpdate:modelValue={changeOs}
-          />
-        )}
-        {!isViewThemeOnly.value && isSupportFullApi.value && (
+        {/* {!isViewThemeOnly.value && isSupportFullApi.value && (
           <AppSlider
             label={t('input.zoom-interface')}
             from={0.5}
@@ -100,7 +86,7 @@ export default defineComponent({
             modelValue={appStore.zoom}
             onUpdate:modelValue={updateZoom}
           />
-        )}
+        )} */}
       </div>
     )
   }

src/store/app.ts

@@ -4,7 +4,6 @@ import router from '@/router'
 
 import type { AppTheme, AppSettings, AppInputTheme, AppInputThemeValue, AppInputThemeGeneral } from '@/models/app'
 import type { LightdmSession, LightdmUsers } from '@/models/lightdm'
-import type { LightDMBattery } from 'nody-greeter-types'
 
 import { isDifferentRoute, parseQueryValue, randomize, randomizeSettingsTheme, setCSSVariable } from '@/utils/helper'
 import { AppThemes, defaultTheme } from '@/utils/constant'
@@ -15,13 +14,10 @@ export const useAppStore = defineStore('app', {
   state: () => ({
     version: version as string,
     currentTheme: '',
-    currentOs: 'arch-linux',
     desktop: LightdmHandler.defaultSession,
     username: LightdmHandler.username,
     password: '',
     defaultColor: '#6BBBED',
-    battery: null as LightDMBattery | null,
-    brightness: 0,
     zoom: 1,
     users: LightdmHandler.users as LightdmUsers[],
     desktops: LightdmHandler.sessions as LightdmSession[],
@@ -37,9 +33,6 @@ export const useAppStore = defineStore('app', {
   }),
 
   getters: {
-    isCharging: (state) => state.battery?.status === 'Charging',
-    batteryLevel: (state) => state.battery?.level || 0,
-    isSupportFullApi: () => LightdmHandler.isSupportFullApi,
     showFrameRate: (state) => state.bodyClass['show-framerate'],
     viewThemeOnly: (state) => state.bodyClass['only-ui'],
     isGithubMode: () => import.meta.env.VITE_APP_VIEW === 'github',
@@ -125,7 +118,6 @@ export const useAppStore = defineStore('app', {
 
     changeBodyClass({ key, value }: { key: string; value: boolean }) {
       this.bodyClass[key] = value
-      this.syncBodyClassWithStore({ settings: this.getMainSettings, query: router.currentRoute.value.query })
     },
 
     saveStateApp({ key, value }: { key: string; value: string }) {
@@ -210,16 +202,6 @@ export const useAppStore = defineStore('app', {
       this.themes = syncTheme
     },
 
-    syncBodyClassWithStore({ settings, query }: { settings: AppSettings; query: RouteLocationNormalized['query'] }) {
-      const bodyClassKeys = Object.keys(this.bodyClass)
-      const queryBodyClass = bodyClassKeys.reduce<Record<string, boolean>>((bodyClass, key) => {
-        if (key in query) bodyClass[key] = query[key] === 'true'
-        return bodyClass
-      }, {})
-
-      this.bodyClass = { ...settings.bodyClass, ...queryBodyClass }
-    },
-
     setUpSettings() {
       const query = router.currentRoute.value.query
 
@@ -228,7 +210,6 @@ export const useAppStore = defineStore('app', {
         this.generateRandomThemes = settings.generateRandomThemes || false
 
         if (settings.themes) this.syncThemeWithStore({ settings, query })
-        if (settings.bodyClass) this.syncBodyClassWithStore({ settings, query })
 
         const isExistDE = window.lightdm?.sessions.find(({ key }) => key === settings.desktop)
         if (!isExistDE) settings.desktop = window.lightdm?.sessions[0]?.key || 'openbox'
@@ -236,7 +217,6 @@ export const useAppStore = defineStore('app', {
         const isExistUser = window.lightdm?.users.find(({ username }) => username === settings.username)
         if (!isExistUser) settings.username = window.lightdm?.users[0]?.username || 'Warinyourself'
 
-        this.currentOs = settings.currentOs || 'arch-linux'
         this.desktop = settings.desktop
         this.username = settings.username
         this.zoom = settings.zoom || 1

src/style/components/checkbox.styl

@@ -35,10 +35,11 @@
   justify-content center
   transition .2s
   svg
-    width 80%
     opacity 0
-    stroke-width 6
     transition opacity .2s
+    stroke-width 3px
+    transition opacity 0.2s
+    transform scale(0.6)
 
 .input-label
   cursor pointer

src/style/components/login.styl

@@ -73,15 +73,6 @@
     width 50px
     height 50px
 
-.time
-  position absolute
-  top 0
-  left 50%
-  transform translateX(-50%)
-  text-align center
-  color var(--color-unfocus)
-  font-size 0.95rem
-
 .user-avatar, .user-choice svg
   border-radius 50%
   width 100px
@@ -111,7 +102,7 @@
     margin 0 8px
     border 1px var(--color-unfocus) solid
     transition .15s border
-    border-radius 5px
+    border-radius 12px
     line-height 25px
     width 100%
     &:focus
@@ -134,14 +125,12 @@
   min-width 25px
   height 25px
   cursor pointer
-  fill var(--color-unfocus)
   color var(--color-unfocus)
   transition .15s
   &:focus
     outline none
   &:hover
     color white
-    fill white
   svg
     transition .15s
 

src/utils/constant.ts

@@ -214,31 +214,3 @@ export const AppThemes: AppTheme[] = [
     }
   }
 ]
-
-export const osList = [
-  {
-    text: 'Arch Linux',
-    value: 'arch-linux',
-    icon: 'arch-linux'
-  },
-  {
-    text: 'Ubuntu',
-    value: 'ubuntu',
-    icon: 'ubuntu'
-  },
-  {
-    text: 'Fedora',
-    value: 'fedora',
-    icon: 'fedora'
-  },
-  {
-    text: 'Linux Mint',
-    value: 'linux-mint',
-    icon: 'linux-mint'
-  },
-  {
-    text: 'Gentoo',
-    value: 'gentoo',
-    icon: 'gentoo'
-  }
-]

src/utils/lightdm.ts

@@ -1,8 +1,3 @@
-async function getAppStore() {
-  const { useAppStore } = await import('@/store/app')
-  return useAppStore()
-}
-
 const DEBUG_PASSWORD = 'password'
 const lightdmDebug = window.lightdm === undefined
 
@@ -15,22 +10,12 @@ if (lightdmDebug) {
     is_authenticated: false,
     authentication_user: undefined,
     default_session: 'plasma-shell',
-    can_access_battery: true,
-    can_access_brightness: true,
     can_suspend: true,
     can_restart: true,
     can_hibernate: true,
     can_shutdown: true,
 
-    battery_data: {
-      level: Math.ceil(Math.random() * 99 + 1),
-      ac_status: true
-    },
-    brightness: Math.ceil(Math.random() * 99 + 1),
-
-    battery_update: { connect: (callback: () => void) => { console.log('battery update') } },
     authentication_complete: { connect: (callback: () => void) => { console.log('authentication complete') } },
-    brightness_update: { connect: (callback: () => void) => { console.log('brightness update') } },
 
     sessions: [
       { name: 'i3wm', key: 'i3' },
@@ -81,9 +66,6 @@ if (lightdmDebug) {
   } as any
 }
 
-const isSupportFullApi =
-  'battery_data' in (window.lightdm || {}) || 'brightness' in (window.lightdm || {})
-
 class LightdmWebkit {
   protected _inputErrorTimer!: null | ReturnType<typeof setTimeout>
 
@@ -91,7 +73,6 @@ class LightdmWebkit {
     return this.sessions[0]?.key || window.lightdm?.default_session || 'i3'
   }
 
-  get isSupportFullApi() { return isSupportFullApi }
   get sessions() { return window.lightdm?.sessions || [] }
   get hasGuestAccount() { return window.lightdm?.has_guest_account }
   get users() { return window.lightdm?.users || [] }
@@ -170,26 +151,6 @@ class LightdmNode extends LightdmWebkit {
         window.lightdm.respond(this._password)
       }
     })
-
-    if (window.lightdm?.can_access_brightness) {
-      this.updateBrightData()
-      window.lightdm?.brightness_update.connect(this.updateBrightData)
-    }
-
-    if (window.lightdm?.can_access_battery) {
-      this.updateBatteryData()
-      window.lightdm?.battery_update.connect(this.updateBatteryData)
-    }
-  }
-
-  public async updateBatteryData(): Promise<void> {
-    const store = await getAppStore()
-    store.battery = window.lightdm?.battery_data || null
-  }
-
-  public async updateBrightData(): Promise<void> {
-    const store = await getAppStore()
-    store.brightness = window.lightdm?.brightness || 0
   }
 
   public init(): void {

src/views/Home.tsx

@@ -4,7 +4,6 @@ import { usePageStore } from '@/store/page'
 import { useI18n } from 'vue-i18n'
 import { hasSomeParentClass } from '@/utils/helper'
 
-import AppBar from '@/components/app/AppBar'
 import AppMenu from '@/components/app/AppMenu'
 import AppDialog from '@/components/app/AppDialog'
 import SettingsComponent from '@/components/base/SettingsComponent'
@@ -61,7 +60,6 @@ export default defineComponent({
       const isOpenSettings = pageStore.isOpenBlock('settings')
       const hasActiveBlock = !!pageStore.activeBlock
       const showShutdownButton = !appStore.viewThemeOnly && hasActiveBlock
-      const showAppBar = !appStore.viewThemeOnly && appStore.isSupportFullApi && hasActiveBlock
       const showGithubButton = appStore.isGithubMode && hasActiveBlock
 
       return (
@@ -74,7 +72,6 @@ export default defineComponent({
             {isOpenSettings && <SettingsComponent key="SettingsComponent" />}
             {showShutdownButton && <ShutdownButton key="ShutdownButton" />}
             {showGithubButton && <GithubButton key="GithubButton" />}
-            {showAppBar && <AppBar key="AppBar" />}
           </transition-group>
 
           <AppDialog />