@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/pages/community.page.ts

@@ -1,769 +0,0 @@
-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 {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: -48px;
-      right: -48px;
-      display: flex;
-      justify-content: space-between;
-      pointer-events: none;
-      z-index: 10;
-    }
-    
-    .swiper-nav-button {
-      pointer-events: auto;
-    }
-    
-    /* 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"
-                  (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"
-                    (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"
-                    (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"
-                    (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;
-  }
-}
-