refactor: replace timezone Select with Autocomplete

- Replace timezone Select field with Autocomplete in EventModal and EventFormFields
- Add search functionality for timezones with text input
- Add timezone icon to match PeopleSearch component style
- Remove 'Mark as important' checkbox from EventModal (re showup when rebase)
- Remove gap space in description when desc field show up

src/components/Event/EventFormFields.tsx

@@ -14,6 +14,7 @@ import {
   Typography,
   ToggleButtonGroup,
   ToggleButton,
+  Autocomplete,
 } from "@mui/material";
 import {
   Description as DescriptionIcon,
@@ -22,6 +23,7 @@ import {
   CameraAlt as VideocamIcon,
   ContentCopy as CopyIcon,
   Close as DeleteIcon,
+  PublicOutlined as TimezoneIcon,
 } from "@mui/icons-material";
 import AttendeeSelector from "../Attendees/AttendeeSearch";
 import RepeatEvent from "./EventRepeat";
@@ -261,22 +263,23 @@ export default function EventFormFields({
         />
       </FieldWithLabel>
 
-      <FieldWithLabel label=" " isExpanded={showMore}>
+      {!showDescription && (
-        <Box display="flex" gap={1} mb={1}>
+        <FieldWithLabel label=" " isExpanded={showMore}>
-          <Button
+          <Box display="flex" gap={1} mb={1}>
-            startIcon={<DescriptionIcon />}
+            <Button
-            onClick={() => setShowDescription(true)}
+              startIcon={<DescriptionIcon />}
-            size="small"
+              onClick={() => setShowDescription(true)}
-            sx={{
+              size="small"
-              textTransform: "none",
+              sx={{
-              color: "text.secondary",
+                textTransform: "none",
-              display: showDescription ? "none" : "flex",
+                color: "text.secondary",
-            }}
+              }}
-          >
+            >
-            Add description
+              Add description
-          </Button>
+            </Button>
-        </Box>
+          </Box>
-      </FieldWithLabel>
+        </FieldWithLabel>
+      )}
 
       {showDescription && (
         <FieldWithLabel label="Description" isExpanded={showMore}>
@@ -404,19 +407,47 @@ export default function EventFormFields({
             }
             label="Repeat"
           />
-          <FormControl size="small" sx={{ width: 160 }}>
+          <Autocomplete
-            <Select
+            value={timezone}
-              value={timezone}
+            options={timezoneList.zones}
-              onChange={(e: SelectChangeEvent) => setTimezone(e.target.value)}
+            size="small"
-              displayEmpty
+            sx={{ width: 240 }}
-            >
+            getOptionLabel={(option) =>
-              {timezoneList.zones.map((tz) => (
+              `(${timezoneList.getTimezoneOffset(option)}) ${option.replace(/_/g, " ")}`
-                <MenuItem key={tz} value={tz}>
+            }
-                  ({timezoneList.getTimezoneOffset(tz)}) {tz.replace(/_/g, " ")}
+            onChange={(event, newValue) => {
-                </MenuItem>
+              if (newValue) {
-              ))}
+                setTimezone(newValue);
-            </Select>
+              }
-          </FormControl>
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Select timezone"
+                autoComplete="off"
+                slotProps={{
+                  input: {
+                    ...params.InputProps,
+                    startAdornment: (
+                      <>
+                        <TimezoneIcon
+                          style={{
+                            marginRight: 8,
+                            color: "rgba(0, 0, 0, 0.54)",
+                          }}
+                        />
+                        {params.InputProps.startAdornment}
+                      </>
+                    ),
+                  },
+                }}
+                inputProps={{
+                  ...params.inputProps,
+                  autoComplete: "new-password",
+                }}
+              />
+            )}
+          />
         </Box>
       </FieldWithLabel>
 

src/features/Events/EventModal.tsx

@@ -12,6 +12,7 @@ import {
   Typography,
   ToggleButtonGroup,
   ToggleButton,
+  Autocomplete,
 } from "@mui/material";
 import {
   Description as DescriptionIcon,
@@ -20,6 +21,7 @@ import {
   CameraAlt as VideocamIcon,
   ContentCopy as CopyIcon,
   Close as DeleteIcon,
+  PublicOutlined as TimezoneIcon,
 } from "@mui/icons-material";
 import { Box, Button } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
@@ -184,7 +186,6 @@ function EventPopover({
   const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
   const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
   const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
-  const [important, setImportant] = useState(false);
   const [timezone, setTimezone] = useState(
     event?.timezone ? resolveTimezone(event.timezone) : calendarTimezone
   );
@@ -220,7 +221,6 @@ function EventPopover({
     setAlarm("");
     setEventClass("PUBLIC");
     setBusy("OPAQUE");
-    setImportant(false);
     setTimezone(calendarTimezone);
     setHasVideoConference(false);
     setMeetingLink(null);
@@ -308,7 +308,6 @@ function EventPopover({
       setAlarm("");
       setEventClass("PUBLIC");
       setBusy("OPAQUE");
-      setImportant(false);
       setTimezone(timezoneList.browserTz);
       setHasVideoConference(false);
       setMeetingLink(null);
@@ -454,22 +453,23 @@ function EventPopover({
         />
       </FieldWithLabel>
 
-      <FieldWithLabel label=" " isExpanded={showMore}>
+      {!showDescription && (
-        <Box display="flex" gap={1} mb={1}>
+        <FieldWithLabel label=" " isExpanded={showMore}>
-          <Button
+          <Box display="flex" gap={1} mb={1}>
-            startIcon={<DescriptionIcon />}
+            <Button
-            onClick={() => setShowDescription(true)}
+              startIcon={<DescriptionIcon />}
-            size="small"
+              onClick={() => setShowDescription(true)}
-            sx={{
+              size="small"
-              textTransform: "none",
+              sx={{
-              color: "text.secondary",
+                textTransform: "none",
-              display: showDescription ? "none" : "flex",
+                color: "text.secondary",
-            }}
+              }}
-          >
+            >
-            Add description
+              Add description
-          </Button>
+            </Button>
-        </Box>
+          </Box>
-      </FieldWithLabel>
+        </FieldWithLabel>
+      )}
 
       {showDescription && (
         <FieldWithLabel label="Description" isExpanded={showMore}>
@@ -558,15 +558,6 @@ function EventPopover({
       </FieldWithLabel>
       <FieldWithLabel label=" " isExpanded={showMore}>
         <Box display="flex" gap={2} alignItems="center">
-          <FormControlLabel
-            control={
-              <Checkbox
-                checked={important}
-                onChange={() => setImportant(!important)}
-              />
-            }
-            label="Mark as important"
-          />
           <FormControlLabel
             control={
               <Checkbox
@@ -629,19 +620,47 @@ function EventPopover({
             }
             label="Repeat"
           />
-          <FormControl size="small" sx={{ width: 160 }}>
+          <Autocomplete
-            <Select
+            value={timezone}
-              value={timezone}
+            options={timezoneList.zones}
-              onChange={(e: SelectChangeEvent) => setTimezone(e.target.value)}
+            size="small"
-              displayEmpty
+            sx={{ width: 240 }}
-            >
+            getOptionLabel={(option) =>
-              {timezoneList.zones.map((tz) => (
+              `(${getTimezoneOffset(option)}) ${option.replace(/_/g, " ")}`
-                <MenuItem key={tz} value={tz}>
+            }
-                  ({getTimezoneOffset(tz)}) {tz.replace(/_/g, " ")}
+            onChange={(event, newValue) => {
-                </MenuItem>
+              if (newValue) {
-              ))}
+                setTimezone(newValue);
-            </Select>
+              }
-          </FormControl>
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Select timezone"
+                autoComplete="off"
+                slotProps={{
+                  input: {
+                    ...params.InputProps,
+                    startAdornment: (
+                      <>
+                        <TimezoneIcon
+                          style={{
+                            marginRight: 8,
+                            color: "rgba(0, 0, 0, 0.54)",
+                          }}
+                        />
+                        {params.InputProps.startAdornment}
+                      </>
+                    ),
+                  },
+                }}
+                inputProps={{
+                  ...params.inputProps,
+                  autoComplete: "new-password",
+                }}
+              />
+            )}
+          />
         </Box>
       </FieldWithLabel>