@peers-app/peers-ui 0.0.14

package/src/components/group-switcher.tsx

@@ -0,0 +1,469 @@
+import { getMe, getUserContext, Groups, IGroup, newid, newKeys, TrustLevel, UserContext, Users } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { usePromise } from '../hooks';
+
+interface GroupSwitcherProps {
+  colorMode: string;
+}
+
+export function GroupSwitcher({ colorMode }: GroupSwitcherProps) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [allGroups, setAllGroups] = useState<IGroup[]>([]);
+
+  const userContext = usePromise(getUserContext);
+
+  // Load groups from user context
+  useEffect(() => {
+    if (!userContext) return;
+
+    const loadGroups = async () => {
+      const groupsTable = Groups(userContext.userDataContext);
+      const groupsList = await groupsTable.list({ disabled: { $ne: true } });
+      setAllGroups(groupsList);
+    };
+
+    loadGroups();
+  }, [userContext]);
+
+  // Use useMemo to recompute currentGroup when either currentGroupId or allGroups changes
+  const currentGroup = React.useMemo(() => {
+    const currentGroupId = userContext?.currentlyActiveGroupId();
+    if (!currentGroupId) return null;
+    return allGroups.find((g: IGroup) => g.groupId === currentGroupId) || null;
+  }, [allGroups, userContext?.currentlyActiveGroupId()]);
+
+  const handleGroupSelect = (group: IGroup | null) => {
+    if (!userContext) return;
+
+    // Set the active group through user context
+    userContext.currentlyActiveGroupId(group?.groupId || '');
+    setShowDropdown(false);
+  };
+
+  const handleCreateClick = () => {
+    setShowDropdown(false);
+    setShowCreateModal(true);
+  };
+
+  const getGroupIcon = (group: IGroup | null | undefined) => {
+    if (!group) return 'bi-person-fill'; // Personal group icon
+    return group.iconClassName || 'bi-people-fill';
+  };
+
+  const getGroupName = (group: IGroup | null | undefined) => {
+    if (!group) return 'Personal';
+    return group.name;
+  };
+
+  const isDark = colorMode === 'dark';
+
+  return (
+    <>
+      <div className="dropdown">
+        <button
+          className="btn btn-sm me-2 d-flex align-items-center"
+          onClick={() => setShowDropdown(!showDropdown)}
+          title={`Current group: ${getGroupName(currentGroup)}`}
+          style={{
+            padding: '4px 8px',
+            fontSize: '12px',
+            borderRadius: '6px',
+            border: 'none',
+            background: 'transparent',
+            color: isDark ? '#adb5bd' : '#6c757d'
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.backgroundColor = isDark ? '#495057' : '#f8f9fa';
+            e.currentTarget.style.color = isDark ? '#ffffff' : '#0d6efd';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.backgroundColor = 'transparent';
+            e.currentTarget.style.color = isDark ? '#adb5bd' : '#6c757d';
+          }}
+        >
+          <i className={`${getGroupIcon(currentGroup)} me-1`} style={{ fontSize: '14px' }} />
+          <span className="text-truncate" style={{ maxWidth: '80px' }}>
+            {getGroupName(currentGroup)}
+          </span>
+          <i className="bi-chevron-down ms-1" style={{ fontSize: '10px' }} />
+        </button>
+
+        {showDropdown && (
+          <div
+            className={`dropdown-menu show position-absolute ${isDark ? 'dropdown-menu-dark' : ''}`}
+            style={{
+              left: 0,
+              top: '100%',
+              zIndex: 1000,
+              minWidth: '200px',
+              maxHeight: '300px',
+              overflowY: 'auto'
+            }}
+          >
+            {/* Personal Group */}
+            <div
+              className={`dropdown-item d-flex align-items-center ${!currentGroup ? 'active' : ''}`}
+              style={{ cursor: 'pointer' }}
+              onClick={() => handleGroupSelect(null)}
+            >
+              <i className="bi-person-fill me-2" />
+              <span>Personal</span>
+            </div>
+
+            {/* Divider */}
+            {allGroups.length > 0 && (
+              <div className="dropdown-divider" />
+            )}
+
+            {/* Group List */}
+            {allGroups
+              .filter((g: IGroup) => !g.disabled)
+              .map((group: IGroup) => (
+                <div
+                  key={group.groupId}
+                  className={`dropdown-item d-flex align-items-center ${currentGroup?.groupId === group.groupId ? 'active' : ''}`}
+                  style={{ cursor: 'pointer' }}
+                  onClick={() => handleGroupSelect(group)}
+                >
+                  <i className={`${getGroupIcon(group)} me-2`} />
+                  <span className="text-truncate">{group.name}</span>
+                </div>
+              ))}
+
+            {/* Create New Group */}
+            <div className="dropdown-divider" />
+            <div
+              className="dropdown-item d-flex align-items-center"
+              style={{ cursor: 'pointer' }}
+              onClick={handleCreateClick}
+            >
+              <i className="bi-plus-circle me-2" />
+              <span>Create Group</span>
+            </div>
+          </div>
+        )}
+
+        {/* Backdrop to close dropdown */}
+        {showDropdown && (
+          <div
+            className="position-fixed w-100 h-100"
+            style={{ top: 0, left: 0, zIndex: 999 }}
+            onClick={() => setShowDropdown(false)}
+          />
+        )}
+      </div>
+
+      {/* Create Group Modal */}
+      {showCreateModal && userContext && (
+        <CreateGroupModal
+          colorMode={colorMode}
+          userContext={userContext}
+          onClose={() => setShowCreateModal(false)}
+          onGroupCreated={async (groupId: string) => {
+            // Refresh groups list
+            const groupsTable = Groups(userContext.userDataContext);
+            const groupsList = await groupsTable.list({ disabled: { $ne: true } });
+            setAllGroups(groupsList);
+
+            // Switch to new group
+            userContext.currentlyActiveGroupId(groupId);
+            setShowCreateModal(false);
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+interface CreateGroupModalProps {
+  colorMode: string;
+  userContext: UserContext;
+  onClose: () => void;
+  onGroupCreated: (groupId: string) => void;
+}
+
+function CreateGroupModal({ colorMode, userContext, onClose, onGroupCreated }: CreateGroupModalProps) {
+  const [groupName, setGroupName] = useState('');
+  const [iconClassName, setIconClassName] = useState('bi-people-fill');
+  const [description, setDescription] = useState('');
+  const [isCreating, setIsCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isDark = colorMode === 'dark';
+
+  const handleCreate = async () => {
+    // Validate
+    const trimmedName = groupName.trim();
+    if (!trimmedName) {
+      setError('Group name is required');
+      return;
+    }
+
+    if (trimmedName.length > 100) {
+      setError('Group name must be 100 characters or less');
+      return;
+    }
+
+    setIsCreating(true);
+    setError(null);
+
+    try {
+      const groupId = newid();
+      const me = await getMe();
+
+      // Generate cryptographic keys for the group
+      const groupKeys = newKeys();
+
+      // Create group data context
+      const groupDataContext = userContext.getDataContext(groupId);
+
+      // Store groupKeys.secretKey securely for this group
+      const persistentVarsTable = userContext.userDataContext.tableContainer.getTableByName('PersistentVars');
+      const groupSecretKeyVarName = 'groupSecretKey_' + groupDataContext.dataContextId;
+      await persistentVarsTable.save({
+        persistentVarId: newid(),
+        name: groupSecretKeyVarName,
+        scope: 'groupUser',
+        isSecret: true,
+        value: { value: groupKeys.secretKey },
+      });
+      
+      // Add current user to the group's users table as trusted
+      await Users(groupDataContext).save({
+        ...me,
+        trustLevel: TrustLevel.Trusted
+      });
+
+      // Create group in both user's and group's context
+      const groupsTable = Groups(userContext.userDataContext);
+      const newGroup = await groupsTable.save({
+        groupId,
+        name: trimmedName,
+        description: description.trim(),
+        iconClassName: iconClassName.trim() || 'bi-people-fill',
+        founderUserId: me.userId,
+        disabled: false,
+        publicKey: groupKeys.publicKey,
+        publicBoxKey: groupKeys.publicBoxKey,
+        signature: '', // Will be signed by save()
+      });
+
+      await Groups(groupDataContext).save(newGroup);
+      
+      // Notify parent
+      onGroupCreated(newGroup.groupId);
+    } catch (err: any) {
+      console.error('Failed to create group:', err);
+      setError(err.message || 'Failed to create group. Please try again.');
+      setIsCreating(false);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey && groupName.trim()) {
+      e.preventDefault();
+      handleCreate();
+    } else if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="position-fixed w-100 h-100 d-flex align-items-start justify-content-center"
+      style={{
+        top: 0,
+        left: 0,
+        zIndex: 1050,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        backdropFilter: 'blur(4px)',
+        paddingTop: '10vh'
+      }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      <div
+        className={`${isDark ? 'bg-dark text-light' : 'bg-white text-dark'}`}
+        style={{
+          width: '90%',
+          maxWidth: '500px',
+          borderRadius: '12px',
+          boxShadow: isDark
+            ? '0 20px 40px rgba(0, 0, 0, 0.5)'
+            : '0 20px 40px rgba(0, 0, 0, 0.1)',
+          border: isDark ? '1px solid #495057' : '1px solid #dee2e6',
+          overflow: 'hidden'
+        }}
+      >
+        {/* Header */}
+        <div
+          className="p-3 border-bottom d-flex align-items-center justify-content-between"
+          style={{
+            borderBottomColor: isDark ? '#495057' : '#dee2e6'
+          }}
+        >
+          <div className="d-flex align-items-center">
+            <i className="bi-people-fill me-2" style={{ fontSize: '20px' }} />
+            <h6 className="mb-0">Create New Group</h6>
+          </div>
+          <button
+            className="btn btn-sm p-0"
+            style={{
+              border: 'none',
+              background: 'none',
+              fontSize: '24px',
+              lineHeight: '1',
+              opacity: 0.6
+            }}
+            onClick={onClose}
+            disabled={isCreating}
+            onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
+            onMouseLeave={(e) => e.currentTarget.style.opacity = '0.6'}
+          >
+            <i className="bi-x" />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-3">
+          {/* Error Alert */}
+          {error && (
+            <div className="alert alert-danger py-2 px-3 mb-3" style={{ fontSize: '14px' }}>
+              <i className="bi-exclamation-triangle me-2" />
+              {error}
+            </div>
+          )}
+
+          {/* Group Name */}
+          <div className="mb-3">
+            <label className="form-label small mb-1">
+              Group Name <span className="text-danger">*</span>
+            </label>
+            <input
+              type="text"
+              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              placeholder="Enter group name"
+              value={groupName}
+              onChange={(e) => {
+                setGroupName(e.target.value);
+                setError(null);
+              }}
+              onKeyDown={handleKeyDown}
+              autoFocus
+              disabled={isCreating}
+              maxLength={100}
+              style={{
+                fontSize: '14px',
+                backgroundColor: isDark ? '#343a40' : '#ffffff'
+              }}
+            />
+            <small className="text-muted" style={{ fontSize: '11px' }}>
+              {groupName.length}/100 characters
+            </small>
+          </div>
+
+          {/* Icon Class Name */}
+          <div className="mb-3">
+            <label className="form-label small mb-1">Icon</label>
+            <div className="input-group">
+              <span
+                className={`input-group-text ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+                style={{ backgroundColor: isDark ? '#343a40' : undefined }}
+              >
+                <i className={iconClassName || 'bi-people-fill'} />
+              </span>
+              <input
+                type="text"
+                className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+                placeholder="bi-people-fill"
+                value={iconClassName}
+                onChange={(e) => setIconClassName(e.target.value)}
+                onKeyDown={handleKeyDown}
+                disabled={isCreating}
+                style={{
+                  fontSize: '14px',
+                  backgroundColor: isDark ? '#343a40' : '#ffffff'
+                }}
+              />
+            </div>
+            <small className="text-muted" style={{ fontSize: '11px' }}>
+              Bootstrap icon class name (e.g., bi-star-fill, bi-house-fill)
+            </small>
+          </div>
+
+          {/* Description */}
+          <div className="mb-3">
+            <label className="form-label small mb-1">Description (optional)</label>
+            <textarea
+              className={`form-control ${isDark ? 'bg-dark text-light border-secondary' : ''}`}
+              placeholder="Enter group description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              disabled={isCreating}
+              rows={3}
+              maxLength={500}
+              style={{
+                fontSize: '14px',
+                backgroundColor: isDark ? '#343a40' : '#ffffff',
+                resize: 'none'
+              }}
+            />
+            <small className="text-muted" style={{ fontSize: '11px' }}>
+              {description.length}/500 characters
+            </small>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div
+          className="p-3 border-top d-flex justify-content-end gap-2"
+          style={{
+            borderTopColor: isDark ? '#495057' : '#dee2e6'
+          }}
+        >
+          <button
+            className={`btn btn-sm ${isDark ? 'btn-outline-light' : 'btn-outline-secondary'}`}
+            onClick={onClose}
+            disabled={isCreating}
+            style={{ minWidth: '80px' }}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-sm btn-primary"
+            onClick={handleCreate}
+            disabled={isCreating || !groupName.trim()}
+            style={{ minWidth: '80px' }}
+          >
+            {isCreating ? (
+              <>
+                <span className="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" />
+                Creating...
+              </>
+            ) : (
+              <>
+                <i className="bi-plus-circle me-1" />
+                Create
+              </>
+            )}
+          </button>
+        </div>
+
+        {/* Keyboard Shortcuts Helper */}
+        <div
+          className={`px-3 py-2 small text-muted border-top`}
+          style={{
+            borderTopColor: isDark ? '#495057' : '#dee2e6',
+            fontSize: '11px'
+          }}
+        >
+          <kbd className="small">↵</kbd> to create • <kbd className="small">esc</kbd> to cancel
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/input-date.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import moment from "moment-timezone";
+import { Observable } from "@peers-app/peers-sdk";
+import { useObservable } from "../hooks";
+
+
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  date: Observable<Date | undefined> | Date | undefined
+}
+export const InputDate = (props: IProps) => {
+
+  const [date, setDate] = useObservable<Date | undefined>(props.date);
+
+  const inputProps = { ...props };
+  // @ts-ignore
+  delete inputProps.date;
+
+  return (
+    <input
+      {...inputProps}
+      type='date'
+      value={date?.toISOString?.().substring(0, 10) ?? ''}
+      onChange={evt => {
+        setDate(evt.currentTarget.value ? moment(new Date(evt.currentTarget.value)).startOf('day').add(1, 'day').toDate() : undefined)
+      }}      
+    />
+  )
+}

package/src/components/input-datetime.tsx

@@ -0,0 +1,41 @@
+import { Observable } from "@peers-app/peers-sdk";
+import React from "react";
+import { useObservable } from "../hooks";
+
+
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  datetime: Observable<Date | undefined> | Date | undefined
+}
+export const InputDatetime = (props: IProps) => {
+
+  const [datetime, setDatetime] = useObservable<Date | undefined>(props.datetime);
+
+  const inputProps = { ...props };
+  // @ts-ignore
+  delete inputProps.datetime;
+  
+  return (
+    <input
+      {...inputProps}
+      type='datetime-local'
+      value={(() => {
+        if (!datetime) return;
+        if (String(datetime) === 'Invalid Date') return;
+        return datetime.toISOString?.()?.substring(0, 16);
+      })()}
+      onChange={e => {
+        let value = e.target.value;
+        if (value) {
+          value += (new Date()).toISOString().substring(value.length);
+          const dt = new Date(value);
+          if (String(dt) !== 'Invalid Date') {
+            setDatetime(new Date(value));
+            return;
+          }
+        } 
+        setDatetime(undefined);
+        if (props.onChange) props.onChange(e);
+      }}
+    />
+  )
+}

package/src/components/input-number.tsx

@@ -0,0 +1,67 @@
+import _, { isNumber } from 'lodash';
+import React, { useState } from 'react';
+import { formatMoney, unwrapObservable } from "@peers-app/peers-sdk";
+import { useObservable } from '../hooks';
+
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  value: any
+  format?: 'money'
+  precision?: number
+  refPassthrough?: any
+}
+
+export function InputNumber(props: IProps) {
+  let { format, precision, refPassthrough } = props;
+  if (!_.isNumber(precision)) {
+    precision = 2;
+  }
+
+  let propsPassthrough = { ...props };
+  // @ts-ignore
+  ['value', 'format', 'precision', 'refPassthrough'].forEach(name => (delete propsPassthrough[name]));
+
+  const [value, setValue] = useObservable(props.value);
+
+  let [displayValue, setDisplayValue] = useState<string>(() => {
+    if (isNaN(Number(value)) || value === null || String(value).trim() === '') {
+      return '';
+    }
+    if (format === 'money') {
+      return formatMoney(Number(unwrapObservable(props.value)), precision);
+    }
+    return String(value);
+  });
+  
+
+  function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
+    let _value: any = evt.target.value;
+    setDisplayValue(_value);
+    // convert blank to null
+    if (String(_value).trim() === '') {
+      setValue(null);
+      return;
+    }
+    
+    _value = _value.replace(/\$/g, '');
+    _value = Number(_value);
+    if (isNumber(_value) && !isNaN(_value)) {
+      setValue(_value);
+    }
+  }
+
+  function onBlur(evt: React.FocusEvent<HTMLInputElement>) {
+    if (format === 'money' && !isNaN(Number(value)) && value !== null && String(value).trim() !== '') {
+      const fmtMoney = formatMoney(value, precision);
+      setDisplayValue(fmtMoney);
+    } else if (value === null) {
+      setDisplayValue('');
+    } else {
+      setDisplayValue(String(value));
+    }
+    // todo if not money format precision and set display
+  }
+
+  return (
+    <input {...propsPassthrough} ref={refPassthrough} value={displayValue} onChange={onChange} onBlur={onBlur} />
+  )
+}

package/src/components/input.tsx

@@ -0,0 +1,22 @@
+import React from 'react'; 
+import { useObservable } from '../hooks';
+
+interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+  value: any,
+  type?: React.HTMLInputTypeAttribute
+}
+
+export function Input(props: IProps) {
+  const [value, setValue] = useObservable(props.value);
+  const type = props.type ?? (typeof value);
+  function onChange(evt: React.ChangeEvent<HTMLInputElement>) {
+    let _value: any = evt.target.value;
+    if (type === 'number') {
+      _value = Number(_value);
+    }
+    setValue(_value);
+  }
+  return (
+    <input onChange={onChange} type={type} {...props} value={value}  />
+  )
+}