connor/calendar
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Add right-click context menu to external calendars for deletion

Browse Source 
Users can now right-click on external calendar items in the sidebar
to access a context menu with a "Delete Calendar" option. The delete
action removes the calendar from both the server and local state,
including all associated events from the calendar display.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Connor Johnstone
2025-09-03 19:24:02 -04:00
parent f88c238b0a
commit 7461e8b123
2 changed files with 100 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/components/sidebar.rs
View File

@@ -104,6 +104,7 @@ pub struct SidebarProps {
pub on_create_external_calendar: Callback<()>,
pub external_calendars: Vec<ExternalCalendar>,
pub on_external_calendar_toggle: Callback<i32>,
pub on_external_calendar_delete: Callback<i32>,
pub color_picker_open: Option<String>,
pub on_color_change: Callback<(String, String)>,
pub on_color_picker_toggle: Callback<String>,
@@ -119,6 +120,7 @@ pub struct SidebarProps {
#[function_component(Sidebar)]
pub fn sidebar(props: &SidebarProps) -> Html {
let external_context_menu_open = use_state(|| None::<i32>);
let on_view_change = {
let on_view_change = props.on_view_change.clone();
Callback::from(move |e: Event| {
@@ -158,6 +160,30 @@ pub fn sidebar(props: &SidebarProps) -> Html {
})
};
let on_external_calendar_context_menu = {
let external_context_menu_open = external_context_menu_open.clone();
Callback::from(move |(e, cal_id): (MouseEvent, i32)| {
e.prevent_default();
external_context_menu_open.set(Some(cal_id));
})
};
let on_external_calendar_delete = {
let on_external_calendar_delete = props.on_external_calendar_delete.clone();
let external_context_menu_open = external_context_menu_open.clone();
Callback::from(move |cal_id: i32| {
on_external_calendar_delete.emit(cal_id);
external_context_menu_open.set(None);
})
};
let close_external_context_menu = {
let external_context_menu_open = external_context_menu_open.clone();
Callback::from(move |_| {
external_context_menu_open.set(None);
})
};
html! {
<aside class="app-sidebar">
<div class="sidebar-header">
@@ -228,8 +254,17 @@ pub fn sidebar(props: &SidebarProps) -> Html {
};
html! {
<li class="external-calendar-item">
<div class="external-calendar-info">
<li class="external-calendar-item" style="position: relative;">
<div
class="external-calendar-info"
oncontextmenu={{
let on_context_menu = on_external_calendar_context_menu.clone();
let cal_id = cal.id;
Callback::from(move |e: MouseEvent| {
on_context_menu.emit((e, cal_id));
})
}}
>
<input
type="checkbox"
checked={cal.is_visible}
@@ -242,6 +277,36 @@ pub fn sidebar(props: &SidebarProps) -> Html {
<span class="external-calendar-name">{&cal.name}</span>
<span class="external-calendar-indicator">{"📅"}</span>
</div>
{
if *external_context_menu_open == Some(cal.id) {
html! {
<>
<div
class="context-menu-overlay"
onclick={close_external_context_menu.clone()}
style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999;"
/>
<div class="context-menu" style="position: absolute; top: 0; right: 0; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 1000; min-width: 120px;">
<div
class="context-menu-item"
style="padding: 8px 12px; cursor: pointer; color: #d73a49;"
onclick={{
let on_delete = on_external_calendar_delete.clone();
let cal_id = cal.id;
Callback::from(move |_| {
on_delete.emit(cal_id);
})
}}
>
{"Delete Calendar"}
</div>
</div>
</>
}
} else {
html! {}
}
}
</li>
}
}).collect::<Html>()