// Hover over any message and click the bookmark icon
<MessageActions messageId={messageId}>
  <BookmarkButton />
</MessageActions>

import { useBookmarkMutations } from '@/hooks/use-bookmarks'

function MyComponent() {
  const { addBookmark } = useBookmarkMutations()

  const handleBookmark = async (messageId: string) => {
    await addBookmark({
      messageId,
      note: 'Important discussion',
      tags: ['important'],
    })
  }
}

import { BookmarkList } from '@/components/bookmarks/BookmarkList'

<BookmarkList
  showFilters={true}
  showStats={true}
  viewMode="list"
/>

import { useBookmarkCollectionMutations } from '@/hooks/use-bookmarks'

const { createCollection } = useBookmarkCollectionMutations()

await createCollection({
  name: 'Work Tasks',
  description: 'Important work messages',
  icon: 'briefcase',
  color: 'blue',
})

import { useSavedMessageMutations } from '@/hooks/use-bookmarks'

const { saveMessage } = useSavedMessageMutations()

await saveMessage({
  content: 'Remember to follow up on project X',
  note: 'Action item from meeting',
  tags: ['todo', 'urgent'],
})

import { useBookmarkExport } from '@/hooks/use-bookmarks'

const { exportBookmarks } = useBookmarkExport()

// Export as JSON
await exportBookmarks('json', {
  includeContent: true,
  includeAttachments: true,
})

// Export as CSV
await exportBookmarks('csv')

// Quick bookmark
const { addBookmark } = useBookmarkMutations()
await addBookmark({ messageId: 'msg-123' })

// With context
await addBookmark({
  messageId: 'msg-123',
  note: 'Follow up next week',
  tags: ['action-item'],
})

// Create project collections
const { createCollection } = useBookmarkCollectionMutations()

await createCollection({
  name: 'Project Alpha',
  icon: 'folder',
  color: 'blue',
})

await createCollection({
  name: 'Project Beta',
  icon: 'folder',
  color: 'green',
})

// Add bookmark to collection
const { addBookmark } = useBookmarkMutations()
await addBookmark({
  messageId: 'msg-456',
  collectionIds: ['collection-alpha-id'],
  tags: ['design', 'review'],
})

// Save a personal note
const { saveMessage } = useSavedMessageMutations()

await saveMessage({
  content: 'Ideas for next sprint:\n- Feature A\n- Feature B\n- Bug fixes',
  tags: ['planning', 'sprint'],
})

// Search with filters
const { bookmarks } = useBookmarks(
  {
    searchQuery: 'deployment',
    channelId: 'channel-devops',
    hasAttachments: true,
  },
  'bookmarked_at_desc'
)

// Filter by tag
const { bookmarks } = useBookmarks({
  tag: 'urgent',
})

// Filter by collection
const { bookmarks } = useBookmarks({
  collectionId: 'collection-work-id',
})

import { useJumpToMessage } from '@/hooks/use-messages'

const { jumpToMessage } = useJumpToMessage()

// Jump to the original message from a bookmark
jumpToMessage(bookmark.message_id, bookmark.message.channel_id)

import { BookmarkList } from '@/components/bookmarks/BookmarkList'

export default function MyBookmarksPage() {
  return (
    <div className="container mx-auto py-6">
      <BookmarkList
        showFilters={true}
        showStats={true}
        viewMode="list"
      />
    </div>
  )
}

import { SavedMessages } from '@/components/bookmarks/SavedMessages'

export default function SavedMessagesPage() {
  return (
    <div className="container mx-auto py-6">
      <SavedMessages />
    </div>
  )
}

import { Bookmark, BookmarkCheck } from 'lucide-react'
import { useBookmarkByMessage, useBookmarkMutations } from '@/hooks/use-bookmarks'
import { Button } from '@/components/ui/button'

function BookmarkButton({ messageId }: { messageId: string }) {
  const { isBookmarked, bookmark } = useBookmarkByMessage(messageId)
  const { toggleBookmark } = useBookmarkMutations()

  return (
    <Button
      variant="ghost"
      size="sm"
      onClick={() => toggleBookmark(messageId, bookmark?.id)}
    >
      {isBookmarked ? (
        <BookmarkCheck className="h-4 w-4 text-primary" />
      ) : (
        <Bookmark className="h-4 w-4" />
      )}
    </Button>
  )
}

// Create a tagging system
const commonTags = ['important', 'follow-up', 'action-item', 'reference', 'decision', 'feedback']

// Tag your bookmarks
await addBookmark({
  messageId: id,
  tags: ['important', 'action-item'],
})

// Organize by topic
const collections = [
  { name: 'Design Reviews', icon: 'palette' },
  { name: 'Bug Reports', icon: 'bug' },
  { name: 'Feature Requests', icon: 'sparkles' },
  { name: 'Documentation', icon: 'book' },
]

// Get bookmarks from last week
const oneWeekAgo = new Date()
oneWeekAgo.setDate(oneWeekAgo.getDate() - 7)

const { bookmarks } = useBookmarks({
  dateRange: {
    start: oneWeekAgo,
    end: new Date(),
  },
})

// Export specific collection as CSV for reports
await exportBookmarks('csv', {
  includeContent: true,
  collectionIds: ['project-alpha-collection'],
})

// Save messages that need your attention
await saveMessage({
  content: message.content,
  originalMessageId: message.id,
  sourceChannelId: message.channelId,
  tags: ['needs-response'],
})