feat(calendar): convert toolbar to collapsed FAB next to InputBar

- CalendarToolbar is now collapsed by default as a FAB button
- FAB positioned right next to the QuickInputBar
- Toolbar panel opens above on click with smooth slide animation
- Reduced bottom padding since toolbar no longer takes full width
- DateStrip position adjusted to be closer to InputBar
- Updated localStorage logic (default is now collapsed)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-12-12 21:55:07 +01:00
parent 502ba0c6b9
commit 4d1db202c0
6 changed files with 16 additions and 30 deletions

View file

@ -287,7 +287,7 @@
<style>
.date-strip-wrapper {
position: fixed;
bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Above InputBar */
bottom: calc(140px + env(safe-area-inset-bottom, 0px)); /* Above InputBar + PillNav */
left: 0;
right: 0;
z-index: 48;
@ -298,7 +298,7 @@
transition: bottom 0.3s ease;
}
/* When PillNav is in sidebar mode, no PillNav/Toolbar at bottom - just InputBar */
/* When PillNav is in sidebar mode, no PillNav at bottom - just InputBar */
.date-strip-wrapper.sidebar-mode {
bottom: calc(70px + env(safe-area-inset-bottom, 0px));
}

View file

@ -915,8 +915,6 @@
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
overflow: hidden;
}
.all-day-section {
@ -1010,7 +1008,6 @@
display: flex;
width: 100%;
max-width: 800px;
overflow-y: auto;
}
.time-column {

View file

@ -338,8 +338,6 @@
.month-view {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
.weekday-headers {
@ -347,6 +345,9 @@
grid-template-columns: repeat(var(--column-count, 7), 1fr);
border-bottom: 1px solid hsl(var(--color-border));
background: hsl(var(--color-background));
position: sticky;
top: 0;
z-index: 10;
}
.weekday-header {
@ -362,7 +363,6 @@
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.week-row {

View file

@ -313,11 +313,11 @@
collapsedStore.set(true);
}
// Initialize toolbar collapsed state from localStorage
// Initialize toolbar collapsed state from localStorage (default is now collapsed)
const savedToolbarCollapsed = localStorage.getItem('calendar-toolbar-collapsed');
if (savedToolbarCollapsed === 'true') {
isToolbarCollapsed = true;
toolbarCollapsedStore.set(true);
if (savedToolbarCollapsed === 'false') {
isToolbarCollapsed = false;
toolbarCollapsedStore.set(false);
}
});
</script>
@ -423,10 +423,6 @@
}
.main-content {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
transition: all 300ms ease;
position: relative;
/* Space for QuickInputBar at bottom */
@ -437,12 +433,12 @@
padding-top: 70px;
}
/* Extra padding when DateStrip + Toolbar are at bottom */
/* Extra padding when DateStrip is at bottom (toolbar is now a FAB) */
.main-content.floating-mode.has-toolbar {
padding-top: 0;
padding-bottom: calc(
280px + env(safe-area-inset-bottom)
); /* DateStrip + Toolbar + PillNav + QuickInputBar */
220px + env(safe-area-inset-bottom)
); /* DateStrip + PillNav + QuickInputBar */
}
@media (max-width: 768px) {
@ -452,8 +448,8 @@
}
.main-content.has-toolbar {
padding-bottom: calc(
250px + env(safe-area-inset-bottom)
); /* DateStrip + Toolbar + BottomNav + QuickInputBar */
200px + env(safe-area-inset-bottom)
); /* DateStrip + BottomNav + QuickInputBar */
}
.main-content.floating-mode.has-toolbar {
padding-top: 70px;
@ -465,8 +461,6 @@
}
.content-wrapper {
flex: 1;
min-height: 0;
max-width: 100%;
margin-left: auto;
margin-right: auto;

View file

@ -204,7 +204,6 @@
display: flex;
gap: 1.5rem;
width: 100%;
height: 100%;
position: relative;
}
@ -309,12 +308,10 @@
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: hsl(var(--color-surface));
border-radius: var(--radius-lg);
border: 1px solid hsl(var(--color-border));
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
.calendar-main.expanded {
@ -324,8 +321,6 @@
.calendar-content {
flex: 1;
min-height: 0;
overflow: hidden;
}
@media (max-width: 1024px) {

View file

@ -81,7 +81,7 @@
width: 100%;
height: 100%;
min-height: 0;
overflow: hidden;
overflow: clip;
position: relative;
}
@ -99,7 +99,7 @@
height: 100%;
min-width: 0;
min-height: 0;
overflow: hidden;
overflow: clip;
}
.side-panel {