fix sync issue, frontend improvement

vue/src/components/RssFeeds.vue

@@ -17,8 +17,20 @@ const {
   fetchData,
   getReadable,
   setInitialLoad,
+  showMessageForXSeconds,
 } = useFeeds()
 
+const shareLabel = navigator.share ? 'Share' : 'Copy link'
+
+async function shareUrl(url) {
+  if (navigator.share) {
+    await navigator.share({ url })
+  } else {
+    await navigator.clipboard.writeText(url)
+    showMessageForXSeconds('Link copied.', 2)
+  }
+}
+
 onMounted(async () => {
   setInitialLoad(false)
   await fetchData()
@@ -49,6 +61,9 @@ onMounted(async () => {
           <h3>{{ feed.timestamp }}</h3>
           <p v-if="!feed.readable" class="feed-original-link">
             <a :href="feed.url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
+            <button type="button" class="feed-share-btn" :title="shareLabel" @click="shareUrl(feed.url)" :aria-label="shareLabel">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
+            </button>
           </p>
           <p class="feed-content" v-html='feed.content'></p>
         </div>
@@ -64,6 +79,7 @@ onMounted(async () => {
         <h3>{{ feeds[currentIndex].timestamp }}</h3>
         <p v-if="!feeds[currentIndex].readable" class="feed-original-link">
           <a :href="feeds[currentIndex].url" target="_blank" rel="noopener noreferrer">Read original article &#8599;</a>
+          <button type="button" class="feed-share-btn" :title="shareLabel" @click="shareUrl(feeds[currentIndex].url)">{{ shareLabel }}</button>
         </p>
         <p class="feed-content" v-html="feeds[currentIndex].content"></p>
       </template>
@@ -123,6 +139,13 @@ onMounted(async () => {
   width: auto;
 }
 
+.feed-original-link {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .feed-original-link a {
   display: inline-flex;
   align-items: center;
@@ -136,6 +159,25 @@ onMounted(async () => {
   text-decoration: underline;
 }
 
+.feed-share-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  opacity: 0.45;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.feed-share-btn:hover {
+  opacity: 1;
+}
+
 .article-single {
   position: relative;
   padding-bottom: 5rem;
@@ -179,10 +221,14 @@ onMounted(async () => {
   line-height: 1;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
   cursor: pointer;
+  opacity: 0.55;
+  transition: opacity 0.15s, border-color 0.15s;
 }
 
-.article-nav__btn:hover:not(:disabled) {
+.article-nav__btn:hover:not(:disabled),
+.article-nav__btn:focus-visible {
   border-color: var(--color-border-hover);
+  opacity: 1;
 }
 
 .article-nav__btn:disabled {