Add open todo count badge to sidebar menu
Deploy to LXC / deploy (push) Successful in 30s

Shows number of non-done todos (todo + in_progress) next to the
Todos nav item. Hides when count is zero.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-09 16:07:27 +07:00
parent 1011e69031
commit 7429130630
2 changed files with 11 additions and 4 deletions
+2 -1
View File
@@ -4,7 +4,7 @@
interface Props { interface Props {
open: boolean; open: boolean;
onToggle: () => void; onToggle: () => void;
counts: { devices: number; components: number; needsRepair: number }; counts: { devices: number; components: number; needsRepair: number; openTodos: number };
} }
let { open, onToggle, counts }: Props = $props(); let { open, onToggle, counts }: Props = $props();
@@ -40,6 +40,7 @@
{ {
href: '/todos', href: '/todos',
label: 'Todos', label: 'Todos',
badge: counts.openTodos || undefined,
icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z' icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'
}, },
{ {
+9 -3
View File
@@ -1,8 +1,8 @@
import type { LayoutServerLoad } from './$types'; import type { LayoutServerLoad } from './$types';
import { redirect } from '@sveltejs/kit'; import { redirect } from '@sveltejs/kit';
import { db } from '$lib/server/db/index.js'; import { db } from '$lib/server/db/index.js';
import { devices, components, componentInstances } from '$lib/server/db/schema.js'; import { devices, components, componentInstances, todos } from '$lib/server/db/schema.js';
import { count, eq, or, and } from 'drizzle-orm'; import { count, eq, or, and, ne } from 'drizzle-orm';
export const load: LayoutServerLoad = async ({ locals }) => { export const load: LayoutServerLoad = async ({ locals }) => {
if (!locals.user) { if (!locals.user) {
@@ -20,12 +20,18 @@ export const load: LayoutServerLoad = async ({ locals }) => {
.from(devices) .from(devices)
.where(and(eq(devices.disabled, false), or(eq(devices.condition, 'In Repair'), eq(devices.condition, 'Waiting for Repair')))); .where(and(eq(devices.disabled, false), or(eq(devices.condition, 'In Repair'), eq(devices.condition, 'Waiting for Repair'))));
const [openTodos] = await db
.select({ value: count() })
.from(todos)
.where(ne(todos.status, 'done'));
return { return {
user: locals.user, user: locals.user,
counts: { counts: {
devices: deviceCount?.value ?? 0, devices: deviceCount?.value ?? 0,
components: componentCount?.value ?? 0, components: componentCount?.value ?? 0,
needsRepair: repairCount?.value ?? 0 needsRepair: repairCount?.value ?? 0,
openTodos: openTodos?.value ?? 0
} }
}; };
}; };