linked-data-browser 0.0.2 → 0.0.4

package/components/nav/header/ViewMenu.tsx

@@ -13,7 +13,7 @@ import { View } from 'react-native';
 import type { ViewRef } from '@rn-primitives/types';
 import { cn } from '../../../lib/utils';
 import { ViewIcon } from '../../../lib/icons/ViewIcon';
-import { useValidView } from '../useValidView';
+import { useViewContext } from '../../useViewContext';
 import { ResourceViewConfig } from '../../../components/ResourceView';
 
 export const ViewMenu: FunctionComponent = () => {
@@ -24,7 +24,7 @@ export const ViewMenu: FunctionComponent = () => {
     left: 12,
     right: 12,
   };
-  const { validViews } = useValidView();
+  const { validViews } = useViewContext();
 
   const [isOpen, setIsOpen] = React.useState<string>();
 
@@ -63,7 +63,7 @@ const ListItem = React.forwardRef<
   }
 >(({ className, viewConfig, ...props }, ref) => {
   // TODO: add navigationn to `href` on `NavigationMenuLink` onPress
-  const { curViewConfig, setCurViewConfig } = useValidView();
+  const { curViewConfig, setCurViewConfig } = useViewContext();
   const Icon = viewConfig.displayIcon;
   return (
     <View role="listitem">
@@ -78,7 +78,7 @@ const ListItem = React.forwardRef<
         {...props}
       >
         <Icon size={20} />
-        <Text className="text-sm native:text-base font-medium text-foreground leading-none ml-2">
+        <Text className="ml-2" size="sm">
           {viewConfig.displayName}
         </Text>
       </NavigationMenuLink>

package/components/sharing/AccessDropdown.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback, useMemo } from 'react';
+import { AccessModeList } from '@ldo/connected-solid';
+import { FunctionComponent } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+import { Text } from '../ui/text';
+import { Button } from '../ui/button';
+import { Checkbox } from '../ui/checkbox';
+import { ChevronDown } from '../../lib/icons/ChevronDown';
+import { View } from 'react-native';
+
+interface AccessDropdownProps {
+  value: AccessModeList;
+  onChange: (newAccess: AccessModeList) => void;
+}
+
+export const AccessDropdown: FunctionComponent<AccessDropdownProps> = ({
+  value,
+  onChange,
+}) => {
+  const accessDescription = useMemo(() => {
+    if (value.read && value.append && value.write && value.control) {
+      return 'Owner';
+    } else if (value.read && value.append && value.write && !value.control) {
+      return 'Editor';
+    } else if (value.read && value.append && !value.write && !value.control) {
+      return 'Contributor';
+    } else if (value.read && !value.append && !value.write && !value.control) {
+      return 'Viewer';
+    } else if (!value.read && !value.append && !value.write && !value.control) {
+      return 'No Access';
+    } else {
+      return 'Custom';
+    }
+  }, [value.append, value.control, value.read, value.write]);
+
+  const onChangeAccessMode = useCallback(
+    (field: string, newValue: boolean) => {
+      onChange({
+        ...value,
+        [field]: newValue,
+      });
+    },
+    [onChange, value],
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className=" w-[130px] justify-between gap-0">
+          <Text>{accessDescription}</Text>
+          <Text>
+            <ChevronDown size={14} />
+          </Text>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>Permissions</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          {['read', 'append', 'write', 'control'].map((accessModeName) => (
+            <DropdownMenuItem
+              key={accessModeName}
+              closeOnPress={false}
+              onPress={() =>
+                onChangeAccessMode(
+                  accessModeName,
+                  !value[accessModeName as keyof AccessModeList],
+                )
+              }
+            >
+              <Checkbox
+                checked={value[accessModeName as keyof AccessModeList]}
+                onCheckedChange={(newVal) =>
+                  onChangeAccessMode(accessModeName, newVal)
+                }
+              />
+              <Text>
+                {accessModeName.charAt(0).toUpperCase() +
+                  accessModeName.slice(1)}
+              </Text>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/components/sharing/CopyLink.tsx

@@ -0,0 +1,21 @@
+import React, { useCallback, useState } from 'react';
+import { Button } from '../ui/button';
+import { Text } from '../ui/text';
+import { Link } from '../../lib/icons/Link';
+import { FunctionComponent } from 'react';
+import { useViewContext } from '../useViewContext';
+
+export const CopyLink: FunctionComponent = () => {
+  const { targetUri } = useViewContext();
+  const [message, setMessage] = useState('Copy Link');
+  const onCopy = useCallback(async () => {
+    await navigator.clipboard.writeText(targetUri ?? '');
+    setMessage('Copied');
+    await new Promise((res) => setTimeout(res, 2000));
+    setMessage('Copy Link');
+  }, [targetUri]);
+
+  return (
+    <Button variant="outline" className="flex-row" onPress={onCopy} text={message} iconLeft={<Link />} />
+  );
+};

package/components/sharing/PermissionRow.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { AccessModeList } from '@ldo/connected-solid';
+import { Text } from '../ui/text';
+import { FunctionComponent } from 'react';
+import { AccessDropdown } from './AccessDropdown';
+import { View } from 'react-native';
+import { Avatar, AvatarFallback } from 'components/ui/avatar';
+import { LucideIcon } from 'lucide-react-native';
+
+interface PermissionRowProps {
+  Icon: LucideIcon;
+  displayName: string;
+  value: AccessModeList;
+  onChange: (newValue: AccessModeList) => void;
+}
+
+export const PermissionRow: FunctionComponent<PermissionRowProps> = ({
+  Icon,
+  displayName,
+  value,
+  onChange,
+}) => {
+  return (
+    <View className="flex-row justify-between items-center">
+      <View className="flex-row gap-4 flex-1 items-center">
+        <Avatar alt={displayName}>
+          <AvatarFallback>
+            <Text>
+              <Icon />
+            </Text>
+          </AvatarFallback>
+        </Avatar>
+        <Text bold>{displayName}</Text>
+      </View>
+      <AccessDropdown value={value} onChange={onChange} />
+    </View>
+  );
+};

package/components/sharing/SharingModal.tsx

@@ -0,0 +1,149 @@
+import React, {
+  createContext,
+  FunctionComponent,
+  PropsWithChildren,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '../ui/dialog';
+import { Button } from '../ui/button';
+import { Text } from '../ui/text';
+import { CopyLink } from './CopyLink';
+import {
+  GetWacRuleError,
+  GetWacRuleSuccess,
+  SolidContainer,
+  SolidLeaf,
+  WacRule,
+} from '@ldo/connected-solid';
+import { useViewContext } from '../useViewContext';
+import { LoadingBar } from '../common/LoadingBar';
+import { ScrollView } from 'react-native';
+import { WacRuleForm } from './WacRuleForm';
+import { isEqual } from 'lodash';
+
+interface SharingModalMethods {
+  openSharingModal: () => void;
+  closeSharingModal: () => void;
+  isModalOpen: boolean;
+}
+const sharingModalContext = createContext<SharingModalMethods>({
+  openSharingModal: () => {},
+  closeSharingModal: () => {},
+  isModalOpen: false,
+});
+
+export const useSharingModal = () => {
+  return useContext(sharingModalContext);
+};
+
+export const SharingModalProvider: FunctionComponent<PropsWithChildren<{}>> = ({
+  children,
+}) => {
+  const { targetResource } = useViewContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [wacResult, setWacResult] = useState<
+    | GetWacRuleError<SolidLeaf | SolidContainer>
+    | GetWacRuleSuccess<SolidLeaf | SolidContainer>
+    | undefined
+  >();
+  const [isLoading, setIsLoading] = useState(false);
+  const [editedRules, setEditedRules] = useState<WacRule>({
+    public: { read: false, write: false, append: false, control: false },
+    authenticated: { read: false, write: false, append: false, control: false },
+    agent: {},
+  });
+
+  useEffect(() => {
+    if (
+      targetResource &&
+      targetResource.type !== 'InvalidIdentifierResource' &&
+      isOpen
+    ) {
+      setIsLoading(true);
+
+      targetResource.getWac().then((wac) => {
+        setWacResult(
+          wac as
+            | GetWacRuleError<SolidLeaf | SolidContainer>
+            | GetWacRuleSuccess<SolidLeaf | SolidContainer>,
+        );
+        if (wac.type === 'getWacRuleSuccess') {
+          setEditedRules(wac.wacRule);
+        }
+        setIsLoading(false);
+      });
+    }
+  }, [targetResource, isOpen]);
+
+  const didEdit = useMemo(() => {
+    if (wacResult?.type !== 'getWacRuleSuccess') return false;
+    return !isEqual(editedRules, wacResult.wacRule);
+  }, [editedRules, wacResult]);
+
+  const context = useMemo(
+    () => ({
+      isModalOpen: isOpen,
+      openSharingModal: () => setIsOpen(true),
+      closeSharingModal: () => setIsOpen(false),
+    }),
+    [isOpen],
+  );
+
+  const onApplyChanges = useCallback(async () => {
+    if (
+      didEdit &&
+      (targetResource?.type === 'SolidContainer' ||
+        targetResource?.type === 'SolidLeaf')
+    ) {
+      setIsLoading(true);
+      const result = await targetResource.setWac(editedRules);
+      // TODO throw error with toast
+      setIsLoading(false);
+    }
+    setIsOpen(false);
+  }, [editedRules, targetResource, didEdit]);
+
+  return (
+    <sharingModalContext.Provider value={context}>
+      <Dialog open={isOpen} onOpenChange={(value) => setIsOpen(value)}>
+        <DialogContent className="sm:w-[640px] w-[95vw] h-[95vh]">
+          <LoadingBar isLoading={isLoading} />
+          <DialogHeader>
+            <DialogTitle>Resource Sharing Preferences</DialogTitle>
+          </DialogHeader>
+          <ScrollView className="flex-1 border-border border-b border-t pt-2 pb-2 ml-[-24px] mr-[-24px] pl-6 pr-6">
+            {(() => {
+              if (!wacResult) return <></>;
+              if (wacResult.isError) {
+                return (
+                  <Text className="color-red-800">{wacResult.message}</Text>
+                );
+              }
+              return (
+                <WacRuleForm value={editedRules} onChange={setEditedRules} />
+              );
+            })()}
+          </ScrollView>
+          <DialogFooter>
+            <CopyLink />
+            <Button
+              text={didEdit ? 'Apply Changes' : 'Done'}
+              onPress={onApplyChanges}
+            />
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {children}
+    </sharingModalContext.Provider>
+  );
+};

package/components/sharing/WacRuleForm.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Separator } from '../ui/separator';
+import { FunctionComponent } from 'react';
+import { AgentPermissions } from './agentPermissions/AgentPermissions';
+import { WacRule } from '@ldo/connected-solid';
+import { View } from 'react-native';
+import { PermissionRow } from './PermissionRow';
+import { Users } from '../../lib/icons/Users';
+import { Fingerprint } from '../../lib/icons/Fingerprint';
+
+interface WacRuleFormProps {
+  value: WacRule;
+  onChange: (newWacRule: WacRule) => void;
+}
+
+export const WacRuleForm: FunctionComponent<WacRuleFormProps> = ({
+  value,
+  onChange,
+}) => {
+  return (
+    <View className="gap-4 mt-2 mb-2">
+      <PermissionRow
+        displayName="Public Access"
+        Icon={Users}
+        value={value.public}
+        onChange={(newRule) => onChange({ ...value, public: newRule })}
+      />
+      <Separator />
+      <PermissionRow
+        displayName="Authenticated Agents"
+        Icon={Fingerprint}
+        value={value.authenticated}
+        onChange={(newRule) => onChange({ ...value, authenticated: newRule })}
+      />
+      <Separator />
+      <AgentPermissions
+        value={value.agent}
+        onChange={(newAgentRules) =>
+          onChange({ ...value, agent: newAgentRules })
+        }
+      />
+    </View>
+  );
+};

package/components/sharing/agentPermissions/AgentInformation.tsx

@@ -0,0 +1,37 @@
+import { SolidProfileShapeShapeType } from '.ldo/profile.shapeTypes';
+import { useResource, useSolidAuth, useSubject } from '@ldo/solid-react';
+import React, { FunctionComponent, ReactNode } from 'react';
+import { View } from 'react-native';
+import { ProfileAvatar } from 'components/common/ProfileAvatar';
+import { Text } from '../../ui/text';
+
+interface AgentInformationProps {
+  webId: string;
+  accessoryRight?: ReactNode;
+}
+
+export const AgentInformation: FunctionComponent<AgentInformationProps> = ({
+  webId,
+  accessoryRight,
+}) => {
+  const { session } = useSolidAuth();
+  useResource(webId);
+  const agentProfile = useSubject(SolidProfileShapeShapeType, webId);
+
+  return (
+    <View className="flex-row gap-4 flex-1 items-center">
+      <ProfileAvatar profile={agentProfile} />
+      <View className="flex-1">
+        <Text>
+          {agentProfile['@id'] === session.webId
+            ? 'You'
+            : (agentProfile.fn ?? agentProfile.name ?? 'Unnamed Agent')}
+        </Text>
+        <Text size="xs" muted>
+          {webId}
+        </Text>
+      </View>
+      {accessoryRight && <View>{accessoryRight}</View>}
+    </View>
+  );
+};

package/components/sharing/agentPermissions/AgentInput.tsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { FunctionComponent } from 'react';
+import { Pressable } from 'react-native';
+import { useLinkQuery, useSolidAuth } from '@ldo/solid-react';
+import { SolidProfileShapeShapeType } from '../../../.ldo/profile.shapeTypes';
+import { AgentInformation } from './AgentInformation';
+import { InputDropdown } from '../../ui/input-dropdown';
+import { useContactFilter } from './useContactFilter';
+import { Plus } from '../../../lib/icons/Plus';
+
+interface AgentInputProps {
+  onAddAgent: (webId: string) => void;
+  existingAgents: string[];
+  className?: string;
+}
+
+// Component for dropdown items with profile data
+const ContactDropdownItem: FunctionComponent<{
+  webId: string;
+  onSelect: (webId: string) => void;
+}> = ({ webId, onSelect }) => {
+  return (
+    <Pressable
+      className="p-2 border-b border-border last:border-b-0 hover:bg-accent active:bg-accent cursor-pointer"
+      onPress={() => onSelect(webId)}
+    >
+      <AgentInformation webId={webId} />
+    </Pressable>
+  );
+};
+
+const friendsLinkQuery = {
+  knows: {
+    '@id': true,
+    fn: true,
+  },
+} as const;
+
+export const AgentInput: FunctionComponent<AgentInputProps> = ({
+  onAddAgent,
+  existingAgents,
+  className,
+}) => {
+  const { session } = useSolidAuth();
+  const [inputValue, setInputValue] = useState('');
+
+  // Get current user's profile to access their "knows" list
+  const currentUserProfile = useLinkQuery(
+    SolidProfileShapeShapeType,
+    session.webId!,
+    session.webId!,
+    friendsLinkQuery,
+  );
+
+  // Filter out contacts that are already in the individual agents section
+  const availableContacts = useMemo(() => {
+    if (!currentUserProfile?.knows) return [];
+
+    return currentUserProfile.knows
+      .filter((contact) => !existingAgents.includes(contact['@id']))
+      .map((contact) => contact['@id']);
+  }, [currentUserProfile?.knows, existingAgents]);
+
+  // Use the custom hook for filtering
+  const filteredContacts = useContactFilter(
+    availableContacts,
+    inputValue,
+    currentUserProfile?.knows ? Array.from(currentUserProfile.knows) : [],
+  );
+
+  const handleInputSubmit = useCallback(() => {
+    if (inputValue.trim()) {
+      // Check if it's a valid URI
+      try {
+        const url = new URL(inputValue);
+        onAddAgent(url.toString());
+        setInputValue('');
+      } catch {
+        // Do nothing
+      }
+    }
+  }, [inputValue, onAddAgent]);
+
+  const handleContactSelect = useCallback(
+    (webId: string) => {
+      onAddAgent(webId);
+      setInputValue('');
+    },
+    [onAddAgent],
+  );
+
+  // Filter function for the dropdown (now just returns the filtered contacts)
+  const filterContacts = useCallback(
+    (_contacts: string[], _searchText: string) => {
+      return filteredContacts;
+    },
+    [filteredContacts],
+  );
+
+  // Render function for dropdown items
+  const renderContactItem = useCallback(
+    (webId: string, onSelect: (webId: string) => void) => (
+      <ContactDropdownItem webId={webId} onSelect={onSelect} />
+    ),
+    [],
+  );
+
+  return (
+    <InputDropdown
+      placeholder="Add Contact or WebId"
+      value={inputValue}
+      onChangeText={setInputValue}
+      onSubmitEditing={handleInputSubmit}
+      items={availableContacts}
+      renderItem={renderContactItem}
+      filterItems={filterContacts}
+      buttonRight={{
+        iconRight: <Plus />,
+        onPress: handleInputSubmit,
+        variant: 'secondary',
+      }}
+      onItemSelect={handleContactSelect}
+      className={className}
+    />
+  );
+};

package/components/sharing/agentPermissions/AgentPermissionRow.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { AccessModeList } from '@ldo/connected-solid';
+import { Text } from '../../ui/text';
+import { FunctionComponent } from 'react';
+import { AgentInformation } from './AgentInformation';
+import { AccessDropdown } from '../AccessDropdown';
+import { View } from 'react-native';
+import { Button } from '../../ui/button';
+import { Trash } from '../../../lib/icons/Trash';
+
+interface AgentPermissionRowProps {
+  webId: string;
+  value: AccessModeList;
+  onChange: (newValue: AccessModeList | undefined) => void;
+}
+
+export const AgentPermissionRow: FunctionComponent<AgentPermissionRowProps> = ({
+  webId,
+  value,
+  onChange,
+}) => {
+  return (
+    <View className="flex-row justify-between align-center">
+      <AgentInformation webId={webId} />
+      <View className="flex-row">
+        <Button
+          variant="ghost"
+          onPress={() => onChange(undefined)}
+          className="w-10"
+          iconLeft={<Trash size={14} />}
+        />
+        <AccessDropdown value={value} onChange={onChange} />
+      </View>
+    </View>
+  );
+};

package/components/sharing/agentPermissions/AgentPermissions.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react';
+import { WacRule } from '@ldo/connected-solid';
+import { FunctionComponent } from 'react';
+import { AgentPermissionRow } from './AgentPermissionRow';
+import { Text } from '../../ui/text';
+import { AgentInput } from './AgentInput';
+
+interface AgentPermissionsProps {
+  value: WacRule['agent'];
+  onChange: (newValue: WacRule['agent']) => void;
+}
+
+export const AgentPermissions: FunctionComponent<AgentPermissionsProps> = ({
+  value,
+  onChange,
+}) => {
+  const addAgent = useCallback(
+    (webId: string) => {
+      onChange({
+        ...value,
+        [webId]: { read: false, write: false, append: false, control: false },
+      });
+    },
+    [value, onChange],
+  );
+
+  return (
+    <>
+      <Text bold>Individual Agents</Text>
+      <AgentInput
+        onAddAgent={addAgent}
+        existingAgents={Object.keys(value)}
+        className="z-[999]"
+      />
+      {Object.entries(value).map(([webId, accessModeList]) => (
+        <AgentPermissionRow
+          key={webId}
+          webId={webId}
+          value={accessModeList}
+          onChange={(newAccessModeList) => {
+            if (!newAccessModeList) {
+              const newVal = { ...value };
+              delete newVal[webId];
+              onChange(newVal);
+            } else {
+              onChange({
+                ...value,
+                [webId]: newAccessModeList,
+              });
+            }
+          }}
+        />
+      ))}
+    </>
+  );
+};

package/components/sharing/agentPermissions/useContactFilter.ts

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+export function useContactFilter(
+  webIds: string[],
+  searchText: string,
+  contactsWithNames: Array<{ '@id': string; fn?: string }>,
+) {
+  // Filter contacts based on search text (URI and name)
+  const filteredContacts = useMemo(() => {
+    if (!searchText.trim()) return webIds;
+
+    const lowerInput = searchText.toLowerCase();
+
+    return webIds.filter((webId) => {
+      // Check if the URI matches
+      if (webId.toLowerCase().includes(lowerInput)) {
+        return true;
+      }
+
+      // Check if the name matches
+      const contact = contactsWithNames.find((c) => c['@id'] === webId);
+      if (
+        contact &&
+        contact.fn &&
+        contact.fn.toLowerCase().includes(lowerInput)
+      ) {
+        return true;
+      }
+
+      return false;
+    });
+  }, [webIds, searchText, contactsWithNames]);
+
+  return filteredContacts;
+}