Intermediate prototype state

src/components/CourseVisibility.jsx

@@ -0,0 +1,12 @@
+import { Icon } from './Icon.jsx'
+
+export const ToolOverlay = ({ visibility, toggleVisibility }) => (
+    <div class="overlay">
+        <button class="icon primary" onClick={toggleVisibility}>
+            <Icon name={visibility ? 'visibility' : 'visibility_off'} />
+        </button>
+        <button class="icon">
+            <Icon name="close" />
+        </button>
+    </div>
+)

src/components/EventsView.jsx

@@ -124,8 +124,15 @@ const WorkWeekView = ({ events }) => {
     )
 }
 
-const WorkWeekVerticalView = ({ events }) => {
-    const eventsByWeekday = _.groupBy(events, event => event.start.getDay())
+const WorkWeekVerticalView = ({ events, selection, setSelection, hideOtherCourses }) => {
+    const selectionSet = new Set(selection)
+
+    console.log(hideOtherCourses)
+
+    const eventsByWeekday = _.groupBy(
+        !hideOtherCourses ? events : events.filter(e => selectionSet.has(e.name)),
+        event => event.start.getDay()
+    )
 
     const dayIntervalLayout = _.mapValues(eventsByWeekday, events =>
         layoutIntervals(
@@ -216,7 +223,8 @@ const WorkWeekVerticalView = ({ events }) => {
                                             'event' +
                                             (currentlyHovered === event.data.name
                                                 ? ' highlight'
-                                                : '')
+                                                : '') +
+                                            (selectionSet.has(event.data.name) ? ' selected' : '')
                                         }
                                         data-event-id={event.data.name}
                                         style={{
@@ -228,6 +236,16 @@ const WorkWeekVerticalView = ({ events }) => {
                                                     360) +
                                                 'deg',
                                         }}
+                                        onClick={() => {
+                                            if (!selectionSet.has(event.data.name))
+                                                setSelection([...selection, event.data.name])
+                                            else
+                                                setSelection(
+                                                    selection.filter(
+                                                        name => event.data.name !== name
+                                                    )
+                                                )
+                                        }}
                                     >
                                         <div class="title">
                                             {_.startCase(_.lowerCase(event.data.name))
@@ -255,13 +273,48 @@ const WorkWeekVerticalView = ({ events }) => {
     )
 }
 
-const CourseView = ({ events }) => {
+const CourseView = ({ events, selection, setSelection }) => {
     const eventsByCourse = _.groupBy(events, 'name')
+    const selectionSet = new Set(selection)
+
+    const [currentlyHovered, setCurrentlyHovered] = useState(null)
+    const element = useRef()
+
+    useEffect(() => {
+        if (element.current) {
+            const l = e => {
+                const $course = e.target.closest('.course')
+                if ($course) {
+                    setCurrentlyHovered($course.dataset.courseId)
+                } else {
+                    setCurrentlyHovered(null)
+                }
+            }
+
+            element.current.addEventListener('mousemove', l)
+
+            return () => {
+                element.current.removeEventListener('mousemove', l)
+            }
+        }
+    }, [element.current])
+
     return (
-        <div class="course-view">
+        <div class="course-view" ref={element}>
             <div class="wrap-container">
                 {Object.entries(eventsByCourse).map(([name, courseEvents]) => (
-                    <div class="course">
+                    <div
+                        class={
+                            'course' +
+                            (currentlyHovered === name ? ' highlight' : '') +
+                            (selectionSet.has(name) ? ' selected' : '')
+                        }
+                        data-course-id={name}
+                        onClick={() => {
+                            if (!selectionSet.has(name)) setSelection([...selection, name])
+                            else setSelection(selection.filter(name => name !== name))
+                        }}
+                    >
                         <div class="title">
                             {_.startCase(_.lowerCase(name))
                                 .replaceAll('Ii', 'II')
@@ -271,7 +324,7 @@ const CourseView = ({ events }) => {
                         <div class="docenti">{courseEvents[0].docenti.join(', ')}</div>
                         <div class="events">
                             {courseEvents.map(course => (
-                                <div class="event">
+                                <div>
                                     {_.capitalize(format(course.start, 'EEEE', { locale: it }))}{' '}
                                     {format(course.start, 'H:mm')} &ndash;
                                     {format(course.end, 'H:mm')} {course.aula}
@@ -298,9 +351,11 @@ const viewModeMap = {
 export const EventsView = ({ mode, ...viewProps }) => {
     const Mode = viewModeMap[mode]
 
+    const [selectedCourses, setSelectedCourses] = useState([])
+
     return (
         <div class="events-view">
-            <Mode {...viewProps} />
+            <Mode selection={selectedCourses} setSelection={setSelectedCourses} {...viewProps} />
         </div>
     )
 }

src/components/Toolbar.jsx

@@ -27,11 +27,6 @@ export const Toolbar = ({ mode, setMode }) => {
                         </button>
                     </div>
                 </div>
-                <div class="item option">
-                    <button class="icon">
-                        <Icon name="filter_list" />
-                    </button>
-                </div>
                 <div class="item option">
                     <button class="icon">
                         <Icon name="print" />