Merge pull request #161 from laststance/ui/compact-bookmark-remove

Compact dashboard bookmark remove button

Author: ryota-murakami

src/renderer/src/components/dashboard/widgets/BookmarksWidget.browser.test.tsx

@@ -0,0 +1,71 @@
+import { configureStore } from '@reduxjs/toolkit'
+import { Provider } from 'react-redux'
+import { describe, expect, it } from 'vitest'
+import { render } from 'vitest-browser-react'
+
+import '@/renderer/src/styles/globals.css'
+import type { HttpUrl, RepositoryId, SkillName } from '@/shared/types'
+
+/**
+ * Render the real BookmarksWidget reducer with one bookmark.
+ * @param name - Skill name shown in the widget row.
+ * @returns Render screen plus the backing Redux store.
+ */
+async function renderBookmarksWidget(
+  name: SkillName = 'very-long-skill-name' as SkillName,
+) {
+  const [{ default: bookmarkReducer, addBookmark }, { BookmarksWidget }] =
+    await Promise.all([
+      import('@/renderer/src/redux/slices/bookmarkSlice'),
+      import('./BookmarksWidget'),
+    ])
+  const store = configureStore({
+    reducer: {
+      bookmarks: bookmarkReducer,
+    },
+  })
+
+  store.dispatch(
+    addBookmark({
+      name,
+      repo: 'laststance/skills' as RepositoryId,
+      url: 'https://skills.sh/very-long-skill-name' as HttpUrl,
+    }),
+  )
+
+  const screen = await render(
+    <Provider store={store}>
+      <div style={{ width: 160 }}>
+        <BookmarksWidget />
+      </div>
+    </Provider>,
+  )
+
+  return { screen, store }
+}
+
+describe('BookmarksWidget', () => {
+  it('keeps long bookmark text reachable alongside the remove control', async () => {
+    const { screen } = await renderBookmarksWidget()
+
+    await expect.element(screen.getByText('very-long-skill-name')).toBeVisible()
+    await expect.element(screen.getByText('laststance/skills')).toBeVisible()
+
+    const removeButton = screen
+      .getByRole('button', { name: /Remove bookmark very-long-skill-name/i })
+      .element() as HTMLButtonElement
+
+    expect(removeButton.title).toBe('Remove very-long-skill-name')
+  })
+
+  it('still removes the bookmark through the compact control', async () => {
+    const { screen, store } = await renderBookmarksWidget('task' as SkillName)
+    const removeButton = screen
+      .getByRole('button', { name: /Remove bookmark task/i })
+      .element() as HTMLButtonElement
+
+    removeButton.click()
+
+    expect(store.getState().bookmarks.items).toEqual([])
+  })
+})

src/renderer/src/components/dashboard/widgets/BookmarksWidget.tsx

@@ -23,14 +23,14 @@ const BookmarkRow = React.memo(function BookmarkRow({
   onRemove,
 }: BookmarkRowProps): React.ReactElement {
   return (
-    <li className="group flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-muted">
+    <li className="group relative flex items-center gap-2 rounded-md px-2 py-1.5 pr-1 hover:bg-muted">
       <Bookmark className="h-3 w-3 shrink-0 text-primary" aria-hidden="true" />
       <a
         href={bookmark.url}
         target="_blank"
         rel="noopener noreferrer"
         className="
-          flex-1 min-w-0 inline-flex items-center gap-1 text-xs
+          flex-1 min-w-0 inline-flex items-center gap-1 pr-7 text-xs
           text-foreground hover:text-primary focus-visible:outline-none
           focus-visible:ring-2 focus-visible:ring-ring rounded
         "
@@ -50,13 +50,17 @@ const BookmarkRow = React.memo(function BookmarkRow({
         type="button"
         onClick={() => onRemove(bookmark.name)}
         aria-label={`Remove bookmark ${bookmark.name}`}
-        // 44×44 hit area per HIG — the visible X stays small so it doesn't
-        // dominate the row; opacity-0 until hover mirrors the SkillItem pattern.
+        title={`Remove ${bookmark.name}`}
+        data-bookmark-remove-button
+        // Absolute placement keeps the destructive action out of row layout,
+        // reserving 32px (28px button + 4px offset) on the right edge.
         className="
-          min-h-11 min-w-11 flex items-center justify-center
-          rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10
+          absolute right-1 top-1/2 z-10 flex size-7 -translate-y-1/2 items-center justify-center
+          rounded-md text-muted-foreground hover:bg-destructive/10 hover:text-destructive
           opacity-0 group-hover:opacity-100 focus-visible:opacity-100
-          transition-opacity
+          transition-[opacity,background-color,color]
+          after:pointer-events-none after:absolute after:-inset-1.5 after:content-['']
+          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
         "
       >
         <X className="h-3 w-3" aria-hidden="true" />