strapi-plugin-magic-mark 3.2.7 → 3.3.0

package/dist/_chunks/{index-DdTUt6EH.mjs → index-DF8ICn1F.mjs}

@@ -1,11 +1,12 @@
 import React, { useRef, useEffect, useState, useCallback } from "react";
+import { useFetchClient } from "@strapi/strapi/admin";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Book, Filter, Link, Cross, Lightbulb, Plus, List, ChevronRight, Trash, ArrowUp, ArrowDown, Lock, Sparkle, Lightning, Search } from "@strapi/icons";
-import { Box, Typography, Flex, Button, TextInput, Textarea, Loader } from "@strapi/design-system";
+import { Book, Filter, Link, Cross, Pin, ArrowRight, Plus, ChevronRight, Trash, ArrowUp, ArrowDown, Lock, Sparkle, Lightning, Search } from "@strapi/icons";
+import { BookmarkIcon, SwatchIcon, ChevronDownIcon, BookOpenIcon, StarIcon, HeartIcon, BoltIcon, RocketLaunchIcon, PencilIcon, LinkIcon, SparklesIcon, BriefcaseIcon, PhotoIcon, DocumentIcon, BellIcon, CheckCircleIcon, GiftIcon, UserIcon, UserGroupIcon, EnvelopeIcon, CalendarIcon, ClockIcon, FolderIcon, MagnifyingGlassIcon, FunnelIcon, GlobeAltIcon, TagIcon, FlagIcon, FireIcon, CubeIcon, HomeIcon, CogIcon, WrenchIcon, CommandLineIcon, ChartBarIcon, ShareIcon, LightBulbIcon } from "@heroicons/react/24/outline";
 import { useIntl } from "react-intl";
 import { useNavigate, useLocation } from "react-router-dom";
-import { useFetchClient } from "@strapi/strapi/admin";
 import styled, { keyframes, css } from "styled-components";
+import { Box, Typography, Flex, TextInput, Textarea, Button, Loader } from "@strapi/design-system";
 import ReactDOM from "react-dom";
 import qs from "qs";
 const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
@@ -33,55 +34,28 @@ const pluginPkg = {
 const pluginId = "magic-mark";
 const Initializer = ({ setPlugin }) => {
   const ref = useRef(setPlugin);
+  const { get } = useFetchClient();
   useEffect(() => {
     ref.current(pluginId);
   }, []);
+  useEffect(() => {
+    const HEARTBEAT_INTERVAL = 4 * 60 * 1e3;
+    const heartbeat = async () => {
+      try {
+        await get(`/${pluginId}/license/status`);
+      } catch (error) {
+      }
+    };
+    const initialTimeout = setTimeout(heartbeat, 60 * 1e3);
+    const interval = setInterval(heartbeat, HEARTBEAT_INTERVAL);
+    return () => {
+      clearTimeout(initialTimeout);
+      clearInterval(interval);
+    };
+  }, [get]);
   return null;
 };
 const PluginIcon = () => /* @__PURE__ */ jsx(Book, {});
-const ViewsListPopover = ({
-  views,
-  onViewClick,
-  isLoading = false,
-  buttonElement
-}) => {
-  const { formatMessage } = useIntl();
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      hasRadius: true,
-      shadow: "popover",
-      padding: 3,
-      style: {
-        position: "absolute",
-        top: "100%",
-        left: 0,
-        marginTop: "8px",
-        minWidth: "200px",
-        maxWidth: "300px",
-        zIndex: 1e3,
-        backgroundColor: "white"
-      },
-      children: isLoading ? /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", textAlign: "center", children: formatMessage({ id: "loading", defaultMessage: "Loading..." }) }) : views && views.length > 0 ? /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 1, as: "nav", children: views.map((view) => /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          fullWidth: true,
-          onClick: () => onViewClick(view),
-          style: {
-            textAlign: "left",
-            justifyContent: "flex-start"
-          },
-          children: view.name
-        },
-        view.id
-      )) }) : /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
-        id: `${pluginId}.ViewsWidget.ViewsPopover.emptyList`,
-        defaultMessage: "You don't have any private views saved yet..."
-      }) })
-    }
-  );
-};
 const parseQueryString = (queryString) => {
   const result = {
     filters: [],
@@ -235,534 +209,1147 @@ const FilterPreview = ({ query }) => {
         sort
       ] }, idx)) })
     ] }),
-    parsed.populate.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
-      /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Relations:" }),
-      /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 1, children: parsed.populate.map((field, idx) => /* @__PURE__ */ jsxs(PopulateChip, { children: [
-        /* @__PURE__ */ jsx(Link, { width: "12px", height: "12px", style: { marginRight: "4px" } }),
-        " ",
-        field
-      ] }, idx)) })
+    parsed.populate.length > 0 && /* @__PURE__ */ jsxs(Box, { children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: "Relations:" }),
+      /* @__PURE__ */ jsx(Flex, { wrap: "wrap", gap: 1, children: parsed.populate.map((field, idx) => /* @__PURE__ */ jsxs(PopulateChip, { children: [
+        /* @__PURE__ */ jsx(Link, { width: "12px", height: "12px", style: { marginRight: "4px" } }),
+        " ",
+        field
+      ] }, idx)) })
+    ] })
+  ] });
+};
+const theme$1 = {
+  colors: {
+    primary: { 500: "#4945FF", 600: "#3B38E0", 100: "#EEF0FF", 200: "#D9D8FF" },
+    secondary: { 100: "#F0F0FF" },
+    danger: { 500: "#D02B20", 100: "#FCECEA" },
+    neutral: { 0: "#FFFFFF", 100: "#F6F6F9", 200: "#DCDCE4", 400: "#A5A5BA", 600: "#666687", 800: "#32324D" }
+  },
+  shadows: {
+    md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+    xl: "0 20px 25px -5px rgba(0, 0, 0, 0.15)"
+  },
+  gradients: {
+    header: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+  }
+};
+const BOOKMARK_ICONS = [
+  { id: "bookmark", icon: BookmarkIcon, label: "Bookmark" },
+  { id: "book", icon: BookOpenIcon, label: "Book" },
+  { id: "star", icon: StarIcon, label: "Star" },
+  { id: "heart", icon: HeartIcon, label: "Heart" },
+  { id: "bolt", icon: BoltIcon, label: "Lightning" },
+  { id: "rocket", icon: RocketLaunchIcon, label: "Rocket" },
+  { id: "pencil", icon: PencilIcon, label: "Pencil" },
+  { id: "link", icon: LinkIcon, label: "Link" },
+  { id: "sparkles", icon: SparklesIcon, label: "Sparkles" },
+  { id: "briefcase", icon: BriefcaseIcon, label: "Briefcase" },
+  { id: "photo", icon: PhotoIcon, label: "Photo" },
+  { id: "document", icon: DocumentIcon, label: "Document" },
+  { id: "bell", icon: BellIcon, label: "Bell" },
+  { id: "check", icon: CheckCircleIcon, label: "Check" },
+  { id: "gift", icon: GiftIcon, label: "Gift" },
+  { id: "user", icon: UserIcon, label: "User" },
+  { id: "users", icon: UserGroupIcon, label: "Users" },
+  { id: "mail", icon: EnvelopeIcon, label: "Mail" },
+  { id: "calendar", icon: CalendarIcon, label: "Calendar" },
+  { id: "clock", icon: ClockIcon, label: "Clock" },
+  { id: "folder", icon: FolderIcon, label: "Folder" },
+  { id: "search", icon: MagnifyingGlassIcon, label: "Search" },
+  { id: "filter", icon: FunnelIcon, label: "Filter" },
+  { id: "globe", icon: GlobeAltIcon, label: "Globe" },
+  { id: "tag", icon: TagIcon, label: "Tag" },
+  { id: "flag", icon: FlagIcon, label: "Flag" },
+  { id: "fire", icon: FireIcon, label: "Fire" },
+  { id: "cube", icon: CubeIcon, label: "Cube" },
+  { id: "home", icon: HomeIcon, label: "Home" },
+  { id: "cog", icon: CogIcon, label: "Settings" },
+  { id: "wrench", icon: WrenchIcon, label: "Wrench" },
+  { id: "terminal", icon: CommandLineIcon, label: "Terminal" },
+  { id: "chart", icon: ChartBarIcon, label: "Chart" }
+];
+const getIconById = (iconId) => {
+  const found = BOOKMARK_ICONS.find((i) => i.id === iconId);
+  return found ? found.icon : BookmarkIcon;
+};
+const fadeIn$3 = keyframes`
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+`;
+keyframes`
+  from { opacity: 0; max-height: 0; }
+  to { opacity: 1; max-height: 500px; }
+`;
+const Overlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+`;
+const ModalContainer = styled.div`
+  background: ${theme$1.colors.neutral[0]};
+  border-radius: 16px;
+  max-height: 90vh;
+  overflow: hidden;
+  max-width: 580px;
+  width: 95%;
+  box-shadow: ${theme$1.shadows.xl};
+  animation: ${fadeIn$3} 0.2s ease-out;
+  display: flex;
+  flex-direction: column;
+`;
+const ModalHeader = styled.div`
+  background: ${theme$1.gradients.header};
+  padding: 24px 28px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+const HeaderTitle = styled.h2`
+  color: white;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  
+  svg {
+    width: 24px;
+    height: 24px;
+  }
+`;
+const CloseButton = styled.button`
+  background: rgba(255, 255, 255, 0.2);
+  border: none;
+  border-radius: 8px;
+  padding: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: white;
+  }
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: scale(1.05);
+  }
+`;
+const ModalBody = styled.div`
+  padding: 24px 28px;
+  overflow-y: auto;
+  flex: 1;
+`;
+const ModalFooter = styled.div`
+  padding: 16px 28px;
+  background: ${theme$1.colors.neutral[100]};
+  border-top: 1px solid ${theme$1.colors.neutral[200]};
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+`;
+const Section = styled.div`
+  margin-bottom: 20px;
+  border: 1px solid ${theme$1.colors.neutral[200]};
+  border-radius: 12px;
+  overflow: hidden;
+  background: ${theme$1.colors.neutral[0]};
+  transition: all 0.2s ease;
+  
+  &:hover {
+    border-color: ${theme$1.colors.primary[200]};
+  }
+`;
+const SectionHeader = styled.button`
+  width: 100%;
+  padding: 14px 16px;
+  background: ${theme$1.colors.neutral[100]};
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all 0.15s ease;
+  
+  &:hover {
+    background: ${theme$1.colors.neutral[200]};
+  }
+`;
+const SectionTitle = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: ${theme$1.colors.neutral[800]};
+  
+  svg {
+    width: 18px;
+    height: 18px;
+    color: ${theme$1.colors.primary[500]};
+  }
+`;
+const SectionContent = styled.div`
+  padding: ${(props) => props.$collapsed ? "0" : "16px"};
+  max-height: ${(props) => props.$collapsed ? "0" : "500px"};
+  opacity: ${(props) => props.$collapsed ? "0" : "1"};
+  overflow: hidden;
+  transition: all 0.25s ease;
+`;
+const ChevronIcon = styled.div`
+  transform: rotate(${(props) => props.$collapsed ? "0" : "180deg"});
+  transition: transform 0.2s ease;
+  
+  svg {
+    width: 18px;
+    height: 18px;
+    color: ${theme$1.colors.neutral[600]};
+  }
+`;
+const IconPicker = styled.div`
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 8px;
+  padding: 12px;
+  background: ${theme$1.colors.neutral[100]};
+  border-radius: 8px;
+  max-height: 180px;
+  overflow-y: auto;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: ${theme$1.colors.neutral[400]};
+    border-radius: 3px;
+  }
+`;
+const IconButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border: 2px solid ${(props) => props.$isSelected ? theme$1.colors.primary[500] : "transparent"};
+  background: ${(props) => props.$isSelected ? theme$1.colors.primary[100] : theme$1.colors.neutral[0]};
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: ${(props) => props.$isSelected ? theme$1.colors.primary[500] : theme$1.colors.neutral[600]};
+  }
+  
+  &:hover {
+    border-color: ${theme$1.colors.primary[500]};
+    background: ${theme$1.colors.primary[100]};
+    transform: scale(1.08);
+    
+    svg {
+      color: ${theme$1.colors.primary[500]};
+    }
+  }
+`;
+const SelectedIconDisplay = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, ${theme$1.colors.primary[100]} 0%, ${theme$1.colors.secondary[100]} 100%);
+  border-radius: 10px;
+  margin-bottom: 12px;
+`;
+const SelectedIconCircle = styled.div`
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  background: ${theme$1.colors.neutral[0]};
+  border: 2px solid ${theme$1.colors.primary[500]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: ${theme$1.shadows.md};
+  
+  svg {
+    width: 26px;
+    height: 26px;
+    color: ${theme$1.colors.primary[500]};
+  }
+`;
+const PublicToggleContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  background: ${theme$1.colors.neutral[100]};
+  border-radius: 10px;
+  margin-bottom: 16px;
+`;
+const PublicToggleInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  
+  svg {
+    width: 20px;
+    height: 20px;
+    color: ${theme$1.colors.primary[500]};
+  }
+`;
+const SwitchContainer = styled.label`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+`;
+const SwitchInput = styled.input`
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+`;
+const SwitchSlider = styled.span`
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: ${(props) => props.$checked ? theme$1.colors.primary[500] : theme$1.colors.neutral[300]};
+  border-radius: 24px;
+  transition: all 0.2s ease;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: ${(props) => props.$checked ? "23px" : "3px"};
+    top: 3px;
+    background: white;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+  }
+  
+  &:hover {
+    background: ${(props) => props.$checked ? theme$1.colors.primary[600] : theme$1.colors.neutral[400]};
+  }
+`;
+const SelectionList = styled.div`
+  max-height: 140px;
+  overflow-y: auto;
+  border: 1px solid ${theme$1.colors.neutral[200]};
+  border-radius: 8px;
+  background: ${(props) => props.$disabled ? theme$1.colors.neutral[100] : theme$1.colors.neutral[0]};
+  opacity: ${(props) => props.$disabled ? 0.6 : 1};
+  pointer-events: ${(props) => props.$disabled ? "none" : "auto"};
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: ${theme$1.colors.neutral[400]};
+    border-radius: 3px;
+  }
+`;
+const SelectionItem = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  cursor: pointer;
+  border-bottom: 1px solid ${theme$1.colors.neutral[200]};
+  background: ${(props) => props.$selected ? theme$1.colors.primary[100] : "transparent"};
+  transition: all 0.15s ease;
+  
+  &:last-child {
+    border-bottom: none;
+  }
+  
+  &:hover {
+    background: ${(props) => props.$selected ? theme$1.colors.primary[100] : theme$1.colors.neutral[100]};
+  }
+`;
+const CustomCheckbox = styled.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  border: 2px solid ${(props) => props.$checked ? theme$1.colors.primary[500] : theme$1.colors.neutral[400]};
+  background: ${(props) => props.$checked ? theme$1.colors.primary[500] : "transparent"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+    color: white;
+    opacity: ${(props) => props.$checked ? 1 : 0};
+  }
+`;
+const ItemLabel = styled.span`
+  font-size: 0.875rem;
+  color: ${(props) => props.$selected ? theme$1.colors.primary[600] : theme$1.colors.neutral[800]};
+  font-weight: ${(props) => props.$selected ? 600 : 400};
+`;
+const ItemBadge = styled.span`
+  font-size: 0.7rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: ${(props) => props.$type === "custom" ? "#F3E8FF" : theme$1.colors.neutral[200]};
+  color: ${(props) => props.$type === "custom" ? "#8B5CF6" : theme$1.colors.neutral[600]};
+  font-weight: 500;
+`;
+const FormField = styled.div`
+  margin-bottom: 16px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const Label = styled.label`
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: ${theme$1.colors.neutral[800]};
+  margin-bottom: 8px;
+`;
+const HintText = styled.p`
+  font-size: 0.75rem;
+  color: ${theme$1.colors.neutral[600]};
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+    flex-shrink: 0;
+  }
+`;
+const PathDisplay = styled.div`
+  padding: 12px 14px;
+  background: ${theme$1.colors.neutral[100]};
+  border: 1px solid ${theme$1.colors.neutral[200]};
+  border-radius: 8px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  font-size: 0.8rem;
+  color: ${theme$1.colors.neutral[600]};
+  word-break: break-all;
+`;
+const ErrorBox = styled.div`
+  padding: 12px 16px;
+  background: ${theme$1.colors.danger[100]};
+  border: 1px solid ${theme$1.colors.danger[500]};
+  border-radius: 8px;
+  margin-bottom: 16px;
+  
+  p {
+    color: ${theme$1.colors.danger[500]};
+    font-size: 0.875rem;
+    margin: 0;
+  }
+`;
+const SectionLabel = styled.div`
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: ${theme$1.colors.neutral[600]};
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+  margin-top: 12px;
+  
+  &:first-child {
+    margin-top: 0;
+  }
+`;
+const StyledTextInput = styled(TextInput)`
+  input {
+    border-radius: 8px;
+    border: 1px solid ${theme$1.colors.neutral[200]};
+    
+    &:focus {
+      border-color: ${theme$1.colors.primary[500]};
+      box-shadow: 0 0 0 3px ${theme$1.colors.primary[100]};
+    }
+  }
+`;
+const StyledTextarea = styled(Textarea)`
+  textarea {
+    border-radius: 8px;
+    border: 1px solid ${theme$1.colors.neutral[200]};
+    min-height: 80px;
+    
+    &:focus {
+      border-color: ${theme$1.colors.primary[500]};
+      box-shadow: 0 0 0 3px ${theme$1.colors.primary[100]};
+    }
+  }
+`;
+const CreateEditModal = ({
+  bookmark,
+  onClose,
+  onSuccess,
+  pluginId: pluginId2,
+  currentPath,
+  currentQuery
+}) => {
+  const { formatMessage } = useIntl();
+  const { post, put, get } = useFetchClient();
+  const [name2, setName] = useState("");
+  const [path, setPath] = useState(currentPath || "");
+  const [query, setQuery] = useState(currentQuery || "");
+  const [icon, setIcon] = useState("bookmark");
+  const [description, setDescription] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
+  const [isPublic, setIsPublic] = useState(false);
+  const [sharedWithRoles, setSharedWithRoles] = useState([]);
+  const [sharedWithUsers, setSharedWithUsers] = useState([]);
+  const [availableRoles, setAvailableRoles] = useState([]);
+  const [availableUsers, setAvailableUsers] = useState([]);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+  const [loadingUsers, setLoadingUsers] = useState(false);
+  const [iconSectionOpen, setIconSectionOpen] = useState(true);
+  const [sharingSectionOpen, setSharingSectionOpen] = useState(false);
+  const [filtersSectionOpen, setFiltersSectionOpen] = useState(false);
+  useEffect(() => {
+    if (bookmark) {
+      setName(bookmark.name);
+      setPath(bookmark.path);
+      setQuery(bookmark.query || "");
+      setIcon(bookmark.icon || bookmark.emoji || "bookmark");
+      setDescription(bookmark.description || "");
+      setIsPublic(bookmark.isPublic || false);
+      setSharedWithRoles(bookmark.sharedWithRoles || []);
+      setSharedWithUsers(bookmark.sharedWithUsers || []);
+    }
+    fetchRoles();
+    fetchUsers();
+  }, [bookmark]);
+  const fetchRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      const response = await get(`/${pluginId2}/roles`);
+      const roles = response.data?.data?.data || response.data?.data || response.data || [];
+      setAvailableRoles(roles);
+    } catch (error2) {
+      console.error("[Magic-Mark] Error fetching roles:", error2);
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+  const fetchUsers = async () => {
+    setLoadingUsers(true);
+    try {
+      const meResponse = await get("/admin/users/me");
+      const currentUser = meResponse.data?.data || meResponse.data || meResponse;
+      const currentUserId = currentUser?.id;
+      const currentUserEmail = currentUser?.email;
+      const response = await get("/admin/users?pageSize=100&page=1&sort=firstname");
+      const allUsers = response.data?.data?.results || response.data?.results || [];
+      const users = Array.isArray(allUsers) ? allUsers.filter((u) => {
+        const matchById = u.id === currentUserId || u.id === Number(currentUserId) || String(u.id) === String(currentUserId);
+        const matchByEmail = u.email?.toLowerCase() === currentUserEmail?.toLowerCase();
+        return !(matchById || matchByEmail);
+      }) : [];
+      setAvailableUsers(users);
+    } catch (error2) {
+      console.error("[Magic-Mark] Error fetching users:", error2);
+      try {
+        const response = await get(`/${pluginId2}/users`);
+        const users = response.data?.data?.data || response.data?.data || response.data || [];
+        setAvailableUsers(users);
+      } catch (fallbackError) {
+        setAvailableUsers([]);
+      }
+    } finally {
+      setLoadingUsers(false);
+    }
+  };
+  const validateForm = () => {
+    setError("");
+    if (!name2.trim()) {
+      setError(formatMessage({ id: `${pluginId2}.error.nameRequired`, defaultMessage: "Name is required" }));
+      return false;
+    }
+    if (!path.trim()) {
+      setError(formatMessage({ id: `${pluginId2}.error.pathRequired`, defaultMessage: "Path is required" }));
+      return false;
+    }
+    return true;
+  };
+  const handleSubmit = async () => {
+    if (!validateForm()) return;
+    setIsSubmitting(true);
+    try {
+      const bookmarkId = bookmark?.documentId || bookmark?.id;
+      const endpoint = bookmark ? `/${pluginId2}/bookmarks/${bookmarkId}` : `/${pluginId2}/bookmarks`;
+      const body = {
+        name: name2,
+        path,
+        query,
+        icon,
+        emoji: icon,
+        description,
+        isPublic,
+        sharedWithRoles,
+        sharedWithUsers
+      };
+      if (bookmark) {
+        await put(endpoint, body);
+      } else {
+        await post(endpoint, body);
+      }
+      onSuccess();
+    } catch (error2) {
+      console.error("[Magic-Mark] Error saving bookmark:", error2);
+      setError(formatMessage({ id: `${pluginId2}.error.save`, defaultMessage: "Failed to save bookmark" }));
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const toggleRole = (roleId) => {
+    setSharedWithRoles(
+      (prev) => prev.includes(roleId) ? prev.filter((id) => id !== roleId) : [...prev, roleId]
+    );
+  };
+  const toggleUser = (userId) => {
+    setSharedWithUsers(
+      (prev) => prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]
+    );
+  };
+  const isEditing = !!bookmark;
+  const SelectedIcon = getIconById(icon);
+  return /* @__PURE__ */ jsx(Overlay, { onClick: onClose, children: /* @__PURE__ */ jsxs(ModalContainer, { onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs(ModalHeader, { children: [
+      /* @__PURE__ */ jsxs(HeaderTitle, { children: [
+        /* @__PURE__ */ jsx(BookmarkIcon, {}),
+        isEditing ? formatMessage({ id: `${pluginId2}.modal.edit`, defaultMessage: "Edit Bookmark" }) : formatMessage({ id: `${pluginId2}.modal.create`, defaultMessage: "Save as Bookmark" })
+      ] }),
+      /* @__PURE__ */ jsx(CloseButton, { onClick: onClose, children: /* @__PURE__ */ jsx(Cross, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(ModalBody, { children: [
+      error && /* @__PURE__ */ jsx(ErrorBox, { children: /* @__PURE__ */ jsx("p", { children: error }) }),
+      /* @__PURE__ */ jsxs(FormField, { children: [
+        /* @__PURE__ */ jsxs(Label, { children: [
+          formatMessage({ id: `${pluginId2}.form.name`, defaultMessage: "Bookmark Name" }),
+          " *"
+        ] }),
+        /* @__PURE__ */ jsx(
+          StyledTextInput,
+          {
+            type: "text",
+            placeholder: formatMessage({ id: `${pluginId2}.form.namePlaceholder`, defaultMessage: "e.g., Published Articles" }),
+            value: name2,
+            onChange: (e) => setName(e.target.value)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsxs(SectionHeader, { onClick: () => setIconSectionOpen(!iconSectionOpen), children: [
+          /* @__PURE__ */ jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsx(SwatchIcon, {}),
+            formatMessage({ id: `${pluginId2}.form.icon`, defaultMessage: "Choose Icon" })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronIcon, { $collapsed: !iconSectionOpen, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs(SectionContent, { $collapsed: !iconSectionOpen, children: [
+          /* @__PURE__ */ jsxs(SelectedIconDisplay, { children: [
+            /* @__PURE__ */ jsx(SelectedIconCircle, { children: /* @__PURE__ */ jsx(SelectedIcon, {}) }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: theme$1.colors.neutral[800], display: "block" }, children: BOOKMARK_ICONS.find((i) => i.id === icon)?.label || "Bookmark" }),
+              /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { fontSize: "0.75rem", display: "block" }, children: "Click below to change" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(IconPicker, { children: BOOKMARK_ICONS.map((item) => {
+            const IconComp = item.icon;
+            return /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                $isSelected: icon === item.id,
+                onClick: () => setIcon(item.id),
+                type: "button",
+                title: item.label,
+                children: /* @__PURE__ */ jsx(IconComp, {})
+              },
+              item.id
+            );
+          }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsxs(SectionHeader, { onClick: () => setSharingSectionOpen(!sharingSectionOpen), children: [
+          /* @__PURE__ */ jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsx(ShareIcon, {}),
+            formatMessage({ id: `${pluginId2}.form.sharing`, defaultMessage: "Sharing Options" }),
+            (isPublic || sharedWithRoles.length > 0 || sharedWithUsers.length > 0) && /* @__PURE__ */ jsx(ItemBadge, { children: isPublic ? "Public" : `${sharedWithRoles.length + sharedWithUsers.length} shared` })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronIcon, { $collapsed: !sharingSectionOpen, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs(SectionContent, { $collapsed: !sharingSectionOpen, children: [
+          /* @__PURE__ */ jsxs(PublicToggleContainer, { children: [
+            /* @__PURE__ */ jsxs(PublicToggleInfo, { children: [
+              /* @__PURE__ */ jsx(GlobeAltIcon, {}),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "semiBold", style: { color: theme$1.colors.neutral[800], display: "block" }, children: "Public Bookmark" }),
+                /* @__PURE__ */ jsx(Typography, { variant: "pi", style: { fontSize: "0.75rem", color: theme$1.colors.neutral[600], display: "block" }, children: "All admin users can see this" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs(SwitchContainer, { children: [
+              /* @__PURE__ */ jsx(
+                SwitchInput,
+                {
+                  type: "checkbox",
+                  checked: isPublic,
+                  onChange: () => setIsPublic(!isPublic)
+                }
+              ),
+              /* @__PURE__ */ jsx(SwitchSlider, { $checked: isPublic })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Share with Roles" }),
+          /* @__PURE__ */ jsx(SelectionList, { $disabled: isPublic, children: loadingRoles ? /* @__PURE__ */ jsx("div", { style: { padding: "16px", textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Loading..." }) }) : availableRoles.length > 0 ? availableRoles.map((role) => /* @__PURE__ */ jsxs(
+            SelectionItem,
+            {
+              $selected: sharedWithRoles.includes(role.id),
+              onClick: () => !isPublic && toggleRole(role.id),
+              children: [
+                /* @__PURE__ */ jsx(CustomCheckbox, { $checked: sharedWithRoles.includes(role.id), children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) }),
+                /* @__PURE__ */ jsx(ItemLabel, { $selected: sharedWithRoles.includes(role.id), children: role.name || role.code }),
+                role.isCustom && /* @__PURE__ */ jsx(ItemBadge, { $type: "custom", children: "Custom" }),
+                role.userCount > 0 && /* @__PURE__ */ jsxs(ItemBadge, { $type: "count", children: [
+                  role.userCount,
+                  " users"
+                ] })
+              ]
+            },
+            role.id
+          )) : /* @__PURE__ */ jsx("div", { style: { padding: "16px", textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "No roles available" }) }) }),
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Share with Users" }),
+          /* @__PURE__ */ jsx(SelectionList, { $disabled: isPublic, children: loadingUsers ? /* @__PURE__ */ jsx("div", { style: { padding: "16px", textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "Loading..." }) }) : availableUsers.length > 0 ? availableUsers.map((user) => /* @__PURE__ */ jsxs(
+            SelectionItem,
+            {
+              $selected: sharedWithUsers.includes(user.id),
+              onClick: () => !isPublic && toggleUser(user.id),
+              children: [
+                /* @__PURE__ */ jsx(CustomCheckbox, { $checked: sharedWithUsers.includes(user.id), children: /* @__PURE__ */ jsx(CheckCircleIcon, {}) }),
+                /* @__PURE__ */ jsxs(ItemLabel, { $selected: sharedWithUsers.includes(user.id), children: [
+                  user.firstname || "",
+                  " ",
+                  user.lastname || ""
+                ] }),
+                /* @__PURE__ */ jsx(ItemBadge, { children: user.email })
+              ]
+            },
+            user.id
+          )) : /* @__PURE__ */ jsx("div", { style: { padding: "16px", textAlign: "center" }, children: /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: "No other users" }) }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Section, { children: [
+        /* @__PURE__ */ jsxs(SectionHeader, { onClick: () => setFiltersSectionOpen(!filtersSectionOpen), children: [
+          /* @__PURE__ */ jsxs(SectionTitle, { children: [
+            /* @__PURE__ */ jsx(FunnelIcon, {}),
+            formatMessage({ id: `${pluginId2}.form.filterPreview`, defaultMessage: "Captured Filters" })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronIcon, { $collapsed: !filtersSectionOpen, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ] }),
+        /* @__PURE__ */ jsxs(SectionContent, { $collapsed: !filtersSectionOpen, children: [
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Content Manager Path" }),
+          /* @__PURE__ */ jsx(PathDisplay, { children: path || "No path captured" }),
+          /* @__PURE__ */ jsx(SectionLabel, { children: "Active Filters" }),
+          /* @__PURE__ */ jsx(FilterPreview, { query }),
+          /* @__PURE__ */ jsxs(HintText, { children: [
+            /* @__PURE__ */ jsx(LightBulbIcon, {}),
+            "These filters will be restored when you click this bookmark"
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(FormField, { children: [
+        /* @__PURE__ */ jsxs(Label, { children: [
+          formatMessage({ id: `${pluginId2}.form.description`, defaultMessage: "Description" }),
+          /* @__PURE__ */ jsx("span", { style: { fontWeight: 400, color: theme$1.colors.neutral[600] }, children: " (Optional)" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          StyledTextarea,
+          {
+            placeholder: formatMessage({ id: `${pluginId2}.form.descriptionPlaceholder`, defaultMessage: "Add a description..." }),
+            value: description,
+            onChange: (e) => setDescription(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(ModalFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", children: formatMessage({ id: `${pluginId2}.button.cancel`, defaultMessage: "Cancel" }) }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleSubmit, loading: isSubmitting, children: isEditing ? formatMessage({ id: `${pluginId2}.button.update`, defaultMessage: "Update" }) : formatMessage({ id: `${pluginId2}.button.save`, defaultMessage: "Save Bookmark" }) })
+    ] })
+  ] }) });
+};
+const fadeIn$2 = keyframes`
+  from { opacity: 0; transform: translateY(-8px); }
+  to { opacity: 1; transform: translateY(0); }
+`;
+const PopoverContainer = styled.div`
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  min-width: 280px;
+  max-width: 360px;
+  max-height: 400px;
+  background: #ffffff;
+  border: 1px solid #dcdce4;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  z-index: 1000;
+  animation: ${fadeIn$2} 0.2s ease-out;
+  overflow: hidden;
+`;
+const PopoverHeader = styled.div`
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #4945FF 0%, #7B79FF 100%);
+  border-bottom: 1px solid #dcdce4;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    color: white;
+  }
+`;
+const PopoverTitle = styled.span`
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+`;
+const PopoverCount = styled.span`
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.8);
+  margin-left: auto;
+`;
+const BookmarksList = styled.div`
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 8px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c0c0cf;
+    border-radius: 3px;
+  }
+`;
+const BookmarkItem = styled.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 6px;
+  background: ${(props) => props.$isPinned ? "#fffbeb" : "transparent"};
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+  
+  &:hover {
+    background: ${(props) => props.$isPinned ? "#fef3c7" : "#f6f6f9"};
+    
+    .arrow-icon {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+`;
+const BookmarkIconWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: linear-gradient(135deg, #EEF0FF 0%, #E0E7FF 100%);
+  border-radius: 6px;
+  flex-shrink: 0;
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    color: #4945FF;
+  }
+`;
+const BookmarkContent = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+const BookmarkName = styled.div`
+  font-size: 13px;
+  font-weight: 500;
+  color: #32324d;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const BookmarkDescription = styled.div`
+  font-size: 11px;
+  color: #8e8ea9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-top: 2px;
+`;
+const ArrowIcon = styled.div`
+  opacity: 0;
+  transform: translateX(-4px);
+  transition: all 0.15s ease;
+  color: #4945FF;
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const PinIcon = styled.div`
+  color: #f59e0b;
+  flex-shrink: 0;
+  
+  svg {
+    width: 12px;
+    height: 12px;
+  }
+`;
+const EmptyState = styled.div`
+  padding: 24px 16px;
+  text-align: center;
+`;
+const EmptyIcon = styled.div`
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 12px;
+  background: #f6f6f9;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  svg {
+    width: 24px;
+    height: 24px;
+    color: #8e8ea9;
+  }
+`;
+const PopoverFooter = styled.div`
+  padding: 10px 16px;
+  border-top: 1px solid #eaeaef;
+  background: #fafafa;
+`;
+const ViewAllLink = styled.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 8px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #4945FF;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  &:hover {
+    background: #eef0ff;
+  }
+  
+  svg {
+    width: 14px;
+    height: 14px;
+  }
+`;
+const ViewsListPopover = ({
+  views,
+  onViewClick,
+  isLoading = false
+}) => {
+  const { formatMessage } = useIntl();
+  const navigate = useNavigate();
+  const sortedViews = [...views].sort((a, b) => {
+    if (a.isPinned && !b.isPinned) return -1;
+    if (!a.isPinned && b.isPinned) return 1;
+    return a.name.localeCompare(b.name);
+  });
+  return /* @__PURE__ */ jsxs(PopoverContainer, { children: [
+    /* @__PURE__ */ jsxs(PopoverHeader, { children: [
+      /* @__PURE__ */ jsx(BookmarkIcon, {}),
+      /* @__PURE__ */ jsx(PopoverTitle, { children: "Your Bookmarks" }),
+      /* @__PURE__ */ jsxs(PopoverCount, { children: [
+        views.length,
+        " saved"
+      ] })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(EmptyState, { children: /* @__PURE__ */ jsx(Loader, { small: true, children: "Loading..." }) }) : views && views.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(BookmarksList, { children: sortedViews.map((view) => {
+        const IconComponent = getIconById(view.icon || view.emoji || "bookmark");
+        return /* @__PURE__ */ jsxs(
+          BookmarkItem,
+          {
+            $isPinned: view.isPinned,
+            onClick: () => onViewClick(view),
+            children: [
+              /* @__PURE__ */ jsx(BookmarkIconWrapper, { children: /* @__PURE__ */ jsx(IconComponent, {}) }),
+              /* @__PURE__ */ jsxs(BookmarkContent, { children: [
+                /* @__PURE__ */ jsx(BookmarkName, { children: view.name }),
+                view.description && /* @__PURE__ */ jsx(BookmarkDescription, { children: view.description })
+              ] }),
+              view.isPinned && /* @__PURE__ */ jsx(PinIcon, { children: /* @__PURE__ */ jsx(Pin, {}) }),
+              /* @__PURE__ */ jsx(ArrowIcon, { className: "arrow-icon", children: /* @__PURE__ */ jsx(ArrowRight, {}) })
+            ]
+          },
+          view.id
+        );
+      }) }),
+      /* @__PURE__ */ jsx(PopoverFooter, { children: /* @__PURE__ */ jsxs(ViewAllLink, { onClick: () => navigate(`/plugins/${pluginId}`), children: [
+        /* @__PURE__ */ jsx(BookmarkIcon, {}),
+        "Manage all bookmarks"
+      ] }) })
+    ] }) : /* @__PURE__ */ jsxs(EmptyState, { children: [
+      /* @__PURE__ */ jsx(EmptyIcon, { children: /* @__PURE__ */ jsx(BookmarkIcon, {}) }),
+      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
+        id: `${pluginId}.ViewsWidget.ViewsPopover.emptyList`,
+        defaultMessage: "No bookmarks yet. Save your first view!"
+      }) })
     ] })
   ] });
 };
-const EmojiPicker = styled.div`
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
+const WidgetContainer = styled.div`
+  display: flex;
+  align-items: center;
   gap: 8px;
-  padding: 12px;
-  background: ${(props) => props.theme.colors.neutral100};
+  margin-right: 8px;
+`;
+const ActionButton$1 = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid #dcdce4;
   border-radius: 4px;
-  max-height: 200px;
-  overflow-y: auto;
+  background: #ffffff;
+  color: #32324d;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  
+  &:hover {
+    background: #f6f6f9;
+    border-color: #c0c0cf;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
 `;
-const EmojiButton = styled.button`
-  padding: 8px;
-  font-size: 24px;
-  border: 2px solid ${(props) => props.isSelected ? props.theme.colors.primary600 : props.theme.colors.neutral200};
-  background: ${(props) => props.theme.colors.neutral0};
+const MagicMarkButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: 1px solid #dcdce4;
   border-radius: 4px;
+  background: #ffffff;
+  color: #32324d;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.15s ease;
+  position: relative;
   
   &:hover {
-    border-color: ${(props) => props.theme.colors.primary600};
-    background: ${(props) => props.theme.colors.neutral100};
+    background: #f6f6f9;
+    border-color: #c0c0cf;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  svg {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+    color: #666687;
   }
 `;
-const BOOKMARK_EMOJIS = ["🔖", "📌", "⭐", "💫", "❤️", "🎯", "🚀", "📝", "🔗", "🌟", "💼", "🎨", "📚", "🔔", "✅", "🎁"];
-const CreateEditModal = ({
-  bookmark,
-  onClose,
-  onSuccess,
-  pluginId: pluginId2,
-  currentPath,
-  currentQuery
-}) => {
-  const { formatMessage } = useIntl();
-  const { post, put, get } = useFetchClient();
-  const [name2, setName] = useState("");
-  const [path, setPath] = useState(currentPath || "");
-  const [query, setQuery] = useState(currentQuery || "");
-  const [emoji, setEmoji] = useState("🔖");
-  const [description, setDescription] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
-  const [error, setError] = useState("");
-  const [isPublic, setIsPublic] = useState(false);
-  const [sharedWithRoles, setSharedWithRoles] = useState([]);
-  const [sharedWithUsers, setSharedWithUsers] = useState([]);
-  const [availableRoles, setAvailableRoles] = useState([]);
-  const [availableUsers, setAvailableUsers] = useState([]);
-  const [loadingRoles, setLoadingRoles] = useState(false);
-  const [loadingUsers, setLoadingUsers] = useState(false);
-  useEffect(() => {
-    if (bookmark) {
-      setName(bookmark.name);
-      setPath(bookmark.path);
-      setQuery(bookmark.query || "");
-      setEmoji(bookmark.emoji);
-      setDescription(bookmark.description || "");
-      setIsPublic(bookmark.isPublic || false);
-      setSharedWithRoles(bookmark.sharedWithRoles || []);
-      setSharedWithUsers(bookmark.sharedWithUsers || []);
-    }
-    fetchRoles();
-    fetchUsers();
-  }, [bookmark]);
-  const fetchRoles = async () => {
-    setLoadingRoles(true);
-    try {
-      const response = await get(`/${pluginId2}/roles`);
-      const roles = response.data?.data?.data || response.data?.data || response.data || [];
-      setAvailableRoles(roles);
-    } catch (error2) {
-      console.error("[Magic-Mark] Error fetching roles:", error2);
-    } finally {
-      setLoadingRoles(false);
-    }
-  };
-  const fetchUsers = async () => {
-    setLoadingUsers(true);
-    try {
-      const meResponse = await get("/admin/users/me");
-      const currentUser = meResponse.data?.data || meResponse.data || meResponse;
-      const currentUserId = currentUser?.id;
-      const currentUserEmail = currentUser?.email;
-      console.log("[CreateEditModal] Current user:", { currentUserId, currentUserEmail, fullResponse: currentUser });
-      const response = await get("/admin/users?pageSize=100&page=1&sort=firstname");
-      const allUsers = response.data?.data?.results || response.data?.results || [];
-      console.log("[CreateEditModal] All users:", allUsers.map((u) => ({ id: u.id, email: u.email })));
-      const users = Array.isArray(allUsers) ? allUsers.filter((u) => {
-        const matchById = u.id === currentUserId || u.id === Number(currentUserId) || String(u.id) === String(currentUserId);
-        const matchByEmail = u.email?.toLowerCase() === currentUserEmail?.toLowerCase();
-        const shouldExclude = matchById || matchByEmail;
-        if (shouldExclude) {
-          console.log("[CreateEditModal] Excluding current user:", u.email);
-        }
-        return !shouldExclude;
-      }) : [];
-      console.log("[CreateEditModal] Filtered users (without current):", users.map((u) => ({ id: u.id, email: u.email })));
-      setAvailableUsers(users);
-    } catch (error2) {
-      console.error("[Magic-Mark] Error fetching users:", error2);
-      try {
-        const response = await get(`/${pluginId2}/users`);
-        const users = response.data?.data?.data || response.data?.data || response.data || [];
-        setAvailableUsers(users);
-      } catch (fallbackError) {
-        console.warn("[Magic-Mark] Both user endpoints failed, feature disabled");
-        setAvailableUsers([]);
-      }
-    } finally {
-      setLoadingUsers(false);
-    }
-  };
-  const validateForm = () => {
-    setError("");
-    if (!name2.trim()) {
-      setError(formatMessage({
-        id: `${pluginId2}.error.nameRequired`,
-        defaultMessage: "Name is required"
-      }));
-      return false;
-    }
-    if (!path.trim()) {
-      setError(formatMessage({
-        id: `${pluginId2}.error.pathRequired`,
-        defaultMessage: "Path is required"
-      }));
-      return false;
-    }
-    return true;
-  };
-  const handleSubmit = async () => {
-    if (!validateForm()) return;
-    setIsSubmitting(true);
-    try {
-      const endpoint = bookmark ? `/${pluginId2}/bookmarks/${bookmark.id}` : `/${pluginId2}/bookmarks`;
-      const body = {
-        name: name2,
-        path,
-        query,
-        emoji,
-        description,
-        isPublic,
-        sharedWithRoles,
-        sharedWithUsers
-      };
-      let result;
-      if (bookmark) {
-        result = await put(endpoint, body);
-      } else {
-        result = await post(endpoint, body);
-      }
-      onSuccess();
-    } catch (error2) {
-      console.error("[Magic-Mark] Error saving bookmark:", error2);
-      setError(formatMessage({
-        id: `${pluginId2}.error.save`,
-        defaultMessage: "Failed to save bookmark"
-      }));
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const isEditing = !!bookmark;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: "rgba(0, 0, 0, 0.5)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        zIndex: 999
-      },
-      children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          padding: 6,
-          background: "neutral0",
-          style: {
-            borderRadius: "8px",
-            maxHeight: "90vh",
-            overflow: "auto",
-            maxWidth: "600px",
-            width: "90%"
-          },
-          children: [
-            /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 6, children: [
-              /* @__PURE__ */ jsx(Typography, { as: "h2", variant: "beta", children: isEditing ? formatMessage({
-                id: `${pluginId2}.modal.edit`,
-                defaultMessage: "Edit Bookmark"
-              }) : formatMessage({
-                id: `${pluginId2}.modal.create`,
-                defaultMessage: "Save as Bookmark"
-              }) }),
-              /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "ghost", type: "button", children: /* @__PURE__ */ jsx(Cross, {}) })
-            ] }),
-            /* @__PURE__ */ jsx(Box, { marginBottom: 6, children: /* @__PURE__ */ jsxs(
-              Box,
-              {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "16px"
-                },
-                children: [
-                  error && /* @__PURE__ */ jsx(Box, { padding: 3, background: "danger100", borderRadius: "4px", children: /* @__PURE__ */ jsx(Typography, { textColor: "danger600", children: error }) }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({
-                      id: `${pluginId2}.form.emoji`,
-                      defaultMessage: "Choose Icon"
-                    }) }),
-                    /* @__PURE__ */ jsxs(Flex, { gap: 2, alignItems: "center", children: [
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          as: "button",
-                          padding: 3,
-                          borderRadius: "4px",
-                          border: "1px solid",
-                          borderColor: "neutral200",
-                          fontSize: "32px",
-                          onClick: () => setShowEmojiPicker(!showEmojiPicker),
-                          type: "button",
-                          style: { cursor: "pointer" },
-                          children: emoji
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
-                        id: `${pluginId2}.form.selectEmoji`,
-                        defaultMessage: "Click to select"
-                      }) })
-                    ] }),
-                    showEmojiPicker && /* @__PURE__ */ jsx(EmojiPicker, { children: BOOKMARK_EMOJIS.map((e) => /* @__PURE__ */ jsx(
-                      EmojiButton,
-                      {
-                        isSelected: emoji === e,
-                        onClick: () => {
-                          setEmoji(e);
-                          setShowEmojiPicker(false);
-                        },
-                        type: "button",
-                        children: e
-                      },
-                      e
-                    )) })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({
-                      id: `${pluginId2}.form.sharing`,
-                      defaultMessage: "Sharing Options"
-                    }) }),
-                    /* @__PURE__ */ jsx(Box, { marginBottom: 3, children: /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", cursor: "pointer" }, children: [
-                      /* @__PURE__ */ jsx(
-                        "input",
-                        {
-                          type: "checkbox",
-                          checked: isPublic,
-                          onChange: (e) => setIsPublic(e.target.checked),
-                          style: { marginRight: "8px" }
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("span", { style: { fontSize: "14px" }, children: formatMessage({
-                        id: `${pluginId2}.form.publicAccess`,
-                        defaultMessage: "Public (All admin users can see this bookmark)"
-                      }) })
-                    ] }) }),
-                    /* @__PURE__ */ jsxs(Box, { children: [
-                      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
-                        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
-                          id: `${pluginId2}.form.shareWithRoles`,
-                          defaultMessage: "Share with specific roles:"
-                        }) }),
-                        sharedWithRoles.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", textColor: "primary600", children: [
-                          sharedWithRoles.length,
-                          " selected"
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          background: isPublic ? "neutral100" : "neutral0",
-                          borderColor: "neutral200",
-                          style: {
-                            maxHeight: "150px",
-                            overflowY: "auto",
-                            border: "1px solid",
-                            borderRadius: "4px",
-                            padding: "12px"
-                          },
-                          children: loadingRoles ? /* @__PURE__ */ jsx(Typography, { variant: "pi", children: formatMessage({ id: `${pluginId2}.form.loadingRoles`, defaultMessage: "Loading roles..." }) }) : availableRoles.length > 0 ? availableRoles.map((role) => /* @__PURE__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsxs("label", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            cursor: isPublic ? "not-allowed" : "pointer",
-                            padding: "6px 8px",
-                            borderRadius: "4px",
-                            background: sharedWithRoles.includes(role.id) ? "#eaf5ff" : "transparent",
-                            border: sharedWithRoles.includes(role.id) ? "1px solid #3945C9" : "1px solid transparent"
-                          }, children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                type: "checkbox",
-                                checked: sharedWithRoles.includes(role.id),
-                                onChange: (e) => {
-                                  if (e.target.checked) {
-                                    setSharedWithRoles((prev) => {
-                                      const newRoles = [...prev, role.id];
-                                      return newRoles;
-                                    });
-                                  } else {
-                                    setSharedWithRoles((prev) => {
-                                      const newRoles = prev.filter((id) => id !== role.id);
-                                      return newRoles;
-                                    });
-                                  }
-                                },
-                                style: { marginRight: "8px" },
-                                disabled: isPublic
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("span", { style: {
-                              fontSize: "14px",
-                              fontWeight: sharedWithRoles.includes(role.id) ? 600 : 400,
-                              color: isPublic ? "#999" : sharedWithRoles.includes(role.id) ? "#3945C9" : "#32324d"
-                            }, children: [
-                              role.name || role.code || `Role ${role.id}`,
-                              role.isCustom && /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", marginLeft: "4px", color: "#8C4BFF" }, children: "(Custom)" }),
-                              role.userCount > 0 && /* @__PURE__ */ jsxs("span", { style: { fontSize: "11px", marginLeft: "4px", color: "#666" }, children: [
-                                "(",
-                                role.userCount,
-                                " user",
-                                role.userCount > 1 ? "s" : "",
-                                ")"
-                              ] })
-                            ] })
-                          ] }) }, role.id)) : /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({ id: `${pluginId2}.form.noRoles`, defaultMessage: "No roles available" }) })
-                        }
-                      ),
-                      isPublic && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px", fontSize: "0.75rem" }, children: formatMessage({ id: `${pluginId2}.form.roleDisabled`, defaultMessage: "Role selection disabled when bookmark is public" }) })
-                    ] }),
-                    /* @__PURE__ */ jsxs(Box, { marginTop: 3, children: [
-                      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 2, children: [
-                        /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
-                          id: `${pluginId2}.form.shareWithUsers`,
-                          defaultMessage: "Share with specific users:"
-                        }) }),
-                        sharedWithUsers.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "semiBold", textColor: "primary600", children: [
-                          sharedWithUsers.length,
-                          " selected"
-                        ] })
-                      ] }),
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          background: isPublic ? "neutral100" : "neutral0",
-                          borderColor: "neutral200",
-                          style: {
-                            maxHeight: "150px",
-                            overflowY: "auto",
-                            border: "1px solid",
-                            borderRadius: "4px",
-                            padding: "12px"
-                          },
-                          children: loadingUsers ? /* @__PURE__ */ jsx(Typography, { variant: "pi", children: formatMessage({ id: `${pluginId2}.form.loadingUsers`, defaultMessage: "Loading users..." }) }) : availableUsers.length > 0 ? availableUsers.map((user) => /* @__PURE__ */ jsx(Box, { marginBottom: 2, children: /* @__PURE__ */ jsxs("label", { style: {
-                            display: "flex",
-                            alignItems: "center",
-                            cursor: isPublic ? "not-allowed" : "pointer",
-                            padding: "6px 8px",
-                            borderRadius: "4px",
-                            background: sharedWithUsers.includes(user.id) ? "#eaf5ff" : "transparent",
-                            border: sharedWithUsers.includes(user.id) ? "1px solid #3945C9" : "1px solid transparent"
-                          }, children: [
-                            /* @__PURE__ */ jsx(
-                              "input",
-                              {
-                                type: "checkbox",
-                                checked: sharedWithUsers.includes(user.id),
-                                onChange: (e) => {
-                                  if (e.target.checked) {
-                                    setSharedWithUsers((prev) => {
-                                      const newUsers = [...prev, user.id];
-                                      return newUsers;
-                                    });
-                                  } else {
-                                    setSharedWithUsers((prev) => {
-                                      const newUsers = prev.filter((id) => id !== user.id);
-                                      return newUsers;
-                                    });
-                                  }
-                                },
-                                style: { marginRight: "8px" },
-                                disabled: isPublic
-                              }
-                            ),
-                            /* @__PURE__ */ jsxs("span", { style: {
-                              fontSize: "14px",
-                              fontWeight: sharedWithUsers.includes(user.id) ? 600 : 400,
-                              color: isPublic ? "#999" : sharedWithUsers.includes(user.id) ? "#3945C9" : "#32324d"
-                            }, children: [
-                              user.firstname || "",
-                              " ",
-                              user.lastname || "",
-                              /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "#666", marginLeft: "4px" }, children: [
-                                "(",
-                                user.email || user.username || "No email",
-                                ")"
-                              ] })
-                            ] })
-                          ] }) }, user.id)) : /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({ id: `${pluginId2}.form.noUsers`, defaultMessage: "No other users available" }) })
-                        }
-                      ),
-                      isPublic && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px", fontSize: "0.75rem" }, children: formatMessage({ id: `${pluginId2}.form.userDisabled`, defaultMessage: "User selection disabled when bookmark is public" }) })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsxs(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, as: "label", htmlFor: "name", children: [
-                      formatMessage({
-                        id: `${pluginId2}.form.name`,
-                        defaultMessage: "Bookmark Name"
-                      }),
-                      " *"
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        id: "name",
-                        type: "text",
-                        placeholder: formatMessage({ id: `${pluginId2}.form.namePlaceholder`, defaultMessage: "e.g., Published Articles" }),
-                        value: name2,
-                        onChange: (e) => setName(e.target.value)
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, as: "label", htmlFor: "path", children: formatMessage({
-                      id: `${pluginId2}.form.path`,
-                      defaultMessage: "Content Manager Path"
-                    }) }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        id: "path",
-                        type: "text",
-                        placeholder: "/content-manager/collection-types/api::article.article",
-                        value: path,
-                        readOnly: true,
-                        disabled: true
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { marginTop: "4px", display: "block" }, children: formatMessage({
-                      id: `${pluginId2}.form.pathHelp`,
-                      defaultMessage: "Automatically captured from Content Manager"
-                    }) })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, children: formatMessage({
-                      id: `${pluginId2}.form.filterPreview`,
-                      defaultMessage: "Captured Filters & Settings"
-                    }) }),
-                    /* @__PURE__ */ jsx(FilterPreview, { query }),
-                    /* @__PURE__ */ jsxs(Flex, { alignItems: "center", gap: 1, style: { marginTop: "8px" }, children: [
-                      /* @__PURE__ */ jsx(Lightbulb, { fill: "neutral600", width: "14px", height: "14px" }),
-                      /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: formatMessage({
-                        id: `${pluginId2}.form.queryHelp`,
-                        defaultMessage: "These filters will be restored when you click this bookmark"
-                      }) })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxs(Box, { children: [
-                    /* @__PURE__ */ jsx(Typography, { variant: "pi", fontWeight: "bold", style: { marginBottom: "8px", display: "block" }, as: "label", htmlFor: "description", children: formatMessage({
-                      id: `${pluginId2}.form.description`,
-                      defaultMessage: "Description (Optional)"
-                    }) }),
-                    /* @__PURE__ */ jsx(
-                      Textarea,
-                      {
-                        id: "description",
-                        placeholder: formatMessage({ id: `${pluginId2}.form.descriptionPlaceholder`, defaultMessage: "Add a description..." }),
-                        value: description,
-                        onChange: (e) => setDescription(e.target.value)
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", gap: 2, children: [
-              /* @__PURE__ */ jsx(Button, { onClick: onClose, variant: "tertiary", type: "button", children: formatMessage({
-                id: `${pluginId2}.button.cancel`,
-                defaultMessage: "Cancel"
-              }) }),
-              /* @__PURE__ */ jsx(
-                Button,
-                {
-                  onClick: handleSubmit,
-                  loading: isSubmitting,
-                  type: "button",
-                  children: isEditing ? formatMessage({
-                    id: `${pluginId2}.button.update`,
-                    defaultMessage: "Update"
-                  }) : formatMessage({
-                    id: `${pluginId2}.button.save`,
-                    defaultMessage: "Save Bookmark"
-                  })
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-};
+const MagicMarkWrapper = styled.div`
+  position: relative;
+`;
+const Badge = styled.span`
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 700;
+  background: #4945FF;
+  color: #ffffff;
+  border-radius: 9px;
+  border: 2px solid #ffffff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
+`;
 const ViewsWidget = () => {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
@@ -793,8 +1380,6 @@ const ViewsWidget = () => {
       path = path.substring(6);
     }
     const query = window.location.search.substring(1);
-    console.log("[ViewsWidget] Captured path:", path);
-    console.log("[ViewsWidget] Captured query:", query);
     setCurrentPath(path);
     setCurrentQuery(query);
     setShowCreateModal(true);
@@ -810,33 +1395,32 @@ const ViewsWidget = () => {
     }
     setViewsPopoverVisible(false);
   };
-  return /* @__PURE__ */ jsxs(Flex, { gap: 2, marginRight: 1, children: [
-    /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ jsxs(WidgetContainer, { children: [
+    /* @__PURE__ */ jsxs(
+      ActionButton$1,
       {
-        variant: "tertiary",
-        startIcon: /* @__PURE__ */ jsx(Plus, {}),
         onClick: handleOpenModal,
-        children: formatMessage({
+        title: formatMessage({
           id: `${pluginId}.ViewsWidget.actions.create`,
-          defaultMessage: "Save Bookmark"
-        })
+          defaultMessage: "Save current view as bookmark"
+        }),
+        children: [
+          /* @__PURE__ */ jsx(Plus, {}),
+          "Save"
+        ]
       }
     ),
-    /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs(MagicMarkWrapper, { children: [
       /* @__PURE__ */ jsx(
-        Button,
+        MagicMarkButton,
         {
           ref: viewsButtonRef,
-          variant: "tertiary",
-          startIcon: /* @__PURE__ */ jsx(List, {}),
           onClick: () => setViewsPopoverVisible((s) => !s),
-          children: formatMessage({
-            id: `${pluginId}.ViewsWidget.actions.showList`,
-            defaultMessage: "Magicmark"
-          })
+          title: "MagicMark Bookmarks",
+          children: /* @__PURE__ */ jsx(BookmarkIcon, {})
         }
       ),
+      bookmarks.length > 0 && /* @__PURE__ */ jsx(Badge, { children: bookmarks.length }),
       viewsPopoverVisible && viewsButtonRef.current && /* @__PURE__ */ jsx(
         ViewsListPopover,
         {
@@ -1255,7 +1839,7 @@ const Chevron = styled(ChevronRight)`
     display: none;
   }
 `;
-const ClearButton = styled.button`
+const ClearButton$1 = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1452,7 +2036,7 @@ const RelationFieldSelector = ({
               searchable: true
             }
           ),
-          /* @__PURE__ */ jsx(ClearButton, { onClick: () => clearFromLevel(1), title: "Clear selection", children: /* @__PURE__ */ jsx(Cross, {}) })
+          /* @__PURE__ */ jsx(ClearButton$1, { onClick: () => clearFromLevel(1), title: "Clear selection", children: /* @__PURE__ */ jsx(Cross, {}) })
         ] }) })
       ] })
     ] }),
@@ -1474,7 +2058,7 @@ const RelationFieldSelector = ({
               searchable: true
             }
           ),
-          /* @__PURE__ */ jsx(ClearButton, { onClick: () => clearFromLevel(2), title: "Clear selection", children: /* @__PURE__ */ jsx(Cross, {}) })
+          /* @__PURE__ */ jsx(ClearButton$1, { onClick: () => clearFromLevel(2), title: "Clear selection", children: /* @__PURE__ */ jsx(Cross, {}) })
         ] }) })
       ] })
     ] })
@@ -3058,6 +3642,78 @@ const SimpleAdvancedFilterModal = ({
     ] })
   ] }) });
 };
+const FilterButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+const FilterButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 36px;
+  padding: 0 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid ${(props) => props.$isActive ? "#4945FF" : "#dcdce4"};
+  border-radius: 4px;
+  background: ${(props) => props.$isActive ? "#EEF0FF" : "#ffffff"};
+  color: ${(props) => props.$isActive ? "#4945FF" : "#32324d"};
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+  
+  &:hover {
+    background: ${(props) => props.$isActive ? "#E0E7FF" : "#f6f6f9"};
+    border-color: ${(props) => props.$isActive ? "#4945FF" : "#c0c0cf"};
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+  }
+`;
+const ClearButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid #fecaca;
+  border-radius: 4px;
+  background: #fef2f2;
+  color: #dc2626;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  
+  &:hover {
+    background: #fee2e2;
+    border-color: #fca5a5;
+  }
+  
+  &:active {
+    transform: scale(0.98);
+  }
+  
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+const ActiveDot = styled.span`
+  width: 6px;
+  height: 6px;
+  background: #22c55e;
+  border-radius: 50%;
+  margin-left: 2px;
+`;
 const AdvancedFilterButton = () => {
   const [showModal, setShowModal] = useState(false);
   const navigate = useNavigate();
@@ -3198,24 +3854,26 @@ const AdvancedFilterButton = () => {
     console.log("[AdvancedFilter] Current query from URL:", currentQuery);
     return currentQuery;
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Button,
+  return /* @__PURE__ */ jsxs(FilterButtonGroup, { children: [
+    /* @__PURE__ */ jsxs(
+      FilterButton,
       {
-        variant: hasActiveFilters ? "default" : "secondary",
-        startIcon: /* @__PURE__ */ jsx(Filter, {}),
+        $isActive: hasActiveFilters,
         onClick: () => setShowModal(true),
-        size: "S",
-        children: hasActiveFilters ? "Filters Active" : "Advanced Filters"
+        title: "Open advanced filter builder",
+        children: [
+          /* @__PURE__ */ jsx(Filter, {}),
+          "Filters",
+          hasActiveFilters && /* @__PURE__ */ jsx(ActiveDot, {})
+        ]
       }
     ),
     hasActiveFilters && /* @__PURE__ */ jsx(
-      Button,
+      ClearButton,
       {
-        variant: "danger-light",
         onClick: handleClearFilters,
-        size: "S",
-        children: "Clear All"
+        title: "Clear all filters",
+        children: /* @__PURE__ */ jsx(Cross, {})
       }
     ),
     showModal && /* @__PURE__ */ jsx(
@@ -3242,13 +3900,13 @@ const index = {
   register(app) {
     console.log(`[${pluginId}] Registering plugin...`);
     app.addMenuLink({
-      to: `/plugins/${pluginId}`,
+      to: `plugins/${pluginId}`,
       icon: PluginIcon,
       intlLabel: {
         id: `${pluginId}.Admin.MainMenu.PluginName`,
         defaultMessage: name
       },
-      Component: () => import("./App-BCliVBSB.mjs"),
+      Component: () => import("./App-CZEZ9x55.mjs"),
       permissions: []
     });
     app.createSettingSection(
@@ -3269,7 +3927,7 @@ const index = {
           to: `${pluginId}/upgrade`,
           Component: () => import(
             /* webpackChunkName: "magic-mark-upgrade" */
-            "./UpgradePage-GoocQ4av.mjs"
+            "./UpgradePage-BeQJjvjk.mjs"
           ),
           permissions: []
         },
@@ -3355,6 +4013,7 @@ const index = {
 };
 export {
   CreateEditModal as C,
+  getIconById as g,
   index as i,
   pluginId as p,
   useLicenseInfo as u