Rebuild desktop shell on the real AdminLTE 4 package

Install [email protected] (+ bootstrap 5.3.8, bootstrap-icons as peer deps) and
rebuild every desktop component against actual AdminLTE markup pulled from
its live docs/demo, rather than a Tailwind approximation:

- Real app-wrapper/app-header/app-sidebar/app-main/app-footer structure
- Working PushMenu (sidebar collapse), Treeview, ColorMode (light/dark/auto)
- Navbar: functional search (wired to Users list ?search=), notifications
  dropdown (MQTT-driven), user menu dropdown
- Sidebar: grouped nav-header sections, active-route highlighting
- Breadcrumbs, footer, Bootstrap card/table/pagination/progress widgets

Tailwind is now imported utilities-only (no preflight) so it coexists with
Bootstrap's reset; mobile shell and modals are untouched and still Tailwind.

frontend/src/components/desktop/ActivityTimeline.tsx

@@ -14,20 +14,14 @@ export function ActivityTimeline({ items }: ActivityTimelineProps) {
   return (
     <Card title="Recent activity">
       {items.length === 0 ? (
-        <p className="text-sm text-gray-500 dark:text-gray-500">No activity yet.</p>
+        <p className="text-secondary mb-0">No activity yet.</p>
       ) : (
-        <ul className="flex flex-col gap-3">
+        <ul className="list-group list-group-flush">
           {items.map((item, i) => (
-            <li key={i} className="flex items-start gap-3 text-sm">
-              <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-500" />
-              <div>
-                <p className="text-gray-800 dark:text-gray-200">
-                  <span className="font-medium">{item.actor_name}</span> — {item.action.replace('.', ' ')}
-                </p>
-                <p className="text-xs text-gray-500 dark:text-gray-500">
-                  {new Date(item.created_at).toLocaleString()}
-                </p>
-              </div>
+            <li key={i} className="list-group-item px-0">
+              <i className="bi bi-dot text-primary fs-4 align-middle"></i>
+              <span className="fw-semibold">{item.actor_name}</span> — {item.action.replace('.', ' ')}
+              <div className="text-secondary fs-7">{new Date(item.created_at).toLocaleString()}</div>
             </li>
           ))}
         </ul>