feat: Implement generic rule engine (#1318)

* Add schema for the new rule engine

* Add rule engine backend logic

* Implement the worker logic and event firing

* Implement the UI changesfor the rule engine

* Ensure that when a referenced list or tag are deleted, the corresponding event/action is

* Dont show smart lists in rule engine events

* Add privacy validations for attached tag and list ids

* Move the rules logic into a models

5 files changed, 1014 insertions, 0 deletions

diff --git a/apps/web/components/dashboard/rules/RuleEngineActionBuilder.tsx b/apps/web/components/dashboard/rules/RuleEngineActionBuilder.tsx
new file mode 100644
index 00000000..0354e8ac
--- /dev/null
+++ b/apps/web/components/dashboard/rules/RuleEngineActionBuilder.tsx
@@ -0,0 +1,216 @@
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Archive,
+  Download,
+  List,
+  PlusCircle,
+  Star,
+  Tag,
+  Trash2,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import type { RuleEngineAction } from "@karakeep/shared/types/rules";
+
+import { BookmarkListSelector } from "../lists/BookmarkListSelector";
+import { TagAutocomplete } from "../tags/TagAutocomplete";
+
+interface ActionBuilderProps {
+  value: RuleEngineAction[];
+  onChange: (actions: RuleEngineAction[]) => void;
+}
+
+export function ActionBuilder({ value, onChange }: ActionBuilderProps) {
+  const { t } = useTranslation();
+  const handleAddAction = () => {
+    onChange([...value, { type: "addTag", tagId: "" }]);
+  };
+
+  const handleRemoveAction = (index: number) => {
+    const newActions = [...value];
+    newActions.splice(index, 1);
+    onChange(newActions);
+  };
+
+  const handleActionTypeChange = (
+    index: number,
+    type: RuleEngineAction["type"],
+  ) => {
+    const newActions = [...value];
+
+    switch (type) {
+      case "addTag":
+        newActions[index] = { type: "addTag", tagId: "" };
+        break;
+      case "removeTag":
+        newActions[index] = { type: "removeTag", tagId: "" };
+        break;
+      case "addToList":
+        newActions[index] = { type: "addToList", listId: "" };
+        break;
+      case "removeFromList":
+        newActions[index] = { type: "removeFromList", listId: "" };
+        break;
+      case "downloadFullPageArchive":
+        newActions[index] = { type: "downloadFullPageArchive" };
+        break;
+      case "favouriteBookmark":
+        newActions[index] = { type: "favouriteBookmark" };
+        break;
+      case "archiveBookmark":
+        newActions[index] = { type: "archiveBookmark" };
+        break;
+      default: {
+        const _exhaustiveCheck: never = type;
+        return null;
+      }
+    }
+
+    onChange(newActions);
+  };
+
+  const handleActionFieldChange = (
+    index: number,
+    selectVal: RuleEngineAction,
+  ) => {
+    const newActions = [...value];
+    newActions[index] = selectVal;
+    onChange(newActions);
+  };
+
+  const renderActionIcon = (type: string) => {
+    switch (type) {
+      case "addTag":
+      case "removeTag":
+        return <Tag className="h-4 w-4" />;
+      case "addToList":
+      case "removeFromList":
+        return <List className="h-4 w-4" />;
+      case "downloadFullPageArchive":
+        return <Download className="h-4 w-4" />;
+      case "favouriteBookmark":
+        return <Star className="h-4 w-4" />;
+      case "archiveBookmark":
+        return <Archive className="h-4 w-4" />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      {value.length === 0 ? (
+        <div className="rounded-md border border-dashed p-4 text-center">
+          <p className="text-sm text-muted-foreground">No actions added yet</p>
+        </div>
+      ) : (
+        value.map((action, index) => (
+          <Card key={index}>
+            <CardContent className="p-3">
+              <div className="flex items-center justify-between">
+                <div className="flex flex-1 items-center">
+                  {renderActionIcon(action.type)}
+                  <Select
+                    value={action.type}
+                    onValueChange={(value) =>
+                      handleActionTypeChange(
+                        index,
+                        value as RuleEngineAction["type"],
+                      )
+                    }
+                  >
+                    <SelectTrigger className="ml-2 h-8 w-auto border-none bg-transparent px-2">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="addTag">
+                        {t("settings.rules.actions_types.add_tag")}
+                      </SelectItem>
+                      <SelectItem value="removeTag">
+                        {t("settings.rules.actions_types.remove_tag")}
+                      </SelectItem>
+                      <SelectItem value="addToList">
+                        {t("settings.rules.actions_types.add_to_list")}
+                      </SelectItem>
+                      <SelectItem value="removeFromList">
+                        {t("settings.rules.actions_types.remove_from_list")}
+                      </SelectItem>
+                      <SelectItem value="downloadFullPageArchive">
+                        {t(
+                          "settings.rules.actions_types.download_full_page_archive",
+                        )}
+                      </SelectItem>
+                      <SelectItem value="favouriteBookmark">
+                        {t("settings.rules.actions_types.favourite_bookmark")}
+                      </SelectItem>
+                      <SelectItem value="archiveBookmark">
+                        {t("settings.rules.actions_types.archive_bookmark")}
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+
+                  {(action.type === "addTag" ||
+                    action.type === "removeTag") && (
+                    <TagAutocomplete
+                      className="ml-2 h-8 flex-1"
+                      tagId={action.tagId}
+                      onChange={(t) =>
+                        handleActionFieldChange(index, {
+                          type: action.type,
+                          tagId: t,
+                        })
+                      }
+                    />
+                  )}
+
+                  {(action.type === "addToList" ||
+                    action.type === "removeFromList") && (
+                    <BookmarkListSelector
+                      className="ml-2 h-8 flex-1"
+                      value={action.listId}
+                      listTypes={["manual"]}
+                      onChange={(e) =>
+                        handleActionFieldChange(index, {
+                          type: action.type,
+                          listId: e,
+                        })
+                      }
+                    />
+                  )}
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleRemoveAction(index)}
+                  className="h-7 w-7 p-0"
+                >
+                  <Trash2 className="h-4 w-4 text-red-500" />
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))
+      )}
+
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        onClick={handleAddAction}
+        className="w-full"
+      >
+        <PlusCircle className="mr-2 h-4 w-4" />
+        Add Action
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/components/dashboard/rules/RuleEngineConditionBuilder.tsx b/apps/web/components/dashboard/rules/RuleEngineConditionBuilder.tsx
new file mode 100644
index 00000000..8faca013
--- /dev/null
+++ b/apps/web/components/dashboard/rules/RuleEngineConditionBuilder.tsx
@@ -0,0 +1,322 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Archive,
+  ChevronDown,
+  ChevronRight,
+  FileType,
+  Link,
+  PlusCircle,
+  Rss,
+  Star,
+  Tag,
+  Trash2,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import type { RuleEngineCondition } from "@karakeep/shared/types/rules";
+
+import { FeedSelector } from "../feeds/FeedSelector";
+import { TagAutocomplete } from "../tags/TagAutocomplete";
+
+interface ConditionBuilderProps {
+  value: RuleEngineCondition;
+  onChange: (condition: RuleEngineCondition) => void;
+  level?: number;
+  onRemove?: () => void;
+}
+
+export function ConditionBuilder({
+  value,
+  onChange,
+  level = 0,
+  onRemove,
+}: ConditionBuilderProps) {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleTypeChange = (type: RuleEngineCondition["type"]) => {
+    switch (type) {
+      case "urlContains":
+        onChange({ type: "urlContains", str: "" });
+        break;
+      case "importedFromFeed":
+        onChange({ type: "importedFromFeed", feedId: "" });
+        break;
+      case "bookmarkTypeIs":
+        onChange({ type: "bookmarkTypeIs", bookmarkType: "link" });
+        break;
+      case "hasTag":
+        onChange({ type: "hasTag", tagId: "" });
+        break;
+      case "isFavourited":
+        onChange({ type: "isFavourited" });
+        break;
+      case "isArchived":
+        onChange({ type: "isArchived" });
+        break;
+      case "and":
+        onChange({ type: "and", conditions: [] });
+        break;
+      case "or":
+        onChange({ type: "or", conditions: [] });
+        break;
+      case "alwaysTrue":
+        onChange({ type: "alwaysTrue" });
+        break;
+      default: {
+        const _exhaustiveCheck: never = type;
+        return null;
+      }
+    }
+  };
+
+  const renderConditionIcon = (type: RuleEngineCondition["type"]) => {
+    switch (type) {
+      case "urlContains":
+        return <Link className="h-4 w-4" />;
+      case "importedFromFeed":
+        return <Rss className="h-4 w-4" />;
+      case "bookmarkTypeIs":
+        return <FileType className="h-4 w-4" />;
+      case "hasTag":
+        return <Tag className="h-4 w-4" />;
+      case "isFavourited":
+        return <Star className="h-4 w-4" />;
+      case "isArchived":
+        return <Archive className="h-4 w-4" />;
+      default:
+        return null;
+    }
+  };
+
+  const renderConditionFields = () => {
+    switch (value.type) {
+      case "urlContains":
+        return (
+          <div className="mt-2">
+            <Input
+              value={value.str}
+              onChange={(e) => onChange({ ...value, str: e.target.value })}
+              placeholder="URL contains..."
+              className="w-full"
+            />
+          </div>
+        );
+
+      case "importedFromFeed":
+        return (
+          <div className="mt-2">
+            <FeedSelector
+              value={value.feedId}
+              onChange={(e) => onChange({ ...value, feedId: e })}
+              className="w-full"
+            />
+          </div>
+        );
+
+      case "bookmarkTypeIs":
+        return (
+          <div className="mt-2">
+            <Select
+              value={value.bookmarkType}
+              onValueChange={(bookmarkType) =>
+                onChange({
+                  ...value,
+                  bookmarkType: bookmarkType as "link" | "text" | "asset",
+                })
+              }
+            >
+              <SelectTrigger>
+                <SelectValue placeholder="Select bookmark type" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="link">
+                  {t("common.bookmark_types.link")}
+                </SelectItem>
+                <SelectItem value="text">
+                  {t("common.bookmark_types.text")}
+                </SelectItem>
+                <SelectItem value="asset">
+                  {t("common.bookmark_types.media")}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        );
+
+      case "hasTag":
+        return (
+          <div className="mt-2">
+            <TagAutocomplete
+              tagId={value.tagId}
+              onChange={(t) => onChange({ type: value.type, tagId: t })}
+            />
+          </div>
+        );
+
+      case "and":
+      case "or":
+        return (
+          <div className="mt-2 space-y-2">
+            {value.conditions.map((condition, index) => (
+              <ConditionBuilder
+                key={index}
+                value={condition}
+                onChange={(newCondition) => {
+                  const newConditions = [...value.conditions];
+                  newConditions[index] = newCondition;
+                  onChange({ ...value, conditions: newConditions });
+                }}
+                level={level + 1}
+                onRemove={() => {
+                  const newConditions = [...value.conditions];
+                  newConditions.splice(index, 1);
+                  onChange({ ...value, conditions: newConditions });
+                }}
+              />
+            ))}
+
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="mt-2"
+              onClick={() => {
+                onChange({
+                  ...value,
+                  conditions: [
+                    ...value.conditions,
+                    { type: "urlContains", str: "" },
+                  ],
+                });
+              }}
+            >
+              <PlusCircle className="mr-2 h-4 w-4" />
+              Add Condition
+            </Button>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const ConditionSelector = () => (
+    <Select value={value.type} onValueChange={handleTypeChange}>
+      <SelectTrigger className="ml-2 h-8 border-none bg-transparent px-2">
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="alwaysTrue">
+          {t("settings.rules.conditions_types.always")}
+        </SelectItem>
+        <SelectItem value="and">
+          {t("settings.rules.conditions_types.and")}
+        </SelectItem>
+        <SelectItem value="or">
+          {t("settings.rules.conditions_types.or")}
+        </SelectItem>
+        <SelectItem value="urlContains">
+          {t("settings.rules.conditions_types.url_contains")}
+        </SelectItem>
+        <SelectItem value="importedFromFeed">
+          {t("settings.rules.conditions_types.imported_from_feed")}
+        </SelectItem>
+        <SelectItem value="bookmarkTypeIs">
+          {t("settings.rules.conditions_types.bookmark_type_is")}
+        </SelectItem>
+        <SelectItem value="hasTag">
+          {t("settings.rules.conditions_types.has_tag")}
+        </SelectItem>
+        <SelectItem value="isFavourited">
+          {t("settings.rules.conditions_types.is_favourited")}
+        </SelectItem>
+        <SelectItem value="isArchived">
+          {t("settings.rules.conditions_types.is_archived")}
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  );
+
+  return (
+    <Card
+      className={`border-l-4 ${value.type === "and" ? "border-l-emerald-500" : value.type === "or" ? "border-l-amber-500" : "border-l-slate-300"}`}
+    >
+      <CardContent className="p-3">
+        {value.type === "and" || value.type === "or" ? (
+          <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                <CollapsibleTrigger asChild>
+                  <Button variant="ghost" size="sm" className="h-7 w-7 p-1">
+                    {isOpen ? (
+                      <ChevronDown className="h-4 w-4" />
+                    ) : (
+                      <ChevronRight className="h-4 w-4" />
+                    )}
+                  </Button>
+                </CollapsibleTrigger>
+                <ConditionSelector />
+                <span className="ml-1 text-sm text-muted-foreground">
+                  {value.conditions.length} condition
+                  {value.conditions.length !== 1 ? "s" : ""}
+                </span>
+              </div>
+
+              {onRemove && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onRemove}
+                  className="h-7 w-7 p-0"
+                >
+                  <Trash2 className="h-4 w-4 text-red-500" />
+                </Button>
+              )}
+            </div>
+
+            <CollapsibleContent>{renderConditionFields()}</CollapsibleContent>
+          </Collapsible>
+        ) : (
+          <div>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center">
+                {renderConditionIcon(value.type)}
+                <ConditionSelector />
+              </div>
+
+              {onRemove && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={onRemove}
+                  className="h-7 w-7 p-0"
+                >
+                  <Trash2 className="h-4 w-4 text-red-500" />
+                </Button>
+              )}
+            </div>
+
+            {renderConditionFields()}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/components/dashboard/rules/RuleEngineEventSelector.tsx b/apps/web/components/dashboard/rules/RuleEngineEventSelector.tsx
new file mode 100644
index 00000000..ae37945e
--- /dev/null
+++ b/apps/web/components/dashboard/rules/RuleEngineEventSelector.tsx
@@ -0,0 +1,107 @@
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useTranslation } from "react-i18next";
+
+import type { RuleEngineEvent } from "@karakeep/shared/types/rules";
+
+import { BookmarkListSelector } from "../lists/BookmarkListSelector";
+import { TagAutocomplete } from "../tags/TagAutocomplete";
+
+interface EventSelectorProps {
+  value: RuleEngineEvent;
+  onChange: (event: RuleEngineEvent) => void;
+}
+
+export function EventSelector({ value, onChange }: EventSelectorProps) {
+  const { t } = useTranslation();
+  const handleTypeChange = (type: RuleEngineEvent["type"]) => {
+    switch (type) {
+      case "bookmarkAdded":
+        onChange({ type: "bookmarkAdded" });
+        break;
+      case "tagAdded":
+        onChange({ type: "tagAdded", tagId: "" });
+        break;
+      case "tagRemoved":
+        onChange({ type: "tagRemoved", tagId: "" });
+        break;
+      case "addedToList":
+        onChange({ type: "addedToList", listId: "" });
+        break;
+      case "removedFromList":
+        onChange({ type: "removedFromList", listId: "" });
+        break;
+      case "favourited":
+        onChange({ type: "favourited" });
+        break;
+      case "archived":
+        onChange({ type: "archived" });
+        break;
+      default: {
+        const _exhaustiveCheck: never = type;
+        return null;
+      }
+    }
+  };
+
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="flex gap-4">
+          <Select value={value.type} onValueChange={handleTypeChange}>
+            <SelectTrigger id="event-type">
+              <SelectValue placeholder="Select event type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="bookmarkAdded">
+                {t("settings.rules.events_types.bookmark_added")}
+              </SelectItem>
+              <SelectItem value="tagAdded">
+                {t("settings.rules.events_types.tag_added")}
+              </SelectItem>
+              <SelectItem value="tagRemoved">
+                {t("settings.rules.events_types.tag_removed")}
+              </SelectItem>
+              <SelectItem value="addedToList">
+                {t("settings.rules.events_types.added_to_list")}
+              </SelectItem>
+              <SelectItem value="removedFromList">
+                {t("settings.rules.events_types.removed_from_list")}
+              </SelectItem>
+              <SelectItem value="favourited">
+                {t("settings.rules.events_types.favourited")}
+              </SelectItem>
+              <SelectItem value="archived">
+                {t("settings.rules.events_types.archived")}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Additional fields based on event type */}
+          {(value.type === "tagAdded" || value.type === "tagRemoved") && (
+            <TagAutocomplete
+              className="w-full"
+              tagId={value.tagId}
+              onChange={(t) => onChange({ type: value.type, tagId: t ?? "" })}
+            />
+          )}
+
+          {(value.type === "addedToList" ||
+            value.type === "removedFromList") && (
+            <BookmarkListSelector
+              listTypes={["manual"]}
+              value={value.listId}
+              onChange={(l) => onChange({ type: value.type, listId: l })}
+            />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/components/dashboard/rules/RuleEngineRuleEditor.tsx b/apps/web/components/dashboard/rules/RuleEngineRuleEditor.tsx
new file mode 100644
index 00000000..da10317a
--- /dev/null
+++ b/apps/web/components/dashboard/rules/RuleEngineRuleEditor.tsx
@@ -0,0 +1,203 @@
+import type React from "react";
+import { useEffect, useState } from "react";
+import { ActionBuilder } from "@/components/dashboard/rules/RuleEngineActionBuilder";
+import { ConditionBuilder } from "@/components/dashboard/rules/RuleEngineConditionBuilder";
+import { EventSelector } from "@/components/dashboard/rules/RuleEngineEventSelector";
+import { ActionButton } from "@/components/ui/action-button";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { toast } from "@/components/ui/use-toast";
+import { Save, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import type {
+  RuleEngineAction,
+  RuleEngineCondition,
+  RuleEngineEvent,
+  RuleEngineRule,
+} from "@karakeep/shared/types/rules";
+import {
+  useCreateRule,
+  useUpdateRule,
+} from "@karakeep/shared-react/hooks/rules";
+
+interface RuleEditorProps {
+  rule: Omit<RuleEngineRule, "id"> & { id: string | null };
+  onCancel: () => void;
+}
+
+export function RuleEditor({ rule, onCancel }: RuleEditorProps) {
+  const { t } = useTranslation();
+  const { mutate: createRule, isPending: isCreating } = useCreateRule({
+    onSuccess: () => {
+      toast({
+        description: t("settings.rules.rule_has_been_created"),
+      });
+      onCancel();
+    },
+    onError: (e) => {
+      if (e.data?.code == "BAD_REQUEST") {
+        if (e.data.zodError) {
+          toast({
+            variant: "destructive",
+            description: Object.values(e.data.zodError.fieldErrors)
+              .flat()
+              .join("\n"),
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        }
+      } else {
+        toast({
+          variant: "destructive",
+          title: t("common.something_went_wrong"),
+        });
+      }
+    },
+  });
+  const { mutate: updateRule, isPending: isUpdating } = useUpdateRule({
+    onSuccess: () => {
+      toast({
+        description: t("settings.rules.rule_has_been_updated"),
+      });
+      onCancel();
+    },
+    onError: (e) => {
+      if (e.data?.code == "BAD_REQUEST") {
+        if (e.data.zodError) {
+          toast({
+            variant: "destructive",
+            description: Object.values(e.data.zodError.fieldErrors)
+              .flat()
+              .join("\n"),
+          });
+        } else {
+          toast({
+            variant: "destructive",
+            description: e.message,
+          });
+        }
+      } else {
+        toast({
+          variant: "destructive",
+          title: t("common.something_went_wrong"),
+        });
+      }
+    },
+  });
+
+  const [editedRule, setEditedRule] = useState<typeof rule>({ ...rule });
+
+  useEffect(() => {
+    setEditedRule({ ...rule });
+  }, [rule]);
+
+  const handleEventChange = (event: RuleEngineEvent) => {
+    setEditedRule({ ...editedRule, event });
+  };
+
+  const handleConditionChange = (condition: RuleEngineCondition) => {
+    setEditedRule({ ...editedRule, condition });
+  };
+
+  const handleActionsChange = (actions: RuleEngineAction[]) => {
+    setEditedRule({ ...editedRule, actions });
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const rule = editedRule;
+    if (rule.id) {
+      updateRule({
+        ...rule,
+        id: rule.id,
+      });
+    } else {
+      createRule(rule);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            {rule.id
+              ? t("settings.rules.edit_rule")
+              : t("settings.rules.ceate_rule")}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-4">
+            <div>
+              <Label htmlFor="name">{t("settings.rules.rule_name")}</Label>
+              <Input
+                id="name"
+                value={editedRule.name}
+                onChange={(e) =>
+                  setEditedRule({ ...editedRule, name: e.target.value })
+                }
+                placeholder={t("settings.rules.enter_rule_name")}
+                required
+              />
+            </div>
+
+            <div>
+              <Label htmlFor="description">Description</Label>
+              <Textarea
+                id="description"
+                value={editedRule.description ?? ""}
+                onChange={(e) =>
+                  setEditedRule({ ...editedRule, description: e.target.value })
+                }
+                placeholder={t("settings.rules.describe_what_this_rule_does")}
+                rows={2}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label>{t("settings.rules.whenever")}</Label>
+            <EventSelector
+              value={editedRule.event}
+              onChange={handleEventChange}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>{t("settings.rules.if")}</Label>
+            <ConditionBuilder
+              value={editedRule.condition}
+              onChange={handleConditionChange}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label>{t("common.actions")}</Label>
+            <ActionBuilder
+              value={editedRule.actions}
+              onChange={handleActionsChange}
+            />
+          </div>
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button type="button" variant="outline" onClick={onCancel}>
+              <X className="mr-2 h-4 w-4" />
+              {t("actions.cancel")}
+            </Button>
+            <ActionButton loading={isCreating || isUpdating} type="submit">
+              <Save className="mr-2 h-4 w-4" />
+              {t("settings.rules.save_rule")}
+            </ActionButton>
+          </div>
+        </CardContent>
+      </Card>
+    </form>
+  );
+}
diff --git a/apps/web/components/dashboard/rules/RuleEngineRuleList.tsx b/apps/web/components/dashboard/rules/RuleEngineRuleList.tsx
new file mode 100644
index 00000000..206a3550
--- /dev/null
+++ b/apps/web/components/dashboard/rules/RuleEngineRuleList.tsx
@@ -0,0 +1,166 @@
+import { ActionButton } from "@/components/ui/action-button";
+import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Switch } from "@/components/ui/switch";
+import { toast } from "@/components/ui/use-toast";
+import { useClientConfig } from "@/lib/clientConfig";
+import { Edit, Trash2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import type { RuleEngineRule } from "@karakeep/shared/types/rules";
+import {
+  useDeleteRule,
+  useUpdateRule,
+} from "@karakeep/shared-react/hooks/rules";
+
+export default function RuleList({
+  rules,
+  onEditRule,
+  onDeleteRule,
+}: {
+  rules: RuleEngineRule[];
+  onEditRule: (rule: RuleEngineRule) => void;
+  onDeleteRule?: (ruleId: string) => void;
+}) {
+  const { t } = useTranslation();
+  const { demoMode } = useClientConfig();
+  const { mutate: updateRule, isPending: isUpdating } = useUpdateRule({
+    onSuccess: () => {
+      toast({
+        description: t("settings.rules.rule_has_been_updated"),
+      });
+    },
+    onError: (e) => {
+      toast({
+        description: e.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  const { mutate: deleteRule, isPending: isDeleting } = useDeleteRule({
+    onSuccess: (_ret, req) => {
+      toast({
+        description: t("settings.rules.rule_has_been_deleted"),
+      });
+      onDeleteRule?.(req.id);
+    },
+    onError: (e) => {
+      toast({
+        description: e.message,
+        variant: "destructive",
+      });
+    },
+  });
+
+  if (rules.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed p-8 text-center">
+        <h3 className="text-lg font-medium">
+          {t("settings.rules.no_rules_created_yet")}
+        </h3>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {t("settings.rules.create_your_first_rule")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {rules.map((rule) => (
+        <Card key={rule.id} className={rule.enabled ? "" : "opacity-70"}>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div className="mr-4 flex-1">
+                <h3 className="font-medium">{rule.name}</h3>
+                <p className="line-clamp-2 text-sm text-muted-foreground">
+                  {rule.description}
+                </p>
+                <div className="mt-2 flex items-center text-xs text-muted-foreground">
+                  <span className="flex items-center">
+                    <span className="mr-1">Trigger:</span>
+                    <span className="font-medium">
+                      {formatEventType(rule.event.type)}
+                    </span>
+                  </span>
+                  <span className="mx-2">•</span>
+                  <span>
+                    {rule.actions.length} action
+                    {rule.actions.length !== 1 ? "s" : ""}
+                  </span>
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <Switch
+                  disabled={!!demoMode || isUpdating}
+                  checked={rule.enabled}
+                  onCheckedChange={(checked) =>
+                    updateRule({
+                      ...rule,
+                      enabled: checked,
+                    })
+                  }
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => onEditRule(rule)}
+                >
+                  <Edit className="h-4 w-4" />
+                </Button>
+                <ActionConfirmingDialog
+                  title={t("settings.rules.delete_rule")}
+                  description={t("settings.rules.delete_rule_confirmation")}
+                  actionButton={(setDialogOpen) => (
+                    <ActionButton
+                      loading={isDeleting}
+                      variant="destructive"
+                      onClick={() => {
+                        deleteRule({ id: rule.id });
+                        setDialogOpen(true);
+                      }}
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      {t("actions.delete")}
+                    </ActionButton>
+                  )}
+                >
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-red-500 hover:text-red-600"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </ActionConfirmingDialog>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function formatEventType(type: string): string {
+  switch (type) {
+    case "bookmarkAdded":
+      return "Bookmark Added";
+    case "tagAdded":
+      return "Tag Added";
+    case "tagRemoved":
+      return "Tag Removed";
+    case "addedToList":
+      return "Added to List";
+    case "removedFromList":
+      return "Removed from List";
+    case "favourited":
+      return "Favourited";
+    case "archived":
+      return "Archived";
+    default:
+      return type;
+  }
+}