+
{
+ const isMobile = useIsMobile()
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false)
const [isCollapsed, setIsCollapsed] = useState(true)
const [isHighlightsCollapsed, setIsHighlightsCollapsed] = useState(true)
const [viewMode, setViewMode] = useState('compact')
@@ -23,6 +26,16 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
mine: true
})
+ // Auto-collapse sidebar on mobile based on settings
+ useEffect(() => {
+ const autoCollapse = settings.autoCollapseSidebarOnMobile !== false
+ if (isMobile && autoCollapse) {
+ setIsSidebarOpen(false)
+ } else if (!isMobile) {
+ setIsSidebarOpen(true)
+ }
+ }, [isMobile, settings.autoCollapseSidebarOnMobile])
+
// Apply UI settings
useEffect(() => {
if (settings.defaultViewMode) setViewMode(settings.defaultViewMode)
@@ -34,7 +47,15 @@ export const useBookmarksUI = ({ settings }: UseBookmarksUIParams) => {
})
}, [settings])
+ const toggleSidebar = () => {
+ setIsSidebarOpen(prev => !prev)
+ }
+
return {
+ isMobile,
+ isSidebarOpen,
+ setIsSidebarOpen,
+ toggleSidebar,
isCollapsed,
setIsCollapsed,
isHighlightsCollapsed,
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 00000000..d8c76c03
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react'
+
+/**
+ * Hook to detect if a media query matches
+ * @param query The media query string (e.g., '(max-width: 768px)')
+ * @returns true if the media query matches, false otherwise
+ */
+export function useMediaQuery(query: string): boolean {
+ const [matches, setMatches] = useState(() => {
+ if (typeof window === 'undefined') return false
+ return window.matchMedia(query).matches
+ })
+
+ useEffect(() => {
+ if (typeof window === 'undefined') return
+
+ const mediaQuery = window.matchMedia(query)
+
+ // Update state if the media query changes
+ const handleChange = (event: MediaQueryListEvent) => {
+ setMatches(event.matches)
+ }
+
+ // Modern browsers
+ if (mediaQuery.addEventListener) {
+ mediaQuery.addEventListener('change', handleChange)
+ return () => mediaQuery.removeEventListener('change', handleChange)
+ }
+ // Legacy browsers
+ else {
+ mediaQuery.addListener(handleChange)
+ return () => mediaQuery.removeListener(handleChange)
+ }
+ }, [query])
+
+ return matches
+}
+
+/**
+ * Hook to detect if the user is on a coarse pointer device (touch)
+ * @returns true if the user is using a coarse pointer (touch), false otherwise
+ */
+export function useIsCoarsePointer(): boolean {
+ return useMediaQuery('(pointer: coarse)')
+}
+
+/**
+ * Hook to detect if the viewport is mobile-sized
+ * @returns true if viewport width is <= 768px, false otherwise
+ */
+export function useIsMobile(): boolean {
+ return useMediaQuery('(max-width: 768px)')
+}
+
+/**
+ * Hook to detect if the viewport is tablet-sized
+ * @returns true if viewport width is <= 1024px, false otherwise
+ */
+export function useIsTablet(): boolean {
+ return useMediaQuery('(max-width: 1024px)')
+}
+
diff --git a/src/index.css b/src/index.css
index 70e13c59..0d3c1e45 100644
--- a/src/index.css
+++ b/src/index.css
@@ -22,12 +22,40 @@
--highlights-collapsed-width: 56px;
--main-max-width: 900px;
--main-horizontal-padding: 1rem;
+
+ /* Mobile breakpoints */
+ --mobile-breakpoint: 768px;
+ --tablet-breakpoint: 1024px;
+
+ /* Mobile touch target minimum */
+ --min-touch-target: 44px;
+
+ /* Safe area insets for notched devices */
+ --safe-area-top: env(safe-area-inset-top, 0px);
+ --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+ --safe-area-left: env(safe-area-inset-left, 0px);
+ --safe-area-right: env(safe-area-inset-right, 0px);
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
+ overscroll-behavior: none;
+ -webkit-overflow-scrolling: touch;
+}
+
+/* Use dynamic viewport height if supported */
+@supports (height: 100dvh) {
+ body {
+ min-height: 100dvh;
+ }
+}
+
+body.mobile-sidebar-open {
+ overflow: hidden;
+ position: fixed;
+ width: 100%;
}
#root {
@@ -36,6 +64,12 @@ body {
padding: 1rem;
}
+@media (max-width: 768px) {
+ #root {
+ padding: 0;
+ }
+}
+
.app {
text-align: center;
position: relative;
@@ -106,6 +140,47 @@ body {
margin-left: auto;
}
+.mobile-hamburger-btn {
+ display: none;
+ position: fixed;
+ top: 1rem;
+ left: 1rem;
+ z-index: 900;
+ background: #2a2a2a;
+ border: 1px solid #444;
+ border-radius: 8px;
+ color: #ddd;
+ width: var(--min-touch-target);
+ height: var(--min-touch-target);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ transition: all 0.2s ease;
+}
+
+.mobile-hamburger-btn:active {
+ transform: scale(0.95);
+}
+
+.mobile-close-btn {
+ display: none;
+}
+
+@media (max-width: 768px) {
+ .mobile-hamburger-btn {
+ display: flex;
+ }
+
+ .sidebar-header-bar .toggle-sidebar-btn {
+ display: none;
+ }
+
+ .mobile-close-btn {
+ display: flex;
+ }
+}
+
.view-mode-controls {
display: flex;
align-items: center;
@@ -301,6 +376,29 @@ body {
.icon-button.ghost { background: #2a2a2a; }
+/* Mobile touch target improvements */
+@media (max-width: 768px) {
+ .icon-button {
+ min-width: var(--min-touch-target);
+ min-height: var(--min-touch-target);
+ }
+}
+
+/* Disable hover effects on touch devices */
+@media (pointer: coarse) {
+ .icon-button:hover {
+ background: #2a2a2a;
+ }
+
+ .icon-button.ghost:hover {
+ background: #2a2a2a;
+ }
+
+ .icon-button:active {
+ background: #333;
+ }
+}
+
.bookmark-events {
margin: 1rem 0;
}
@@ -394,12 +492,24 @@ body {
text-align: center;
padding: 3rem;
color: #888;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
}
.empty-state p {
margin: 0.5rem 0;
}
+.loading {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
.bookmarks-list {
display: flex;
flex-direction: column;
@@ -428,6 +538,13 @@ body {
column-gap: 0;
height: calc(100vh - 2rem);
transition: grid-template-columns 0.3s ease;
+ position: relative;
+}
+
+@supports (height: 100dvh) {
+ .three-pane {
+ height: calc(100dvh - 2rem);
+ }
}
.three-pane.sidebar-collapsed {
@@ -442,6 +559,22 @@ body {
grid-template-columns: var(--sidebar-collapsed-width) 1fr var(--highlights-collapsed-width);
}
+/* Mobile three-pane layout */
+@media (max-width: 768px) {
+ .three-pane {
+ grid-template-columns: 1fr;
+ grid-template-rows: 1fr;
+ height: 100vh;
+ height: 100dvh;
+ }
+
+ .three-pane.sidebar-collapsed,
+ .three-pane.highlights-collapsed,
+ .three-pane.sidebar-collapsed.highlights-collapsed {
+ grid-template-columns: 1fr;
+ }
+}
+
.pane.sidebar {
overflow-y: auto;
height: 100%;
@@ -471,6 +604,133 @@ body {
height: 100%;
}
+/* Ensure panes are stacked in the correct order on desktop */
+@media (min-width: 769px) {
+ /* Desktop stacking to keep highlights above main without overlap */
+ .three-pane .pane.sidebar { z-index: 1; }
+ .three-pane .pane.main { z-index: 1; }
+ .three-pane .pane.highlights { z-index: 2; }
+}
+
+/* Mobile pane styles */
+@media (max-width: 768px) {
+ /* Both sidepanes slide in as overlays */
+ .pane.sidebar,
+ .pane.highlights {
+ position: fixed;
+ top: 0;
+ width: 85%;
+ max-width: 320px;
+ height: 100vh;
+ height: 100dvh;
+ background: #1a1a1a;
+ z-index: 1001; /* Above backdrop */
+ transition: transform 0.3s ease;
+ box-shadow: none;
+ display: flex;
+ flex-direction: column;
+ }
+
+ /* Ensure content fills the mobile sidepanes */
+ .pane.sidebar > *,
+ .pane.highlights > * {
+ width: 100%;
+ height: 100%;
+ }
+
+ /* Remove borders from containers in mobile overlays */
+ .pane.sidebar .bookmarks-container,
+ .pane.highlights .highlights-container {
+ border: none;
+ border-radius: 0;
+ flex: 1;
+ min-height: 0;
+ }
+
+ /* Bookmarks sidebar from left */
+ .pane.sidebar {
+ left: 0;
+ transform: translateX(-100%);
+ }
+
+ .pane.sidebar.mobile-open {
+ transform: translateX(0);
+ box-shadow: 4px 0 12px rgba(0, 0, 0, 0.5);
+ }
+
+ /* Highlights sidebar from right */
+ .pane.highlights {
+ right: 0;
+ transform: translateX(100%);
+ }
+
+ .pane.highlights.mobile-open {
+ transform: translateX(0);
+ box-shadow: -4px 0 12px rgba(0, 0, 0, 0.5);
+ }
+
+ .pane.main {
+ grid-column: 1;
+ grid-row: 1;
+ padding: 0.5rem;
+ max-width: 100%;
+ transition: opacity 0.2s ease;
+ }
+
+ /* Hide main content when sidepanes are open on mobile */
+ .three-pane .pane.main.mobile-hidden {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .mobile-sidebar-backdrop {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.45);
+ z-index: 999; /* Below sidepanes */
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ }
+
+ .mobile-sidebar-backdrop.visible {
+ display: block;
+ opacity: 1;
+ }
+
+ .mobile-highlights-btn {
+ display: none;
+ position: fixed;
+ top: 1rem;
+ right: 1rem;
+ z-index: 900;
+ background: #2a2a2a;
+ border: 1px solid #444;
+ border-radius: 8px;
+ color: #ddd;
+ width: var(--min-touch-target);
+ height: var(--min-touch-target);
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+ transition: all 0.2s ease;
+ }
+
+ .mobile-highlights-btn:active {
+ transform: scale(0.95);
+ }
+
+ @media (max-width: 768px) {
+ .mobile-highlights-btn {
+ display: flex;
+ }
+ }
+}
+
.reader {
background: #1a1a1a;
border: 1px solid #333;
@@ -742,6 +1002,20 @@ body {
gap: 1.5rem;
}
+@media (max-width: 768px) {
+ .bookmarks-grid {
+ gap: 0.75rem;
+ }
+
+ .bookmarks-grid.bookmarks-compact {
+ gap: 0.25rem;
+ }
+
+ .bookmarks-grid.bookmarks-large {
+ gap: 1rem;
+ }
+}
+
.individual-bookmark {
background: transparent;
padding: 1rem;
@@ -2303,6 +2577,27 @@ body {
font-size: 0.95rem;
}
+@media (max-width: 768px) {
+ .toast {
+ top: auto;
+ bottom: calc(1rem + var(--safe-area-bottom));
+ right: 1rem;
+ left: 1rem;
+ max-width: calc(100% - 2rem);
+ }
+
+ @keyframes toast-slide-in {
+ from {
+ transform: translateY(100px);
+ opacity: 0;
+ }
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+ }
+}
+
.toast-success {
border-color: #28a745;
}
@@ -2357,6 +2652,22 @@ body {
box-sizing: border-box;
}
+@media (max-width: 768px) {
+ .modal-overlay {
+ padding: 0;
+ align-items: flex-end;
+ }
+
+ .modal-content {
+ max-width: 100%;
+ max-height: 95vh;
+ max-height: 95dvh;
+ border-radius: 16px 16px 0 0;
+ margin: 0;
+ padding-bottom: var(--safe-area-bottom);
+ }
+}
+
.modal-header {
display: flex;
align-items: center;
diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts
index 22450ff5..8b03ef12 100644
--- a/src/services/settingsService.ts
+++ b/src/services/settingsService.ts
@@ -45,6 +45,8 @@ export interface UserSettings {
// Image cache settings
enableImageCache?: boolean // Enable caching images in localStorage
imageCacheSizeMB?: number // Maximum cache size in megabytes (default: 210MB)
+ // Mobile settings
+ autoCollapseSidebarOnMobile?: boolean // Auto-collapse sidebar on mobile (default: true)
}
export async function loadSettings(