@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/examples/community.page.ts

@@ -0,0 +1,776 @@
+import { Component, computed, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/angular/standalone';
+import { DsIconButtonComponent } from '@propbinder/design-system';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileSectionComponent } from '../components/section';
+import { DsMobileSwiperComponent } from '../components/swiper/ds-mobile-swiper';
+import { DsMobileInteractiveListItemPostComponent } from '../components/interactive-list-item-post';
+import { DsMobileCardInlineFileComponent } from '../components/card-inline-file';
+import { DsMobileOfflineBannerComponent } from '../components/offline-banner';
+import { 
+  PostContentComponent,
+  PostTextComponent,
+  PostMediaComponent,
+  PostAttachmentsComponent,
+  PostActionsComponent,
+  ActionLikeComponent,
+  ActionCommentComponent
+} from '../components/interactive-list-item-post';
+import { DsMobilePostComposerComponent } from '../components/post-composer';
+import { DsMobileBottomSheetService } from '../components/bottom-sheet/ds-mobile-bottom-sheet.service';
+import { DsMobilePostCreateBottomSheetComponent } from '../components/bottom-sheet/ds-mobile-post-create-bottom-sheet';
+import { DsMobilePostActionsBottomSheetComponent, PostActionResult } from '../components/bottom-sheet';
+import { DsMobileLightboxService, LightboxAuthor } from '../components/lightbox';
+import { DsMobilePostDetailModalService } from '../components/post-detail-modal';
+import { DsMobileInlinePhotoComponent } from '../components/inline-photo';
+import { UserService } from '../services/user.service';
+import { PostsService } from '../services/posts.service';
+import { Post } from '../models/post.model';
+
+@Component({
+  selector: 'app-mobile-community-page',
+  standalone: true,
+  imports: [
+    DsMobilePageMainComponent,
+    DsMobileSectionComponent,
+    DsMobileInteractiveListItemPostComponent,
+    DsMobilePostComposerComponent,
+    DsMobileSwiperComponent,
+    PostContentComponent,
+    PostTextComponent,
+    PostMediaComponent,
+    PostAttachmentsComponent,
+    PostActionsComponent,
+    ActionLikeComponent,
+    ActionCommentComponent,
+    DsMobileCardInlineFileComponent,
+    DsIconButtonComponent,
+    DsMobileInlinePhotoComponent,
+    DsMobileOfflineBannerComponent,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent
+  ],
+  styles: [`
+    /* Pinned posts swiper wrapper */
+    .pinned-posts-swiper-wrapper {
+      padding: 0;
+      position: relative;
+    }
+    
+    /* Navigation buttons */
+    .swiper-nav-buttons {
+      display: contents;
+    }
+    
+    .swiper-nav-button {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 10;
+    }
+    
+    .swiper-nav-button:first-child {
+      left: -48px;
+    }
+    
+    .swiper-nav-button:last-child {
+      right: -48px;
+    }
+    
+    /* Force buttons to be perfectly round */
+    ::ng-deep .swiper-nav-button button {
+      border-radius: 50% !important;
+      width: 48px !important;
+      height: 48px !important;
+      padding: 0 !important;
+    }
+    
+    /* Hide on mobile */
+    @media (max-width: 767px) {
+      .swiper-nav-buttons {
+        display: none;
+      }
+    }
+    
+    /* Swiper slide styling for pinned posts */
+    ::ng-deep .pinned-posts-swiper .swiper-slide {
+      width: 100%;
+      max-width: 600px;
+      height: auto;
+    }
+    
+    /* Desktop: Remove max-width constraint */
+    @media (min-width: 768px) {
+      ::ng-deep .pinned-posts-swiper .swiper-slide {
+        max-width: 100%;
+      }
+    }
+    
+    /* Post item inside swiper slide */
+    .swiper-post-item {
+      width: 100%;
+      height: auto;
+    }
+    
+    /* Ensure post content doesn't get cropped */
+    ::ng-deep .pinned-posts-swiper .swiper-slide ds-mobile-interactive-list-item-post {
+      height: auto;
+    }
+    
+    ::ng-deep .pinned-posts-swiper .swiper-wrapper {
+      height: auto;
+      align-items: flex-start;
+    }
+    
+    .post-list-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    .clickable-image {
+      cursor: pointer;
+      transition: transform 0.2s ease, opacity 0.2s ease;
+      border-radius: 8px;
+      display: block;
+      width: 100%;
+      aspect-ratio: 16/9;
+      object-fit: cover;
+    }
+    
+    .clickable-image:active {
+      transform: scale(0.98);
+      opacity: 0.9;
+    }
+    
+    /* Empty State */
+    .community-empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      text-align: center;
+    }
+    
+    .empty-state-image {
+      width: 96px;
+      height: 96px;
+      margin-bottom: 24px;
+    }
+    
+    .empty-state-title {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-base);
+      font-weight: 600;
+      color: var(--color-text-primary);
+      margin: 16px 0 8px 0;
+    }
+    
+    .empty-state-description {
+      font-family: 'Brockmann', sans-serif;
+      font-size: var(--font-size-sm);
+      color: var(--color-text-secondary);
+      margin: 0;
+    }
+    
+    /* Infinite Scroll Spinner Styling */
+    ion-infinite-scroll {
+      --color: var(--color-primary-surface);
+    }
+    
+    ion-infinite-scroll-content {
+      --color: var(--color-primary-surface);
+    }
+    
+    /* Target the actual spinner element */
+    ion-infinite-scroll-content::part(spinner) {
+      color: var(--color-primary-surface);
+    }
+  `],
+  template: `
+    <ds-mobile-page-main
+      #pageComponent
+      title="Fællesskab"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Offline indicator -->
+      @if (pageComponent.isOffline()) {
+        <ds-mobile-offline-banner 
+          offline-indicator
+          title="Ingen internetforbindelse"
+          message="Nogle funktioner kan være utilgængelige">
+        </ds-mobile-offline-banner>
+      }
+      
+      <!-- Post Composer in header-expandable -->
+      <ds-mobile-post-composer
+        header-content
+        [avatarInitials]="userService.avatarInitials()"
+        [avatarType]="userService.avatarType()"
+        [avatarSrc]="userService.avatarSrc()"
+        (composerClick)="openPostCreator()"
+      />
+      
+      <!-- Pinned Posts Section -->
+      <ds-mobile-section 
+        headline="Fastgjorte opslag"
+        icon="remixPushpinFill">
+        <div class="pinned-posts-swiper-wrapper">
+          <ds-mobile-swiper 
+            #pinnedSwiper
+            class="pinned-posts-swiper"
+            [slideWidth]="'100%'" 
+            [gap]="32"
+            [pagination]="true"
+            [autoHeight]="true"
+            [progressiveOpacity]="true"
+            [progressiveScale]="true">
+            @for (post of pinnedPosts(); track post.id) {
+              <div class="swiper-slide">
+                <ds-mobile-interactive-list-item-post
+                  class="swiper-post-item"
+                  [authorName]="post.authorName"
+                  [authorRole]="post.authorRole"
+                  [timestamp]="post.timestamp"
+                  [avatarInitials]="post.avatarInitials || ''"
+                  [avatarType]="post.avatarType"
+                  [avatarSrc]="post.avatarSrc || ''"
+                  [showBadge]="true"
+                  [clickable]="true"
+                  [moreActions]="true"
+                  (postClick)="openPost(post.id)"
+                  (commentClick)="openPost(post.id, true)"
+                  (longPress)="handlePostLongPress(post.id, false)">
+                  
+                  <post-content>
+                    <post-text>{{ post.content }}</post-text>
+                    
+                    @if (post.id === 'post-4') {
+                      <post-attachments>
+                        <ds-mobile-card-inline-file
+                          [fileName]="'Husregler.pdf'"
+                          [fileSize]="'245 KB'"
+                          [variant]="'pdf'"
+                          [layout]="'compact'"
+                          (fileClick)="openHouseRulesPdf()">
+                        </ds-mobile-card-inline-file>
+                      </post-attachments>
+                    }
+                  </post-content>
+                  
+                  <post-actions>
+                    <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                    <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              </div>
+            }
+          </ds-mobile-swiper>
+          
+          <!-- Navigation Buttons -->
+          <div class="swiper-nav-buttons">
+            <ds-icon-button
+              class="swiper-nav-button"
+              icon="remixArrowLeftSLine"
+              variant="ghost"
+              size="sm"
+              [disabled]="isFirstSlide()"
+              (clicked)="slidePrev()"
+              aria-label="Previous post"
+            />
+            <ds-icon-button
+              class="swiper-nav-button"
+              icon="remixArrowRightSLine"
+              variant="ghost"
+              size="sm"
+              [disabled]="isLastSlide()"
+              (clicked)="slideNext()"
+              aria-label="Next post"
+            />
+          </div>
+        </div>
+      </ds-mobile-section>
+      
+      <!-- All Posts Section -->
+      <ds-mobile-section
+        headline="Alle opslag">
+        @if (hasAnyPosts()) {
+          <div class="post-list-wrapper">
+            <!-- All Posts Loop -->
+            @for (post of allPosts(); track post.id) {
+                @if (post.hasInlinePhotos && post.id === 'post-2') {
+                  <!-- Post 2: With multiple images (grid layout) -->
+                  <ds-mobile-interactive-list-item-post
+                    [authorName]="post.authorName"
+                    [authorRole]="post.authorRole"
+                    [timestamp]="post.timestamp"
+                    [avatarInitials]="post.avatarInitials || ''"
+                    [avatarType]="post.avatarType"
+                    [clickable]="true"
+                    [moreActions]="true"
+                    (postClick)="openPost(post.id)"
+                    (commentClick)="openPost(post.id, true)"
+                    (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')">
+                    
+                    <post-content>
+                      <post-text>{{ post.content }}</post-text>
+                      <ds-mobile-inline-photo
+                        [images]="[
+                          '/Assets/Dummy-photos/balcony-view.jpg',
+                          '/Assets/Dummy-photos/staircase.jpg',
+                          '/Assets/Dummy-photos/park.jpg',
+                          '/Assets/Dummy-photos/yard.jpg'
+                        ]"
+                        [author]="{
+                          name: 'Sophie Andersen',
+                          role: 'Lejer',
+                          avatarInitials: 'SA',
+                          avatarType: 'initials',
+                          timestamp: '4t siden'
+                        }"
+                      />
+                    </post-content>
+                    
+                    <post-actions>
+                      <action-like [active]="post.isLiked" [count]="post.likeCount" />
+                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                    </post-actions>
+                  </ds-mobile-interactive-list-item-post>
+                } @else if (post.hasInlinePhotos && post.id === 'post-3.5') {
+                  <!-- Post 3.5: Property Manager showcase with 6+ photos -->
+                  <ds-mobile-interactive-list-item-post
+                    [authorName]="post.authorName"
+                    [authorRole]="post.authorRole"
+                    [timestamp]="post.timestamp"
+                    [avatarInitials]="post.avatarInitials || ''"
+                    [avatarType]="post.avatarType"
+                    [showBadge]="post.showBadge || false"
+                    [clickable]="true"
+                    [moreActions]="true"
+                    (postClick)="openPost(post.id)"
+                    (commentClick)="openPost(post.id, true)"
+                    (longPress)="handlePostLongPress(post.id, false)">
+                    
+                    <post-content>
+                      <post-text>{{ post.content }}</post-text>
+                      <ds-mobile-inline-photo
+                        [images]="[
+                          '/Assets/Dummy-photos/mailboxes.jpg',
+                          '/Assets/Dummy-photos/staircase.jpg',
+                          '/Assets/Dummy-photos/yard.jpg',
+                          '/Assets/Dummy-photos/park.jpg',
+                          '/Assets/Dummy-photos/balcony-view.jpg',
+                          '/Assets/Dummy-photos/handyman.jpg'
+                        ]"
+                        [author]="{
+                          name: 'Karen Nielsen',
+                          role: 'Ejendomsadministrator',
+                          avatarInitials: 'KN',
+                          avatarType: 'initials',
+                          timestamp: '2d siden'
+                        }"
+                        [maxVisible]="5"
+                      />
+                    </post-content>
+                    
+                    <post-actions>
+                      <action-like [count]="post.likeCount" />
+                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                    </post-actions>
+                  </ds-mobile-interactive-list-item-post>
+                } @else {
+                  <!-- Regular Post -->
+                  <ds-mobile-interactive-list-item-post
+                    [authorName]="post.authorName"
+                    [authorRole]="post.authorRole"
+                    [timestamp]="post.timestamp"
+                    [avatarType]="post.avatarType"
+                    [avatarSrc]="post.avatarSrc || ''"
+                    [avatarInitials]="post.avatarInitials || ''"
+                    [clickable]="true"
+                    [moreActions]="true"
+                    (postClick)="openPost(post.id)"
+                    (commentClick)="openPost(post.id, true)"
+                    (longPress)="handlePostLongPress(post.id, post.authorRole === 'Dig')">
+                    
+                    <post-content>
+                      @if (post.content) {
+                        <post-text>{{ post.content }}</post-text>
+                      }
+                      @if (post.imageSrc) {
+                        <post-media>
+                          <img 
+                            [src]="post.imageSrc" 
+                            [alt]="post.imageAlt || 'Posted image'" 
+                            class="clickable-image"
+                            (click)="openImageLightbox(post.imageSrc, post.imageAlt || 'Posted image', post.content, $event)"
+                          />
+                        </post-media>
+                      }
+                    </post-content>
+                    
+                    <post-actions>
+                      <action-like [count]="post.likeCount" [active]="post.isLiked" />
+                      <action-comment [count]="post.commentCount" (commentClick)="openPost(post.id, true)" />
+                    </post-actions>
+                  </ds-mobile-interactive-list-item-post>
+                }
+              }
+            </div>
+          } @else {
+            <!-- Empty State -->
+            <div class="community-empty-state">
+              <img 
+                src="/Assets/Empty%20state-chat.png" 
+                alt="Ingen opslag endnu" 
+                class="empty-state-image"
+              />
+              <h3 class="empty-state-title">Ingen opslag endnu</h3>
+              <p class="empty-state-description">Vær den første til at dele noget med dit fællesskab</p>
+            </div>
+          }
+          
+          <!-- Infinite Scroll -->
+          @if (hasAnyPosts()) {
+            <ion-infinite-scroll
+              threshold="100px"
+              [disabled]="!hasMorePosts() || pageComponent.isOffline()"
+              (ionInfinite)="onInfiniteScroll($event)">
+              <ion-infinite-scroll-content
+                loadingSpinner="crescent">
+              </ion-infinite-scroll-content>
+            </ion-infinite-scroll>
+          }
+        </ds-mobile-section>
+      </ds-mobile-page-main>
+  `
+})
+export class MobileCommunityPageComponent {
+  @ViewChild('pageComponent') pageComponent!: DsMobilePageMainComponent;
+  @ViewChild('pinnedSwiper') pinnedSwiper?: DsMobileSwiperComponent;
+  
+  // Get posts from service (using computed for safe initialization)
+  allPosts = computed(() => this.postsService.posts());
+  
+  // Get pinned posts - filter by isPinned flag
+  // In a real app, these would have a 'pinned' flag in the database
+  pinnedPosts = computed(() => {
+    // Get all posts that are explicitly marked as pinned
+    const allPosts = this.postsService.posts();
+    return allPosts.filter(post => post.isPinned === true);
+  });
+  
+  // Computed to check if there are any posts to display
+  hasAnyPosts = computed(() => {
+    return this.allPosts().length > 0;
+  });
+  
+  // Computed to check if there are more posts to load
+  hasMorePosts = computed(() => {
+    return this.postsService.hasMorePosts();
+  });
+  
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private bottomSheet: DsMobileBottomSheetService,
+    private lightbox: DsMobileLightboxService,
+    private postModal: DsMobilePostDetailModalService,
+    public userService: UserService,
+    private postsService: PostsService
+  ) {}
+  
+  /**
+   * Handle infinite scroll event
+   * Loads more posts when user scrolls to bottom
+   */
+  async onInfiniteScroll(event: any): Promise<void> {
+    console.log('[Community] Infinite scroll triggered');
+    
+    const hasMore = await this.postsService.loadMorePosts();
+    
+    if (hasMore) {
+      console.log('[Community] Loaded more posts');
+    } else {
+      console.log('[Community] No more posts to load');
+    }
+    
+    // Complete the infinite scroll
+    event.target.complete();
+  }
+  
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+
+    // Check if offline and complete immediately
+    if (this.pageComponent?.isOffline()) {
+      console.log('Cannot refresh while offline');
+      event.target.complete();
+      return;
+    }
+
+    // Reset infinite scroll state
+    this.postsService.resetPagination();
+
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+  
+  /**
+   * Open post detail modal
+   * Gets post data from service and opens modal
+   */
+  async openPost(postId: string, focusComment: boolean = false): Promise<void> {
+    console.log('[Community] ===== openPost called =====', postId, 'Focus comment:', focusComment);
+    
+    const post = this.postsService.getPostById(postId);
+    
+    if (post) {
+      // Convert Post model to modal format (add postId and focusComment)
+      // Filter out 'icon' avatarType if present, as modal only supports 'photo' | 'initials'
+      const postData = {
+        ...post,
+        postId: post.id,
+        avatarType: post.avatarType === 'icon' ? undefined : post.avatarType,
+        focusComment
+      };
+      
+      await this.postModal.open(postData, {
+        currentUserName: 'Lars Mikkelsen', // Current user name
+        currentUserInitials: this.userService.avatarInitials()
+      });
+    }
+  }
+  
+  async openPostCreator(): Promise<void> {
+    // Open the post creator as a bottom sheet modal
+    // Using 95% initial height to maximize keyboard auto-open chances
+    const sheet = await this.bottomSheet.create({
+      component: DsMobilePostCreateBottomSheetComponent,
+      componentProps: {
+        // This helps the component know it should auto-focus
+        autoFocus: true
+      },
+      breakpoints: [0, 0.95, 1],
+      initialBreakpoint: 0.95,
+      handle: true
+    });
+    
+    // Handle the result when the sheet is dismissed
+    const result = await sheet.onWillDismiss();
+    if (result.role === 'post' && result.data) {
+      console.log('New post created:', result.data);
+      
+      // Create a new post object
+      const newPost: Post = {
+        id: `user-post-${Date.now()}`, // Generate unique ID
+        authorName: 'Lars Mikkelsen', // Current user name
+        authorRole: 'Dig',
+        timestamp: 'Lige nu',
+        avatarType: this.userService.avatarType() as 'photo' | 'initials' | 'icon',
+        avatarSrc: this.userService.avatarSrc(),
+        avatarInitials: this.userService.avatarInitials(),
+        content: result.data.content,
+        imageSrc: result.data.images && result.data.images.length > 0 ? result.data.images[0] : undefined,
+        imageAlt: result.data.images && result.data.images.length > 0 ? 'Slået billede op' : undefined,
+        isLiked: false,
+        likeCount: 0,
+        commentCount: 0,
+        comments: []
+      };
+      
+      // Add to the beginning of the posts array via service
+      this.postsService.addPost(newPost);
+    }
+  }
+  
+  /**
+   * Open an image in the lightbox viewer
+   * Prevents the post click event from firing
+   */
+  async openImageLightbox(imageSrc: string, title: string, description: string, event: Event): Promise<void> {
+    console.log('[Community] Opening lightbox for image:', imageSrc);
+    
+    // Prevent the post card click event from firing
+    event.stopPropagation();
+    
+    const authorMeta: LightboxAuthor = {
+      name: 'Sophie Andersen',
+      role: 'Lejer',
+      avatarInitials: 'SA',
+      timestamp: '4t siden'
+    };
+    
+    // Open the lightbox with the image
+    await this.lightbox.open({
+      images: [
+        {
+          type: 'image',
+          src: imageSrc,
+          alt: title,
+          title: title,
+          description: description,
+          isLiked: true,
+          likeCount: 156,
+          commentCount: 34
+        }
+      ],
+      author: authorMeta,
+      enableZoom: true,
+      showControls: false, // Single image, no need for controls
+      showActions: true, // Show like & comment actions
+      showInfo: true
+    });
+  }
+
+  async openHouseRulesPdf(): Promise<void> {
+    console.log('[Community] Opening House Rules PDF');
+    
+    // Author metadata
+    const authorMeta: LightboxAuthor = {
+      name: 'Karen Nielsen',
+      role: 'Ejendomsadministrator',
+      avatarInitials: 'KN',
+      timestamp: '2d siden'
+    };
+    
+    // Open the PDF lightbox
+    // Use absolute path for production deployment (Vercel, etc.)
+    await this.lightbox.openPdf({
+      pdf: {
+        type: 'pdf',
+        src: '/Assets/House_Rules.pdf', // Capital A to match public/Assets folder structure
+        title: 'House Rules',
+        description: 'Building regulations and community guidelines',
+        fileSize: 250880, // 245 KB in bytes
+        pageCount: 8
+      },
+      author: authorMeta
+    });
+  }
+  
+  /**
+   * Handle long press on a post to show action sheet
+   */
+  async handlePostLongPress(postId: string, isOwnPost: boolean): Promise<void> {
+    console.log('[Community] Post long pressed:', postId, 'isOwn:', isOwnPost);
+    
+    const sheet = await this.bottomSheet.create({
+      component: DsMobilePostActionsBottomSheetComponent,
+      componentProps: {
+        isOwnContent: isOwnPost
+      },
+      breakpoints: [0, 1],
+      initialBreakpoint: 1,
+      handle: true,
+      backdropDismiss: true,
+      cssClass: 'auto-height'
+    });
+    
+    const result = await sheet.onWillDismiss();
+    
+    if (result.role === 'select' && result.data) {
+      const action = (result.data as PostActionResult).action;
+      
+      switch (action) {
+        case 'edit':
+          console.log('Edit post:', postId);
+          
+          // Get post from service
+          const post = this.postsService.getPostById(postId);
+          if (!post) {
+            console.error('Post not found:', postId);
+            return;
+          }
+          
+          // Open the bottom sheet in edit mode
+          const editSheet = await this.bottomSheet.create({
+            component: DsMobilePostCreateBottomSheetComponent,
+            componentProps: {
+              autoFocus: true,
+              isEditMode: true,
+              postId: postId,
+              initialContent: post.content
+            },
+            breakpoints: [0, 0.95, 1],
+            initialBreakpoint: 0.95,
+            handle: true,
+            backdropBlur: true,
+            backdropOpacity: 0.6
+          });
+          
+          // Handle the result when the sheet is dismissed
+          const editResult = await editSheet.onWillDismiss();
+          if (editResult.role === 'post' && editResult.data) {
+            console.log('Post updated:', editResult.data);
+            
+            // Update the post via service
+            this.postsService.updatePost(postId, {
+              content: editResult.data.content,
+              timestamp: 'Lige nu'
+            });
+          }
+          break;
+          
+        case 'delete':
+          console.log('Delete post:', postId);
+          if (confirm('Er du sikker på, at du vil slette dette opslag?')) {
+            this.postsService.deletePost(postId);
+          }
+          break;
+          
+        case 'like':
+          console.log('Like post:', postId);
+          // Toggle like - in a real app, this would call an API
+          const likePost = this.postsService.getPostById(postId);
+          if (likePost) {
+            this.postsService.updatePost(postId, {
+              isLiked: !likePost.isLiked,
+              likeCount: likePost.isLiked ? likePost.likeCount - 1 : likePost.likeCount + 1
+            });
+          }
+          break;
+          
+        case 'reply':
+          console.log('Reply to post:', postId);
+          // Open the post detail modal with comment input focused
+          await this.openPost(postId, true);
+          break;
+      }
+    }
+  }
+  
+  /**
+   * Navigate to previous slide in pinned posts
+   */
+  slidePrev(): void {
+    this.pinnedSwiper?.slidePrev();
+  }
+  
+  /**
+   * Navigate to next slide in pinned posts
+   */
+  slideNext(): void {
+    this.pinnedSwiper?.slideNext();
+  }
+  
+  /**
+   * Check if currently on first slide
+   */
+  isFirstSlide(): boolean {
+    return this.pinnedSwiper?.isBeginning() ?? true;
+  }
+  
+  /**
+   * Check if currently on last slide
+   */
+  isLastSlide(): boolean {
+    return this.pinnedSwiper?.isEnd() ?? true;
+  }
+}
+