Bookmarks

const CACHE_DURATION = 60 * 60 * 1000; // 1 hour

type BookmarksDisplayMode = 'hidden' | 'bar' | 'sheet' | 'both';

setDisplayMode('bar' | 'sheet' | 'both' | 'hidden')

if (!hasPermissions) {
  return (
    <div className="flex flex-1 flex-col items-center justify-center gap-4">
      <Bookmark className="h-12 w-12 text-white/40" />
      <div className="text-lg text-white">
        {t("bookmarks.needs-permission")}
      </div>
      <Button onClick={handleRequestPermissions} variant="outline">
        {t("bookmarks.grant-permission")}
      </Button>
    </div>
  );
}

requestPermissions: async () => {
  const granted = await chrome.permissions.request({
    permissions: ["bookmarks"],
  });
  set({ hasPermissions: granted });
  if (granted) {
    await get().syncFromChrome();
  }
  return granted;
}

interface BookmarkNode {
  id: string;
  title: string;
  url?: string;              // Folders don't have URLs
  parentId?: string;
  index?: number;
  dateAdded?: number;
  dateGroupModified?: number;
  children?: BookmarkNode[]; // Nested structure
}

interface BookmarkFolder {
  id: string;
  title: string;
  parentId?: string;
  children: BookmarkNode[];
}

interface BookmarkLink {
  id: string;
  title: string;
  url: string;
  favicon?: string;
  parentId?: string;
  dateAdded: number;
}

<BookmarkTreeNode>
  {isFolder ? (
    <Folder icon with expandable children>
  ) : (
    <Link with favicon and URL>
  )}
</BookmarkTreeNode>

const handleOpenLink = (url: string) => {
  if (chrome?.tabs) {
    chrome.tabs.create({ url });
  } else {
    window.open(url, "_blank", "noopener,noreferrer");
  }
};

const isExpanded = expandedFolders.has(node.id);

<button onClick={() => onToggleFolder(node.id)}>
  {isExpanded ? <ChevronDown /> : <ChevronRight />}
  <Folder />
  <span>{node.title}</span>
  {hasChildren && <span>({node.children?.length})</span>}
</button>

{hasChildren && isExpanded && (
  <div className="ml-4 mt-1 space-y-1">
    {node.children?.map((child) => (
      <BookmarkTreeNode {...child} />
    ))}
  </div>
)}

const faviconUrl = node.url ? getFaviconUrl(node.url) : null;
const [showFallback, setShowFallback] = useState(false);

{faviconUrl && !showFallback ? (
  <img
    src={faviconUrl}
    onError={() => setShowFallback(true)}
  />
) : (
  <Bookmark className="h-4 w-4 text-white/40" />
)}

initializeStore: async () => {
  const hasPerms = await get().checkPermissions();
  await get().loadFromLocal();
  
  const needsSync = hasPerms && (shouldRefresh(get().lastSyncAt) || get().links.length === 0);
  if (needsSync) {
    await get().syncFromChrome();
  }
}

<Button
  variant="outline"
  onClick={refreshBookmarks}
  disabled={isLoading}
>
  <RefreshCw className={cn("h-4 w-4", isLoading && "animate-spin")} />
  {t("bookmarks.refresh")}
</Button>

function setupBookmarkListeners(): void {
  if (!hasBookmarksApi()) return;

  const syncIfAuthorized = (): void => {
    const store = useBookmarksStore.getState();
    if (store.hasPermissions) {
      store.syncFromChrome();
    }
  };

  chrome.bookmarks.onCreated.addListener(syncIfAuthorized);
  chrome.bookmarks.onChanged.addListener(syncIfAuthorized);
  chrome.bookmarks.onRemoved.addListener(syncIfAuthorized);
  chrome.bookmarks.onMoved.addListener(syncIfAuthorized);
}

interface CachedBookmark {
  id: string;               // Meelio ID
  userId: string;           // User ID
  chromeId: string;         // Browser bookmark ID
  title: string;
  url?: string;
  parentId?: string;
  index?: number;
  dateAdded: number;
  dateGroupModified?: number;
  cachedAt: number;         // Cache timestamp
  deletedAt: null;
}

const loadFromCache = async (userId: string): Promise<BookmarkNode[]> => {
  const cached = await db.bookmarks
    .where("userId")
    .equals(userId)
    .filter((b) => !b.deletedAt)
    .sortBy("index");

  return buildTreeFromCache(cached);
};

const shouldRefresh = (lastSyncAt: number | null): boolean => {
  if (!lastSyncAt) return true;
  return Date.now() - lastSyncAt > CACHE_DURATION; // 1 hour
};

addBookmark: async (bookmark) => {
  if (!hasBookmarksApi()) return;

  await chrome.bookmarks.create({
    title: bookmark.title,
    url: bookmark.url,
    parentId: bookmark.parentId,
  });
  await get().syncFromChrome();
}

updateBookmark: async (id, updates) => {
  const changes: chrome.bookmarks.BookmarkChangesArg = {};
  if (updates.title !== undefined) changes.title = updates.title;
  if (updates.url !== undefined) changes.url = updates.url;

  await chrome.bookmarks.update(id, changes);
  await get().syncFromChrome();
}

deleteBookmark: async (id) => {
  await chrome.bookmarks.remove(id);
  await get().syncFromChrome();
}

// Add folder
addFolder: async (folder) => {
  await chrome.bookmarks.create({
    title: folder.title,
    parentId: folder.parentId,
  });
}

// Update folder
updateFolder: async (id, updates) => {
  await chrome.bookmarks.update(id, { title: updates.title });
}

// Delete folder (and all contents)
deleteFolder: async (id) => {
  await chrome.bookmarks.removeTree(id);
}

<div className="text-sm text-white/60">
  {links.length} {t("bookmarks.links")}
  {folders.length > 0 &&
    ` • ${folders.length} ${t("bookmarks.folders")}`}
</div>

{bookmarks.length === 0 ? (
  <div className="flex flex-col items-center justify-center gap-4">
    <Bookmark className="h-12 w-12 text-white/20" />
    <div>{t("bookmarks.empty")}</div>
  </div>
) : (
  <BookmarkTree nodes={bookmarks} onLinkClick={handleOpenLink} />
)}

const isExtension = typeof chrome !== "undefined" && !!chrome.storage;

"Bookmarks available in extension only"