Merged conflicts

src/components/HamburgerMenu.jsx

@@ -22,7 +22,7 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme
 					<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
 				</div>
 			</div>
-            <div class="options">
+			{/* <div class="options">
 				<div class="label">Gruppo Corsi</div>
 				<ComboBox
 					value={source}
@@ -47,7 +47,7 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme
 					]}
 				/>
 			</div>
-            <hr />
+			<hr /> */}
 			<div class="help">
 				<h2>
 					<Icon name="info" />

src/components/Optionbar.jsx

@@ -0,0 +1,41 @@
+import { CompoundButton } from './CompoundButton.jsx'
+import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from './EventsView.jsx'
+import { Icon } from './Icon.jsx'
+
+export const Optionbar = ({ mode, setMode, source, setSource, onHelp }) => {
+	return (
+		<div class="optionbar">
+			<div class="option-group">
+				<div class="item option">
+					<CompoundButton
+						options={[
+							{ value: 'anno-1', label: 'I' },
+							{ value: 'anno-2', label: 'II' },
+							{ value: 'anno-3', label: 'III' },
+							{ value: 'magistrale', label: 'M' },
+							{ value: 'tutti', label: <Icon name="apps" /> },
+						]}
+						value={source}
+						setValue={setSource}
+					/>
+				</div>
+			</div>
+			<div class="option-group">
+				<div class="item option">
+					<CompoundButton
+						options={[
+							{ value: MODE_COURSE, label: <Icon name="list" /> },
+							{
+								value: MODE_WORKWEEK_GRID,
+								label: <Icon name="calendar_view_month" />,
+							},
+							{ value: MODE_SCHEDULE, label: <Icon name="calendar_view_day" /> },
+						]}
+						value={mode}
+						setValue={setMode}
+					/>
+				</div>
+			</div>
+		</div>
+	)
+}

src/main.jsx

@@ -9,6 +9,7 @@ import { Help } from './components/Help.jsx'
 import { Icon } from './components/Icon.jsx'
 import { Popup } from './components/Popup.jsx'
 import { Toolbar } from './components/Toolbar.jsx'
+import { Optionbar } from './components/Optionbar.jsx'
 
 window._ = _
 window.dataBuffer = {}
@@ -58,20 +59,37 @@ async function loadEventi(ids) {
 		})
 	)
 
+<<<<<<< HEAD
     if (ids.length === 1) {
         return calendari[0]
     }
+=======
+	// console.log(calendari)
+
+	if (ids.length === 1) {
+		return calendari[0]
+	}
+>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a
 
 	return _.uniqBy(_.concat(...calendari), 'id')
 }
 
 const App = ({}) => {
+<<<<<<< HEAD
     // Data Sources
     const [source, setSource] = useState('magistrale')
     const [eventi, setEventi] = useState([])
 
     // View Modes
     const [mode, setMode] = useState(MODE_COURSE)
+=======
+	// Data Sources
+	const [source, setSource] = useState('anno-1')
+	const [eventi, setEventi] = useState([])
+
+	// View Modes
+	const [mode, setMode] = useState(MODE_WORKWEEK_GRID)
+>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a
 
 	// Selection
 	const [selectedCourses, setSelectedCourses] = useState([])
@@ -81,8 +99,14 @@ const App = ({}) => {
 	const [helpVisible, setHelpVisible] = useState(false)
 	const [showMobileMenu, setShowMobileMenu] = useState(false)
 
+<<<<<<< HEAD
+    useEffect(async () => {
+        const eventi = await loadEventi(CALENDAR_IDS[source])
+=======
 	useEffect(async () => {
+		console.log('source changed')
 		const eventi = await loadEventi(CALENDAR_IDS[source])
+>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a
 
 		window.dataBuffer[source] = eventi
 
@@ -93,8 +117,14 @@ const App = ({}) => {
 	const toolOverlayVisible =
 		selectedCourses.length > 0 && selectedCourses.filter(id => groupIds.has(id)).length > 0
 
+<<<<<<< HEAD
     useEffect(() => {
         const groupIds = new Set(eventi.map(e => e.nome))
+=======
+	useEffect(() => {
+		console.log('course length changed')
+		const groupIds = new Set(eventi.map(e => e.nome))
+>>>>>>> 41195462f176b27e142a78d7a63c072144135c5a
 
 		if (
 			selectedCourses.length === 0 ||
@@ -126,6 +156,15 @@ const App = ({}) => {
 					setTheme,
 				}}
 			/>
+			<Optionbar
+				{...{
+					mode,
+					setMode,
+					source,
+					setSource,
+					onHelp: () => setHelpVisible(true),
+				}}
+			/>
 			<EventsView
 				mode={mode}
 				selection={selectedCourses}

src/styles/main.scss

@@ -448,9 +448,38 @@ body {
         }
     }
 }
+.optionbar {
+    @extend .panel;
+
+    padding: 1rem 0.75rem 1rem 1rem;
+
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--border-500);
+
+    height: 4rem;
+
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        display: flex;
+    }
+
+    .option-group {
+        display: flex;
+        align-items: center;
+
+        gap: 0.75rem;
+    }
+}
 
 .events-view {
     height: calc(100vh - 4rem);
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        height: calc(100vh - 8rem);
+    }
 
     .course-view {
         padding: 1rem;