feat: Revamp import experience (#2001)

* WIP: import v2

* remove new session button

* don't redirect after import

* store and lint to root list

* models + tests

* redesign the progress

* simplify the import session for ow

* drop status from session schema

* split the import session page

* i18n

* fix test

* remove pagination

* fix some colors in darkmode

* one last fix

* add privacy filter

* privacy check

* fix interactivity of import progress

* fix test

1 files changed, 16 insertions, 5 deletions

diff --git a/apps/web/components/settings/ImportExport.tsx b/apps/web/components/settings/ImportExport.tsx
index c644af27..ee220342 100644
--- a/apps/web/components/settings/ImportExport.tsx
+++ b/apps/web/components/settings/ImportExport.tsx
@@ -19,6 +19,7 @@ import { Download, Loader2, Upload } from "lucide-react";
 
 import { Card, CardContent } from "../ui/card";
 import { toast } from "../ui/use-toast";
+import { ImportSessionsSection } from "./ImportSessionsSection";
 
 function ImportCard({
   text,
@@ -266,11 +267,21 @@ export function ImportExportRow() {
 export default function ImportExport() {
   const { t } = useTranslation();
   return (
-    <div className="flex w-full flex-col gap-2">
-      <p className="mb-4 text-lg font-medium">
-        {t("settings.import.import_export_bookmarks")}
-      </p>
-      <ImportExportRow />
+    <div className="space-y-3">
+      <div className="rounded-md border bg-background p-4">
+        <div className="flex w-full flex-col gap-6">
+          <div>
+            <p className="mb-4 text-lg font-medium">
+              {t("settings.import.import_export_bookmarks")}
+            </p>
+            <ImportExportRow />
+          </div>
+        </div>
+      </div>
+
+      <div className="rounded-md border bg-background p-4">
+        <ImportSessionsSection />
+      </div>
     </div>
   );
 }