Add checkbox for remote/onsite

Author: oleflb

frontend/src/components/TalkList.tsx

@@ -2,7 +2,7 @@ import { computed } from "@preact/signals";
 import { useState } from "preact/hooks";
 import { talks, currentTimeSecs, sendCommand, currentUser } from "../store";
 import { TalkCard } from "./TalkCard";
-import { type Talk } from "../types";
+import { AttendanceMode, type Talk } from "../types";
 
 export function TalkList() {
   const user = currentUser.value!;
@@ -115,20 +115,72 @@ function Section({
 }
 
 function Header() {
+  const user = currentUser.value;
+  const isRemote = user?.attendance_mode === AttendanceMode.Remote;
+
+  const toggleMode = (e: Event) => {
+    const checked = (e.currentTarget as HTMLInputElement).checked;
+    const newMode = checked ? AttendanceMode.Remote : AttendanceMode.OnSite;
+
+    sendCommand({
+      SetAttendanceMode: { attendance_mode: newMode },
+    });
+  };
+
   return (
     <div class="title">
       <h1>MOPAD</h1>
-      <a
-        class="calendar"
-        href="#calendar"
-        onClick={(e) => {
-          e.preventDefault();
-          const dialog = document.querySelector(".calendar-dialog");
-          dialog?.classList.add("open");
+
+      {/* Wrapper to group right-aligned elements */}
+      <div
+        style={{
+          justifySelf: "end",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-end",
+          gap: "0.5rem",
         }}
       >
-        Subscribe as calendar
-      </a>
+        <a
+          class="calendar"
+          href="#calendar"
+          onClick={(e) => {
+            e.preventDefault();
+            const dialog = document.querySelector(".calendar-dialog");
+            dialog?.classList.add("open");
+          }}
+        >
+          Subscribe as calendar
+        </a>
+
+        {/* New Attendance Checkbox */}
+        <div
+          style={{
+            fontSize: "0.9rem",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <input
+            type="checkbox"
+            id="attendance-mode-toggle"
+            checked={isRemote}
+            onChange={toggleMode}
+            style={{ width: "auto", margin: 0 }}
+          />
+          <label
+            htmlFor="attendance-mode-toggle"
+            style={{
+              cursor: "pointer",
+              userSelect: "none",
+              color: "var(--color-primary)",
+            }}
+          >
+            Participating remotely
+          </label>
+        </div>
+      </div>
     </div>
   );
 }

frontend/src/store.ts

@@ -1,5 +1,5 @@
 import { signal, effect } from "@preact/signals";
-import type { Talk, User, AuthCommand, Command } from "./types";
+import type { Talk, User, AuthCommand, Command, AttendanceMode } from "./types";
 
 export const currentUser = signal<User | null>(null);
 export const users = signal<Record<number, User>>({});
@@ -127,6 +127,18 @@ function handleMessage(msg: any) {
       patchTalk(t.id, {
         nerds: t.nerds.filter((id) => id !== msg.RemoveNerd.user_id),
       });
+  } else if (msg.UpdateAttendanceMode) {
+    const user_id = msg.UpdateAttendanceMode.user_id;
+    const mode: AttendanceMode = msg.UpdateAttendanceMode.attendance_mode;
+    users.value = {
+      ...users.value,
+      [user_id]: {
+        ...users.value[user_id],
+        attendance_mode: mode,
+      },
+    };
+  } else {
+    console.log("Unknown message", msg);
   }
 }
 

frontend/src/types.ts

@@ -78,6 +78,10 @@ export interface TalkUserPayload {
   talk_id: number;
 }
 
+export interface SetAttendanceModePayload {
+  attendance_mode: AttendanceMode;
+}
+
 export type AddTalkCommand = { AddTalk: AddTalkPayload };
 export type RemoveTalkCommand = { RemoveTalk: RemoveTalkPayload };
 export type UpdateTitleCommand = { UpdateTitle: UpdateTitlePayload };
@@ -93,6 +97,7 @@ export type AddNoobCommand = { AddNoob: TalkUserPayload };
 export type RemoveNoobCommand = { RemoveNoob: TalkUserPayload };
 export type AddNerdCommand = { AddNerd: TalkUserPayload };
 export type RemoveNerdCommand = { RemoveNerd: TalkUserPayload };
+export type SetAttendanceMode = { SetAttendanceMode: SetAttendanceModePayload };
 
 export type Command =
   | AddTalkCommand
@@ -105,6 +110,7 @@ export type Command =
   | AddNoobCommand
   | RemoveNoobCommand
   | AddNerdCommand
+  | SetAttendanceMode
   | RemoveNerdCommand;
 
 export type AuthCommand =