Add sensitive button

It's not hooked up.

web/components/bookmark/bookmark-view.css

@@ -1,5 +1,6 @@
-@import '../unread';
+@import '../toread';
 @import '../star';
+@import '../sensitive';
 
 .bc-bookmark-view {
   padding-bottom: 4px;

web/components/bookmark/bookmark-view.js

@@ -1,7 +1,8 @@
 /* eslint-env browser */
 import { Component, html } from 'uland-isomorphic'
-import { unreadIcon } from '../unread/index.js'
+import { toread } from '../toread/index.js'
 import { star } from '../star/index.js'
+import { sensitive } from '../sensitive/index.js'
 
 export const bookmarkView = Component(({
   bookmark: b,
@@ -10,8 +11,9 @@ export const bookmarkView = Component(({
   return html`
     <div class="bc-bookmark-view">
       <div>
-        ${unreadIcon(b.toread)}
-        ${star(b.starred)}
+        ${toread({ toread: b.toread })}
+        ${star({ starred: b.starred })}
+        ${sensitive({ sensitive: b.sensitive })}
         <a class="${b.toread ? 'bc-bookmark-title-toread' : null}" href="${b.url}" target="_blank">${b.title}</a>
       </div>
       <div class="bc-bookmark-url-display"><a href="${b.url}">${b.url}</a></div>
@@ -32,7 +34,6 @@ export const bookmarkView = Component(({
           </time>
         </a>
       </div>
-      ${b.sensitive ? html`<div>🤫</div>` : null}
       <div>
         <button onClick=${handleEdit}>edit</button>
       </div>

web/components/header/index.js

@@ -2,6 +2,7 @@ import { Component, html } from 'uland-isomorphic'
 import { useUser } from '../../hooks/useUser.js'
 import { useWindow } from '../../hooks/useWindow.js'
 import { useLSP } from '../../hooks/useLSP.js'
+import { sensitive } from '../sensitive/index.js'
 
 export const header = Component(() => {
   const { user } = useUser()
@@ -48,6 +49,7 @@ export const header = Component(() => {
           : html`
             <div>🔖 <a href='/bookmarks'>bookmarks</a></div>
             <div>🏷 <a href='/tags'>tags</a></div>
+            <div>${sensitive({ sensitive: false })}</div>
             <div>· <a href='/logout'>logout</a></div>`
       }
 

web/components/sensitive/index.css

@@ -0,0 +1,7 @@
+.bc-sensitive {
+
+}
+
+.bc-unsensitive {
+
+}

web/components/sensitive/index.js

@@ -0,0 +1,14 @@
+import { Component, html } from 'uland-isomorphic'
+
+export const sensitive = Component(({
+  sensitive = false,
+  onClick = () => {}
+}) => {
+  return html`
+    <span onClick=${onClick} class="${sensitive ? 'bc-sensitive' : 'bc-unsensitive'}" onClick=${onClick}>
+      ${sensitive
+        ? '🤫'
+        : '🫥'
+        }
+    </span>`
+})

web/components/star/index.js

@@ -1,6 +1,9 @@
 import { Component, html } from 'uland-isomorphic'
 
-export const star = Component((starred = false, onClick = () => {}) => {
+export const star = Component(({
+  starred = false,
+  onClick = () => {}
+}) => {
   return html`
     <span onClick=${onClick} class="${starred ? 'bc-starred' : 'bc-unstarred'}" onClick=${onClick}>
       ${starred

web/components/unread/index.js → web/components/toread/index.js

@@ -1,6 +1,9 @@
 import { Component, svg, html } from 'uland-isomorphic'
 
-export const unreadIcon = Component((toread = false, onClick = () => {}) => {
+export const toread = Component(({
+  toread = false,
+  onClick = () => {}
+}) => {
   return html`
     <span class="${toread ? 'bc-unread' : 'bc-read'}" onClick=${onClick}>
       ${toread

web/global.client.js

@@ -1,7 +1,7 @@
 import { toggleTheme } from 'mine.css'
 import 'fragmentions'
 import { render } from 'uland-isomorphic'
-import { header } from './components/header.js'
+import { header } from './components/header/index.js'
 
 window.toggleTheme = toggleTheme
 

web/root.layout.js

@@ -1,5 +1,5 @@
 import { html, render } from 'uland-isomorphic'
-import { header } from './components/header.js'
+import { header } from './components/header/index.js'
 
 export default function defaultRootLayout ({
   title,