@ifc-lite/viewer 1.6.0 → 1.7.0

package/src/components/viewer/bcf/BCFTopicList.tsx

@@ -0,0 +1,239 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * BCFTopicList - Topic list with filtering and sorting for the BCF panel.
+ */
+
+import React, { useCallback, useState, useMemo } from 'react';
+import {
+  Plus,
+  MessageSquare,
+  Camera,
+  Filter,
+  Edit2,
+  User,
+  Calendar,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import type { BCFTopic } from '@ifc-lite/bcf';
+import { StatusBadge, PriorityBadge, formatDate, TOPIC_STATUSES } from './bcfHelpers';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface BCFTopicListProps {
+  topics: BCFTopic[];
+  onSelectTopic: (topicId: string) => void;
+  onCreateTopic: () => void;
+  statusFilter: string;
+  onStatusFilterChange: (status: string) => void;
+  author: string;
+  onSetAuthor: (author: string) => void;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function BCFTopicList({
+  topics,
+  onSelectTopic,
+  onCreateTopic,
+  statusFilter,
+  onStatusFilterChange,
+  author,
+  onSetAuthor,
+}: BCFTopicListProps) {
+  const [editingEmail, setEditingEmail] = useState(false);
+  const [emailInput, setEmailInput] = useState(author);
+  const isDefaultEmail = author === 'user@example.com';
+
+  const handleSaveEmail = useCallback(() => {
+    if (emailInput.trim() && emailInput.includes('@')) {
+      onSetAuthor(emailInput.trim());
+      setEditingEmail(false);
+    }
+  }, [emailInput, onSetAuthor]);
+  const filteredTopics = useMemo(() => {
+    if (!statusFilter || statusFilter === 'all') return topics;
+    return topics.filter(
+      (t) => t.topicStatus?.toLowerCase() === statusFilter.toLowerCase()
+    );
+  }, [topics, statusFilter]);
+
+  // Sort by creation date (newest first)
+  const sortedTopics = useMemo(() => {
+    return [...filteredTopics].sort(
+      (a, b) => new Date(b.creationDate).getTime() - new Date(a.creationDate).getTime()
+    );
+  }, [filteredTopics]);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Filter */}
+      <div className="flex items-center gap-2 px-3 py-2 border-b border-border">
+        <Filter className="h-4 w-4 text-muted-foreground" />
+        <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+          <SelectTrigger className="h-8 flex-1">
+            <SelectValue placeholder="All statuses" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">All statuses</SelectItem>
+            {TOPIC_STATUSES.map((status) => (
+              <SelectItem key={status} value={status.toLowerCase()}>
+                {status}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button size="sm" variant="outline" onClick={onCreateTopic}>
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Topic List */}
+      <ScrollArea className="flex-1">
+        {sortedTopics.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-8 px-4 text-muted-foreground text-sm">
+            <MessageSquare className="h-8 w-8 mb-2 opacity-50" />
+            <p>No topics</p>
+            <Button
+              variant="link"
+              size="sm"
+              onClick={onCreateTopic}
+              className="mt-1"
+            >
+              Create first topic
+            </Button>
+
+            {/* Email setup nudge */}
+            <div className="mt-6 w-full max-w-xs">
+              <div className="border border-border rounded-lg p-3 bg-muted/30">
+                {editingEmail ? (
+                  <div className="space-y-2">
+                    <Label className="text-xs text-muted-foreground">Your email for BCF authorship</Label>
+                    <Input
+                      value={emailInput}
+                      onChange={(e) => setEmailInput(e.target.value)}
+                      placeholder="your@email.com"
+                      className="h-8 text-sm"
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') handleSaveEmail();
+                        if (e.key === 'Escape') setEditingEmail(false);
+                      }}
+                      autoFocus
+                    />
+                    <div className="flex gap-2 justify-end">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => {
+                          setEmailInput(author);
+                          setEditingEmail(false);
+                        }}
+                        className="h-7 text-xs"
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        size="sm"
+                        onClick={handleSaveEmail}
+                        disabled={!emailInput.trim() || !emailInput.includes('@')}
+                        className="h-7 text-xs"
+                      >
+                        Save
+                      </Button>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-between gap-2">
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs text-muted-foreground mb-0.5">Author</p>
+                      <p className={`text-sm truncate ${isDefaultEmail ? 'text-amber-600 dark:text-amber-400' : 'text-foreground'}`}>
+                        {author}
+                      </p>
+                    </div>
+                    <Button
+                      variant={isDefaultEmail ? 'default' : 'ghost'}
+                      size="sm"
+                      onClick={() => {
+                        setEmailInput(author);
+                        setEditingEmail(true);
+                      }}
+                      className="h-7 text-xs shrink-0"
+                    >
+                      {isDefaultEmail ? 'Set email' : <Edit2 className="h-3 w-3" />}
+                    </Button>
+                  </div>
+                )}
+              </div>
+              {isDefaultEmail && !editingEmail && (
+                <p className="text-xs text-muted-foreground mt-2 text-center">
+                  Set your email to identify your issues and comments
+                </p>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="divide-y divide-border">
+            {sortedTopics.map((topic) => (
+              <button
+                key={topic.guid}
+                onClick={() => onSelectTopic(topic.guid)}
+                className="w-full text-left p-3 hover:bg-accent/50 transition-colors"
+              >
+                <div className="flex items-start justify-between gap-2 mb-1">
+                  <h4 className="font-medium text-sm line-clamp-1 flex-1">
+                    {topic.title}
+                  </h4>
+                  <StatusBadge status={topic.topicStatus} />
+                </div>
+                {topic.description && (
+                  <p className="text-xs text-muted-foreground line-clamp-2 mb-2">
+                    {topic.description}
+                  </p>
+                )}
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <PriorityBadge priority={topic.priority} />
+                  <span className="flex items-center gap-1">
+                    <User className="h-3 w-3" />
+                    {topic.creationAuthor.split('@')[0]}
+                  </span>
+                  <span className="flex items-center gap-1">
+                    <Calendar className="h-3 w-3" />
+                    {formatDate(topic.creationDate)}
+                  </span>
+                  {topic.comments.length > 0 && (
+                    <span className="flex items-center gap-1">
+                      <MessageSquare className="h-3 w-3" />
+                      {topic.comments.length}
+                    </span>
+                  )}
+                  {topic.viewpoints.length > 0 && (
+                    <span className="flex items-center gap-1">
+                      <Camera className="h-3 w-3" />
+                      {topic.viewpoints.length}
+                    </span>
+                  )}
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}

package/src/components/viewer/bcf/bcfHelpers.tsx

@@ -0,0 +1,109 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+/**
+ * Shared constants, helper components, and utility functions for BCF panel components.
+ */
+
+import { useMemo } from 'react';
+import { AlertCircle, CheckCircle, Clock } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+export const TOPIC_TYPES = ['Issue', 'Request', 'Comment', 'Error', 'Warning', 'Info'];
+export const TOPIC_STATUSES = ['Open', 'In Progress', 'Resolved', 'Closed'];
+export const PRIORITIES = ['High', 'Medium', 'Low'];
+
+// ============================================================================
+// Helper Components
+// ============================================================================
+
+export function StatusBadge({ status }: { status?: string }) {
+  const variant = useMemo(() => {
+    switch (status?.toLowerCase()) {
+      case 'open':
+        return 'default';
+      case 'in progress':
+        return 'secondary';
+      case 'resolved':
+      case 'closed':
+        return 'outline';
+      default:
+        return 'default';
+    }
+  }, [status]);
+
+  const Icon = useMemo(() => {
+    switch (status?.toLowerCase()) {
+      case 'open':
+        return AlertCircle;
+      case 'in progress':
+        return Clock;
+      case 'resolved':
+      case 'closed':
+        return CheckCircle;
+      default:
+        return AlertCircle;
+    }
+  }, [status]);
+
+  return (
+    <Badge variant={variant} className="text-xs gap-1">
+      <Icon className="h-3 w-3" />
+      {status || 'Open'}
+    </Badge>
+  );
+}
+
+export function PriorityBadge({ priority }: { priority?: string }) {
+  const colorClass = useMemo(() => {
+    switch (priority?.toLowerCase()) {
+      case 'high':
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+      case 'medium':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
+      case 'low':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+      default:
+        return '';
+    }
+  }, [priority]);
+
+  if (!priority) return null;
+
+  return (
+    <Badge variant="outline" className={`text-xs ${colorClass}`}>
+      {priority}
+    </Badge>
+  );
+}
+
+// ============================================================================
+// Date Formatters
+// ============================================================================
+
+export function formatDate(isoDate: string): string {
+  const date = new Date(isoDate);
+  if (isNaN(date.getTime())) return isoDate;
+  return date.toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+export function formatDateTime(isoDate: string): string {
+  const date = new Date(isoDate);
+  if (isNaN(date.getTime())) return isoDate;
+  return date.toLocaleString(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}

package/src/components/viewer/hierarchy/HierarchyNode.tsx

@@ -0,0 +1,328 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+
+import {
+  ChevronRight,
+  Building2,
+  Layers,
+  MapPin,
+  FolderKanban,
+  Square,
+  Box,
+  DoorOpen,
+  Eye,
+  EyeOff,
+  FileBox,
+  X,
+} from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import type { TreeNode } from './types';
+import { isSpatialContainer } from './types';
+
+const TYPE_ICONS: Record<string, React.ElementType> = {
+  'unified-storey': Layers,
+  'model-header': FileBox,
+  IfcProject: FolderKanban,
+  IfcSite: MapPin,
+  IfcBuilding: Building2,
+  IfcBuildingStorey: Layers,
+  IfcSpace: Box,
+  IfcWall: Square,
+  IfcWallStandardCase: Square,
+  IfcDoor: DoorOpen,
+  element: Box,
+  default: Box,
+};
+
+export interface HierarchyNodeProps {
+  node: TreeNode;
+  virtualRow: { size: number; start: number };
+  isSelected: boolean;
+  nodeHidden: boolean;
+  isMultiModel: boolean;
+  modelsCount: number;
+  modelVisible?: boolean;
+  onNodeClick: (node: TreeNode, e: React.MouseEvent) => void;
+  onToggleExpand: (nodeId: string) => void;
+  onVisibilityToggle: (node: TreeNode) => void;
+  onModelVisibilityToggle: (modelId: string, e: React.MouseEvent) => void;
+  onRemoveModel: (modelId: string, e: React.MouseEvent) => void;
+  onModelHeaderClick: (modelId: string, nodeId: string, hasChildren: boolean) => void;
+}
+
+export function HierarchyNode({
+  node,
+  virtualRow,
+  isSelected,
+  nodeHidden,
+  isMultiModel,
+  modelsCount,
+  modelVisible,
+  onNodeClick,
+  onToggleExpand,
+  onVisibilityToggle,
+  onModelVisibilityToggle,
+  onRemoveModel,
+  onModelHeaderClick,
+}: HierarchyNodeProps) {
+  const Icon = TYPE_ICONS[node.type] || TYPE_ICONS.default;
+
+  // Model header nodes (for visibility control and expansion)
+  if (node.type === 'model-header' && node.id.startsWith('model-')) {
+    const modelId = node.modelIds[0];
+
+    return (
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: `${virtualRow.size}px`,
+          transform: `translateY(${virtualRow.start}px)`,
+        }}
+      >
+        <div
+          className={cn(
+            'flex items-center gap-1 px-2 py-1.5 border-l-4 transition-all group',
+            'hover:bg-zinc-50 dark:hover:bg-zinc-900',
+            'border-transparent',
+            !modelVisible && 'opacity-50',
+            node.hasChildren && 'cursor-pointer'
+          )}
+          style={{ paddingLeft: '8px' }}
+          onClick={() => onModelHeaderClick(modelId, node.id, node.hasChildren)}
+        >
+          {/* Expand/collapse chevron */}
+          {node.hasChildren ? (
+            <ChevronRight
+              className={cn(
+                'h-3.5 w-3.5 text-zinc-400 transition-transform shrink-0',
+                node.isExpanded && 'rotate-90'
+              )}
+            />
+          ) : (
+            <div className="w-3.5" />
+          )}
+
+          <FileBox className="h-3.5 w-3.5 text-primary shrink-0" />
+          <span className="flex-1 text-sm truncate ml-1.5 text-zinc-900 dark:text-zinc-100">
+            {node.name}
+          </span>
+
+          {node.elementCount !== undefined && (
+            <span className="text-[10px] font-mono bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 text-zinc-500 dark:text-zinc-400 rounded-none">
+              {node.elementCount.toLocaleString()}
+            </span>
+          )}
+
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onModelVisibilityToggle(modelId, e);
+                }}
+                className="p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+              >
+                {modelVisible ? (
+                  <Eye className="h-3.5 w-3.5 text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100" />
+                ) : (
+                  <EyeOff className="h-3.5 w-3.5 text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs">{modelVisible ? 'Hide model' : 'Show model'}</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {modelsCount > 1 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onRemoveModel(modelId, e);
+                  }}
+                  className="p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
+                >
+                  <X className="h-3.5 w-3.5 text-zinc-400 hover:text-red-500" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p className="text-xs">Remove model</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Regular node rendering (spatial hierarchy nodes and elements)
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: `${virtualRow.size}px`,
+        transform: `translateY(${virtualRow.start}px)`,
+      }}
+    >
+      <div
+        className={cn(
+          'flex items-center gap-1 px-2 py-1.5 border-l-4 transition-all group hierarchy-item',
+          // No selection styling for spatial containers in multi-model mode
+          isMultiModel && isSpatialContainer(node.type)
+            ? 'border-transparent cursor-default'
+            : cn(
+                'cursor-pointer',
+                isSelected ? 'border-l-primary font-medium selected' : 'border-transparent'
+              ),
+          nodeHidden && 'opacity-50 grayscale'
+        )}
+        style={{
+          paddingLeft: `${node.depth * 16 + 8}px`,
+          // No selection highlighting for spatial containers in multi-model mode
+          backgroundColor: isSelected && !(isMultiModel && isSpatialContainer(node.type))
+            ? 'var(--hierarchy-selected-bg)' : undefined,
+          color: isSelected && !(isMultiModel && isSpatialContainer(node.type))
+            ? 'var(--hierarchy-selected-text)' : undefined,
+        }}
+        onClick={(e) => {
+          if ((e.target as HTMLElement).closest('button') === null) {
+            onNodeClick(node, e);
+          }
+        }}
+        onMouseDown={(e) => {
+          if ((e.target as HTMLElement).closest('button') === null) {
+            e.preventDefault();
+          }
+        }}
+      >
+        {/* Expand/Collapse */}
+        {node.hasChildren ? (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onToggleExpand(node.id);
+            }}
+            className="p-0.5 hover:bg-zinc-200 dark:hover:bg-zinc-700 rounded-none mr-1"
+          >
+            <ChevronRight
+              className={cn(
+                'h-3.5 w-3.5 transition-transform duration-200',
+                node.isExpanded && 'rotate-90'
+              )}
+            />
+          </button>
+        ) : (
+          <div className="w-5" />
+        )}
+
+        {/* Visibility Toggle - hide for spatial containers (Project/Site/Building) in multi-model mode */}
+        {!(isMultiModel && isSpatialContainer(node.type)) && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onVisibilityToggle(node);
+                }}
+                className={cn(
+                  'p-0.5 opacity-0 group-hover:opacity-100 transition-opacity mr-1',
+                  nodeHidden && 'opacity-100'
+                )}
+              >
+                {node.isVisible ? (
+                  <Eye className="h-3 w-3 text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100" />
+                ) : (
+                  <EyeOff className="h-3 w-3 text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100" />
+                )}
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs">
+                {node.isVisible ? 'Hide' : 'Show'}
+              </p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {/* Type Icon */}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Icon className="h-3.5 w-3.5 shrink-0 text-zinc-500 dark:text-zinc-400" />
+          </TooltipTrigger>
+          <TooltipContent>
+            <p className="text-xs">{node.type}</p>
+          </TooltipContent>
+        </Tooltip>
+
+        {/* Name */}
+        <span className={cn(
+          'flex-1 text-sm truncate ml-1.5',
+          isSpatialContainer(node.type)
+            ? 'font-medium text-zinc-900 dark:text-zinc-100'
+            : 'text-zinc-700 dark:text-zinc-300',
+          nodeHidden && 'line-through decoration-zinc-400 dark:decoration-zinc-600'
+        )}>{node.name}</span>
+
+        {/* Storey Elevation */}
+        {node.storeyElevation !== undefined && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-[10px] font-mono bg-emerald-100 dark:bg-emerald-950 px-1.5 py-0.5 border border-emerald-200 dark:border-emerald-800 text-emerald-600 dark:text-emerald-400 rounded-none">
+                {node.storeyElevation >= 0 ? '+' : ''}{node.storeyElevation.toFixed(2)}m
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs">Elevation: {node.storeyElevation >= 0 ? '+' : ''}{node.storeyElevation.toFixed(2)}m</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+
+        {/* Element Count */}
+        {node.elementCount !== undefined && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="text-[10px] font-mono bg-zinc-100 dark:bg-zinc-950 px-1.5 py-0.5 border border-zinc-200 dark:border-zinc-800 text-zinc-500 dark:text-zinc-400 rounded-none">
+                {node.elementCount}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p className="text-xs">{node.elementCount} {node.elementCount === 1 ? 'element' : 'elements'}</p>
+            </TooltipContent>
+          </Tooltip>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export interface SectionHeaderProps {
+  icon: React.ElementType;
+  title: string;
+  count?: number;
+}
+
+export function SectionHeader({ icon: IconComponent, title, count }: SectionHeaderProps) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 bg-zinc-100 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800">
+      <IconComponent className="h-3.5 w-3.5 text-zinc-500" />
+      <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
+        {title}
+      </span>
+      {count !== undefined && (
+        <span className="text-[10px] font-mono text-zinc-400 dark:text-zinc-500 ml-auto">
+          {count}
+        </span>
+      )}
+    </div>
+  );
+}