From d75f2c38b48de1a00018e8a3ebdef9b84d42c6df Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Sun, 16 Aug 2026 20:11:28 +0200
Subject: [PATCH] ENH - refine Picstagram posting and profiles

Improve multi-image post previews, profile navigation, privacy controls, and follow-request activity handling. Align post actions, comments, and profile filters with the intended Picstagram interaction model and cover the behavior with focused tests.
---
 frontend/src/stores/phone.ts                  |   5 +
 frontend/src/stores/picstagram.test.ts        |  15 +
 frontend/src/stores/picstagram.ts             |   2 +
 .../views/apps/PicstagramApp.contract.test.ts |  24 +-
 frontend/src/views/apps/PicstagramApp.vue     | 396 +++++++++++++-----
 sky_phone/config/locales/en.lua               |   6 +-
 6 files changed, 348 insertions(+), 100 deletions(-)

diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 172867b..eaf7c3f 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -1071,6 +1071,8 @@ const defaultLocales: LocaleTree = {
       chooseStoryHint: 'Select one photo or video',
       selectedPhotos: '{count} selected',
       changePhotos: 'Change selection',
+      previousPhoto: 'Previous photo',
+      nextPhoto: 'Next photo',
       caption: 'Caption',
       captionPlaceholder: 'Write a caption...',
       storyTextPlaceholder: 'Add a short story text...',
@@ -1113,10 +1115,13 @@ const defaultLocales: LocaleTree = {
       shareProfile: 'Share profile',
       share: 'Share',
       followRequests: 'Follow requests',
+      requestAccepted: 'Follow request accepted.',
+      requestDeclined: 'Follow request declined.',
       noActivity: 'No activity yet',
       markRead: 'Mark as read',
       publicProfile: 'Public profile',
       privateProfileSetting: 'Private profile',
+      profileVisibility: 'Profile visibility',
       privacyHint: 'Only accepted followers can see your posts and stories.',
       bio: 'Bio',
       avatar: 'Profile photo',
diff --git a/frontend/src/stores/picstagram.test.ts b/frontend/src/stores/picstagram.test.ts
index 51d1f6b..e97f829 100644
--- a/frontend/src/stores/picstagram.test.ts
+++ b/frontend/src/stores/picstagram.test.ts
@@ -152,6 +152,21 @@ describe('Picstagram store', () => {
     expect(store.explore[0].like_count).toBe(2)
   })
 
+  it('accepts a private follow request from activity and updates followers', async () => {
+    vi.mocked(nuiCall).mockResolvedValue({ success: true })
+    const store = usePicstagramStore()
+    store.profile = { ...profile, followers: 4 }
+    store.activities = [{ ...activity, kind: 'follow_request' }]
+
+    expect(await store.respondFollow(profile.id, true)).toBe(true)
+    expect(store.activities).toEqual([])
+    expect(store.profile.followers).toBe(5)
+    expect(nuiCall).toHaveBeenCalledWith('picstagram:respond-follow', {
+      accept: true,
+      profileId: profile.id,
+    })
+  })
+
   it('removes a blocked profile from all local surfaces', async () => {
     vi.mocked(nuiCall).mockResolvedValue({ success: true })
     const store = usePicstagramStore()
diff --git a/frontend/src/stores/picstagram.ts b/frontend/src/stores/picstagram.ts
index d77cf7c..60af151 100644
--- a/frontend/src/stores/picstagram.ts
+++ b/frontend/src/stores/picstagram.ts
@@ -271,6 +271,8 @@ export const usePicstagramStore = defineStore('picstagram', {
             activity.kind !== 'follow_request' ||
             activity.profile_id !== profileId,
         )
+      if (response.success && accept && this.profile)
+        this.profile.followers += 1
       return response.success
     },
     async loadComments(id: string): Promise<boolean> {
diff --git a/frontend/src/views/apps/PicstagramApp.contract.test.ts b/frontend/src/views/apps/PicstagramApp.contract.test.ts
index 8a29dba..0cdc0c7 100644
--- a/frontend/src/views/apps/PicstagramApp.contract.test.ts
+++ b/frontend/src/views/apps/PicstagramApp.contract.test.ts
@@ -28,16 +28,36 @@ describe('Picstagram app layout', () => {
   it('supports a visible multi-image compose workflow', () => {
     expect(source).toContain("mediaType === 'photo' ? 5 : 1")
     expect(source).toContain('class="ps-selection-slide"')
-    expect(source).toContain('@click="removeComposeMedia(media.id)"')
+    expect(source).toContain('@click="moveComposePreview(-1)"')
+    expect(source).toContain('@click="moveComposePreview(1)"')
+    expect(source).toContain('composePreviewIndex + 1')
     expect(source).toContain('@click="changeComposeSelection"')
+    expect(source).toContain('class="ps-publish-link"')
   })
 
-  it('uses owner actions and all, video, and tagged profile filters', () => {
+  it('uses Instagram-like owner actions and profile filters', () => {
     expect(source).toContain('class="ps-profile-owner-actions"')
     expect(source).toContain('@click="editProfile"')
     expect(source).toContain('@click="shareCurrentProfile"')
     expect(source).toContain("profileSection === 'all'")
     expect(source).toContain("profileSection === 'videos'")
     expect(source).toContain("profileSection === 'tagged'")
+    expect(source).toContain('class="ps-profile-filters"')
+    expect(source).toMatch(
+      /\.ps-profile-owner-actions\s*\{[^}]*grid-template-columns:\s*repeat\(2,/s,
+    )
+  })
+
+  it('keeps create out of navigation and exposes privacy requests', () => {
+    expect(source).toContain(':item-count="4"')
+    expect(source).not.toContain('ps-create-tab')
+    expect(source).toContain('profileDraft.private = false')
+    expect(source).toContain('profileDraft.private = true')
+    expect(source).toContain(
+      'respondToFollowRequest(activity.profile_id, true)',
+    )
+    expect(source).toContain(
+      'respondToFollowRequest(activity.profile_id, false)',
+    )
   })
 })
diff --git a/frontend/src/views/apps/PicstagramApp.vue b/frontend/src/views/apps/PicstagramApp.vue
index a1fb99d..8f253b8 100644
--- a/frontend/src/views/apps/PicstagramApp.vue
+++ b/frontend/src/views/apps/PicstagramApp.vue
@@ -97,6 +97,7 @@ const authConfirmPassword = ref('')
 const authSubmitting = ref(false)
 const composeKind = ref<ComposeKind>('post')
 const selectedMedia = ref<PhoneMedia[]>([])
+const composePreviewIndex = ref(0)
 const caption = ref('')
 const location = ref('')
 const storyText = ref('')
@@ -152,7 +153,10 @@ const unreadCount = computed(
   () => store.activities.filter((activity) => !activity.read_at).length,
 )
 const tabIndex = computed(() =>
-  ['home', 'explore', 'create', 'activity', 'profile'].indexOf(tab.value),
+  ['home', 'explore', 'activity', 'profile'].indexOf(tab.value),
+)
+const currentComposeMedia = computed(
+  () => selectedMedia.value[composePreviewIndex.value] ?? null,
 )
 const taggedProfilePosts = computed(() => {
   const handle = currentProfile.value?.handle.trim().toLowerCase()
@@ -447,6 +451,7 @@ function openAvatarMedia(source: MediaSource): void {
 
 function resetComposer(): void {
   selectedMedia.value = []
+  composePreviewIndex.value = 0
   caption.value = ''
   location.value = ''
   storyText.value = ''
@@ -455,6 +460,20 @@ function resetComposer(): void {
 
 function removeComposeMedia(id: number): void {
   selectedMedia.value = selectedMedia.value.filter((media) => media.id !== id)
+  composePreviewIndex.value = Math.min(
+    composePreviewIndex.value,
+    Math.max(0, selectedMedia.value.length - 1),
+  )
+}
+
+function moveComposePreview(direction: 1 | -1): void {
+  composePreviewIndex.value = Math.max(
+    0,
+    Math.min(
+      selectedMedia.value.length - 1,
+      composePreviewIndex.value + direction,
+    ),
+  )
 }
 
 function changeComposeSelection(): void {
@@ -762,6 +781,17 @@ function activityProfile(activity: PicstagramActivity): void {
   void openProfile(activity.profile_id)
 }
 
+async function respondToFollowRequest(
+  profileId: string,
+  accept: boolean,
+): Promise<void> {
+  if (!(await store.respondFollow(profileId, accept))) {
+    notify(errorMessage())
+    return
+  }
+  notify(t(accept ? 'requestAccepted' : 'requestDeclined'))
+}
+
 watch(search, (value) => {
   if (searchTimer !== null) window.clearTimeout(searchTimer)
   searchTimer = window.setTimeout(() => {
@@ -791,6 +821,7 @@ onMounted(async () => {
   }>('picstagram:compose')
   if (composeSelection?.media.length) {
     selectedMedia.value = composeSelection.media
+    composePreviewIndex.value = 0
     composeKind.value = composeSelection.context?.kind ?? 'post'
     caption.value = composeSelection.context?.caption ?? ''
     location.value = composeSelection.context?.location ?? ''
@@ -1347,8 +1378,24 @@ onBeforeUnmount(() => {
       <template v-else-if="tab === 'create'">
         <SkyNavbar
           :title="t(composeKind === 'post' ? 'newPost' : 'newStory')"
+          show-back
+          :back-label="phone.t('Common.back')"
+          back-appearance="surface"
           variant="compact"
-        />
+          @back="showTab('home')"
+        >
+          <template #right>
+            <SkyLink
+              component="button"
+              class="ps-publish-link"
+              :disabled="!selectedMedia.length || publishing"
+              @click="publish"
+            >
+              <SkySpinner v-if="publishing" />
+              {{ t(publishing ? 'publishing' : 'share') }}
+            </SkyLink>
+          </template>
+        </SkyNavbar>
         <SkyScrollArea with-tabbar class="ps-screen ps-create">
           <SkySegmented strong>
             <SkySegmentedButton
@@ -1363,33 +1410,61 @@ onBeforeUnmount(() => {
             >
           </SkySegmented>
           <SkyCard class="ps-create-card">
-            <div v-if="selectedMedia.length" class="ps-selection-preview">
-              <div
-                v-for="media in selectedMedia"
-                :key="media.id"
-                class="ps-selection-slide"
-              >
+            <div
+              v-if="selectedMedia.length && currentComposeMedia"
+              class="ps-selection-preview"
+            >
+              <div :key="currentComposeMedia.id" class="ps-selection-slide">
                 <video
-                  v-if="media.mediaType === 'video'"
-                  :src="media.url"
+                  v-if="currentComposeMedia.mediaType === 'video'"
+                  :src="currentComposeMedia.url"
                   autoplay
                   loop
                   muted
                   playsinline
                 />
-                <img v-else :src="media.url" alt="" />
+                <img v-else :src="currentComposeMedia.url" alt="" />
                 <button
+                  class="ps-selection-remove"
                   :aria-label="t('remove')"
-                  @click="removeComposeMedia(media.id)"
+                  @click="removeComposeMedia(currentComposeMedia.id)"
                 >
                   <X />
                 </button>
               </div>
+              <template v-if="selectedMedia.length > 1">
+                <button
+                  class="ps-selection-arrow ps-selection-arrow--left"
+                  :aria-label="t('previousPhoto')"
+                  :disabled="composePreviewIndex === 0"
+                  @click="moveComposePreview(-1)"
+                >
+                  <ChevronLeft />
+                </button>
+                <button
+                  class="ps-selection-arrow ps-selection-arrow--right"
+                  :aria-label="t('nextPhoto')"
+                  :disabled="composePreviewIndex === selectedMedia.length - 1"
+                  @click="moveComposePreview(1)"
+                >
+                  <ChevronRight />
+                </button>
+                <span class="ps-selection-counter">
+                  {{ composePreviewIndex + 1 }}/{{ selectedMedia.length }}
+                </span>
+                <div class="ps-selection-dots" aria-hidden="true">
+                  <span
+                    v-for="(_, index) in selectedMedia"
+                    :key="index"
+                    :class="{ active: composePreviewIndex === index }"
+                  />
+                </div>
+              </template>
               <SkyChip>{{
                 t('selectedPhotos', { count: String(selectedMedia.length) })
               }}</SkyChip>
               <span
-                v-if="selectedMedia[0]?.mediaType === 'video'"
+                v-if="currentComposeMedia.mediaType === 'video'"
                 class="ps-video-preview-badge"
                 ><Video />{{ t('video') }}</span
               >
@@ -1479,22 +1554,6 @@ onBeforeUnmount(() => {
               ><SkyToggle v-model="commentsEnabled"
             /></label>
           </div>
-          <SkyButton
-            large
-            rounded
-            class="ps-publish"
-            :disabled="!selectedMedia.length || publishing"
-            @click="publish"
-            ><SkySpinner v-if="publishing" />{{
-              t(
-                publishing
-                  ? 'publishing'
-                  : composeKind === 'post'
-                    ? 'newPost'
-                    : 'newStory',
-              )
-            }}</SkyButton
-          >
         </SkyScrollArea>
       </template>
 
@@ -1513,6 +1572,9 @@ onBeforeUnmount(() => {
             v-for="activity in store.activities"
             :key="activity.id"
             class="ps-activity-row"
+            :class="{
+              'ps-activity-row--request': activity.kind === 'follow_request',
+            }"
             @click="activityProfile(activity)"
           >
             <span class="ps-avatar"
@@ -1540,13 +1602,13 @@ onBeforeUnmount(() => {
               <SkyButton
                 small
                 rounded
-                @click="store.respondFollow(activity.profile_id, true)"
+                @click="respondToFollowRequest(activity.profile_id, true)"
                 >{{ t('accept') }}</SkyButton
               ><SkyButton
                 small
                 rounded
                 tonal
-                @click="store.respondFollow(activity.profile_id, false)"
+                @click="respondToFollowRequest(activity.profile_id, false)"
                 >{{ t('decline') }}</SkyButton
               >
             </div>
@@ -1584,11 +1646,11 @@ onBeforeUnmount(() => {
           </template>
           <template #title>
             <span class="ps-profile-navbar-title">
-              {{ currentProfile?.display_name ?? t('profile') }}
               <LockKeyhole
                 v-if="currentProfile?.private"
                 :aria-label="t('privateProfileSetting')"
               />
+              {{ currentProfile ? currentProfile.handle : t('profile') }}
             </span>
           </template>
           <template #right
@@ -1641,7 +1703,7 @@ onBeforeUnmount(() => {
                 {{ t('editProfile') }}
               </SkyButton>
               <SkyButton block rounded tonal @click="shareCurrentProfile">
-                <Share2 />{{ t('shareProfile') }}
+                {{ t('shareProfile') }}
               </SkyButton>
             </div>
             <div v-else class="ps-profile-buttons">
@@ -1668,26 +1730,42 @@ onBeforeUnmount(() => {
             ><span>{{ t('privateProfileBody') }}</span>
           </div>
           <template v-else>
-            <SkySegmented strong class="ps-profile-segments"
-              ><SkySegmentedButton
-                :active="profileSection === 'all'"
+            <div
+              class="ps-profile-filters"
+              role="tablist"
+              :aria-label="t('posts')"
+            >
+              <button
+                role="tab"
+                :aria-selected="profileSection === 'all'"
+                :class="{ active: profileSection === 'all' }"
                 :aria-label="t('allPosts')"
                 :title="t('allPosts')"
                 @click="profileSection = 'all'"
-                ><Grid3X3 /></SkySegmentedButton
-              ><SkySegmentedButton
-                :active="profileSection === 'videos'"
+              >
+                <Grid3X3 />
+              </button>
+              <button
+                role="tab"
+                :aria-selected="profileSection === 'videos'"
+                :class="{ active: profileSection === 'videos' }"
                 :aria-label="t('videos')"
                 :title="t('videos')"
                 @click="profileSection = 'videos'"
-                ><Video /></SkySegmentedButton
-              ><SkySegmentedButton
-                :active="profileSection === 'tagged'"
+              >
+                <Video />
+              </button>
+              <button
+                role="tab"
+                :aria-selected="profileSection === 'tagged'"
+                :class="{ active: profileSection === 'tagged' }"
                 :aria-label="t('taggedPosts')"
                 :title="t('taggedPosts')"
                 @click="profileSection = 'tagged'"
-                ><UserRound /></SkySegmentedButton
-            ></SkySegmented>
+              >
+                <UserRound />
+              </button>
+            </div>
             <div class="ps-grid">
               <button
                 v-for="post in profileGrid"
@@ -1719,7 +1797,7 @@ onBeforeUnmount(() => {
         <SkySegmented
           class="ps-navigation-segments"
           :active-index="tabIndex"
-          :item-count="5"
+          :item-count="4"
           :aria-label="t('name')"
           navigation
         >
@@ -1737,14 +1815,6 @@ onBeforeUnmount(() => {
           >
             <Compass /><small>{{ t('explore') }}</small>
           </SkySegmentedButton>
-          <SkySegmentedButton
-            :active="tab === 'create'"
-            class="ps-nav-button ps-create-tab"
-            @click="showTab('create')"
-          >
-            <span class="ps-create-icon"><Plus /></span
-            ><small>{{ t('create') }}</small>
-          </SkySegmentedButton>
           <SkySegmentedButton
             :active="tab === 'activity'"
             class="ps-nav-button"
@@ -1998,12 +2068,27 @@ onBeforeUnmount(() => {
             type="textarea"
             :rows="6"
             outline
-          /><label class="ps-toggle-row"
-            ><span
-              ><strong>{{ t('privateProfileSetting') }}</strong
-              ><small>{{ t('privacyHint') }}</small></span
-            ><SkyToggle v-model="profileDraft.private"
-          /></label>
+          />
+          <section class="ps-privacy-control">
+            <div>
+              <strong>{{ t('profileVisibility') }}</strong>
+              <small>{{ t('privacyHint') }}</small>
+            </div>
+            <SkySegmented strong>
+              <SkySegmentedButton
+                :active="!profileDraft.private"
+                @click="profileDraft.private = false"
+              >
+                <UserRound />{{ t('publicProfile') }}
+              </SkySegmentedButton>
+              <SkySegmentedButton
+                :active="profileDraft.private"
+                @click="profileDraft.private = true"
+              >
+                <LockKeyhole />{{ t('privateProfileSetting') }}
+              </SkySegmentedButton>
+            </SkySegmented>
+          </section>
         </div>
       </section>
     </SkySheet>
@@ -2480,19 +2565,6 @@ button {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.ps-create-icon {
-  display: grid;
-  place-items: center;
-  width: 40px;
-  height: 22px;
-  color: white;
-  border-radius: 8px;
-  background: var(--ps-accent);
-}
-.ps-create-icon svg {
-  width: 18px;
-  height: 18px;
-}
 .ps-badge-anchor {
   position: relative;
   display: inline-flex;
@@ -2515,7 +2587,7 @@ button {
   display: flex;
   gap: 14px;
   overflow-x: auto;
-  padding: 10px var(--sky-page-gutter) var(--sky-space-4);
+  padding: 4px var(--sky-page-gutter) var(--sky-space-4);
   scrollbar-width: none;
 }
 .ps-stories::-webkit-scrollbar,
@@ -2622,6 +2694,7 @@ button {
   grid-auto-rows: max-content;
   align-content: start;
   gap: var(--sky-space-3);
+  padding-top: 0;
 }
 .ps-feed > .ps-empty {
   min-height: 320px;
@@ -2859,10 +2932,24 @@ button {
   color: var(--sky-muted);
   font-size: 12px;
 }
-.ps-load-more,
-.ps-publish {
+.ps-load-more {
   margin: var(--sky-space-3) var(--sky-page-gutter);
 }
+.ps-publish-link {
+  min-width: 52px;
+  justify-content: flex-end;
+  color: var(--ps-accent) !important;
+  font-size: 13px;
+  font-weight: 750;
+}
+.ps-publish-link:disabled {
+  cursor: default;
+  opacity: 0.42;
+}
+.ps-publish-link :deep(.sky-spinner) {
+  width: 16px;
+  height: 16px;
+}
 
 .ps-explore {
   padding-top: 2px;
@@ -3018,13 +3105,10 @@ button {
 }
 .ps-selection-preview {
   position: relative;
-  display: flex;
-  overflow-x: auto;
-  gap: 3px;
+  overflow: hidden;
   height: 240px;
   border-radius: calc(var(--sky-radius-control) + 10px);
   background: #050505;
-  scroll-snap-type: x mandatory;
 }
 .ps-selection-preview img,
 .ps-selection-preview video {
@@ -3034,10 +3118,10 @@ button {
 }
 .ps-selection-slide {
   position: relative;
-  flex: 0 0 100%;
-  scroll-snap-align: start;
+  width: 100%;
+  height: 100%;
 }
-.ps-selection-slide > button {
+.ps-selection-remove {
   position: absolute;
   top: 9px;
   right: 9px;
@@ -3050,6 +3134,66 @@ button {
   background: rgba(0, 0, 0, 0.65);
   color: white;
 }
+.ps-selection-arrow {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.62);
+  color: white;
+  transform: translateY(-50%);
+}
+.ps-selection-arrow:disabled {
+  opacity: 0.22;
+}
+.ps-selection-arrow--left {
+  left: 9px;
+}
+.ps-selection-arrow--right {
+  right: 9px;
+}
+.ps-selection-arrow svg {
+  width: 19px;
+  height: 19px;
+}
+.ps-selection-counter {
+  position: absolute;
+  z-index: 2;
+  top: 10px;
+  left: 50%;
+  padding: 5px 8px;
+  border-radius: var(--sky-radius-pill);
+  background: rgba(0, 0, 0, 0.62);
+  color: white;
+  font-size: 10px;
+  font-weight: 750;
+  transform: translateX(-50%);
+}
+.ps-selection-dots {
+  position: absolute;
+  z-index: 2;
+  bottom: 12px;
+  left: 50%;
+  display: flex;
+  gap: 4px;
+  transform: translateX(-50%);
+}
+.ps-selection-dots span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.45);
+}
+.ps-selection-dots span.active {
+  background: white;
+  transform: scale(1.25);
+}
 .ps-selection-preview > :deep(.sky-chip) {
   position: absolute;
   bottom: 9px;
@@ -3124,8 +3268,15 @@ button {
   line-height: 1.35;
 }
 .ps-request-actions {
-  display: grid;
-  gap: 4px;
+  display: flex;
+  gap: 5px;
+}
+.ps-activity-row--request {
+  margin: 6px 0;
+  padding: 10px;
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface);
 }
 .ps-activity > .ps-empty {
   min-height: 360px;
@@ -3174,8 +3325,7 @@ button {
 }
 .ps-profile-copy,
 .ps-profile-buttons,
-.ps-profile-owner-actions,
-.ps-profile-segments {
+.ps-profile-owner-actions {
   grid-column: 1 / -1;
 }
 .ps-profile-copy > strong {
@@ -3194,24 +3344,55 @@ button {
 }
 .ps-profile-owner-actions {
   display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px;
 }
-.ps-profile-owner-actions svg {
-  width: 16px;
-  height: 16px;
-}
 .ps-profile-buttons :deep(.sky-button) {
   min-width: 0;
 }
 .ps-profile-buttons svg {
   width: 17px;
 }
-.ps-profile-segments {
-  margin-bottom: var(--sky-space-3);
+.ps-profile-filters {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  margin: 0 calc(var(--sky-page-gutter) * -1) 2px;
+  border-top: 1px solid var(--sky-hairline);
+  border-bottom: 1px solid var(--sky-hairline);
 }
-.ps-profile-segments svg {
-  width: 19px;
-  height: 19px;
+.ps-profile-filters button {
+  position: relative;
+  display: grid;
+  place-items: center;
+  height: 48px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--sky-muted);
+}
+.ps-profile-filters button::after {
+  position: absolute;
+  right: 18%;
+  bottom: -1px;
+  left: 18%;
+  height: 2px;
+  border-radius: var(--sky-radius-pill);
+  background: transparent;
+  content: '';
+}
+.ps-profile-filters button.active {
+  color: var(--sky-text);
+}
+.ps-profile-filters button.active::after {
+  background: var(--sky-text);
+}
+.ps-profile-filters svg {
+  width: 21px;
+  height: 21px;
+  stroke-width: 1.8;
+}
+.ps-profile > .ps-grid {
+  margin-inline: calc(var(--sky-page-gutter) * -1);
 }
 .ps-private {
   min-height: 300px;
@@ -3493,6 +3674,31 @@ button {
 .ps-edit-fields {
   padding: 0 var(--sky-page-gutter);
 }
+.ps-privacy-control {
+  display: grid;
+  gap: 10px;
+  padding: 13px 14px;
+  border: 1px solid var(--sky-hairline);
+  border-radius: var(--sky-radius-card);
+  background: var(--sky-surface);
+}
+.ps-privacy-control > div {
+  display: grid;
+  gap: 2px;
+}
+.ps-privacy-control small {
+  color: var(--sky-muted);
+  font-size: 11px;
+  line-height: 1.35;
+}
+.ps-privacy-control :deep(.sky-segmented-button) {
+  min-width: 0;
+  gap: 5px;
+}
+.ps-privacy-control :deep(svg) {
+  width: 15px;
+  height: 15px;
+}
 .ps-fields :deep(.sky-field),
 .ps-edit-fields :deep(.sky-field) {
   overflow: hidden;
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 56271a3..188b2ac 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -468,7 +468,7 @@ Locales["en"] = {
                 newPost = "New Post", newStory = "New Story", post = "Post", story = "Story",
                 choosePhotos = "Choose photos", choosePhoto = "Choose photo", photo = "Photo", video = "Video", gallery = "Gallery", camera = "Camera",
                 choosePhotosHint = "Select up to five photos or one video", chooseStoryHint = "Select one photo or video",
-                selectedPhotos = "{count} selected", changePhotos = "Change selection", caption = "Caption",
+                selectedPhotos = "{count} selected", changePhotos = "Change selection", previousPhoto = "Previous photo", nextPhoto = "Next photo", caption = "Caption",
                 captionPlaceholder = "Write a caption...", storyTextPlaceholder = "Add a short story text...",
                 location = "Location", locationPlaceholder = "Add a place", allowComments = "Allow comments",
                 publishing = "Publishing...", published = "Your post is live.", storyPublished = "Your story is live.",
@@ -480,8 +480,8 @@ Locales["en"] = {
                 deletePostBody = "The post and its reactions will no longer be available.",
                 privateProfile = "This profile is private", privateProfileBody = "Follow this profile to see its posts and stories.",
                 follow = "Follow", requested = "Requested", unfollow = "Following", accept = "Accept", decline = "Decline", noConnections = "No profiles here yet", shareProfile = "Share profile", share = "Share",
-                followRequests = "Follow requests", noActivity = "No activity yet", markRead = "Mark as read",
-                publicProfile = "Public profile", privateProfileSetting = "Private profile",
+                followRequests = "Follow requests", requestAccepted = "Follow request accepted.", requestDeclined = "Follow request declined.", noActivity = "No activity yet", markRead = "Mark as read",
+                publicProfile = "Public profile", privateProfileSetting = "Private profile", profileVisibility = "Profile visibility",
                 privacyHint = "Only accepted followers can see your posts and stories.", bio = "Bio",
                 avatar = "Profile photo", chooseAvatar = "Choose profile photo", removeAvatar = "Remove profile photo",
                 saveProfile = "Save profile", profileSaved = "Profile updated.", cancel = "Cancel", done = "Done",