feat(webui): remove reload button (auto-refresh via WebSocket)

The WS server pushes refresh notifications on state changes,
making the manual reload button redundant. Remove ReloadButton
component, its styles, tests, and stub. Simplify need-refresh
handler to only reset add-stations toggle (data refresh and
CSTable re-render handled by server notification + watcher).
Remove dead --spacing-xl CSS variable from all themes.

diff --git a/ui/web/src/assets/themes/catppuccin-latte.css b/ui/web/src/assets/themes/catppuccin-latte.css
index 44b06b802810c3c9e3a2165249b95171d693bfcd..988150d7914087e046e45cf33257a2706f138ca5 100644 (file)
--- a/ui/web/src/assets/themes/catppuccin-latte.css
+++ b/ui/web/src/assets/themes/catppuccin-latte.css
@@ -38,7 +38,6 @@
   --spacing-sm: 0.25rem;
   --spacing-md: 0.5rem;
   --spacing-lg: 1rem;
-  --spacing-xl: 1.5rem;
 
   /* Typography */
   --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;

diff --git a/ui/web/src/assets/themes/sap-horizon.css b/ui/web/src/assets/themes/sap-horizon.css
index 4365d68acf7fad9d5d199127b2ffb14ac266d7e5..0d67287166abd285a64ba9f79fccf826c37b917d 100644 (file)
--- a/ui/web/src/assets/themes/sap-horizon.css
+++ b/ui/web/src/assets/themes/sap-horizon.css
@@ -43,7 +43,6 @@
   --spacing-sm: 0.25rem;
   --spacing-md: 0.5rem;
   --spacing-lg: 1rem;
-  --spacing-xl: 1.5rem;
 
   /* Typography */
   --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;

diff --git a/ui/web/src/assets/themes/tokyo-night-storm.css b/ui/web/src/assets/themes/tokyo-night-storm.css
index 0b223b5466d4ad5d9d49ffbc6b8ffed3a9dee531..8e04d285d7ba504b22c13e8a4c482e17c624ee7e 100644 (file)
--- a/ui/web/src/assets/themes/tokyo-night-storm.css
+++ b/ui/web/src/assets/themes/tokyo-night-storm.css
@@ -39,7 +39,6 @@
   --spacing-sm: 0.25rem;
   --spacing-md: 0.5rem;
   --spacing-lg: 1rem;
-  --spacing-xl: 1.5rem;
 
   /* Typography */
   --font-family: Tahoma, 'Arial Narrow', Arial, Helvetica, sans-serif;

diff --git a/ui/web/src/components/buttons/ReloadButton.vue b/ui/web/src/components/buttons/ReloadButton.vue
deleted file mode 100644 (file)
index 7126ffb..0000000
--- a/ui/web/src/components/buttons/ReloadButton.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <Button>
-    <span :class="{ spin: loading }"> &#8635; </span>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import Button from '@/components/buttons/Button.vue'
-
-defineProps<{
-  loading: boolean
-}>()
-</script>
-
-<style scoped>
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.spin {
-  animation: spin 2s linear infinite;
-}
-</style>

diff --git a/ui/web/src/views/ChargingStationsView.vue b/ui/web/src/views/ChargingStationsView.vue
index a50a67937d82bcd969b1c49eea02f2eaff8abe4b..7fa38a28254794a84457a9c08c4d608c6ce7937a 100644 (file)
--- a/ui/web/src/views/ChargingStationsView.vue
+++ b/ui/web/src/views/ChargingStationsView.vue
@@ -90,23 +90,12 @@
       >
         Add Charging Stations
       </ToggleButton>
-      <ReloadButton
-        class="reload-button"
-        :loading="state.gettingChargingStations"
-        @click="getChargingStations()"
-      />
     </Container>
     <CSTable
       v-show="Array.isArray($chargingStations) && $chargingStations.length > 0"
       :key="state.renderChargingStations"
       :charging-stations="$chargingStations"
-      @need-refresh="
-        () => {
-          getChargingStations()
-          state.renderAddChargingStations = randomUUID()
-          state.renderChargingStations = randomUUID()
-        }
-      "
+      @need-refresh="() => { state.renderAddChargingStations = randomUUID() }"
     />
   </Container>
 </template>
@@ -123,7 +112,6 @@ import type {
   UUIDv4,
 } from '@/types'
 
-import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import StateButton from '@/components/buttons/StateButton.vue'
 import ToggleButton from '@/components/buttons/ToggleButton.vue'
 import CSTable from '@/components/charging-stations/CSTable.vue'
@@ -375,12 +363,4 @@ const stopSimulator = (): void => {
 .buttons-container > * {
   flex: 1 1 0;
 }
-
-.reload-button {
-  font-size: 1.5rem;
-}
-
-.reload-button:active {
-  background-color: var(--color-primary);
-}
 </style>

diff --git a/ui/web/tests/unit/ChargingStationsView.test.ts b/ui/web/tests/unit/ChargingStationsView.test.ts
index 10c573b30b3654413a9c560d0c91798918ac7d4c..c0595efaabc0c09c401f5f34b35dc2d3a65d0675 100644 (file)
--- a/ui/web/tests/unit/ChargingStationsView.test.ts
+++ b/ui/web/tests/unit/ChargingStationsView.test.ts
@@ -96,12 +96,6 @@ function mountView (
       stubs: {
         Container: { name: 'Container', template: '<div><slot /></div>' },
         CSTable: true,
-        ReloadButton: {
-          emits: ['click'],
-          name: 'ReloadButton',
-          props: ['loading'],
-          template: '<button @click="$emit(\'click\')" />',
-        },
         StateButton: StateButtonStub,
         ToggleButton: ToggleButtonStub,
       },
@@ -216,16 +210,6 @@ describe('ChargingStationsView', () => {
     })
   })
 
-  describe('reload button', () => {
-    it('should call listChargingStations when reload button clicked', async () => {
-      const wrapper = mountView()
-      const reloadButton = wrapper.findComponent({ name: 'ReloadButton' })
-      await reloadButton.trigger('click')
-      await flushPromises()
-      expect(mockClient.listChargingStations).toHaveBeenCalled()
-    })
-  })
-
   describe('CSTable visibility', () => {
     it('should hide CSTable when no charging stations', () => {
       const wrapper = mountView({ chargingStations: [] })

diff --git a/ui/web/tests/unit/SimpleComponents.test.ts b/ui/web/tests/unit/SimpleComponents.test.ts
index aa0f4d1510b5ea6844d5b0f83de95be60635d380..e598dcdf9e3f9b251ac1c9e2810550f30f1934c0 100644 (file)
--- a/ui/web/tests/unit/SimpleComponents.test.ts
+++ b/ui/web/tests/unit/SimpleComponents.test.ts
@@ -1,6 +1,6 @@
 /**
  * @file Tests for simple presentational components
- * @description Unit tests for Button, Container, ReloadButton, NotFoundView, and App.
+ * @description Unit tests for Button, Container, NotFoundView, and App.
  */
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
@@ -9,7 +9,6 @@ import { createMemoryHistory, createRouter } from 'vue-router'
 
 import App from '@/App.vue'
 import Button from '@/components/buttons/Button.vue'
-import ReloadButton from '@/components/buttons/ReloadButton.vue'
 import Container from '@/components/Container.vue'
 import NotFoundView from '@/views/NotFoundView.vue'
 
@@ -39,23 +38,6 @@ describe('Container', () => {
   })
 })
 
-describe('ReloadButton', () => {
-  it('should render reload icon', () => {
-    const wrapper = mount(ReloadButton, { props: { loading: false } })
-    expect(wrapper.find('span').exists()).toBe(true)
-  })
-
-  it('should apply spin class when loading is true', () => {
-    const wrapper = mount(ReloadButton, { props: { loading: true } })
-    expect(wrapper.find('span').classes()).toContain('spin')
-  })
-
-  it('should not apply spin class when loading is false', () => {
-    const wrapper = mount(ReloadButton, { props: { loading: false } })
-    expect(wrapper.find('span').classes()).not.toContain('spin')
-  })
-})
-
 describe('NotFoundView', () => {
   it('should render 404 message', () => {
     const wrapper = mount(NotFoundView)