From 4a580d713621f99abb8baabc9b847ce039d44842 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sat, 4 Oct 2025 13:40:24 +0100
Subject: 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
---
 .../components/settings/ImportSessionsSection.tsx  | 79 ++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 apps/web/components/settings/ImportSessionsSection.tsx

(limited to 'apps/web/components/settings/ImportSessionsSection.tsx')

diff --git a/apps/web/components/settings/ImportSessionsSection.tsx b/apps/web/components/settings/ImportSessionsSection.tsx
new file mode 100644
index 00000000..38f248d2
--- /dev/null
+++ b/apps/web/components/settings/ImportSessionsSection.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { Card, CardContent } from "@/components/ui/card";
+import { useListImportSessions } from "@/lib/hooks/useImportSessions";
+import { useTranslation } from "@/lib/i18n/client";
+import { Package } from "lucide-react";
+
+import { FullPageSpinner } from "../ui/full-page-spinner";
+import { ImportSessionCard } from "./ImportSessionCard";
+
+export function ImportSessionsSection() {
+  const { t } = useTranslation();
+  const { data: sessions, isLoading, error } = useListImportSessions();
+
+  if (isLoading) {
+    return (
+      <div className="flex w-full flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-medium">
+            {t("settings.import_sessions.title")}
+          </h3>
+        </div>
+        <FullPageSpinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex w-full flex-col gap-4">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-medium">
+            {t("settings.import_sessions.title")}
+          </h3>
+        </div>
+        <Card>
+          <CardContent className="flex items-center justify-center py-8">
+            <p className="text-gray-600">
+              {t("settings.import_sessions.load_error")}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col gap-4">
+      <div>
+        <h3 className="text-lg font-medium">
+          {t("settings.import_sessions.title")}
+        </h3>
+        <p className="mt-1 text-sm text-accent-foreground">
+          {t("settings.import_sessions.description")}
+        </p>
+      </div>
+
+      {sessions && sessions.length > 0 ? (
+        <div className="space-y-4">
+          {sessions.map((session) => (
+            <ImportSessionCard key={session.id} session={session} />
+          ))}
+        </div>
+      ) : (
+        <Card>
+          <CardContent className="flex flex-col items-center justify-center py-12">
+            <Package className="mb-4 h-12 w-12 text-gray-400" />
+            <p className="mb-2 text-center text-gray-600">
+              {t("settings.import_sessions.no_sessions")}
+            </p>
+            <p className="text-center text-sm text-gray-500">
+              {t("settings.import_sessions.no_sessions_detail")}
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}
-- 
cgit v1.3-1-g0d28