web: use lazy loading to load attachments

packages/core/src/collections/attachments.ts

@@ -24,6 +24,7 @@ import { EV, EVENTS } from "../common";
 import dataurl from "../utils/dataurl";
 import dayjs from "dayjs";
 import {
+  DocumentMimeTypes,
   getFileNameWithExtension,
   isImage,
   isWebClip
@@ -390,14 +391,47 @@ export class Attachments implements ICollection {
     );
   }
 
-  // get images() {
-  //   return this.all.filter((attachment) => isImage(attachment.metadata.type));
-  // }
+  get images() {
+    return this.collection.createFilter<Attachment>(
+      (qb) => qb.where("mimeType", "like", `image/%`),
+      this.db.options?.batchSize
+    );
+  }
 
-  // get webclips() {
-  //   return this.all.filter((attachment) => isWebClip(attachment.metadata.type));
-  // }
+  get videos() {
+    return this.collection.createFilter<Attachment>(
+      (qb) => qb.where("mimeType", "like", `video/%`),
+      this.db.options?.batchSize
+    );
+  }
 
+  get documents() {
+    return this.collection.createFilter<Attachment>(
+      (qb) => qb.where("mimeType", "in", DocumentMimeTypes),
+      this.db.options?.batchSize
+    );
+  }
+
+  get webclips() {
+    return this.collection.createFilter<Attachment>(
+      (qb) => qb.where("mimeType", "==", `application/vnd.notesnook.web-clip`),
+      this.db.options?.batchSize
+    );
+  }
+
+  get orphaned() {
+    return this.collection.createFilter<Attachment>(
+      (qb) =>
+        qb.where("id", "not in", (eb) =>
+          eb
+            .selectFrom("relations")
+            .where("toType", "==", "attachment")
+            .select("toId as id")
+            .$narrowType<{ id: string }>()
+        ),
+      this.db.options?.batchSize
+    );
+  }
   // get media() {
   //   return this.all.filter(
   //     (attachment) =>

packages/core/src/database/sql-collection.ts

@@ -18,7 +18,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { EVENTS } from "../common";
-import { GroupOptions, Item, MaybeDeletedItem, isDeleted } from "../types";
+import {
+  GroupOptions,
+  Item,
+  MaybeDeletedItem,
+  SortOptions,
+  isDeleted
+} from "../types";
 import EventManager from "../utils/event-manager";
 import {
   DatabaseAccessor,
@@ -359,7 +365,7 @@ export class FilteredSelector<T extends Item> {
     );
   }
 
-  async sorted(options: GroupOptions) {
+  async sorted(options: SortOptions) {
     const items = await this.filter
       .$call(this.buildSortExpression(options))
       .select("id")
@@ -378,7 +384,7 @@ export class FilteredSelector<T extends Item> {
     });
   }
 
-  private buildSortExpression(options: GroupOptions) {
+  private buildSortExpression(options: SortOptions) {
     return <T>(
       qb: SelectQueryBuilder<DatabaseSchema, keyof DatabaseSchema, T>
     ) => {

packages/core/src/types.ts

@@ -20,12 +20,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Cipher } from "@notesnook/crypto";
 import { TimeFormat } from "./utils/date";
 
-export type GroupOptions = {
-  groupBy: "none" | "abc" | "year" | "month" | "week" | "default";
-  sortBy: "dateCreated" | "dateDeleted" | "dateEdited" | "title" | "dueDate";
+export type SortOptions = {
+  sortBy:
+    | "dateCreated"
+    | "dateDeleted"
+    | "dateEdited"
+    | "title"
+    | "filename"
+    | "size"
+    | "dateUploaded"
+    | "dueDate";
   sortDirection: "desc" | "asc";
 };
 
+export type GroupOptions = SortOptions & {
+  groupBy: "none" | "abc" | "year" | "month" | "week" | "default";
+};
+
 export type GroupedItems<T> = (T | GroupHeader)[];
 
 export type GroupingKey =

packages/core/src/utils/virtualized-grouping.ts

@@ -44,6 +44,10 @@ export class VirtualizedGrouping<T> {
     return item;
   }
 
+  get ungrouped() {
+    return this.ids.filter((i) => !isGroupHeader(i)) as string[];
+  }
+
   /**
    * Get item from cache or request the appropriate batch for caching
    * and load it from there.