From bc379e9fc2a80f4cc5cf47ad0fac43fdbf05addf Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 27 Jul 2025 14:34:56 +0200
Subject: [PATCH] Add keyboard shortcuts for view switching in Planning page

---
 ui/src/pages/planning.tsx | 60 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 59 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/planning.tsx b/ui/src/pages/planning.tsx
index b3f2f75..8323bc4 100644
--- a/ui/src/pages/planning.tsx
+++ b/ui/src/pages/planning.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useTablosList } from "@ui/hooks/tablos";
 import { useEventsByTablo, useDeleteEvent } from "@ui/hooks/events";
 import {
@@ -32,6 +32,44 @@ export const PlanningPage = () => {
 
   const deleteEvent = useDeleteEvent();
 
+  // Keyboard shortcuts for view switching
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      // Only trigger shortcuts when not typing in input fields
+      if (
+        event.target instanceof HTMLInputElement ||
+        event.target instanceof HTMLTextAreaElement ||
+        event.target instanceof HTMLSelectElement
+      ) {
+        return;
+      }
+
+      // Prevent default behavior and switch views
+      switch (event.key.toLowerCase()) {
+        case "m":
+        case "1":
+          event.preventDefault();
+          setCurrentView("month");
+          break;
+        case "w":
+        case "s":
+        case "2":
+          event.preventDefault();
+          setCurrentView("week");
+          break;
+        case "d":
+        case "j":
+        case "3":
+          event.preventDefault();
+          setCurrentView("day");
+          break;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, []);
+
   const handleExportICS = () => {
     if (!tabloEvents || tabloEvents.length === 0) {
       return;
@@ -780,6 +818,19 @@ export const PlanningPage = () => {
                     <button
                       key={view}
                       onClick={() => setCurrentView(view)}
+                      title={`${
+                        view === "month"
+                          ? "Mois"
+                          : view === "week"
+                          ? "Semaine"
+                          : "Jour"
+                      } (${
+                        view === "month"
+                          ? "M ou 1"
+                          : view === "week"
+                          ? "W ou 2"
+                          : "D ou 3"
+                      })`}
                       className={`px-3 py-1.5 text-sm rounded-md transition-colors capitalize ${
                         currentView === view
                           ? "bg-white dark:bg-gray-800 text-gray-900 dark:text-white shadow-sm"
@@ -791,6 +842,13 @@ export const PlanningPage = () => {
                         : view === "week"
                         ? "Semaine"
                         : "Jour"}
+                      <span className="ml-1 text-xs opacity-60">
+                        {view === "month"
+                          ? "(M)"
+                          : view === "week"
+                          ? "(S)"
+                          : "(J)"}
+                      </span>
                     </button>
                   ))}
                 </div>