Clipboard Floating Panel

This commit is contained in:
Hariharan Mudaliar 2025-08-12 23:38:10 +05:30
commit e583069870
12 changed files with 549 additions and 226 deletions

View file

@ -0,0 +1,410 @@
//
// ClipboardPanel.swift
// DynamicIsland
//
// Created by GitHub Copilot on 12/08/25.
//
import AppKit
import SwiftUI
class ClipboardPanel: NSPanel {
init() {
super.init(
contentRect: .zero,
styleMask: [.borderless, .nonactivatingPanel],
backing: .buffered,
defer: true
)
setupWindow()
setupContentView()
}
// Override to allow the panel to become key window (required for TextField focus)
override var canBecomeKey: Bool {
return true
}
// Override to allow the panel to become main window (required for text input)
override var canBecomeMain: Bool {
return true
}
private func setupWindow() {
backgroundColor = .clear
isOpaque = false
hasShadow = true
level = .floating
isMovableByWindowBackground = true // Enable dragging
titlebarAppearsTransparent = true
titleVisibility = .hidden
isFloatingPanel = true // Mark as floating panel for proper behavior
// Allow dragging from any part of the window
styleMask.insert(.fullSizeContentView)
collectionBehavior = [
.canJoinAllSpaces,
.stationary,
.fullScreenAuxiliary // Float above full-screen apps
]
// Accept mouse moved events for proper hover behavior
acceptsMouseMovedEvents = true
}
private func setupContentView() {
let contentView = ClipboardPanelView {
self.close()
}
let hostingView = NSHostingView(rootView: contentView)
self.contentView = hostingView
// Set initial size
let preferredSize = CGSize(width: 320, height: 400)
hostingView.setFrameSize(preferredSize)
setContentSize(preferredSize)
}
func positionNearNotch() {
guard let screen = NSScreen.main else { return }
let screenFrame = screen.visibleFrame
let panelFrame = frame
// Position at top center of screen (near where the notch would be)
let xPosition = (screenFrame.width - panelFrame.width) / 2 + screenFrame.minX
let yPosition = screenFrame.maxY - panelFrame.height - 10 // 10px from top
setFrameOrigin(NSPoint(x: xPosition, y: yPosition))
}
func positionNearMouse() {
let mouseLocation = NSEvent.mouseLocation
let panelFrame = frame
// Position near mouse but ensure it stays on screen
guard let screen = NSScreen.main else { return }
let screenFrame = screen.visibleFrame
var xPosition = mouseLocation.x - panelFrame.width / 2
var yPosition = mouseLocation.y - panelFrame.height - 20
// Keep within screen bounds
xPosition = max(screenFrame.minX + 10, min(xPosition, screenFrame.maxX - panelFrame.width - 10))
yPosition = max(screenFrame.minY + 10, min(yPosition, screenFrame.maxY - panelFrame.height - 10))
setFrameOrigin(NSPoint(x: xPosition, y: yPosition))
}
}
struct ClipboardPanelView: View {
let onClose: () -> Void
@ObservedObject var clipboardManager = ClipboardManager.shared
@State private var selectedTab: ClipboardTab = .history
@State private var searchText = ""
@State private var hoveredItemId: UUID?
var filteredItems: [ClipboardItem] {
let allItems = selectedTab == .history ? clipboardManager.regularHistory : clipboardManager.pinnedItems
if searchText.isEmpty {
return allItems
} else {
return allItems.filter { item in
item.preview.localizedCaseInsensitiveContains(searchText) ||
item.type.displayName.localizedCaseInsensitiveContains(searchText)
}
}
}
var body: some View {
VStack(spacing: 0) {
// Header with tabs
ClipboardPanelHeader(
selectedTab: $selectedTab,
searchText: $searchText,
onClose: onClose
)
Divider()
.background(Color.gray.opacity(0.3))
// Content
if filteredItems.isEmpty {
ClipboardPanelEmptyState(
hasSearch: !searchText.isEmpty,
isHistoryTab: selectedTab == .history
)
} else {
ScrollView {
LazyVStack(spacing: 1) {
ForEach(filteredItems) { item in
ClipboardPanelItemRow(
item: item,
isHovered: hoveredItemId == item.id,
isPinned: clipboardManager.pinnedItems.contains(where: { $0.id == item.id })
) { hoverId in
hoveredItemId = hoverId
}
}
}
.padding(.vertical, 8)
}
}
}
.frame(width: 320, height: 400)
.background(VisualEffectView(material: .hudWindow, blendingMode: .behindWindow))
.cornerRadius(12)
.shadow(color: .black.opacity(0.4), radius: 20, x: 0, y: 10)
}
}
struct ClipboardPanelHeader: View {
@Binding var selectedTab: ClipboardTab
@Binding var searchText: String
let onClose: () -> Void
@ObservedObject var clipboardManager = ClipboardManager.shared
@FocusState private var isSearchFieldFocused: Bool
var body: some View {
VStack(spacing: 8) {
// Title and close button
HStack {
Image(systemName: "doc.on.clipboard")
.foregroundColor(.primary)
.font(.system(size: 16, weight: .medium))
Text("Clipboard Manager")
.font(.system(size: 14, weight: .semibold))
.foregroundColor(.primary)
Spacer()
// Clear button
Button(action: {
if selectedTab == .history {
clipboardManager.clearHistory()
} else {
clipboardManager.pinnedItems.removeAll()
clipboardManager.savePinnedItemsToDefaults()
}
}) {
Image(systemName: "trash")
.foregroundColor(.red)
.font(.system(size: 12))
}
.buttonStyle(PlainButtonStyle())
.disabled(selectedTab == .history ? clipboardManager.clipboardHistory.isEmpty : clipboardManager.pinnedItems.isEmpty)
Button(action: onClose) {
Image(systemName: "xmark")
.foregroundColor(.secondary)
.font(.system(size: 12, weight: .medium))
}
.buttonStyle(PlainButtonStyle())
}
.padding(.horizontal, 16)
.padding(.top, 12)
// Tab selector
HStack(spacing: 0) {
ForEach(ClipboardTab.allCases, id: \.self) { tab in
ClipboardTabButton(tab: tab, isSelected: selectedTab == tab) {
withAnimation(.easeInOut(duration: 0.2)) {
selectedTab = tab
}
}
}
Spacer()
}
.padding(.horizontal, 16)
// Search bar (always visible)
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.secondary)
.font(.system(size: 12))
TextField("Search clipboard...", text: $searchText)
.textFieldStyle(PlainTextFieldStyle())
.font(.system(size: 12))
.focused($isSearchFieldFocused)
if !searchText.isEmpty {
Button(action: { searchText = "" }) {
Image(systemName: "xmark.circle.fill")
.foregroundColor(.secondary)
.font(.system(size: 10))
}
.buttonStyle(PlainButtonStyle())
}
}
.padding(.horizontal, 12)
.padding(.vertical, 6)
.background(
RoundedRectangle(cornerRadius: 6)
.fill(Color.gray.opacity(0.1))
)
.padding(.horizontal, 16)
}
.padding(.bottom, 8)
}
}
struct ClipboardPanelEmptyState: View {
let hasSearch: Bool
let isHistoryTab: Bool
var body: some View {
VStack(spacing: 12) {
Image(systemName: hasSearch ? "magnifyingglass" : (isHistoryTab ? "doc.on.clipboard" : "heart.fill"))
.font(.system(size: 32))
.foregroundColor(.secondary)
if hasSearch {
Text("No results found")
.font(.system(size: 14, weight: .medium))
.foregroundColor(.primary)
Text("Try adjusting your search terms")
.font(.system(size: 12))
.foregroundColor(.secondary)
} else {
Text(isHistoryTab ? "No clipboard history" : "No favorites")
.font(.system(size: 14, weight: .medium))
.foregroundColor(.primary)
Text(isHistoryTab ? "Copy something to get started" : "Pin items to add them to favorites")
.font(.system(size: 12))
.foregroundColor(.secondary)
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}
struct ClipboardPanelItemRow: View {
let item: ClipboardItem
let isHovered: Bool
let isPinned: Bool
let onHover: (UUID?) -> Void
@ObservedObject var clipboardManager = ClipboardManager.shared
var body: some View {
HStack(alignment: .top, spacing: 12) {
// Type icon
Image(systemName: item.type.icon)
.font(.system(size: 14))
.foregroundColor(.blue)
.frame(width: 20)
// Content
VStack(alignment: .leading, spacing: 4) {
Text(item.preview)
.font(.system(size: 12))
.foregroundColor(.primary)
.lineLimit(2)
.multilineTextAlignment(.leading)
HStack {
Text(item.type.displayName)
.font(.system(size: 10))
.foregroundColor(.secondary)
Spacer()
Text(timeAgoString(from: item.timestamp))
.font(.system(size: 10))
.foregroundColor(.secondary)
}
}
Spacer()
// Action buttons (shown on hover)
if isHovered {
HStack(spacing: 6) {
// Pin/Unpin button
Button(action: {
if isPinned {
clipboardManager.unpinItem(item)
} else {
clipboardManager.pinItem(item)
}
}) {
Image(systemName: isPinned ? "heart.fill" : "heart")
.font(.system(size: 11))
.foregroundColor(isPinned ? .red : .gray)
}
.buttonStyle(PlainButtonStyle())
// Copy button
Button(action: {
clipboardManager.copyToClipboard(item)
}) {
Image(systemName: "doc.on.doc")
.font(.system(size: 11))
.foregroundColor(.green)
}
.buttonStyle(PlainButtonStyle())
// Delete button
Button(action: {
if isPinned {
clipboardManager.unpinItem(item)
} else {
clipboardManager.deleteItem(item)
}
}) {
Image(systemName: "trash")
.font(.system(size: 11))
.foregroundColor(.red)
}
.buttonStyle(PlainButtonStyle())
}
}
}
.padding(.horizontal, 16)
.padding(.vertical, 8)
.background(
RoundedRectangle(cornerRadius: 6)
.fill(isHovered ? Color.gray.opacity(0.1) : Color.clear)
)
.onHover { hovering in
withAnimation(.easeInOut(duration: 0.2)) {
onHover(hovering ? item.id : nil)
}
}
.onTapGesture {
clipboardManager.copyToClipboard(item)
}
}
private func timeAgoString(from date: Date) -> String {
let interval = Date().timeIntervalSince(date)
if interval < 60 {
return "Just now"
} else if interval < 3600 {
let minutes = Int(interval / 60)
return "\(minutes)m ago"
} else if interval < 86400 {
let hours = Int(interval / 3600)
return "\(hours)h ago"
} else {
let days = Int(interval / 86400)
return "\(days)d ago"
}
}
}
#Preview {
ClipboardPanelView {
print("Close panel")
}
}

View file

@ -0,0 +1,68 @@
//
// ClipboardShared.swift
// DynamicIsland
//
// Created by GitHub Copilot on 12/08/25.
//
import SwiftUI
enum ClipboardTab: String, CaseIterable {
case history = "History"
case favorites = "Favorites"
var icon: String {
switch self {
case .history: return "clock"
case .favorites: return "heart.fill"
}
}
}
struct ClipboardTabButton: View {
let tab: ClipboardTab
let isSelected: Bool
let action: () -> Void
@ObservedObject var clipboardManager = ClipboardManager.shared
var itemCount: Int {
switch tab {
case .history:
return clipboardManager.regularHistory.count
case .favorites:
return clipboardManager.pinnedItems.count
}
}
var body: some View {
Button(action: action) {
HStack(spacing: 6) {
Image(systemName: tab.icon)
.font(.system(size: 11))
Text(tab.rawValue)
.font(.system(size: 11, weight: .medium))
if itemCount > 0 {
Text("\(itemCount)")
.font(.system(size: 9, weight: .bold))
.foregroundColor(isSelected ? .white : .secondary)
.padding(.horizontal, 4)
.padding(.vertical, 1)
.background(
Capsule()
.fill(isSelected ? Color.white.opacity(0.3) : Color.gray.opacity(0.2))
)
}
}
.foregroundColor(isSelected ? .white : .secondary)
.padding(.horizontal, 12)
.padding(.vertical, 6)
.background(
RoundedRectangle(cornerRadius: 6)
.fill(isSelected ? Color.blue : Color.clear)
)
}
.buttonStyle(PlainButtonStyle())
}
}

View file

@ -8,18 +8,6 @@
import SwiftUI
import Defaults
enum ClipboardTab: String, CaseIterable {
case history = "History"
case favorites = "Favorites"
var icon: String {
switch self {
case .history: return "clock"
case .favorites: return "heart.fill"
}
}
}
struct ClipboardWindow: View {
@ObservedObject var clipboardManager = ClipboardManager.shared
@State private var selectedTab: ClipboardTab = .history
@ -126,54 +114,6 @@ struct ClipboardWindowHeader: View {
}
}
struct ClipboardTabButton: View {
let tab: ClipboardTab
let isSelected: Bool
let action: () -> Void
@ObservedObject var clipboardManager = ClipboardManager.shared
var itemCount: Int {
switch tab {
case .history:
return clipboardManager.regularHistory.count
case .favorites:
return clipboardManager.pinnedItems.count
}
}
var body: some View {
Button(action: action) {
HStack(spacing: 6) {
Image(systemName: tab.icon)
.font(.system(size: 11))
Text(tab.rawValue)
.font(.system(size: 11, weight: .medium))
if itemCount > 0 {
Text("\(itemCount)")
.font(.system(size: 9, weight: .bold))
.foregroundColor(isSelected ? .white : .secondary)
.padding(.horizontal, 4)
.padding(.vertical, 1)
.background(
Capsule()
.fill(isSelected ? Color.white.opacity(0.3) : Color.gray.opacity(0.2))
)
}
}
.foregroundColor(isSelected ? .white : .secondary)
.padding(.horizontal, 12)
.padding(.vertical, 6)
.background(
RoundedRectangle(cornerRadius: 6)
.fill(isSelected ? Color.blue : Color.clear)
)
}
.buttonStyle(PlainButtonStyle())
}
}
struct ClipboardWindowContent: View {
let selectedTab: ClipboardTab
let searchText: String

View file

@ -15,7 +15,6 @@ struct DynamicIslandHeader: View {
@ObservedObject var coordinator = DynamicIslandViewCoordinator.shared
@ObservedObject var clipboardManager = ClipboardManager.shared
@StateObject var tvm = TrayDrop.shared
@State private var showClipboardPopover = false
var body: some View {
HStack(spacing: 0) {
@ -63,25 +62,8 @@ struct DynamicIslandHeader: View {
if Defaults[.enableClipboardManager] && Defaults[.showClipboardIcon] {
Button(action: {
// Use the same smart logic as the keyboard shortcut
let displayMode = Defaults[.clipboardDisplayMode]
let shouldUseWindow: Bool
switch displayMode {
case .window:
shouldUseWindow = true
case .popover:
shouldUseWindow = false
case .auto:
// For header button clicks, prefer popover since user is already interacting with notch
shouldUseWindow = false
}
if shouldUseWindow {
ClipboardWindowManager.shared.toggleClipboardWindow()
} else {
showClipboardPopover.toggle()
}
// Always use panel mode
ClipboardPanelManager.shared.toggleClipboardPanel()
}) {
Capsule()
.fill(.black)
@ -94,18 +76,6 @@ struct DynamicIslandHeader: View {
}
}
.buttonStyle(PlainButtonStyle())
.popover(isPresented: $showClipboardPopover, arrowEdge: .bottom) {
ClipboardHistoryPopover(isPresented: $showClipboardPopover)
.onAppear {
vm.isClipboardPopoverActive = true
}
.onDisappear {
vm.isClipboardPopoverActive = false
}
}
.onChange(of: showClipboardPopover) { isOpen in
vm.isClipboardPopoverActive = isOpen
}
.onAppear {
if Defaults[.enableClipboardManager] && !clipboardManager.isMonitoring {
clipboardManager.startMonitoring()
@ -155,7 +125,7 @@ struct DynamicIslandHeader: View {
.onChange(of: coordinator.shouldToggleClipboardPopover) { _ in
// Only toggle if clipboard is enabled
if Defaults[.enableClipboardManager] {
showClipboardPopover.toggle()
ClipboardPanelManager.shared.toggleClipboardPanel()
}
}
}

View file

@ -41,10 +41,10 @@ class DynamicIslandWindow: NSPanel {
}
override var canBecomeKey: Bool {
false
true
}
override var canBecomeMain: Bool {
false
true
}
}

View file

@ -1589,7 +1589,6 @@ struct ClipboardSettings: View {
@Default(.enableClipboardManager) var enableClipboardManager
@Default(.clipboardHistorySize) var clipboardHistorySize
@Default(.showClipboardIcon) var showClipboardIcon
@Default(.clipboardDisplayMode) var clipboardDisplayMode
var body: some View {
Form {
@ -1612,25 +1611,6 @@ struct ClipboardSettings: View {
Section {
Defaults.Toggle("Show Clipboard Icon", key: .showClipboardIcon)
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("Display Mode")
Spacer()
Picker("Display Mode", selection: $clipboardDisplayMode) {
ForEach(ClipboardDisplayMode.allCases, id: \.self) { mode in
Text(mode.displayName).tag(mode)
}
}
.pickerStyle(.menu)
.frame(width: 140)
}
Text(clipboardDisplayMode.description)
.font(.caption)
.foregroundColor(.secondary)
.padding(.leading, 0)
}
HStack {
Text("History Size")
Spacer()