Darkages/SpotMicroESP32-Leika
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💫 Migrate to TailwindCSS 4 and DaisyUI 5

Browse Source
This commit is contained in:
Rune Harlyk
2025-03-07 21:14:59 +01:00
committed by Rune Harlyk
parent d90dbbcf21
commit 74cb4aaee4
17 changed files with 584 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/package.json
+3 -3
View File
@@ -32,13 +32,12 @@
"eslint-config-prettier": "^9.1.0", "eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.45.1", "eslint-plugin-svelte": "^2.45.1",
"jsdom": "^24.0.0", "jsdom": "^24.0.0",
"postcss": "^8.4.38",
"prettier": "^3.1.1", "prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.2.6", "prettier-plugin-svelte": "^3.2.6",
"svelte": "^5.0.0", "svelte": "^5.0.0",
"svelte-check": "^4.0.0", "svelte-check": "^4.0.0",
"svelte-focus-trap": "^1.2.0", "svelte-focus-trap": "^1.2.0",
"tailwindcss": "^3.4.3", "tailwindcss": "^4.0.12",
"tslib": "^2.6.1", "tslib": "^2.6.1",
"typescript": "^5.5.0", "typescript": "^5.5.0",
"unplugin-icons": "^0.18.5", "unplugin-icons": "^0.18.5",
@@ -48,10 +47,11 @@
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@niku/vite-env-caster": "^1.0.2", "@niku/vite-env-caster": "^1.0.2",
"@tailwindcss/vite": "^4.0.12",
"chart.js": "^4.4.2", "chart.js": "^4.4.2",
"compare-versions": "^6.1.0", "compare-versions": "^6.1.0",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"daisyui": "^4.10.2", "daisyui": "^5.0.0",
"jwt-decode": "^4.0.0", "jwt-decode": "^4.0.0",
"nipplejs": "^0.10.1", "nipplejs": "^0.10.1",
"svelte-dnd-list": "^0.1.8", "svelte-dnd-list": "^0.1.8",
app/pnpm-lock.yaml
Generated
+317 -455
View File
File diff suppressed because it is too large Load Diff
app/postcss.config.js
-5
View File
@@ -1,5 +0,0 @@
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';
export default {
plugins: [tailwindcss(), autoprefixer()]
};
app/src/app.css
+27 -5
View File
@@ -1,9 +1,31 @@
@tailwind base; @import 'tailwindcss';
@tailwind components; @plugin "daisyui";
@tailwind utilities;
#nipple_0_0, #nipple_1_1 { @plugin "daisyui" {
z-index: 10!important; themes:
light --default,
dark --prefersdark;
}
@plugin "daisyui/theme" {
name: 'light';
default: true;
--color-primary: #00bfff;
--color-secondary: #3c00ff;
--base-content: white;
}
@plugin "daisyui/theme" {
name: 'dark';
prefersdark: true;
--color-primary: #00bfff;
--color-secondary: #3c00ff;
--base-content: oklch(0.3 0.012 256);
}
#nipple_0_0,
#nipple_1_1 {
z-index: 10 !important;
} }
#three-gui-panel { #three-gui-panel {
app/src/lib/components/GithubUpdateDialog.svelte
+1 -1
View File
@@ -84,7 +84,7 @@
</div> </div>
<div class="divider my-2"></div> <div class="divider my-2"></div>
<div class="flex flex-wrap justify-end gap-2"> <div class="flex flex-wrap justify-end gap-2">
<div class="flex-grow"></div> <div class="grow"></div>
<button <button
class="btn btn-warning text-warning-content inline-flex flex-none items-center" class="btn btn-warning text-warning-content inline-flex flex-none items-center"
disabled={updating} disabled={updating}
app/src/lib/components/Toast.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
in:fly={{ y: 100, duration: 400 }} in:fly={{ y: 100, duration: 400 }}
out:fly={{ x: 100, duration: 400 }} out:fly={{ x: 100, duration: 400 }}
> >
<SvelteComponent class="h-6 w-6 flex-shrink-0" /> <SvelteComponent class="h-6 w-6 shrink-0" />
<span>{notification.message}</span> <span>{notification.message}</span>
</div> </div>
{/each} {/each}
app/src/lib/components/menu/Menu.svelte
+159 -168
View File
@@ -1,187 +1,178 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/state'; import { page } from '$app/state'
import { useFeatureFlags } from '$lib/stores/featureFlags'; import { useFeatureFlags } from '$lib/stores/featureFlags'
import GithubButton from '../menu/GithubButton.svelte'; import GithubButton from '../menu/GithubButton.svelte'
import LogoButton from '../menu/LogoButton.svelte'; import LogoButton from '../menu/LogoButton.svelte'
import MenuList from '../menu/MenuList.svelte'; import MenuList from '../menu/MenuList.svelte'
import { import {
Connection, Connection,
Settings, Settings,
MdiController, MdiController,
Devices, Devices,
Camera, Camera,
Rotate3d, Rotate3d,
MotorOutline, MotorOutline,
Health, Health,
Folder, Folder,
Update, Update,
WiFi, WiFi,
Router, Router,
AP, AP,
Remote, Copyright,
Copyright, Metrics
Metrics } from '$lib/components/icons'
} from '$lib/components/icons'; import appEnv from 'app-env'
import appEnv from 'app-env';
const features = useFeatureFlags(); const features = useFeatureFlags()
const appName = page.data.app_name; const appName = page.data.app_name
const copyright = page.data.copyright; const copyright = page.data.copyright
const github = { href: 'https://github.com/' + page.data.github, active: true }; const github = { href: 'https://github.com/' + page.data.github, active: true }
type menuItem = { type menuItem = {
title: string; title: string
icon: ConstructorOfATypedSvelteComponent; icon: ConstructorOfATypedSvelteComponent
href?: string; href?: string
feature: boolean; feature: boolean
active?: boolean; active?: boolean
submenu?: menuItem[]; submenu?: menuItem[]
}; }
let menuItems = $state<menuItem[]>([]); let menuItems = $state<menuItem[]>([])
$effect(() => { $effect(() => {
menuItems = [ menuItems = [
{ {
title: 'Connection', title: 'Connection',
icon: WiFi, icon: WiFi,
href: '/connection', href: '/connection',
feature: !appEnv.VITE_USE_HOST_NAME feature: !appEnv.VITE_USE_HOST_NAME
}, },
{ {
title: 'Controller', title: 'Controller',
icon: MdiController, icon: MdiController,
href: '/controller', href: '/controller',
feature: true feature: true
}, },
{ {
title: 'Peripherals', title: 'Peripherals',
icon: Devices, icon: Devices,
feature: true, feature: true,
submenu: [ submenu: [
{ {
title: 'I2C', title: 'I2C',
icon: Connection, icon: Connection,
href: '/peripherals/i2c', href: '/peripherals/i2c',
feature: true feature: true
}, },
{ {
title: 'Camera', title: 'Camera',
icon: Camera, icon: Camera,
href: '/peripherals/camera', href: '/peripherals/camera',
feature: $features.camera feature: $features.camera
}, },
{ {
title: 'Servo', title: 'Servo',
icon: MotorOutline, icon: MotorOutline,
href: '/peripherals/servo', href: '/peripherals/servo',
feature: true feature: true
}, },
{ {
title: 'IMU', title: 'IMU',
icon: Rotate3d, icon: Rotate3d,
href: '/peripherals/imu', href: '/peripherals/imu',
feature: $features.imu || $features.mag || $features.bmp feature: $features.imu || $features.mag || $features.bmp
} }
] ]
}, },
{ {
title: 'WiFi', title: 'WiFi',
icon: WiFi, icon: WiFi,
feature: true, feature: true,
submenu: [ submenu: [
{ {
title: 'WiFi Station', title: 'WiFi Station',
icon: Router, icon: Router,
href: '/wifi/sta', href: '/wifi/sta',
feature: true feature: true
}, },
{ {
title: 'Access Point', title: 'Access Point',
icon: AP, icon: AP,
href: '/wifi/ap', href: '/wifi/ap',
feature: true feature: true
} }
] ]
}, },
{ {
title: 'System', title: 'System',
icon: Settings, icon: Settings,
feature: true, feature: true,
submenu: [ submenu: [
{ {
title: 'System Status', title: 'System Status',
icon: Health, icon: Health,
href: '/system/status', href: '/system/status',
feature: true feature: true
}, },
{ {
title: 'File System', title: 'File System',
icon: Folder, icon: Folder,
href: '/system/filesystem', href: '/system/filesystem',
feature: true feature: true
}, },
{ {
title: 'System Metrics', title: 'System Metrics',
icon: Metrics, icon: Metrics,
href: '/system/metrics', href: '/system/metrics',
feature: $features.analytics feature: $features.analytics
}, },
{ {
title: 'Firmware Update', title: 'Firmware Update',
icon: Update, icon: Update,
href: '/system/update', href: '/system/update',
feature: feature: $features.ota || $features.upload_firmware || $features.download_firmware
$features.ota || }
$features.upload_firmware || ]
$features.download_firmware }
} ] as menuItem[]
] })
}
] as menuItem[];
});
const { menuClicked } = $props(); const { menuClicked } = $props()
function setActiveMenuItem(targetTitle: string) { function setActiveMenuItem(targetTitle: string) {
menuItems.forEach(item => { menuItems.forEach(item => {
item.active = item.title === targetTitle; item.active = item.title === targetTitle
item.submenu?.forEach(subItem => { item.submenu?.forEach(subItem => {
subItem.active = subItem.title === targetTitle; subItem.active = subItem.title === targetTitle
}); })
}); })
menuItems = menuItems; menuItems = menuItems
menuClicked(); menuClicked()
} }
$effect(() => { $effect(() => {
setActiveMenuItem(page.data.title); setActiveMenuItem(page.data.title)
}); })
const updateMenu = (event: any) => { const updateMenu = (event: any) => {
setActiveMenuItem(event.details); setActiveMenuItem(event.details)
}; }
</script> </script>
<div class="bg-base-200 text-base-content flex h-full w-80 flex-col p-4"> <div class="flex h-full w-80 flex-col p-4 bg-base-200 text-base-content">
<LogoButton {appName} /> <LogoButton {appName} />
<MenuList <MenuList {menuItems} select={updateMenu} class="grow flex-nowrap overflow-y-auto" level="0" />
{menuItems}
select={updateMenu}
class="flex-grow flex-nowrap overflow-y-auto"
level="0"
/>
<div class="divider my-0"></div> <div class="divider my-0"></div>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<GithubButton {github} /> <GithubButton {github} />
<div class="flex items-center justify-end text-sm gap-2"> <div class="flex items-center justify-end text-sm gap-2">
<Copyright class="h-4 w-4" />{copyright} <Copyright class="h-4 w-4" />{copyright}
</div>
</div> </div>
</div>
</div> </div>
app/src/lib/components/menu/MenuList.svelte
+40 -46
View File
@@ -1,54 +1,48 @@
<script lang="ts"> <script lang="ts">
import MenuList from './MenuList.svelte'; import MenuList from './MenuList.svelte'
type MenuItem = { type MenuItem = {
title: string; title: string
icon: ConstructorOfATypedSvelteComponent; icon: ConstructorOfATypedSvelteComponent
href?: string; href?: string
feature: boolean; feature: boolean
active?: boolean; active?: boolean
submenu?: MenuItem[]; submenu?: MenuItem[]
}; }
let { level, menuItems, select, class: klass } = $props(); let { level, menuItems, select, class: klass } = $props()
const selectMenuItem = (title: string) => { const selectMenuItem = (title: string) => {
select(title); select(title)
}; }
</script> </script>
<ul class={klass + ' menu'}> <ul class={klass + ' menu'}>
{#each menuItems as MenuItem[] as menuItem, i (menuItem.title)} {#each menuItems as MenuItem[] as menuItem, i (menuItem.title)}
{#if menuItem.feature} {#if menuItem.feature}
<li> <li>
{#if menuItem.submenu} {#if menuItem.submenu}
<details open={menuItem.submenu.some(subItem => subItem.active)}> <details open={menuItem.submenu.some(subItem => subItem.active)}>
<summary class="text-lg font-bold"> <summary class="text-lg font-bold">
<menuItem.icon class="h-6 w-6" /> <menuItem.icon class="h-6 w-6" />
{menuItem.title} {menuItem.title}
</summary> </summary>
<div class="pl-4"> <div class="pl-4">
<MenuList <MenuList menuItems={menuItem.submenu} level={level + 1} {select} class={klass} />
menuItems={menuItem.submenu} </div>
level={level + 1} </details>
{select} {:else}
class={klass} <a
/> href={menuItem.href}
</div> class="font-bold"
</details> class:bg-base-100={menuItem.active}
{:else} class:text-lg={level === 0}
<a class:text-md={level === 1}
href={menuItem.href} onclick={() => selectMenuItem(menuItem.title)}>
class="font-bold" <menuItem.icon class="h-6 w-6" />
class:bg-base-100={menuItem.active} {menuItem.title}
class:text-lg={level === 0} </a>
class:text-md={level === 1}
onclick={() => selectMenuItem(menuItem.title)}
>
<menuItem.icon class="h-6 w-6" />
{menuItem.title}
</a>
{/if}
</li>
{/if} {/if}
{/each} </li>
{/if}
{/each}
</ul> </ul>
app/src/lib/components/statusbar/statusbar.svelte
+26 -26
View File
@@ -1,38 +1,38 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores'; import { page } from '$app/stores'
import { telemetry } from '$lib/stores/telemetry'; import { telemetry } from '$lib/stores/telemetry'
import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'; import RssiIndicator from '$lib/components/statusbar/RSSIIndicator.svelte'
import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'; import UpdateIndicator from '$lib/components/statusbar/UpdateIndicator.svelte'
import SleepButton from './SleepButton.svelte'; import SleepButton from './SleepButton.svelte'
import ThemeButton from './ThemeButton.svelte'; import ThemeButton from './ThemeButton.svelte'
import FullscreenButton from './FullscreenButton.svelte'; import FullscreenButton from './FullscreenButton.svelte'
import StopButton from './StopButton.svelte'; import StopButton from './StopButton.svelte'
import ViewSelector from './ViewSelector.svelte'; import ViewSelector from './ViewSelector.svelte'
import { Hamburger } from '../icons'; import { Hamburger } from '../icons'
</script> </script>
<div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0"> <div class="navbar bg-base-300 sticky top-0 z-10 h-12 min-h-fit drop-shadow-lg lg:h-16 gap-2 pr-0">
<div class="flex-1 gap-2"> <div class="flex flex-1 gap-2">
<label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button"> <label for="main-menu" class="btn btn-ghost btn-circle btn-sm drawer-button">
<Hamburger class="h-6 w-auto" /> <Hamburger class="h-6 w-auto" />
</label> </label>
{#if $page.data.title === 'Controller'} {#if $page.data.title === 'Controller'}
<ViewSelector /> <ViewSelector />
{:else} {:else}
<h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1> <h1 class="px-2 text-xl font-bold lg:text-2xl">{$page.data.title}</h1>
{/if} {/if}
</div> </div>
<UpdateIndicator /> <UpdateIndicator />
<FullscreenButton /> <FullscreenButton />
<ThemeButton /> <ThemeButton />
<RssiIndicator rssi={$telemetry.rssi.rssi} /> <RssiIndicator rssi={$telemetry.rssi.rssi} />
<SleepButton /> <SleepButton />
<StopButton /> <StopButton />
</div> </div>
app/src/lib/components/toasts/Toast.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
in:fly={{ y: 100, duration: 400 }} in:fly={{ y: 100, duration: 400 }}
out:fly={{ x: 100, duration: 400 }} out:fly={{ x: 100, duration: 400 }}
> >
<SvelteComponent class="h-6 w-6 flex-shrink-0" /> <SvelteComponent class="h-6 w-6 shrink-0" />
<span>{notification.message}</span> <span>{notification.message}</span>
</div> </div>
{/each} {/each}
app/src/routes/+layout.svelte
+1 -1
View File
@@ -115,7 +115,7 @@
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
{#snippet backdrop()} {#snippet backdrop()}
<div <div
class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur" class="fixed inset-0 z-40 max-h-full max-w-full bg-black/20 backdrop-blur-sm"
transition:fade transition:fade
onclick={modals.closeAll} onclick={modals.closeAll}
></div> ></div>
app/src/routes/system/update/GithubFirmwareManager.svelte
+1 -1
View File
@@ -156,7 +156,7 @@
</div> </div>
{:catch error} {:catch error}
<div class="alert alert-error shadow-lg"> <div class="alert alert-error shadow-lg">
<Error class="h-6 w-6 flex-shrink-0" /> <Error class="h-6 w-6 shrink-0" />
<span <span
>Please connect to a network with internet access to perform a firmware update.</span >Please connect to a network with internet access to perform a firmware update.</span
> >
app/src/routes/system/update/UploadFirmware.svelte
+1 -1
View File
@@ -39,7 +39,7 @@
<span>Upload Firmware</span> <span>Upload Firmware</span>
{/snippet} {/snippet}
<div class="alert alert-warning shadow-lg"> <div class="alert alert-warning shadow-lg">
<Warning class="h-6 w-6 flex-shrink-0" /> <Warning class="h-6 w-6 shrink-0" />
<span <span
>Uploading a new firmware (.bin) file will replace the existing firmware. You may upload >Uploading a new firmware (.bin) file will replace the existing firmware. You may upload
a (.md5) file first to verify the uploaded firmware. a (.md5) file first to verify the uploaded firmware.
app/src/routes/wifi/sta/Scan.svelte
+2 -2
View File
@@ -116,7 +116,7 @@
Channel: {network.channel} Channel: {network.channel}
</div> </div>
</div> </div>
<div class="flex-grow"></div> <div class="grow"></div>
<RssiIndicator showDBm={true} rssi={network.rssi} /> <RssiIndicator showDBm={true} rssi={network.rssi} />
</div> </div>
</li> </li>
@@ -134,7 +134,7 @@
<Reload class="mr-2 h-5 w-5" /><span>Scan again</span> <Reload class="mr-2 h-5 w-5" /><span>Scan again</span>
</button> </button>
<div class="flex-grow"></div> <div class="grow"></div>
<button <button
class="btn btn-warning text-warning-content inline-flex flex-none items-center" class="btn btn-warning text-warning-content inline-flex flex-none items-center"
onclick={() => modals.close()} onclick={() => modals.close()}
app/src/routes/wifi/sta/Wifi.svelte
+1 -1
View File
@@ -495,7 +495,7 @@
<div> <div>
<div class="font-bold">{dndNetworkList[index].ssid}</div> <div class="font-bold">{dndNetworkList[index].ssid}</div>
</div> </div>
<div class="flex-grow"></div> <div class="grow"></div>
<div class="space-x-0 px-0 mx-0"> <div class="space-x-0 px-0 mx-0">
<button <button
class="btn btn-ghost btn-sm" class="btn btn-ghost btn-sm"
app/tailwind.config.js
-32
View File
@@ -1,32 +0,0 @@
import daisyui from 'daisyui';
import { light, dark } from 'daisyui/src/theming/themes';
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,ts,svelte}'],
theme: {
extend: {}
},
plugins: [daisyui],
daisyui: {
themes: [
{
light: {
...light,
primary: '#00bfff',
accent: '#3c00ff',
'base-content': 'oklch(0.3 0.012 256)'
}
},
{
dark: {
...dark,
primary: '#00bfff',
accent: '#3c00ff',
'base-content': 'white'
}
}
],
darkTheme: 'dark'
}
};
app/vite.config.ts
+2
View File
@@ -3,9 +3,11 @@ import { defineConfig } from 'vite';
import Icons from 'unplugin-icons/vite'; import Icons from 'unplugin-icons/vite';
import viteLittleFS from './vite-plugin-littlefs'; import viteLittleFS from './vite-plugin-littlefs';
import EnvCaster from '@niku/vite-env-caster'; import EnvCaster from '@niku/vite-env-caster';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
tailwindcss(),
sveltekit(), sveltekit(),
Icons({ Icons({
compiler: 'svelte' compiler: 'svelte'