From 1a72bd0d141c46f1bc3c0620d6ca7daaf7fa2ce5 Mon Sep 17 00:00:00 2001
From: Chris Li <chrisshwli@gmail.com>
Date: Mon, 23 Jan 2017 17:08:00 -0500
Subject: [PATCH] Library collection view basic function

---
 .../Bookmarks/Dots.imageset/more-2.png        | Bin 479 -> 0 bytes
 .../Dots.imageset/Contents.json               |   2 +-
 .../Dots.imageset/rsz_1more-2.png             | Bin 0 -> 1637 bytes
 .../BookmarkCollectionController.swift        |   2 +-
 .../Library/LibraryBooksController.swift      | 151 +++++++++++++++++-
 Kiwix-iOS/Storyboard/Library.storyboard       | 110 ++++++++++++-
 Kiwix-iOS/View/Cells.swift                    |  31 +++-
 7 files changed, 283 insertions(+), 13 deletions(-)
 delete mode 100644 Kiwix-iOS/Assets.xcassets/Bookmarks/Dots.imageset/more-2.png
 rename Kiwix-iOS/Assets.xcassets/{Bookmarks => }/Dots.imageset/Contents.json (87%)
 create mode 100644 Kiwix-iOS/Assets.xcassets/Dots.imageset/rsz_1more-2.png

diff --git a/Kiwix-iOS/Assets.xcassets/Bookmarks/Dots.imageset/more-2.png b/Kiwix-iOS/Assets.xcassets/Bookmarks/Dots.imageset/more-2.png
deleted file mode 100644
index 106baee98e31710d659a8aaa383c7e084d550507..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 479
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!n2Vh}LpV4%Za?&Y0OWEOctjR6
zFfi^0VMePrj~@XAB}-f*N`mv#O3D+9QW?t2%k?tzvWt@w3sUv+i_&MmvylQSN(=A_
zasB`Qzj4}shpboDWv`vHKRM*SwaR{Pm-osh@3l?-E8E=HHaV~Dv)|h0ytK=E0~EB)
zd2I(4w9R>ClMCd&vCVr8lme1K#kRRXEpNaK2p3B3nKeHYXrp3DkY6wZD-W-*jJ&F`
zjlF|waC}-uaeZ6Qr0J_RZ{K<U*}D&4{y7~z{RgOcpQnpsNJQ(~$(~{@3OuZZ*TUum
z6dq{&9lvRQnR2Jz&1GdPYaEpg+yq!01^D-Dc{SUn!aPZjrT@O&50l!dRm;wZ*KWGr
zAEBYYKJ`b&mETXN{|PT^|7ZNuV4CLRP`17HlJzC&v00}XzK37a{=vswu^>g~mcv@^
z*^@7Lzvh0iy<_W!Yn$iFf4b#Y<hCzWdDV66;~$y+<gGc;@AEJrsfejMv8HKnQT&0Q
w!gJbR{E?o^Kk0X1*?ymQ*JmnlG%4`J=kIha4rX#$5A+Fxr>mdKI;Vst09-!LGynhq

diff --git a/Kiwix-iOS/Assets.xcassets/Bookmarks/Dots.imageset/Contents.json b/Kiwix-iOS/Assets.xcassets/Dots.imageset/Contents.json
similarity index 87%
rename from Kiwix-iOS/Assets.xcassets/Bookmarks/Dots.imageset/Contents.json
rename to Kiwix-iOS/Assets.xcassets/Dots.imageset/Contents.json
index 1dd8ef56..6c053b83 100644
--- a/Kiwix-iOS/Assets.xcassets/Bookmarks/Dots.imageset/Contents.json
+++ b/Kiwix-iOS/Assets.xcassets/Dots.imageset/Contents.json
@@ -10,7 +10,7 @@
     },
     {
       "idiom" : "universal",
-      "filename" : "more-2.png",
+      "filename" : "rsz_1more-2.png",
       "scale" : "3x"
     }
   ],
diff --git a/Kiwix-iOS/Assets.xcassets/Dots.imageset/rsz_1more-2.png b/Kiwix-iOS/Assets.xcassets/Dots.imageset/rsz_1more-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..1962d59a3ff4df037c4ac1eabff0301194b1ef87
GIT binary patch
literal 1637
zcmbVLYfuwc6uwEo2TDajUPGtV0f(6ihKCBfd4L9ikq8DXG8zRT!I<pwO3ctUBU(VQ
z*jDHRDrpg@6slHqptZI?tX7JOGvag9c4`#Cy~{&Dtq`(33l42Z{nMSh=iK|<?>pz*
zb9c*<*2KEH__`p3T;t;uD)3_dogo67erIMYIH&ArWi&!9AI-97IK%qQ%s7=2p?4M`
zR8)-6C_qKM2$?|0q$5OBA>@@?^W$0xLc+qNgp?Q{glRc>Zg*6kP3DQ^N=$CYgnl4o
zD;KjGZ$ONc!csk!8gLXfDAQvJg(LM?VZ?w(=CRUTOwhfh43ZV#2oo#U_eC29LN$ZZ
zd<-B-^R$S3+m2bBl;)WVZNH3W<TNX#7(n>od5>U3>W3t-G_W!Q235GuE-}E8k>p?*
za11Q$0>Xn7mg})nfr;l^I9iV(=?cS$jK(m?yr)ntj7S=<Tg8*1W_b=?mOYUUqEVR0
zWuvx1a0cop>0W~B0V|_fSx&En>f<Y!pn(u3WF8w~WFbWqH9+e6q;%gz{E5y?F(K~+
zc~UrKB{T!aC-WXEHb0h9aO!_*n4HI&hF=7E1R~Q|VHk#{y;KOCS7}#f_dy$>hZ7Cy
zn~D$M)cju)I0yrc1u}oG7b=`Y;MU+eB5rVCd1TU3d~cuM<12(O4ajkvF2(O8e0;wc
zRcn&L|IbGt6u_4(1T`4m3nmu)A0hxF5Rj(2@>CBXAwghvwMS}soyqf4j&pQI^JFdK
zi0*W7qPnrMar-D6E<z&h_}Dl*Y9AM=M;#pZ?8Gzy5(YAMPS85eIUEkL2nn;sxE_uh
zQ}Jo5$E#K4si|k@RO$E}TUN&^y8gU*^cXB==EkKJ0CtLh1q6G~2H<pKyfS9`U4fSy
z@s@FI?Rwa|8?T5?iEGbH_jayN|4X=Pkyb6Wh*o;Oy{yWO+`Yf0tgL13bTXlMU*(0X
z7w@e2yt-`v>5ALuZ=Jh->5rZ5`@I(8vpuYhdGLU-UF>n1d)IW|{B&?+sIAS`mgP41
zX#R-%kk@N7JZ8E~>nPn*T3Yf!jABp8?vlNwMT%YTD}<ur@e;d}#p2|>u>Nd)=9YUl
zcmH_-l?~qB6<;T-G+kX`p<P$9RLKpMKHd!#{_dKv6UPhk>$~d~`rIELnls<S^Y!51
zwSnsvXQpQ_`7WvXFriXg8k$v2bv0J&!GxBSgNL4MRa;IUv`Y$0OV4F0JA;l;?YGHK
z$emBjrf)}Tdi(Ie0G3{^@A}=@gGuSH%6-q)(9x-E_iYp>NF%AyCZDjxPD1+bhs?&-
z!r^OPizO#|uiAcX^t7h^5M^;lS_7I3v|oK`+V-G4`AVa;=KQe{_IUDzL@Uv{rMvl>
zuipFm(JLEw&}W+VH5P3>bMo;Q_<HE!%j<vM*6mVT(cSo&Rek>0L%X(?ZA#wIw&~`f
zR!jRO^{rD&`qO65OZ%zEw#lj{&4wGdwr60^kAFMY*|U6s{^su0XJlEf{$yEJVx`|<
z|5!hN9V?Ft)cF+$xK_Bo(a~|>{_Jp<Ri_7?QS;`cQ(X&=)WZD-7-QBOvoeetA~RnD
z4uy(CmIsMLf<nVmLY5IrBZ%;@An{T{ES5cU`~E)yDkn>)Eqt{gvEiFpAn@TcB<E<2
m=8Sv|GMml8I$B?lnUSjr&dJX{&@b@?5{i#mqd2-Eeb?X1_|!B2

literal 0
HcmV?d00001

diff --git a/Kiwix-iOS/Controller/Bookmark/BookmarkCollectionController.swift b/Kiwix-iOS/Controller/Bookmark/BookmarkCollectionController.swift
index 732c231e..ef875da5 100644
--- a/Kiwix-iOS/Controller/Bookmark/BookmarkCollectionController.swift
+++ b/Kiwix-iOS/Controller/Bookmark/BookmarkCollectionController.swift
@@ -39,7 +39,7 @@ class BookmarkCollectionController: CoreDataCollectionBaseController, UICollecti
     
     func configureItemWidth(collectionViewWidth: CGFloat) {
         let itemsPerRow = ((collectionViewWidth - 10) / 320).rounded()
-        self.itemWidth = floor((collectionViewWidth - (itemsPerRow + 1) * 10) / itemsPerRow)
+        itemWidth = floor((collectionViewWidth - (itemsPerRow + 1) * 10) / itemsPerRow)
     }
     
     // MARK: - UI Control
diff --git a/Kiwix-iOS/Controller/Library/LibraryBooksController.swift b/Kiwix-iOS/Controller/Library/LibraryBooksController.swift
index e75bf612..c7fff831 100644
--- a/Kiwix-iOS/Controller/Library/LibraryBooksController.swift
+++ b/Kiwix-iOS/Controller/Library/LibraryBooksController.swift
@@ -8,14 +8,159 @@
 
 import UIKit
 import CoreData
+import ProcedureKit
+import DZNEmptyDataSet
 
-class LibraryBooksController: UIViewController {
-
-    @IBOutlet weak var collectionView: UICollectionView!
+class LibraryBooksController: CoreDataCollectionBaseController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, LibraryCollectionCellDelegate {
+    private(set) var itemWidth: CGFloat = 0.0
     
     @IBAction func dismissButtonTapped(_ sender: UIBarButtonItem) {
         dismiss(animated: true, completion: nil)
     }
     
+    func configureItemWidth(collectionViewWidth: CGFloat) {
+        let itemsPerRow = (collectionViewWidth / 320).rounded()
+        itemWidth = (collectionViewWidth - 1 * (itemsPerRow - 1)) / itemsPerRow
+    }
     
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        configureRefreshControl()
+        
+        if let layout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
+            layout.minimumInteritemSpacing = 1
+            layout.minimumLineSpacing = 1
+        }
+    }
+    
+    override func viewWillAppear(_ animated: Bool) {
+        super.viewWillAppear(animated)
+        refreshAutomatically()
+        collectionView.collectionViewLayout.invalidateLayout()
+    }
+    
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        configureItemWidth(collectionViewWidth: collectionView.frame.width)
+    }
+    
+    override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
+        configureItemWidth(collectionViewWidth: collectionView.frame.width)
+        collectionView.collectionViewLayout.invalidateLayout()
+    }
+    
+    // MARK: - Refresh
+    
+    private(set) var isRefreshing = false // used to control text on empty table view
+    
+    private func configureRefreshControl() {
+        collectionView.refreshControl = RefreshLibControl()
+        collectionView.refreshControl?.addTarget(self, action: #selector(refresh), for: .valueChanged)
+    }
+    
+    func refreshAutomatically() {
+        guard let date = Preference.libraryLastRefreshTime else { refresh(); return }
+        guard date.timeIntervalSinceNow < -86400 else {return}
+        refresh()
+    }
+    
+    func refresh() {
+        let operation = RefreshLibraryOperation()
+        operation.add(observer: WillExecuteObserver { (operation) in
+            OperationQueue.main.addOperation({
+                // Configure empty table data set, so it shows "Refreshing..."
+                self.isRefreshing = true
+                self.collectionView.reloadEmptyDataSet()
+            })
+        })
+        operation.add(observer: DidFinishObserver { (operation, errors) in
+            guard let operation = operation as? RefreshLibraryOperation else {return}
+            OperationQueue.main.addOperation({
+                defer {
+                    self.collectionView.refreshControl?.endRefreshing()
+                    self.isRefreshing = false
+                    self.collectionView.reloadEmptyDataSet()
+                }
+                
+                if let _ =  errors.first {
+                    // handle error [network, xmlparse]
+                } else {
+                    if operation.firstTime {
+                        //self.showLanguageFilterAlert()
+                        //self.configureNavBarButtons()
+                    } else {
+//                        self.showRefreshSuccessMessage()
+                    }
+                }
+            })
+        })
+        GlobalQueue.shared.add(operation: operation)
+    }
+    
+    // MARK: - UICollectionView Data Source
+    
+    func numberOfSections(in collectionView: UICollectionView) -> Int {
+        return fetchedResultController.sections?.count ?? 0
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
+        return fetchedResultController.sections?[section].numberOfObjects ?? 0
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! LibraryCollectionCell
+        
+        let book = fetchedResultController.object(at: indexPath)
+        cell.delegate = self
+        cell.imageView.image = UIImage(data: book.favIcon ?? Data())
+        cell.titleLabel.text = book.title
+        cell.subtitleLabel.text = [
+            book.dateDescription,
+            book.fileSizeDescription,
+            book.articleCountDescription
+        ].flatMap({$0}).joined(separator: "  ")
+        cell.descriptionLabel.text = book.desc
+        cell.hasPicLabel.isHidden = book.hasPic
+        
+        return cell
+    }
+    
+    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
+        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Header", for: indexPath) as! LibraryCollectionHeader
+        header.textLabel.text = fetchedResultController.sections?[indexPath.section].name
+        return header
+    }
+    
+    // MARK: - UICollectionViewDelegateFlowLayout
+    
+    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
+        return CGSize(width: itemWidth, height: 66)
+    }
+    
+    // MARK: - LibraryCollectionCellDelegate
+    
+    func didTapMoreButton(cell: LibraryCollectionCell) {
+        guard let indexPath = collectionView.indexPath(for: cell) else {return}
+        print("\(indexPath) tapped")
+        
+    }
+    
+    // MARK: - NSFetchedResultsController
+    
+    let managedObjectContext = AppDelegate.persistentContainer.viewContext
+    lazy var fetchedResultController: NSFetchedResultsController<Book> = {
+        let fetchRequest = Book.fetchRequest()
+        let langDescriptor = NSSortDescriptor(key: "language.name", ascending: true)
+        let titleDescriptor = NSSortDescriptor(key: "title", ascending: true)
+        fetchRequest.sortDescriptors = [langDescriptor, titleDescriptor]
+        fetchRequest.predicate = NSPredicate(format: "language.name != nil")
+////        fetchRequest.predicate = self.onlineCompoundPredicate
+        
+        let controller = NSFetchedResultsController(fetchRequest: fetchRequest,
+                                                    managedObjectContext: self.managedObjectContext,
+                                                    sectionNameKeyPath: "language.name", cacheName: nil)
+        controller.delegate = self
+        try? controller.performFetch()
+        return controller as! NSFetchedResultsController<Book>
+    }()
 }
diff --git a/Kiwix-iOS/Storyboard/Library.storyboard b/Kiwix-iOS/Storyboard/Library.storyboard
index 047a87cf..e442bc72 100644
--- a/Kiwix-iOS/Storyboard/Library.storyboard
+++ b/Kiwix-iOS/Storyboard/Library.storyboard
@@ -6,6 +6,7 @@
     <dependencies>
         <deployment identifier="iOS"/>
         <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
+        <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -44,22 +45,118 @@
                                 <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                                 <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="FMe-0w-Xez">
-                                    <size key="itemSize" width="50" height="50"/>
+                                    <size key="itemSize" width="320" height="66"/>
                                     <size key="headerReferenceSize" width="0.0" height="0.0"/>
-                                    <size key="footerReferenceSize" width="0.0" height="0.0"/>
+                                    <size key="footerReferenceSize" width="50" height="22"/>
                                     <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
                                 </collectionViewFlowLayout>
                                 <cells>
-                                    <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" id="Aea-Om-Uku">
-                                        <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                                    <collectionViewCell opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Cell" id="Aea-Om-Uku" customClass="LibraryCollectionCell" customModule="Kiwix" customModuleProvider="target">
+                                        <rect key="frame" x="28" y="0.0" width="320" height="66"/>
                                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                                         <view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center">
-                                            <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
+                                            <rect key="frame" x="0.0" y="0.0" width="320" height="66"/>
                                             <autoresizingMask key="autoresizingMask"/>
+                                            <subviews>
+                                                <imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Wbk-Lp-yTb">
+                                                    <rect key="frame" x="8" y="8" width="50" height="50"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="width" constant="50" id="Lfz-Bj-qPh"/>
+                                                        <constraint firstAttribute="height" constant="50" id="Xc4-8W-tr6"/>
+                                                    </constraints>
+                                                </imageView>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="q2k-12-zti">
+                                                    <rect key="frame" x="66" y="8" width="42" height="21"/>
+                                                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="rmy-yO-cBy">
+                                                    <rect key="frame" x="66" y="29" width="31" height="14.5"/>
+                                                    <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="wmd-Qv-2ia">
+                                                    <rect key="frame" x="66" y="43.5" width="31" height="14.5"/>
+                                                    <fontDescription key="fontDescription" type="system" pointSize="12"/>
+                                                    <nil key="textColor"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Pic" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aKZ-e6-Ikq">
+                                                    <rect key="frame" x="117" y="9.5" width="26" height="16"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="height" constant="16" id="58f-me-IXF"/>
+                                                        <constraint firstAttribute="width" constant="26" id="FBn-H0-tNj"/>
+                                                    </constraints>
+                                                    <fontDescription key="fontDescription" type="system" weight="semibold" pointSize="12"/>
+                                                    <color key="textColor" red="1" green="0.50196081400000003" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
+                                                    <nil key="highlightedColor"/>
+                                                </label>
+                                                <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="nTw-d7-YqD">
+                                                    <rect key="frame" x="270" y="10" width="42" height="46"/>
+                                                    <constraints>
+                                                        <constraint firstAttribute="width" constant="42" id="lBA-pd-Pa2"/>
+                                                        <constraint firstAttribute="height" constant="46" id="qqN-B2-nid"/>
+                                                    </constraints>
+                                                    <state key="normal" image="Dots"/>
+                                                    <connections>
+                                                        <action selector="moreButtonTapped:" destination="Aea-Om-Uku" eventType="touchUpInside" id="Cxh-DD-Tyi"/>
+                                                    </connections>
+                                                </button>
+                                            </subviews>
                                         </view>
-                                        <color key="backgroundColor" red="1" green="0.50196081400000003" blue="0.0" alpha="1" colorSpace="calibratedRGB"/>
+                                        <color key="backgroundColor" name="textBackgroundColor" catalog="System" colorSpace="catalog"/>
+                                        <constraints>
+                                            <constraint firstItem="Wbk-Lp-yTb" firstAttribute="centerY" secondItem="Aea-Om-Uku" secondAttribute="centerY" id="3Lj-sz-46B"/>
+                                            <constraint firstAttribute="trailingMargin" secondItem="nTw-d7-YqD" secondAttribute="trailing" id="5JR-74-PhA"/>
+                                            <constraint firstItem="wmd-Qv-2ia" firstAttribute="leading" secondItem="Wbk-Lp-yTb" secondAttribute="trailing" constant="8" id="6DI-9y-Igu"/>
+                                            <constraint firstItem="aKZ-e6-Ikq" firstAttribute="leading" secondItem="q2k-12-zti" secondAttribute="trailing" constant="9" id="Bvy-Bq-O5f"/>
+                                            <constraint firstItem="aKZ-e6-Ikq" firstAttribute="centerY" secondItem="q2k-12-zti" secondAttribute="centerY" constant="-1" id="LIs-SX-crF"/>
+                                            <constraint firstItem="wmd-Qv-2ia" firstAttribute="top" secondItem="rmy-yO-cBy" secondAttribute="bottom" id="MEV-c5-uqZ"/>
+                                            <constraint firstItem="rmy-yO-cBy" firstAttribute="leading" secondItem="Wbk-Lp-yTb" secondAttribute="trailing" constant="8" id="Mn8-60-6ii"/>
+                                            <constraint firstItem="nTw-d7-YqD" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="rmy-yO-cBy" secondAttribute="trailing" id="TOj-hZ-bSG"/>
+                                            <constraint firstItem="nTw-d7-YqD" firstAttribute="centerY" secondItem="Aea-Om-Uku" secondAttribute="centerY" id="VLl-VW-z7E"/>
+                                            <constraint firstItem="q2k-12-zti" firstAttribute="leading" secondItem="Wbk-Lp-yTb" secondAttribute="trailing" constant="8" id="g7u-6E-fy5"/>
+                                            <constraint firstAttribute="leadingMargin" secondItem="Wbk-Lp-yTb" secondAttribute="leading" id="hkU-Yw-gmi"/>
+                                            <constraint firstItem="nTw-d7-YqD" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="aKZ-e6-Ikq" secondAttribute="trailing" id="pmb-V3-HIM"/>
+                                            <constraint firstAttribute="topMargin" secondItem="q2k-12-zti" secondAttribute="top" id="qG1-In-0ae"/>
+                                            <constraint firstItem="nTw-d7-YqD" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="wmd-Qv-2ia" secondAttribute="trailing" id="qRe-Xm-jjX"/>
+                                            <constraint firstItem="rmy-yO-cBy" firstAttribute="top" secondItem="q2k-12-zti" secondAttribute="bottom" id="tUM-uu-aX5"/>
+                                        </constraints>
+                                        <connections>
+                                            <outlet property="descriptionLabel" destination="wmd-Qv-2ia" id="SYF-xK-ewN"/>
+                                            <outlet property="hasPicLabel" destination="aKZ-e6-Ikq" id="ZgS-qb-zdm"/>
+                                            <outlet property="imageView" destination="Wbk-Lp-yTb" id="QZJ-hP-zJr"/>
+                                            <outlet property="subtitleLabel" destination="rmy-yO-cBy" id="sx5-Ij-QaQ"/>
+                                            <outlet property="titleLabel" destination="q2k-12-zti" id="LU3-St-SwQ"/>
+                                        </connections>
                                     </collectionViewCell>
                                 </cells>
+                                <collectionReusableView key="sectionFooterView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" reuseIdentifier="Header" id="Vew-wk-bdN" customClass="LibraryCollectionHeader" customModule="Kiwix" customModuleProvider="target">
+                                    <rect key="frame" x="0.0" y="66" width="375" height="22"/>
+                                    <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
+                                    <subviews>
+                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="uBe-10-mcY">
+                                            <rect key="frame" x="28" y="3" width="36" height="17"/>
+                                            <fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
+                                            <nil key="textColor"/>
+                                            <nil key="highlightedColor"/>
+                                        </label>
+                                    </subviews>
+                                    <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
+                                    <constraints>
+                                        <constraint firstItem="uBe-10-mcY" firstAttribute="centerY" secondItem="Vew-wk-bdN" secondAttribute="centerY" id="bOA-89-aKD"/>
+                                        <constraint firstItem="uBe-10-mcY" firstAttribute="leading" secondItem="Vew-wk-bdN" secondAttribute="leadingMargin" constant="20" id="iWL-kS-Hu6"/>
+                                    </constraints>
+                                    <connections>
+                                        <outlet property="textLabel" destination="uBe-10-mcY" id="pab-il-9r3"/>
+                                    </connections>
+                                </collectionReusableView>
+                                <connections>
+                                    <outlet property="dataSource" destination="cDq-va-k4I" id="C1Z-rn-cDB"/>
+                                    <outlet property="delegate" destination="cDq-va-k4I" id="O4e-0Y-jYL"/>
+                                </connections>
                             </collectionView>
                         </subviews>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
@@ -144,5 +241,6 @@
     </scenes>
     <resources>
         <image name="Cross" width="16" height="16"/>
+        <image name="Dots" width="16" height="16"/>
     </resources>
 </document>
diff --git a/Kiwix-iOS/View/Cells.swift b/Kiwix-iOS/View/Cells.swift
index 3e003733..4ecbcf13 100644
--- a/Kiwix-iOS/View/Cells.swift
+++ b/Kiwix-iOS/View/Cells.swift
@@ -101,8 +101,6 @@ class ArticleSnippetCell: ArticleCell {
     @IBOutlet weak var snippetLabel: UILabel!
 }
 
-// MARK: - Bookmark Cell
-
 class BookmarkCollectionCell: UICollectionViewCell {
     override func awakeFromNib() {
         clipsToBounds = false
@@ -144,6 +142,35 @@ class BookmarkCollectionCell: UICollectionViewCell {
     }
 }
 
+class LibraryCollectionCell: UICollectionViewCell {
+    override func awakeFromNib() {
+        imageView.clipsToBounds = true
+        imageView.layer.cornerRadius = 2.0
+        hasPicLabel.layer.borderWidth = 1.5
+        hasPicLabel.layer.borderColor = UIColor.orange.cgColor
+        hasPicLabel.layer.cornerRadius = 8.0
+    }
+    
+    @IBAction func moreButtonTapped(_ sender: UIButton) {
+        delegate?.didTapMoreButton(cell: self)
+    }
+    
+    weak var delegate: LibraryCollectionCellDelegate?
+    @IBOutlet weak var imageView: UIImageView!
+    @IBOutlet weak var titleLabel: UILabel!
+    @IBOutlet weak var subtitleLabel: UILabel!
+    @IBOutlet weak var descriptionLabel: UILabel!
+    @IBOutlet weak var hasPicLabel: UILabel!
+}
+
+protocol LibraryCollectionCellDelegate: class {
+    func didTapMoreButton(cell: LibraryCollectionCell)
+}
+
+class LibraryCollectionHeader: UICollectionReusableView {
+    @IBOutlet weak var textLabel: UILabel!
+}
+