🍙 clear cache button added

src/common/components/ButtonRadio.sass

@@ -5,6 +5,10 @@
   justify-content: center
   flex-wrap: wrap
   gap: .25em
+  cursor: pointer
+
+  *
+    cursor: pointer
 
   .radio-button
     @extend .button

src/popup/popup.sass

@@ -11,3 +11,6 @@
     display: grid
     grid-auto-flow: row
     gap: 1em
+
+button
+    cursor: pointer

src/popup/popup.tsx

@@ -1,7 +1,9 @@
 import { h, render } from 'preact'
+import { useState } from 'preact/hooks'
 import ButtonRadio, { SelectionOption } from '../common/components/ButtonRadio'
 import { ExtensionSettings, getTargetPlatfromSettingsEntiries, getYtUrlResolversSettingsEntiries, TargetPlatformName, YTUrlResolverName } from '../common/settings'
 import { useLbrySettings } from '../common/useSettings'
+import { LbryPathnameCache } from '../common/yt/urlCache'
 import './popup.sass'
 
 /** Utilty to set a setting in the browser */
@@ -16,6 +18,7 @@ const ytUrlResolverOptions: SelectionOption[] = getYtUrlResolversSettingsEntirie
 
 function WatchOnLbryPopup() {
   const { redirect, targetPlatform, urlResolver } = useLbrySettings()
+  let [clearingCache, updateClearingCache] = useState(() => false)
 
   return <div className='container'>
     <section>
@@ -33,6 +36,14 @@ function WatchOnLbryPopup() {
       <ButtonRadio value={urlResolver} options={ytUrlResolverOptions}
         onChange={(urlResolver: YTUrlResolverName) => setSetting('urlResolver', urlResolver)} />
     </section>
+    <section>
+      <a onClick={async () => {
+        await LbryPathnameCache.clearAll()
+        alert('Cleared Cache.')
+      }}>
+        <button type='button' className='btn1 button is-primary'>{clearingCache ? 'Clearing Cache...' : 'Clear Cache'}</button>
+      </a>
+    </section>
     <section>
       <label className='radio-label'>Other useful tools:</label>
       <a href='/tools/YTtoLBRY.html' target='_blank'>