mobile: collections support (sheet picker + kebab action + detail buttons)

apps/mobile/app/(tabs)/library.tsx

@@ -14,6 +14,7 @@ import { useAuth } from '../../src/context/AuthContext'
 import { useTheme } from '../../src/context/ThemeContext'
 import { useLanguage } from '../../src/context/LanguageContext'
 import { useToast } from '../../src/context/ToastContext'
+import { AddToCollectionSheet } from '../../src/components/library/AddToCollectionSheet'
 import { fonts } from '../../src/theme/typography'
 import { SkeletonLoader } from '../../src/components/ui/SkeletonLoader'
 import { EmptyState } from '../../src/components/ui/EmptyState'
@@ -245,16 +246,21 @@ function SavedList({ library, setLibrary, progressMap, setProgressMap, refreshin
   const router = useRouter()
   const { colors } = useTheme()
   const { t } = useLanguage()
+  const { show: showToast } = useToast()
   const { width } = useWindowDimensions()
   const { sort, setSort } = useLibrarySort('saved')
   const { status: filter, setStatus: setFilter } = useLibraryStatus()
   const { query, debouncedQuery, setQuery, clear: clearQuery } = useLibrarySearch('saved')
   const counts = countsForLibrary(library, progressMap)
   const numColumns = viewMode === 'grid' ? Math.floor(width / 130) : 1
   const { showSavedActions } = useBookActions()
+  const [collectionTarget, setCollectionTarget] = useState<UserLibraryItem | null>(null)
 
   const handleAction = (item: UserLibraryItem) =>
-    showSavedActions(item, { progressMap, setLibrary, setProgressMap, library })
+    showSavedActions(item, {
+      progressMap, setLibrary, setProgressMap, library,
+      onAddToCollection: () => setCollectionTarget(item),
+    })
 
   if (library.length === 0) {
     return (
@@ -275,6 +281,7 @@ function SavedList({ library, setLibrary, progressMap, setProgressMap, refreshin
   const sorted = sortLibraryItems(searched, sort, progressMap)
 
   return (
+    <>
       <FlatList
         key={viewMode}
         data={sorted}
@@ -431,6 +438,14 @@ function SavedList({ library, setLibrary, progressMap, setProgressMap, refreshin
           )
         }}
       />
+      <AddToCollectionSheet
+        visible={!!collectionTarget}
+        bookId={collectionTarget?.editionId ?? null}
+        bookType="savedbook"
+        onClose={() => setCollectionTarget(null)}
+        onAdded={(name) => showToast({ message: t('library.actions.addedToCollection').replace('{{name}}', name), variant: 'success' })}
+      />
+    </>
   )
 }
 
@@ -466,10 +481,12 @@ function UploadsList({ books, refreshing, onRefresh, viewMode }: {
   }, [books.length])
 
   const { showUploadActions } = useBookActions()
+  const [collectionTarget, setCollectionTarget] = useState<UserBookDto | null>(null)
   const handleBookAction = (item: UserBookDto) =>
     showUploadActions(item, {
       onChange: onRefresh,
       openDetails: (id) => router.push(`/my-books/${id}`),
+      onAddToCollection: () => setCollectionTarget(item),
     })
 
   const runAction = async (fn: () => Promise<unknown>, label: string) => {
@@ -718,6 +735,13 @@ function UploadsList({ books, refreshing, onRefresh, viewMode }: {
             )
           }}
         />
+      <AddToCollectionSheet
+        visible={!!collectionTarget}
+        bookId={collectionTarget?.id ?? null}
+        bookType="userbook"
+        onClose={() => setCollectionTarget(null)}
+        onAdded={(name) => showToast({ message: t('library.actions.addedToCollection').replace('{{name}}', name), variant: 'success' })}
+      />
     </View>
   )
 }

apps/mobile/app/book/[slug].tsx

@@ -10,6 +10,7 @@ import { useAuth } from '../../src/context/AuthContext'
 import { useTheme } from '../../src/context/ThemeContext'
 import { useLanguage } from '../../src/context/LanguageContext'
 import { useToast } from '../../src/context/ToastContext'
+import { AddToCollectionSheet } from '../../src/components/library/AddToCollectionSheet'
 import {
   isBookFullyCached,
   getAllCachedBooks,
@@ -24,14 +25,15 @@ export default function BookDetailScreen() {
   const router = useRouter()
   const { isAuthenticated } = useAuth()
   const { colors } = useTheme()
-  const { language } = useLanguage()
+  const { language, t } = useLanguage()
   const toast = useToast()
   const { downloads, startDownload, cancelDownload, removeDownload, retryFailed } = useDownload()
   const [book, setBook] = useState<BookDetail | null>(null)
   const [loading, setLoading] = useState(true)
   const [fetchError, setFetchError] = useState<string | null>(null)
   const [cached, setCached] = useState(false)
   const [inLibrary, setInLibrary] = useState(false)
+  const [collectionSheetOpen, setCollectionSheetOpen] = useState(false)
   const [continueSlug, setContinueSlug] = useState<string | null>(null)
   const [showAllChapters, setShowAllChapters] = useState(false)
   // True when the page is rendering a minimal view built from the offline
@@ -340,6 +342,18 @@ export default function BookDetailScreen() {
           wrapped in try/catch + toast on failure (B-76).
         */}
         <View style={{ paddingHorizontal: 16, marginBottom: 16, gap: 10 }}>
+          {inLibrary && (
+            <TouchableOpacity
+              style={[styles.secondaryButton, { borderColor: colors.border }]}
+              onPress={() => setCollectionSheetOpen(true)}
+              activeOpacity={0.85}
+              accessibilityRole="button"
+              accessibilityLabel={t('library.actions.addToCollection')}
+            >
+              <Ionicons name="folder-outline" size={18} color={colors.text} />
+              <Text style={[styles.secondaryButtonText, { color: colors.text }]}>{t('library.actions.addToCollection')}</Text>
+            </TouchableOpacity>
+          )}
           <TouchableOpacity
             style={[styles.secondaryButton, { borderColor: colors.border }]}
             onPress={async () => {
@@ -363,6 +377,14 @@ export default function BookDetailScreen() {
           </TouchableOpacity>
         </View>
 
+        <AddToCollectionSheet
+          visible={collectionSheetOpen}
+          bookId={book.id}
+          bookType="savedbook"
+          onClose={() => setCollectionSheetOpen(false)}
+          onAdded={(name) => toast.show({ message: t('library.actions.addedToCollection').replace('{{name}}', name), variant: 'success' })}
+        />
+
         <Text style={[styles.sectionTitle, { color: colors.text }]}>Chapters</Text>
         {(showAllChapters ? book.chapters : book.chapters.slice(0, 10)).map((ch) => (
           <TouchableOpacity

apps/mobile/app/my-books/[id].tsx

@@ -7,19 +7,23 @@ import { userBooksApi, getStorageUrl, getApiConfig } from '@textstack/shared'
 import type { UserBookDetailResponse } from '@textstack/shared'
 import { useTheme } from '../../src/context/ThemeContext'
 import { useToast } from '../../src/context/ToastContext'
+import { useLanguage } from '../../src/context/LanguageContext'
 import { fonts } from '../../src/theme/typography'
 import { LoadingScreen } from '../../src/components/ui/LoadingScreen'
 import { trackBookOpened } from '../../src/lib/analytics'
+import { AddToCollectionSheet } from '../../src/components/library/AddToCollectionSheet'
 
 export default function UserBookDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>()
   const router = useRouter()
   const { colors } = useTheme()
   const { show: showToast } = useToast()
+  const { t } = useLanguage()
   const [book, setBook] = useState<UserBookDetailResponse | null>(null)
   const [loading, setLoading] = useState(true)
   const [savedProgress, setSavedProgress] = useState<{ chapterSlug: string | null; percent: number | null } | null>(null)
   const [deleting, setDeleting] = useState(false)
+  const [collectionSheetOpen, setCollectionSheetOpen] = useState(false)
   const pollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
   const unmountedRef = useRef(false)
 
@@ -355,6 +359,15 @@ export default function UserBookDetailScreen() {
               <Ionicons name="download-outline" size={18} color={colors.text} />
               <Text style={[styles.secondaryBtnText, { color: colors.text }]}>Download EPUB</Text>
             </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.secondaryBtn, { borderColor: colors.border }]}
+              onPress={() => setCollectionSheetOpen(true)}
+              accessibilityRole="button"
+              accessibilityLabel={t('library.actions.addToCollection')}
+            >
+              <Ionicons name="folder-outline" size={18} color={colors.text} />
+              <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t('library.actions.addToCollection')}</Text>
+            </TouchableOpacity>
             <TouchableOpacity
               style={[styles.secondaryBtn, { borderColor: colors.border }]}
               onPress={handleShare}
@@ -367,6 +380,14 @@ export default function UserBookDetailScreen() {
           </View>
         )}
 
+        <AddToCollectionSheet
+          visible={collectionSheetOpen}
+          bookId={isReady ? book.id : null}
+          bookType="userbook"
+          onClose={() => setCollectionSheetOpen(false)}
+          onAdded={(name) => showToast({ message: t('library.actions.addedToCollection').replace('{{name}}', name), variant: 'success' })}
+        />
+
         {/* Chapter list */}
         {isReady && book.chapters.length > 0 && (
           <View style={[styles.chaptersSection, { borderTopColor: colors.border }]}>