feat: Add stripe based subscriptions

2 files changed, 93 insertions, 57 deletions

diff --git a/apps/web/app/settings/layout.tsx b/apps/web/app/settings/layout.tsx
index 217e02ba..b9ba80a0 100644
--- a/apps/web/app/settings/layout.tsx
+++ b/apps/web/app/settings/layout.tsx
@@ -7,6 +7,7 @@ import { TFunction } from "i18next";
 import {
   ArrowLeft,
   BarChart3,
+  CreditCard,
   Download,
   GitBranch,
   Image,
@@ -18,69 +19,86 @@ import {
   Webhook,
 } from "lucide-react";
 
+import serverConfig from "@karakeep/shared/config";
+
 const settingsSidebarItems = (
   t: TFunction,
 ): {
   name: string;
   icon: JSX.Element;
   path: string;
-}[] => [
-  {
-    name: t("settings.back_to_app"),
-    icon: <ArrowLeft size={18} />,
-    path: "/dashboard/bookmarks",
-  },
-  {
-    name: t("settings.info.user_info"),
-    icon: <User size={18} />,
-    path: "/settings/info",
-  },
-  {
-    name: t("settings.stats.usage_statistics"),
-    icon: <BarChart3 size={18} />,
-    path: "/settings/stats",
-  },
-  {
-    name: t("settings.ai.ai_settings"),
-    icon: <Sparkles size={18} />,
-    path: "/settings/ai",
-  },
-  {
-    name: t("settings.feeds.rss_subscriptions"),
-    icon: <Rss size={18} />,
-    path: "/settings/feeds",
-  },
-  {
-    name: t("settings.import.import_export"),
-    icon: <Download size={18} />,
-    path: "/settings/import",
-  },
-  {
-    name: t("settings.api_keys.api_keys"),
-    icon: <KeyRound size={18} />,
-    path: "/settings/api-keys",
-  },
-  {
-    name: t("settings.broken_links.broken_links"),
-    icon: <Link size={18} />,
-    path: "/settings/broken-links",
-  },
-  {
-    name: t("settings.webhooks.webhooks"),
-    icon: <Webhook size={18} />,
-    path: "/settings/webhooks",
-  },
-  {
-    name: t("settings.rules.rules"),
-    icon: <GitBranch size={18} />,
-    path: "/settings/rules",
-  },
-  {
-    name: t("settings.manage_assets.manage_assets"),
-    icon: <Image size={18} />,
-    path: "/settings/assets",
-  },
-];
+}[] => {
+  const baseItems = [
+    {
+      name: t("settings.back_to_app"),
+      icon: <ArrowLeft size={18} />,
+      path: "/dashboard/bookmarks",
+    },
+    {
+      name: t("settings.info.user_info"),
+      icon: <User size={18} />,
+      path: "/settings/info",
+    },
+    {
+      name: t("settings.stats.usage_statistics"),
+      icon: <BarChart3 size={18} />,
+      path: "/settings/stats",
+    },
+  ];
+
+  // Add subscription item if Stripe is configured
+  if (serverConfig.stripe.isConfigured) {
+    baseItems.push({
+      name: t("settings.subscription.subscription"),
+      icon: <CreditCard size={18} />,
+      path: "/settings/subscription",
+    });
+  }
+
+  return [
+    ...baseItems,
+    {
+      name: t("settings.ai.ai_settings"),
+      icon: <Sparkles size={18} />,
+      path: "/settings/ai",
+    },
+    {
+      name: t("settings.feeds.rss_subscriptions"),
+      icon: <Rss size={18} />,
+      path: "/settings/feeds",
+    },
+    {
+      name: t("settings.import.import_export"),
+      icon: <Download size={18} />,
+      path: "/settings/import",
+    },
+    {
+      name: t("settings.api_keys.api_keys"),
+      icon: <KeyRound size={18} />,
+      path: "/settings/api-keys",
+    },
+    {
+      name: t("settings.broken_links.broken_links"),
+      icon: <Link size={18} />,
+      path: "/settings/broken-links",
+    },
+    {
+      name: t("settings.webhooks.webhooks"),
+      icon: <Webhook size={18} />,
+      path: "/settings/webhooks",
+    },
+    {
+      name: t("settings.rules.rules"),
+      icon: <GitBranch size={18} />,
+      path: "/settings/rules",
+    },
+    {
+      name: t("settings.manage_assets.manage_assets"),
+      icon: <Image size={18} />,
+      path: "/settings/assets",
+    },
+  ];
+};
 
 export default async function SettingsLayout({
   children,
diff --git a/apps/web/app/settings/subscription/page.tsx b/apps/web/app/settings/subscription/page.tsx
new file mode 100644
index 00000000..e8c46460
--- /dev/null
+++ b/apps/web/app/settings/subscription/page.tsx
@@ -0,0 +1,18 @@
+import { redirect } from "next/navigation";
+import SubscriptionSettings from "@/components/settings/SubscriptionSettings";
+import { QuotaProgress } from "@/components/subscription/QuotaProgress";
+
+import serverConfig from "@karakeep/shared/config";
+
+export default async function SubscriptionPage() {
+  if (!serverConfig.stripe.isConfigured) {
+    redirect("/settings");
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <SubscriptionSettings />
+      <QuotaProgress />
+    </div>
+  );
+}