@propbinder/mobile-design 0.0.1 → 0.0.2

package/src/pages/community.page.ts

@@ -0,0 +1,768 @@
+import { Component, signal, computed } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { DsIconComponent } from '@propbinder/design-system';
+import { DsMobilePageMainComponent } from '../components/page-main';
+import { DsMobileContentComponent } from '../components/content';
+import { DsMobileInteractiveListItemPostComponent, PostPdfAttachmentComponent } from '../components/interactive-list-item-post';
+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';
+
+@Component({
+  selector: 'app-mobile-community-page',
+  standalone: true,
+  imports: [
+    DsMobilePageMainComponent,
+    DsMobileContentComponent,
+    DsMobileInteractiveListItemPostComponent,
+    DsMobilePostComposerComponent,
+    PostContentComponent,
+    PostTextComponent,
+    PostMediaComponent,
+    PostAttachmentsComponent,
+    PostActionsComponent,
+    ActionLikeComponent,
+    ActionCommentComponent,
+    PostPdfAttachmentComponent,
+    DsIconComponent,
+    DsMobileInlinePhotoComponent
+  ],
+  styles: [`
+    .post-feed {
+      display: flex;
+      flex-direction: column;
+      max-width: 640px;
+    }
+    
+    .post-list-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+    
+    /* Remove custom dividers - now handled by ds-mobile-list-item */
+    
+    .pinned-posts-section {
+      margin: -12px -12px 12px -12px;
+      padding: 0 12px 12px 12px;
+      box-shadow: var(--box-shadow-sm);
+      border-radius: 16px;
+      border: 1px solid var(--border-color-default);
+    }
+    
+    .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;
+    }
+  `],
+  template: `
+    <ds-mobile-page-main
+      title="Fællesskab"
+      [avatarInitials]="userService.avatarInitials()"
+      [avatarType]="userService.avatarType()"
+      (refresh)="handleRefresh($event)">
+      
+      <!-- Post Composer in header-expandable -->
+      <ds-mobile-post-composer
+        header-content
+        [avatarInitials]="userService.avatarInitials()"
+        [avatarType]="userService.avatarType()"
+        [avatarSrc]="userService.avatarSrc()"
+        (composerClick)="openPostCreator()"
+      />
+      
+      <ds-mobile-content>
+        <div class="post-feed">
+          <!-- Pinned Posts Section -->
+          <div class="pinned-posts-section">
+            <h2 class="section-headline">
+              <ds-icon name="remixPushpinFill" size="16px" color="primary" />
+              Fastgjorte opslag
+            </h2>
+            
+            <!-- Pinned: Maintenance Announcement -->
+            <ds-mobile-interactive-list-item-post
+              [authorName]="'Karen Nielsen'"
+              [authorRole]="'Ejendomsadministrator'"
+              [timestamp]="'2d siden'"
+              [avatarInitials]="'KN'"
+              [showBadge]="true"
+              [clickable]="true"
+              (postClick)="openPost('4')"
+              (commentClick)="openPost('4', true)"
+              (longPress)="handlePostLongPress('4', false)">
+              
+              <post-content>
+                <post-text>📢 Påmindelse: Bygningsvedligeholdelse planlagt til denne lørdag fra kl. 9 til 14. Vandet vil være midlertidigt lukket. Vær venlig at planlægge derefter!</post-text>
+                
+                <post-attachments>
+                  <post-pdf-attachment
+                    [fileName]="'Husregler.pdf'"
+                    [fileSize]="'245 KB'"
+                    (pdfClick)="openHouseRulesPdf()">
+                  </post-pdf-attachment>
+                </post-attachments>
+              </post-content>
+              
+              <post-actions>
+                <action-like [count]="89" />
+                <action-comment [count]="67" (commentClick)="openPost('4', true)" />
+              </post-actions>
+            </ds-mobile-interactive-list-item-post>
+          </div>
+          
+          <!-- All Posts Section -->
+          <h2 class="section-headline">Alle opslag</h2>
+          
+          @if (hasAnyPosts()) {
+            <div class="post-list-wrapper">
+              <!-- User Created Posts -->
+              @for (post of userPosts(); track $index) {
+                <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)="openUserPost($index)"
+                  (commentClick)="openUserPost($index, true)"
+                  (longPress)="handlePostLongPress($index, 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)="openUserPost($index, true)" />
+                  </post-actions>
+                </ds-mobile-interactive-list-item-post>
+              }
+              
+              <!-- Post 1: Text only -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Anders Jensen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'2t siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('1')"
+                (commentClick)="openPost('1', true)"
+                (longPress)="handlePostLongPress('1', false)">
+                
+                <post-content>
+                  <post-text>Lige flyttet ind i min nye lejlighed! Udlejeren var super hjælpsom gennem hele processen. Virkelig begejstret for at være en del af dette fællesskab! 🏠</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="42" />
+                  <action-comment [count]="12" (commentClick)="openPost('1', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 2: With multiple images (grid layout) -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Sophie Andersen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'4t siden'"
+                [avatarInitials]="'SA'"
+                [clickable]="true"
+                (postClick)="openPost('2')"
+                (commentClick)="openPost('2', true)"
+                (longPress)="handlePostLongPress('2', false)">
+                
+                <post-content>
+                  <post-text>Jeg har taget nogle billeder af vores smukke ejendom i løbet af det sidste par måneder. Fra altanudsigten om morgenen til den nye trappe og fællesområderne. Elsker virkelig at bo her! 🏡✨</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]="true" [count]="156" />
+                  <action-comment [count]="34" (commentClick)="openPost('2', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 3: Question -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Thomas Hansen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'1d siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('3')"
+                (commentClick)="openPost('3', true)"
+                (longPress)="handlePostLongPress('3', false)">
+                
+                <post-content>
+                  <post-text>Kender nogen et fælles fitnesscenter i nærheden? Leder efter anbefalinger til gode træningscentre i området. 🏋️</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [count]="23" />
+                  <action-comment [count]="45" (commentClick)="openPost('3', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 3.5: Property Manager showcase with 6+ photos -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Karen Nielsen'"
+                [authorRole]="'Ejendomsadministrator'"
+                [timestamp]="'2d siden'"
+                [avatarInitials]="'KN'"
+                [showBadge]="true"
+                [clickable]="true"
+                (postClick)="openPost('3.5')"
+                (commentClick)="openPost('3.5', true)"
+                (longPress)="handlePostLongPress('3.5', false)">
+                
+                <post-content>
+                  <post-text>Her er et kig på vores nyligt renoverede fællesområder! Vi har opgraderet postkasserne, trappeafsatsen og gårdområdet. Der er også blevet ansat en ny vicevært. Glæd dig over forbedringerne! 🏢✨</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]="234" />
+                  <action-comment [count]="89" (commentClick)="openPost('3.5', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+
+              <!-- Post 5: Event -->
+              <ds-mobile-interactive-list-item-post
+                [authorName]="'Emma Petersen'"
+                [authorRole]="'Lejer'"
+                [timestamp]="'3d siden'"
+                [avatarType]="'photo'"
+                [avatarSrc]="'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face'"
+                [clickable]="true"
+                (postClick)="openPost('5')"
+                (commentClick)="openPost('5', true)"
+                (longPress)="handlePostLongPress('5', false)">
+                
+                <post-content>
+                  <post-text>Arrangerer en fælles BBQ næste weekend! Alle er inviteret. Tag din yndlingsret med til at dele. Lad os lære hinanden bedre at kende! 🍔🌭</post-text>
+                </post-content>
+                
+                <post-actions>
+                  <action-like [active]="true" [count]="124" />
+                  <action-comment [count]="89" (commentClick)="openPost('5', true)" />
+                </post-actions>
+              </ds-mobile-interactive-list-item-post>
+            </div>
+          } @else {
+            <!-- Empty State -->
+            <div class="community-empty-state">
+              <img 
+                src="/Assets/Empty state-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>
+          }
+        </div>
+      </ds-mobile-content>
+    </ds-mobile-page-main>
+  `
+})
+export class MobileCommunityPageComponent {
+  // Store user-created posts
+  userPosts = signal<any[]>([
+    {
+      id: 'user-post-1',
+      authorName: 'Lars Mikkelsen',
+      authorRole: 'Dig',
+      timestamp: '5m siden',
+      avatarType: 'initials' as 'photo' | 'initials' | 'icon',
+      avatarInitials: 'LM',
+      content: 'Dette er mit første opslag! Ser frem til at forbinde med alle i bygningen. 🏠',
+      isLiked: false,
+      likeCount: 3,
+      commentCount: 1
+    }
+  ]);
+  
+  // Flag to control whether static demo posts are shown
+  // Set to false to see the empty state
+  showStaticPosts = signal(true);
+  
+  // Computed to check if there are any posts to display
+  hasAnyPosts = computed(() => {
+    return this.userPosts().length > 0 || this.showStaticPosts();
+  });
+  
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private bottomSheet: DsMobileBottomSheetService,
+    private lightbox: DsMobileLightboxService,
+    private postModal: DsMobilePostDetailModalService,
+    public userService: UserService
+  ) {}
+  
+  handleRefresh(event: any): void {
+    console.log('Pull-to-refresh triggered');
+    setTimeout(() => {
+      console.log('Refresh complete');
+      event.target.complete();
+    }, 1000);
+  }
+  
+  /**
+   * Open post detail modal
+   * This provides a better UX than route navigation:
+   * - Maintains scroll position
+   * - Native iOS-style modal feel
+   * - Proper close button that works
+   */
+  async openPost(postId: string, focusComment: boolean = false): Promise<void> {
+    console.log('[Community] ===== openPost called =====', postId, 'Focus comment:', focusComment);
+    
+    // Map post ID to post data (in real app, fetch from service)
+    const postDataMap: Record<string, any> = {
+      '1': {
+        postId: '1',
+        authorName: 'Anders Jensen',
+        authorRole: 'Lejer',
+        timestamp: '2t siden',
+        avatarType: 'photo' as const,
+        avatarSrc: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
+        content: 'Lige flyttet ind i min nye lejlighed! Udlejeren var super hjælpsom gennem hele processen. Virkelig begejstret for at være en del af dette fællesskab! 🏠',
+        isLiked: false,
+        likeCount: 42,
+        commentCount: 12,
+        comments: [
+          {
+            authorName: 'Mette Larsen',
+            authorRole: 'Lejer',
+            timestamp: '1t siden',
+            avatarInitials: 'ML',
+            content: 'Velkommen til fællesskabet!',
+            likeCount: 5,
+            isOwnComment: false
+          },
+          {
+            authorName: 'Lars Mikkelsen',
+            authorRole: 'Dig',
+            timestamp: 'Lige nu',
+            avatarInitials: 'LM',
+            content: 'Vxhknbh',
+            likeCount: 0,
+            isOwnComment: true
+          }
+        ]
+      },
+      '2': {
+        postId: '2',
+        authorName: 'Sophie Andersen',
+        authorRole: 'Lejer',
+        timestamp: '4t siden',
+        avatarInitials: 'SA',
+        content: 'Se denne smukke udsigt fra min altan! Morgenkaffe har aldrig smagt så godt ☕️',
+        imageSrc: '/Assets/Dummy-photos/balcony-view.jpg',
+        imageAlt: 'Altanudsigt',
+        isLiked: true,
+        likeCount: 156,
+        commentCount: 34,
+        comments: [
+          {
+            authorName: 'Anders Jensen',
+            authorRole: 'Lejer',
+            timestamp: '3t siden',
+            avatarInitials: 'AJ',
+            content: 'Wow, den udsigt er fantastisk! Hvilken etage er du på?',
+            likeCount: 12,
+            isOwnComment: false
+          },
+          {
+            authorName: 'Thomas Hansen',
+            authorRole: 'Lejer',
+            timestamp: '3t siden',
+            avatarInitials: 'TH',
+            content: 'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆',
+            isLiked: true,
+            likeCount: 8,
+            isOwnComment: false
+          },
+          {
+            authorName: 'Lars Mikkelsen',
+            authorRole: 'Dig',
+            timestamp: 'Lige nu',
+            avatarInitials: 'LM',
+            content: 'Vxhknbh',
+            likeCount: 0,
+            isOwnComment: true
+          }
+        ]
+      },
+      '3': {
+        postId: '3',
+        authorName: 'Thomas Hansen',
+        authorRole: 'Lejer',
+        timestamp: '1d siden',
+        avatarType: 'photo' as const,
+        avatarSrc: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
+        content: 'Kender nogen et fælles fitnesscenter i nærheden? Leder efter anbefalinger til gode træningscentre i området. 🏋️',
+        isLiked: false,
+        likeCount: 23,
+        commentCount: 45,
+        comments: []
+      },
+      '4': {
+        postId: '4',
+        authorName: 'Karen Nielsen',
+        authorRole: 'Ejendomsadministrator',
+        timestamp: '2d siden',
+        avatarInitials: 'KN',
+        content: '📢 Påmindelse: Bygningsvedligeholdelse planlagt til denne lørdag fra kl. 9 til 14. Vandet vil være midlertidigt lukket. Vær venlig at planlægge derefter!',
+        isLiked: false,
+        likeCount: 89,
+        commentCount: 67,
+        comments: []
+      },
+      '5': {
+        postId: '5',
+        authorName: 'Emma Petersen',
+        authorRole: 'Lejer',
+        timestamp: '3d siden',
+        avatarType: 'photo' as const,
+        avatarSrc: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop&crop=face',
+        content: 'Arrangerer en fælles BBQ næste weekend! Alle er inviteret. Tag din yndlingsret med til at dele. Lad os lære hinanden bedre at kende! 🍔🌭',
+        isLiked: true,
+        likeCount: 124,
+        commentCount: 89,
+        comments: []
+      }
+    };
+
+    const postData = postDataMap[postId];
+    
+    if (postData) {
+      // Add focusComment flag to postData
+      await this.postModal.open({ ...postData, focusComment });
+    }
+  }
+  
+  /**
+   * Open user-created post detail modal
+   */
+  async openUserPost(index: number, focusComment: boolean = false): Promise<void> {
+    const posts = this.userPosts();
+    const post = posts[index];
+    
+    if (post) {
+      console.log('[Community] Opening user post modal:', index, 'Focus comment:', focusComment);
+      
+      // Convert user post to modal format with empty comments array
+      const postData = {
+        ...post,
+        postId: `user-${index}`,
+        comments: [] // User posts don't have comments yet
+      };
+      
+      await this.postModal.open({ ...postData, focusComment });
+    }
+  }
+  
+  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 = {
+        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
+      };
+      
+      // Add to the beginning of the posts array
+      this.userPosts.update(posts => [newPost, ...posts]);
+    }
+  }
+  
+  /**
+   * 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
+      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(postIdOrIndex: string | number, isOwnPost: boolean): Promise<void> {
+    console.log('[Community] Post long pressed:', postIdOrIndex, '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:', postIdOrIndex);
+          // Open the post create bottom sheet in edit mode
+          let postContent = '';
+          let postId = '';
+          
+          // Get post content based on postIdOrIndex
+          if (typeof postIdOrIndex === 'number') {
+            const post = this.userPosts()[postIdOrIndex];
+            if (post) {
+              postContent = post.content || '';
+              postId = post.id || postIdOrIndex.toString();
+            }
+          } else {
+            // For static posts, we'll need to determine content
+            // For now, use a placeholder
+            postId = postIdOrIndex.toString();
+            postContent = 'Edit this post...';
+          }
+          
+          // Open the bottom sheet in edit mode
+          const editSheet = await this.bottomSheet.create({
+            component: DsMobilePostCreateBottomSheetComponent,
+            componentProps: {
+              autoFocus: true,
+              isEditMode: true,
+              postId: postId,
+              initialContent: postContent
+            },
+            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 in the array
+            if (typeof postIdOrIndex === 'number') {
+              const currentPosts = this.userPosts();
+              const updatedPosts = currentPosts.map((post, index) => 
+                index === postIdOrIndex 
+                  ? { ...post, content: editResult.data.content, timestamp: 'Just now' }
+                  : post
+              );
+              this.userPosts.set(updatedPosts);
+            }
+          }
+          break;
+        case 'delete':
+          console.log('Delete post:', postIdOrIndex);
+          if (confirm('Er du sikker på, at du vil slette dette opslag?')) {
+            // If it's a user post (number index), remove it from the array
+            if (typeof postIdOrIndex === 'number') {
+              const currentPosts = this.userPosts();
+              const updatedPosts = currentPosts.filter((_, index) => index !== postIdOrIndex);
+              this.userPosts.set(updatedPosts);
+            }
+            // Otherwise it's a static post, just show confirmation
+            else {
+              alert('Opslag slettet!');
+            }
+          }
+          break;
+        case 'like':
+          console.log('Like post:', postIdOrIndex);
+          // Toggle like - in a real app, this would call an API
+          alert('Opslag liket!');
+          break;
+        case 'reply':
+          console.log('Reply to post:', postIdOrIndex);
+          // Open the post detail modal with comment input focused
+          if (typeof postIdOrIndex === 'number') {
+            await this.openUserPost(postIdOrIndex, true);
+          } else {
+            await this.openPost(postIdOrIndex, true);
+          }
+          break;
+      }
+    }
+  }
+}
+