From 4b72aacf799d18ac23d47154de567c2e458fde6c Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Mon, 17 Aug 2026 03:42:44 +0200
Subject: [PATCH] feat(feather): complete SkyUI interaction polish

---
 .../components/feather/FeatherPostCard.vue    | 146 +++++++++++++++---
 frontend/src/stores/phone.ts                  |   1 +
 .../views/apps/FeatherApp.contract.test.ts    |  91 +++++++++++
 frontend/src/views/apps/FeatherApp.vue        | 108 ++++++++++---
 sky_phone/config/locales/en.lua               |   2 +-
 5 files changed, 303 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/views/apps/FeatherApp.contract.test.ts

diff --git a/frontend/src/components/feather/FeatherPostCard.vue b/frontend/src/components/feather/FeatherPostCard.vue
index 5e27fe9..934acc2 100644
--- a/frontend/src/components/feather/FeatherPostCard.vue
+++ b/frontend/src/components/feather/FeatherPostCard.vue
@@ -8,18 +8,14 @@ import {
   Share2,
   UserRound,
 } from 'lucide-vue-next'
-import {
-  SkyButton as kButton,
-  SkyGlass as kGlass,
-  SkyIcon as kIcon,
-} from '@/ui'
-import { computed, ref } from 'vue'
+import { SkyButton, SkyGlass, SkyIcon } from '@/ui'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
 
 import { usePhoneStore } from '@/stores/phone'
 import type { FeatherPost } from '@/types/feather'
 
 const props = defineProps<{ post: FeatherPost }>()
-defineEmits<{
+const emit = defineEmits<{
   follow: [post: FeatherPost]
   media: [post: FeatherPost, index: number]
   menu: [post: FeatherPost]
@@ -32,6 +28,9 @@ defineEmits<{
 
 const phone = usePhoneStore()
 const expanded = ref(false)
+const reactionPulse = ref<'like' | 'bookmark' | null>(null)
+let reactionPulseFrame: number | null = null
+let reactionPulseTimer: number | null = null
 const shouldTruncate = computed(() => props.post.body.length > 260)
 const visibleBody = computed(() =>
   shouldTruncate.value && !expanded.value
@@ -57,10 +56,40 @@ function relativeTime(timestamp: number): string {
     month: 'short',
   }).format(timestamp)
 }
+
+function playReactionPulse(kind: 'like' | 'bookmark'): void {
+  if (reactionPulseFrame !== null)
+    window.cancelAnimationFrame(reactionPulseFrame)
+  if (reactionPulseTimer !== null) window.clearTimeout(reactionPulseTimer)
+  reactionPulse.value = null
+  void nextTick(() => {
+    reactionPulseFrame = window.requestAnimationFrame(() => {
+      reactionPulse.value = kind
+      reactionPulseFrame = null
+      reactionPulseTimer = window.setTimeout(() => {
+        reactionPulse.value = null
+        reactionPulseTimer = null
+      }, 520)
+    })
+  })
+}
+
+function react(kind: 'like' | 'bookmark'): void {
+  const isActivating =
+    kind === 'like' ? !props.post.is_liked : !props.post.is_bookmarked
+  if (isActivating) playReactionPulse(kind)
+  emit('react', props.post, kind)
+}
+
+onBeforeUnmount(() => {
+  if (reactionPulseFrame !== null)
+    window.cancelAnimationFrame(reactionPulseFrame)
+  if (reactionPulseTimer !== null) window.clearTimeout(reactionPulseTimer)
+})
 </script>
 
 <template>
-  <kGlass :highlight="false" class="feather-post-glass">
+  <SkyGlass :highlight="false" class="feather-post-glass">
     <article class="feather-post" @click="$emit('open', post)">
       <button
         class="feather-avatar"
@@ -91,7 +120,7 @@ function relativeTime(timestamp: number): string {
               @{{ post.handle }} · {{ relativeTime(post.created_at) }}
             </span>
           </button>
-          <kButton
+          <SkyButton
             v-if="!post.is_owner && !post.is_following"
             outline
             inline
@@ -101,16 +130,18 @@ function relativeTime(timestamp: number): string {
             @click.stop="$emit('follow', post)"
           >
             {{ phone.t('Apps.feather.follow') }}
-          </kButton>
-          <kButton
-            clear
+          </SkyButton>
+          <SkyButton
+            icon-only
             rounded
             small
+            tonal
             class="feather-more"
+            :aria-label="phone.t('Apps.feather.moreActions')"
             @click.stop="$emit('menu', post)"
           >
-            <kIcon><MoreHorizontal :size="18" /></kIcon>
-          </kButton>
+            <SkyIcon><MoreHorizontal :size="18" /></SkyIcon>
+          </SkyButton>
         </header>
 
         <p v-if="post.body" class="feather-post__text">
@@ -155,16 +186,24 @@ function relativeTime(timestamp: number): string {
           </button>
           <button
             type="button"
-            :class="{ 'is-liked': post.is_liked }"
-            @click.stop="$emit('react', post, 'like')"
+            class="feather-action feather-action--like"
+            :class="{
+              'is-liked': post.is_liked,
+              'is-pulsing': reactionPulse === 'like',
+            }"
+            @click.stop="react('like')"
           >
             <Heart :size="17" :fill="post.is_liked ? 'currentColor' : 'none'" />
             <span v-if="post.like_count">{{ post.like_count }}</span>
           </button>
           <button
             type="button"
-            :class="{ 'is-bookmarked': post.is_bookmarked }"
-            @click.stop="$emit('react', post, 'bookmark')"
+            class="feather-action feather-action--bookmark"
+            :class="{
+              'is-bookmarked': post.is_bookmarked,
+              'is-pulsing': reactionPulse === 'bookmark',
+            }"
+            @click.stop="react('bookmark')"
           >
             <Bookmark
               :size="17"
@@ -177,7 +216,7 @@ function relativeTime(timestamp: number): string {
         </footer>
       </div>
     </article>
-  </kGlass>
+  </SkyGlass>
 </template>
 
 <style scoped>
@@ -267,8 +306,12 @@ function relativeTime(timestamp: number): string {
   color: #438cf5;
 }
 .feather-follow {
-  --sky-app-accent: transparent;
-  --sky-button-text: var(--feather-blue, #1d9bf0);
+  --sky-app-accent: var(--feather-blue, #1d9bf0);
+  --sky-app-accent-soft: color-mix(
+    in srgb,
+    var(--feather-blue, #1d9bf0) 14%,
+    transparent
+  );
   width: auto;
   min-width: 58px;
   max-width: 68px;
@@ -281,17 +324,26 @@ function relativeTime(timestamp: number): string {
     transparent
   );
   padding-inline: 9px;
+  color: var(--feather-blue, #1d9bf0);
+  background: transparent;
   box-shadow: none;
   font-size: 10.5px;
   font-weight: 800;
   letter-spacing: 0.1px;
 }
 .feather-more {
+  --sky-app-accent: #71767b;
+  --sky-app-accent-soft: color-mix(in srgb, currentColor 10%, transparent);
   flex: 0 0 auto;
   margin-left: 0;
   width: 27px;
+  min-width: 27px;
   height: 27px;
+  min-height: 27px;
+  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+  padding: 0;
   color: #71767b;
+  background: color-mix(in srgb, currentColor 7%, transparent);
 }
 .feather-post__text {
   margin: 2px 0 8px;
@@ -352,6 +404,7 @@ function relativeTime(timestamp: number): string {
   color: #71767b;
 }
 .feather-actions button {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 4px;
@@ -371,6 +424,57 @@ function relativeTime(timestamp: number): string {
 .feather-actions .is-bookmarked {
   color: #438cf5;
 }
+.feather-actions .feather-action.is-pulsing svg {
+  animation: feather-reaction-pop 520ms cubic-bezier(0.22, 1.45, 0.36, 1) both;
+}
+.feather-actions .feather-action.is-pulsing::after {
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  width: 24px;
+  height: 24px;
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  content: '';
+  pointer-events: none;
+  animation: feather-reaction-ring 520ms ease-out both;
+}
+.feather-actions .feather-action--like.is-pulsing {
+  color: #f04f87;
+}
+.feather-actions .feather-action--bookmark.is-pulsing {
+  color: #438cf5;
+}
+@keyframes feather-reaction-pop {
+  0% {
+    transform: scale(0.78) rotate(-8deg);
+  }
+  48% {
+    transform: scale(1.42) rotate(7deg);
+  }
+  72% {
+    transform: scale(0.94) rotate(-2deg);
+  }
+  100% {
+    transform: scale(1) rotate(0);
+  }
+}
+@keyframes feather-reaction-ring {
+  0% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(0.35);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.65);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .feather-actions .feather-action.is-pulsing svg,
+  .feather-actions .feather-action.is-pulsing::after {
+    animation: none;
+  }
+}
 @supports not (color: color-mix(in srgb, white, black)) {
   .feather-post:active {
     background: rgb(127 127 127 / 4%);
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 4dbd3e4..64e46b3 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -1407,6 +1407,7 @@ const defaultLocales: LocaleTree = {
       verified: 'Verified profile',
       noBio: 'No bio yet.',
       showMore: 'Show more',
+      moreActions: 'More actions',
       replies: 'Replies',
       noReplies: 'No replies yet. Start the conversation.',
       likes: 'Likes',
diff --git a/frontend/src/views/apps/FeatherApp.contract.test.ts b/frontend/src/views/apps/FeatherApp.contract.test.ts
new file mode 100644
index 0000000..d9b68e6
--- /dev/null
+++ b/frontend/src/views/apps/FeatherApp.contract.test.ts
@@ -0,0 +1,91 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(
+  new URL('./FeatherApp.vue', import.meta.url),
+  'utf8',
+)
+const postCard = readFileSync(
+  new URL('../../components/feather/FeatherPostCard.vue', import.meta.url),
+  'utf8',
+)
+
+describe('FeatherApp Sky UI contract', () => {
+  it('uses explicit Sky UI components without Konsta-style aliases', () => {
+    expect(source).not.toContain("from 'konsta/vue'")
+    expect(postCard).not.toContain("from 'konsta/vue'")
+    expect(postCard).toContain('import { SkyButton, SkyGlass, SkyIcon }')
+    expect(postCard).not.toMatch(/Sky[A-Za-z]+ as k[A-Za-z]+/)
+    expect(postCard).not.toMatch(/<\/?k[A-Z]/)
+  })
+
+  it('gives likes and bookmarks a reduced-motion-safe pulse animation', () => {
+    expect(postCard).toContain(
+      "const reactionPulse = ref<'like' | 'bookmark' | null>(null)",
+    )
+    expect(postCard).toContain('@click.stop="react(\'like\')"')
+    expect(postCard).toContain('@click.stop="react(\'bookmark\')"')
+    expect(postCard).toContain("'is-pulsing': reactionPulse === 'like'")
+    expect(postCard).toContain("'is-pulsing': reactionPulse === 'bookmark'")
+    expect(postCard).toContain('@keyframes feather-reaction-pop')
+    expect(postCard).toContain('@keyframes feather-reaction-ring')
+    expect(postCard).toContain('@media (prefers-reduced-motion: reduce)')
+  })
+
+  it('keeps the post header actions visible and compact', () => {
+    expect(postCard).toContain(
+      ':aria-label="phone.t(\'Apps.feather.moreActions\')"',
+    )
+    expect(postCard).toMatch(
+      /<SkyButton\s+icon-only\s+rounded\s+small\s+tonal\s+class="feather-more"/s,
+    )
+    expect(postCard).toMatch(
+      /\.feather-follow\s*\{[^}]*--sky-app-accent:\s*var\(--feather-blue,[^}]*color:\s*var\(--feather-blue,/s,
+    )
+    expect(postCard).not.toMatch(
+      /\.feather-follow\s*\{[^}]*--sky-app-accent:\s*transparent/s,
+    )
+    expect(postCard).toMatch(
+      /\.feather-more\s*\{[^}]*width:\s*27px[^}]*height:\s*27px[^}]*border:\s*1px/s,
+    )
+  })
+
+  it('keeps the composer below the iPhone header with compact actions', () => {
+    expect(source).toContain("'feather-app--composer':")
+    expect(source).toMatch(
+      /\.feather-app--active\.feather-app--composer \.feather-navbar\s*\{[^}]*--sky-safe-area-top:\s*54px/s,
+    )
+    expect(source).toMatch(
+      /\.feather-app--active\.feather-app--composer > \.feather-composer\s*\{[^}]*top:\s*112px[^}]*padding-top:\s*18px/s,
+    )
+    expect(source).toMatch(
+      /\.feather-composer-close\s*\{[^}]*width:\s*32px[^}]*height:\s*32px/s,
+    )
+    expect(source).toMatch(
+      /\.feather-composer-publish\s*\{[^}]*min-width:\s*52px[^}]*min-height:\s*28px/s,
+    )
+  })
+
+  it('renders a white profile banner title and owner logout icon at the top right', () => {
+    const profileStart = source.indexOf('class="feather-profile"')
+    const tabsStart = source.indexOf(
+      'class="feather-profile-tabs"',
+      profileStart,
+    )
+    const profile = source.slice(profileStart, tabsStart)
+
+    expect(profile).toContain('class="feather-profile__cover-title"')
+    expect(profile).toContain('class="feather-profile__logout"')
+    expect(profile).toContain('v-if="activeProfile.is_owner"')
+    expect(profile).toContain(':aria-label="phone.t(\'Common.signOut\')"')
+    expect(profile).toContain('@click="logoutDialogOpen = true"')
+    expect(profile).not.toContain('feather-profile-action--logout')
+    expect(source).toMatch(
+      /\.feather-profile__cover-title\s*\{[^}]*color:\s*#fff/s,
+    )
+    expect(source).toMatch(
+      /\.feather-app--active \.feather-profile__logout\s*\{[^}]*top:\s*10px[^}]*right:\s*10px/s,
+    )
+  })
+})
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index ac64ce1..9c93e05 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -847,6 +847,8 @@ onMounted(async () => {
         screen === 'main' &&
         tab === 'home',
       'feather-app--light': !phone.isDarkMode,
+      'feather-app--composer':
+        feather.onboarded && isAuthenticated && screen === 'composer',
       'feather-app--section':
         feather.onboarded &&
         isAuthenticated &&
@@ -892,7 +894,7 @@ onMounted(async () => {
           :aria-label="t('cancel')"
           @click="goBack"
         >
-          <X :size="19" />
+          <X :size="16" />
         </SkyLink>
         <SkyNavbarBackLink
           v-else
@@ -1386,7 +1388,23 @@ onMounted(async () => {
       >
         <SkyGlass :highlight="false" class="feather-profile-glass">
           <div class="feather-profile">
-            <div class="feather-profile__cover"></div>
+            <div class="feather-profile__cover">
+              <span class="feather-profile__cover-title">
+                <Feather :size="17" :stroke-width="2" />
+                {{ activeProfile.display_name }}
+              </span>
+              <SkyButton
+                v-if="activeProfile.is_owner"
+                icon-only
+                rounded
+                tonal
+                class="feather-profile__logout"
+                :aria-label="phone.t('Common.signOut')"
+                @click="logoutDialogOpen = true"
+              >
+                <LogOut :size="16" />
+              </SkyButton>
+            </div>
             <div class="feather-profile__top">
               <div class="feather-profile__avatar">
                 <img
@@ -1462,15 +1480,6 @@ onMounted(async () => {
                 <PencilLine :size="15" />
                 <span>{{ t('editProfile') }}</span>
               </SkyButton>
-              <SkyButton
-                rounded
-                outline
-                class="feather-profile-action feather-profile-action--logout"
-                @click="logoutDialogOpen = true"
-              >
-                <LogOut :size="15" />
-                <span>{{ phone.t('Common.signOut') }}</span>
-              </SkyButton>
             </div>
           </div>
         </SkyGlass>
@@ -3723,8 +3732,13 @@ onMounted(async () => {
   color: var(--feather-muted);
 }
 .feather-app--active :deep(.feather-follow) {
-  --sky-button-bg-color: transparent;
-  --sky-button-text-color: var(--feather-blue);
+  --sky-app-accent: var(--feather-blue);
+  --sky-app-accent-soft: color-mix(
+    in srgb,
+    var(--feather-blue) 14%,
+    transparent
+  );
+  color: var(--feather-blue);
 }
 .feather-app--active .feather-trend,
 .feather-app--active .feather-person,
@@ -4260,9 +4274,51 @@ onMounted(async () => {
   background: transparent;
 }
 .feather-app--active .feather-profile__cover {
+  position: relative;
   height: 112px;
+  overflow: hidden;
+  color: #fff;
   background: linear-gradient(135deg, #173f6d, #58a6ff);
 }
+.feather-profile__cover-title {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  max-width: calc(100% - 72px);
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  overflow: hidden;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  text-shadow: 0 2px 8px rgb(0 0 0 / 34%);
+  white-space: nowrap;
+}
+.feather-profile__cover-title svg {
+  flex: none;
+}
+.feather-app--active .feather-profile__logout {
+  --sky-button-bg-color: rgb(8 22 39 / 38%);
+  --sky-button-text-color: #fff;
+  position: absolute;
+  z-index: 2;
+  top: 10px;
+  right: 10px;
+  width: 34px;
+  min-width: 34px;
+  height: 34px;
+  min-height: 34px;
+  border: 1px solid rgb(255 255 255 / 24%);
+  padding: 0;
+  color: #fff;
+  background: rgb(8 22 39 / 38%);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%);
+  backdrop-filter: blur(14px) saturate(150%);
+  -webkit-backdrop-filter: blur(14px) saturate(150%);
+}
 .feather-app--active .feather-profile__top {
   height: 50px;
   padding: 0 13px;
@@ -4336,13 +4392,6 @@ onMounted(async () => {
   font-size: 10.5px;
   font-weight: 750;
 }
-.feather-app--active
-  .feather-profile__actions
-  :deep(.feather-profile-action--logout) {
-  grid-column: 1 / -1;
-  border-color: color-mix(in srgb, #f04f65 62%, transparent);
-  color: #f04f65;
-}
 .feather-onboarding__logout {
   width: 100%;
   margin-top: 8px;
@@ -4465,10 +4514,17 @@ onMounted(async () => {
   padding: 13px 13px 34px;
   background: transparent;
 }
+.feather-app--active.feather-app--composer .feather-navbar {
+  --sky-safe-area-top: 54px;
+}
+.feather-app--active.feather-app--composer > .feather-composer {
+  top: 112px;
+  padding-top: 18px;
+}
 .feather-composer-close {
   display: grid;
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   place-items: center;
   border: 1px solid var(--feather-border);
   border-radius: 50%;
@@ -4476,7 +4532,13 @@ onMounted(async () => {
   color: inherit;
   background: var(--feather-panel);
 }
-.feather-composer-publish,
+.feather-composer-publish {
+  min-width: 52px;
+  min-height: 28px;
+  padding-inline: 10px;
+  font-size: 10px;
+  font-weight: 800;
+}
 .feather-edit__navbar-save {
   min-width: 58px;
   min-height: 30px;
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index ce767a3..3a43568 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -549,7 +549,7 @@ Locales["en"] = {
                 exploreTabs = { explore = "Explore", trending = "Trends", news = "News" },
                 trendKinds = { explore = "Trending in Los Santos", trending = "Popular right now", news = "News · Trending", sports = "Sports · Trending", entertainment = "Entertainment · Trending" },
                 people = "Who to follow", posts = "Posts", followers = "Followers", followingCount = "Following", removeConnection = "Remove", followerRemoved = "Follower removed.", followingRemoved = "Account unfollowed.", noConnections = "Nobody here yet", noConnectionsBody = "Profiles will appear here as connections are made.", follow = "Follow", unfollow = "Following",
-                editProfile = "Edit profile", saveProfile = "Save", joined = "Joined Feather", joinedDate = "Joined August 2026", shareProfile = "Share profile", profileCopied = "Profile handle copied.", postCopied = "Post copied.", verified = "Verified profile", noBio = "No bio yet.", showMore = "Show more",
+                editProfile = "Edit profile", saveProfile = "Save", joined = "Joined Feather", joinedDate = "Joined August 2026", shareProfile = "Share profile", profileCopied = "Profile handle copied.", postCopied = "Post copied.", verified = "Verified profile", noBio = "No bio yet.", showMore = "Show more", moreActions = "More actions",
                 replies = "Replies", noReplies = "No replies yet. Start the conversation.", likes = "Likes", bookmarks = "Bookmarks", noBookmarks = "No saved posts yet", noBookmarksBody = "Posts you bookmark will appear here.", imagePreview = "Image preview", openImage = "Open image {number}", postImage = "Post image {number}", previousImage = "Previous image", nextImage = "Next image", delete = "Delete", report = "Report", block = "Block @{handle}",
                 reportTitle = "Report feather", reportBody = "Tell us why this feather should be reviewed.", reportSubmit = "Submit report", reported = "Report submitted.", blocked = "Profile blocked.", deleted = "Feather deleted.",
                 reasons = { spam = "Spam", harassment = "Harassment", dangerous = "Dangerous content", illegal = "Illegal content", other = "Other" },