@propbinder/mobile-design 0.2.50 → 0.2.52

package/src/pages/post-create.page.ts

@@ -1,311 +0,0 @@
-import { Component, signal, ViewChild, ElementRef, AfterViewInit, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import {
-  DsAvatarComponent,
-  DsIconComponent,
-  DsButtonComponent
-} from '@propbinder/design-system';
-import { DsMobilePageDetailsComponent } from '../components/page-details';
-import { UserService } from '../services/user.service';
-
-/**
- * PostCreatePageComponent
- * 
- * Full-screen detail page for creating new posts in the community feed.
- * Features Threads-inspired interface with rich text editing capabilities.
- */
-@Component({
-  selector: 'app-post-create-page',
-  standalone: true,
-  imports: [
-    CommonModule,
-    FormsModule,
-    DsAvatarComponent,
-    DsIconComponent,
-    DsButtonComponent,
-    DsMobilePageDetailsComponent
-  ],
-  styles: [`
-    .post-create-container {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      max-width: 640px;
-    }
-    
-    /* ============================================
-       CONTENT AREA
-       ============================================ */
-    
-    .content {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px;
-    }
-    
-    .post-composer {
-      display: flex;
-      gap: 12px;
-      margin-bottom: 24px;
-      align-items: flex-start;
-    }
-    
-    .post-composer__avatar {
-      flex-shrink: 0;
-      padding-top: 2px;
-    }
-    
-    .post-composer__main {
-      flex: 1;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
-      gap: 12px;
-    }
-    
-    .post-composer__header {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      height: 32px;
-    }
-    
-    .post-composer__username {
-      font-family: 'Brockmann', sans-serif;
-      font-size: 15px;
-      font-weight: 600;
-      line-height: 20px;
-      letter-spacing: -0.3px;
-      color: var(--color-text-primary, #1a1a1a);
-    }
-    
-    .post-composer__textarea {
-      width: 100%;
-      min-height: 120px;
-      border: none;
-      outline: none;
-      resize: none;
-      font-family: 'Brockmann', sans-serif;
-      font-size: 15px;
-      font-weight: 400;
-      line-height: 22px;
-      letter-spacing: -0.3px;
-      color: var(--color-text-primary, #1a1a1a);
-      background: transparent;
-      padding: 0;
-    }
-    
-    .post-composer__textarea::placeholder {
-      color: var(--color-text-tertiary, #999999);
-    }
-    
-    .post-composer__actions {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-    }
-    
-    .post-composer__action-btns {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-    
-    .post-composer__action-btn {
-      background: none;
-      border: none;
-      padding: 0;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary, #737373);
-      transition: color 0.2s ease;
-    }
-    
-    .post-composer__action-btn:hover {
-      color: var(--color-text-primary, #1a1a1a);
-    }
-    
-    /* Thread connector line */
-    .thread-line {
-      position: absolute;
-      left: 35px;
-      top: 60px;
-      bottom: 0;
-      width: 2px;
-      background: var(--border-color-default);
-    }
-    
-    /* ============================================
-       MOBILE OPTIMIZATIONS
-       ============================================ */
-    
-    @media (max-width: 768px) {
-      .content {
-        padding: 12px 16px;
-      }
-    }
-  `],
-  template: `
-    <ds-mobile-page-details
-      [title]="pageTitle()"
-      [backRoute]="'/mobile-tabs-example/announcements'"
-      (back)="handleCancel()">
-      
-      <div class="post-create-container">
-        <div class="post-composer">
-          <div class="post-composer__avatar">
-            <ds-avatar 
-              [initials]="userService.avatarInitials()"
-              [type]="userService.avatarType()"
-              [src]="userService.avatarSrc()"
-              size="md" />
-          </div>
-          
-          <div class="post-composer__main">
-            <div class="post-composer__header">
-              <span class="post-composer__username">{{ username() }}</span>
-            </div>
-            
-            <textarea
-              #textareaInput
-              class="post-composer__textarea"
-              [(ngModel)]="postContent"
-              [placeholder]="placeholder()"
-              (input)="handleInput()">
-            </textarea>
-            
-            <div class="post-composer__actions">
-              <div class="post-composer__action-btns">
-                <button class="post-composer__action-btn" (click)="handleAddImage()">
-                  <ds-icon name="remixImageLine" size="22px" />
-                </button>
-                <button class="post-composer__action-btn" (click)="handleAddEmoji()">
-                  <ds-icon name="remixEmotionLine" size="22px" />
-                </button>
-              </div>
-              
-              <ds-button
-                variant="primary"
-                size="md"
-                [disabled]="!canPost()"
-                (clicked)="handlePost()">
-                {{ submitButtonLabel() }}
-              </ds-button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </ds-mobile-page-details>
-  `
-})
-export class PostCreatePageComponent implements AfterViewInit, OnInit {
-  @ViewChild('textareaInput') textareaInput?: ElementRef<HTMLTextAreaElement>;
-  
-  postContent = '';
-  username = signal('Lars Mikkelsen');
-  placeholder = signal("What's new?");
-  
-  // Edit mode state
-  isEditMode = signal(false);
-  postId = signal<string | null>(null);
-  pageTitle = signal('New post');
-  submitButtonLabel = signal('Post');
-  
-  constructor(
-    private router: Router,
-    private route: ActivatedRoute,
-    public userService: UserService
-  ) {}
-  
-  ngOnInit(): void {
-    // Check for edit mode via query parameters
-    this.route.queryParams.subscribe(params => {
-      const editMode = params['edit'] === 'true';
-      const postId = params['id'];
-      const content = params['content'];
-      
-      if (editMode && postId) {
-        this.isEditMode.set(true);
-        this.postId.set(postId);
-        this.pageTitle.set('Edit post');
-        this.submitButtonLabel.set('Save');
-        
-        // Prefill content if provided
-        if (content) {
-          this.postContent = decodeURIComponent(content);
-        }
-      } else {
-        // Reset to create mode
-        this.isEditMode.set(false);
-        this.postId.set(null);
-        this.pageTitle.set('New post');
-        this.submitButtonLabel.set('Post');
-        this.postContent = '';
-      }
-    });
-  }
-  
-  ngAfterViewInit(): void {
-    // Focus the textarea after view initialization to trigger keyboard on mobile
-    setTimeout(() => {
-      this.textareaInput?.nativeElement.focus();
-    }, 300);
-  }
-  
-  handleInput(): void {
-    // Handle text input changes
-  }
-  
-  canPost(): boolean {
-    return this.postContent.trim().length > 0;
-  }
-  
-  handleCancel(): void {
-    if (this.postContent.trim().length > 0) {
-      // Show confirmation dialog
-      const confirmed = confirm('Discard this post?');
-      if (confirmed) {
-        this.router.navigate(['/mobile-tabs-example/community']);
-      }
-    } else {
-      this.router.navigate(['/mobile-tabs-example/community']);
-    }
-  }
-  
-  handlePost(): void {
-    if (!this.canPost()) return;
-    
-    if (this.isEditMode()) {
-      console.log('Updating post:', this.postId(), this.postContent);
-      // TODO: Implement post update logic
-      // this.postService.updatePost(this.postId(), this.postContent).subscribe(() => {
-      //   this.router.navigate(['/mobile-tabs-example/community']);
-      // });
-    } else {
-      console.log('Creating post:', this.postContent);
-      // TODO: Implement post creation logic
-      // this.postService.createPost(this.postContent).subscribe(() => {
-      //   this.router.navigate(['/mobile-tabs-example/community']);
-      // });
-    }
-    
-    // For now, just navigate back
-    this.router.navigate(['/mobile-tabs-example/community']);
-  }
-  
-  handleAddImage(): void {
-    console.log('Add image');
-    // TODO: Open image picker
-  }
-  
-  handleAddEmoji(): void {
-    console.log('Add emoji');
-    // TODO: Open emoji picker
-  }
-}
-

package/src/pages/post-detail.page.ts

@@ -1,296 +0,0 @@
-import { Component } from '@angular/core';
-import { DsMobilePageDetailsComponent } from '../components/page-details';
-import { 
-  DsMobileInteractiveListItemPostComponent,
-  PostContentComponent,
-  PostTextComponent,
-  PostMediaComponent,
-  PostActionsComponent,
-  ActionLikeComponent,
-  ActionCommentComponent
-} from '../components/interactive-list-item-post';
-import { DsMobileCommentComponent } from '../components/comment';
-import { DsMobileLightboxService, LightboxAuthor } from '../components/lightbox';
-import { DsMobileBottomSheetService } from '../components/bottom-sheet/ds-mobile-bottom-sheet.service';
-import { DsMobileCommentActionsBottomSheetComponent, CommentActionResult } from '../components/bottom-sheet';
-
-@Component({
-  selector: 'app-mobile-post-detail-page',
-  standalone: true,
-  imports: [
-    DsMobilePageDetailsComponent,
-    DsMobileInteractiveListItemPostComponent,
-    PostContentComponent,
-    PostTextComponent,
-    PostMediaComponent,
-    PostActionsComponent,
-    ActionLikeComponent,
-    ActionCommentComponent,
-    DsMobileCommentComponent
-  ],
-  styles: [`
-    .post-detail-container {
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-      max-width: 640px;
-    }
-    
-    .post-section {
-      border-bottom: 1px solid var(--border-color-default);
-      padding-bottom: 16px;
-    }
-    
-    .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;
-    }
-    
-    .comments-section {
-      display: flex;
-      flex-direction: column;
-      /* Negative margin to pull comments out by 8px on each side */
-      /* Page has 20px padding, this makes comments effectively 12px from edge */
-      margin-left: -8px;
-      margin-right: -8px;
-    }
-    
-    .comments-header {
-      font-family: 'Brockmann', sans-serif;
-      font-size: 18px;
-      font-weight: 600;
-      line-height: 24px;
-      color: var(--color-text-primary, #1a1a1a);
-      margin-bottom: 16px;
-      /* Add padding to keep header at 20px from edge (8px to offset negative margin) */
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-    
-    .comments-list {
-      display: flex;
-      flex-direction: column;
-    }
-  `],
-  template: `
-    <ds-mobile-page-details title="Opslag">
-      <div class="post-detail-container">
-        <!-- Post Section -->
-        <div class="post-section">
-          <ds-mobile-interactive-list-item-post
-            [authorName]="'Sophie Andersen'"
-            [authorRole]="'Lejer'"
-            [timestamp]="'4t siden'"
-            [avatarInitials]="'SA'"
-            [clickable]="false">
-            
-            <post-content>
-              <post-text>Se denne smukke udsigt fra min altan! Morgenkaffe har aldrig smagt så godt ☕️</post-text>
-              <post-media>
-                <img 
-                  src="/Assets/Dummy-photos/balcony-view.jpg" 
-                  alt="Altanudsigt" 
-                  class="clickable-image"
-                  (click)="openImageLightbox('/Assets/Dummy-photos/balcony-view.jpg', 'Altanudsigt', 'Morgenkaffe har aldrig smagt så godt ☕️')"
-                />
-              </post-media>
-            </post-content>
-            
-            <post-actions>
-              <action-like [active]="true" [count]="156" />
-              <action-comment [count]="34" />
-            </post-actions>
-          </ds-mobile-interactive-list-item-post>
-        </div>
-        
-        <!-- Comments Section -->
-        <div class="comments-section">
-          <h2 class="comments-header">{{ repliesCount }} svar</h2>
-          
-          <div class="comments-list">
-            <ds-mobile-comment
-              [authorName]="'Anders Jensen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'3t siden'"
-              [avatarInitials]="'AJ'"
-              [content]="'Wow, den udsigt er fantastisk! Hvilken etage er du på?'"
-              [likeCount]="12"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Anders Jensen', 'Wow, den udsigt er fantastisk! Hvilken etage er du på?', false)" />
-            
-            <ds-mobile-comment
-              [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"
-              [clickable]="true"
-              [isOwnComment]="true"
-              (longPress)="handleCommentLongPress('Thomas Hansen', 'Smuk! Jeg kan også se byens silhuet fra min lejlighed 🌆', true)" />
-            
-            <ds-mobile-comment
-              [authorName]="'Emma Petersen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'2t siden'"
-              [avatarInitials]="'EP'"
-              [content]="'Dette er præcis derfor jeg elsker at bo her. Godt billede!'"
-              [likeCount]="15"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Emma Petersen', 'Dette er præcis derfor jeg elsker at bo her. Godt billede!', false)" />
-            
-            <ds-mobile-comment
-              [authorName]="'Nikolaj Sørensen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'2t siden'"
-              [avatarInitials]="'NS'"
-              [content]="'Solnedgangene fra den vinkel må være utrolige'"
-              [likeCount]="6"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Nikolaj Sørensen', 'Solnedgangene fra den vinkel må være utrolige', false)" />
-            
-            <ds-mobile-comment
-              [authorName]="'Mette Larsen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'1t siden'"
-              [avatarInitials]="'ML'"
-              [content]="'Giver mig lyst til at få min morgenkaffe på altanen også! ☕'"
-              [likeCount]="9"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Mette Larsen', 'Giver mig lyst til at få min morgenkaffe på altanen også! ☕', false)" />
-            
-            <ds-mobile-comment
-              [authorName]="'Frederik Nielsen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'1t siden'"
-              [avatarInitials]="'FN'"
-              [content]="'Heldig! Min altan vender den anden vej, men stadig pæn'"
-              [likeCount]="4"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Frederik Nielsen', 'Heldig! Min altan vender den anden vej, men stadig pæn', false)" />
-            
-            <ds-mobile-comment
-              [authorName]="'Caroline Jensen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'45m siden'"
-              [avatarInitials]="'CJ'"
-              [content]="'Denne bygning har den bedste udsigt i byen, uden tvivl'"
-              [likeCount]="11"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Caroline Jensen', 'Denne bygning har den bedste udsigt i byen, uden tvivl', false)" />
-            
-            <ds-mobile-comment
-              [authorName]="'Anna Hansen'"
-              [authorRole]="'Lejer'"
-              [timestamp]="'30m siden'"
-              [avatarInitials]="'AH'"
-              [content]="'Jeg skal se din altan en dag! 😍'"
-              [clickable]="true"
-              [isOwnComment]="false"
-              (longPress)="handleCommentLongPress('Anna Hansen', 'Jeg skal se din altan en dag! 😍', false)" />
-          </div>
-        </div>
-      </div>
-    </ds-mobile-page-details>
-  `
-})
-export class MobilePostDetailPageComponent {
-  repliesCount = 6;
-  
-  constructor(
-    private lightbox: DsMobileLightboxService,
-    private bottomSheet: DsMobileBottomSheetService
-  ) {}
-  
-  /**
-   * Open an image in the lightbox viewer
-   */
-  openImageLightbox(imageSrc: string, title: string, description: string): void {
-    const authorMeta: LightboxAuthor = {
-      name: 'Sophie Andersen',
-      role: 'Lejer',
-      avatarInitials: 'SA',
-      timestamp: '4t siden'
-    };
-    
-    this.lightbox.open({
-      showActions: true, // Show like & comment actions
-      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
-    });
-  }
-  
-  /**
-   * Handle long press on a comment to show action sheet
-   */
-  async handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void> {
-    const sheet = await this.bottomSheet.create({
-      component: DsMobileCommentActionsBottomSheetComponent,
-      componentProps: {
-        isOwnContent: isOwnComment
-      },
-      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 CommentActionResult).action;
-      
-      switch (action) {
-        case 'like':
-          console.log('Like comment by', authorName);
-          // Implement like logic
-          break;
-        case 'reply':
-          console.log('Reply to comment by', authorName);
-          // Implement reply logic
-          break;
-        case 'edit':
-          console.log('Edit comment by', authorName);
-          // Implement edit logic
-          break;
-        case 'delete':
-          console.log('Delete comment by', authorName);
-          // Implement delete logic (with confirmation)
-          break;
-      }
-    }
-  }
-}
-