feat: Add bookmark sources statistics section (#2110)

* feat: add bookmark sources statistics to usage stats page

Add a new section to the usage statistics page that displays stats about
bookmark sources (mobile, extension, web, API, CLI, etc).

Changes:
- Add bookmarksBySource field to user stats response schema
- Implement backend query to fetch bookmarks grouped by source
- Add new "Bookmark Sources" card to stats page UI
- Add helper function to format source names for display

* refactor: use stricter enum type for bookmark sources in stats API

Replace generic string type with zBookmarkSourceSchema enum for better
type safety and autocomplete. This ensures the API contract matches the
database schema definition.

Changes:
- Import and use zBookmarkSourceSchema in user stats response
- Define BookmarkSource type alias in frontend
- Update formatSourceName to use stricter type and return non-nullable
- Remove fallback case since all enum values are now handled

* refactor: use shared BookmarkSource type and add i18n support

- Replace local BookmarkSource type with canonical type from shared package
  using z.infer<typeof zBookmarkSourceSchema>
- Add translation support for "Bookmark Sources" title and empty state
- Add bookmark_sources.title and bookmark_sources.empty keys to English
  locale file

This ensures type consistency across the codebase and prepares for
future localization of the bookmark sources feature.

* fix icons

---------

Co-authored-by: Claude <noreply@anthropic.com>

1 files changed, 90 insertions, 0 deletions

diff --git a/apps/web/app/settings/stats/page.tsx b/apps/web/app/settings/stats/page.tsx
index 599e5362..944d1c59 100644
--- a/apps/web/app/settings/stats/page.tsx
+++ b/apps/web/app/settings/stats/page.tsx
@@ -11,18 +11,30 @@ import {
   Archive,
   BarChart3,
   BookOpen,
+  Chrome,
   Clock,
+  Code,
   Database,
   FileText,
   Globe,
   Hash,
   Heart,
+  HelpCircle,
   Highlighter,
   Image,
   Link,
   List,
+  Rss,
+  Smartphone,
   TrendingUp,
+  Upload,
+  Zap,
 } from "lucide-react";
+import { z } from "zod";
+
+import { zBookmarkSourceSchema } from "@karakeep/shared/types/bookmarks";
+
+type BookmarkSource = z.infer<typeof zBookmarkSourceSchema>;
 
 function formatBytes(bytes: number): string {
   if (bytes === 0) return "0 Bytes";
@@ -47,6 +59,45 @@ const hourLabels = Array.from({ length: 24 }, (_, i) =>
   i === 0 ? "12 AM" : i < 12 ? `${i} AM` : i === 12 ? "12 PM" : `${i - 12} PM`,
 );
 
+function formatSourceName(source: BookmarkSource | null): string {
+  if (!source) return "Unknown";
+  const sourceMap: Record<BookmarkSource, string> = {
+    api: "API",
+    web: "Web",
+    extension: "Browser Extension",
+    cli: "CLI",
+    mobile: "Mobile App",
+    singlefile: "SingleFile",
+    rss: "RSS Feed",
+    import: "Import",
+  };
+  return sourceMap[source];
+}
+
+function getSourceIcon(source: BookmarkSource | null): React.ReactNode {
+  const iconProps = { className: "h-4 w-4 text-muted-foreground" };
+  switch (source) {
+    case "api":
+      return <Zap {...iconProps} />;
+    case "web":
+      return <Globe {...iconProps} />;
+    case "extension":
+      return <Chrome {...iconProps} />;
+    case "cli":
+      return <Code {...iconProps} />;
+    case "mobile":
+      return <Smartphone {...iconProps} />;
+    case "singlefile":
+      return <FileText {...iconProps} />;
+    case "rss":
+      return <Rss {...iconProps} />;
+    case "import":
+      return <Upload {...iconProps} />;
+    default:
+      return <HelpCircle {...iconProps} />;
+  }
+}
+
 function SimpleBarChart({
   data,
   maxValue,
@@ -439,6 +490,45 @@ export default function StatsPage() {
             )}
           </CardContent>
         </Card>
+
+        {/* Bookmark Sources */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Zap className="h-5 w-5" />
+              {t("settings.stats.bookmark_sources.title")}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {stats.bookmarksBySource.length > 0 ? (
+              <div className="space-y-3">
+                {stats.bookmarksBySource.map(
+                  (source: {
+                    source: BookmarkSource | null;
+                    count: number;
+                  }) => (
+                    <div
+                      key={source.source || "unknown"}
+                      className="flex items-center justify-between"
+                    >
+                      <div className="flex items-center gap-2">
+                        {getSourceIcon(source.source)}
+                        <span className="max-w-[200px] truncate text-sm">
+                          {formatSourceName(source.source)}
+                        </span>
+                      </div>
+                      <Badge variant="secondary">{source.count}</Badge>
+                    </div>
+                  ),
+                )}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">
+                {t("settings.stats.bookmark_sources.empty")}
+              </p>
+            )}
+          </CardContent>
+        </Card>
       </div>
 
       {/* Activity Patterns */}