Merge pull request #24 from solid/feat/my-storages

Feat/my storages

Author: PreciousOritsedere

.cssconfig.json

@@ -0,0 +1,36 @@
+{
+  "@context": "https://linkedsoftwaredependencies.org/bundles/npm/@solid/community-server/^8.0.0/components/context.jsonld",
+  "import": [
+    "css:config/app/init/default.json",
+    "css:config/app/main/default.json",
+    "css:config/app/variables/default.json",
+    "css:config/http/handler/default.json",
+    "css:config/http/middleware/default.json",
+    "css:config/http/notifications/all.json",
+    "css:config/http/server-factory/http.json",
+    "css:config/http/static/default.json",
+    "css:config/identity/access/public.json",
+    "css:config/identity/email/default.json",
+    "css:config/identity/handler/no-accounts.json",
+    "css:config/identity/oidc/default.json",
+    "css:config/identity/ownership/token.json",
+    "css:config/identity/pod/static.json",
+    "css:config/ldp/authentication/dpop-bearer.json",
+    "css:config/ldp/authorization/acp.json",
+    "css:config/ldp/handler/default.json",
+    "css:config/ldp/metadata-parser/default.json",
+    "css:config/ldp/metadata-writer/default.json",
+    "css:config/ldp/modes/default.json",
+    "css:config/storage/backend/file.json",
+    "css:config/storage/key-value/memory.json",
+    "css:config/storage/location/root.json",
+    "css:config/storage/middleware/default.json",
+    "css:config/util/auxiliary/acr.json",
+    "css:config/util/identifiers/suffix.json",
+    "css:config/util/index/default.json",
+    "css:config/util/logging/winston.json",
+    "css:config/util/representation-conversion/default.json",
+    "css:config/util/resource-locker/memory.json",
+    "css:config/util/variables/default.json"
+  ]
+}

.gitignore

@@ -33,6 +33,10 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 
+# seed config (contains passwords)
+seed-config.json
+src/ldo/
+
 # vercel
 .vercel
 

README-CSS.md

@@ -0,0 +1,107 @@
+# Running Local Community Solid Server with ACP
+
+## Setup
+
+The project is configured to run a local Community Solid Server (CSS) with ACP (Access Control Policy) enabled.
+
+## Configuration
+
+- **Config file**: `.cssconfig.json` - Has ACP enabled via `css:config/ldp/authorization/acp.json`
+- **Seed config**: `seed-config.json` - Contains your account credentials (create from `seed-config.json.example`)
+- **Data directory**: `data/` - Where the server stores pod data
+
+### Setting up your account
+
+1. Copy the example seed config:
+   ```bash
+   cp seed-config.json.example seed-config.json
+   ```
+
+2. Edit `seed-config.json` and replace with your real email, password, and pod name:
+   ```json
+   [
+     {
+       "email": "your-email@example.com",
+       "password": "your-password",
+       "pods": [
+         { "name": "your-pod-name" }
+       ]
+     }
+   ]
+   ```
+
+**Note**: `seed-config.json` is in `.gitignore` to prevent committing your password.
+
+## Running the Server
+
+### Option 1: Run CSS only
+```bash
+npm run start:css
+```
+
+This will start CSS on port **3000** with:
+- ACP authorization enabled
+- Seeded accounts (alice and bob)
+- Data stored in `data/` directory
+
+### Option 2: Run CSS + Next.js together
+```bash
+npm run start:dev
+```
+
+This runs both:
+- CSS on port **3000**
+- Next.js dev server on port **3001**
+
+## Test Accounts
+
+After seeding, you can log in with any of these accounts:
+
+1. **Ruky** (your account):
+   - Email: `rukyjacob@gmail.com`
+   - Password: `Test123$`
+   - Pod URL: `http://localhost:3000/ruky/`
+   - WebID: `http://localhost:3000/ruky/profile/card#me`
+
+2. **Alice**:
+   - Email: `alice@example.com`
+   - Password: `alice123`
+   - Pod URL: `http://localhost:3000/alice/`
+   - WebID: `http://localhost:3000/alice/profile/card#me`
+
+3. **Bob**:
+   - Email: `bob@example.com`
+   - Password: `bob123`
+   - Pod URL: `http://localhost:3000/bob/`
+   - WebID: `http://localhost:3000/bob/profile/card#me`
+
+4. **Charlie**:
+   - Email: `charlie@example.com`
+   - Password: `charlie123`
+   - Pod URL: `http://localhost:3000/charlie/`
+   - WebID: `http://localhost:3000/charlie/profile/card#me`
+
+## Testing ACP Sharing
+
+The seed config includes 4 test accounts (ruky, alice, bob, charlie) for testing sharing.
+
+**Steps to test:**
+1. Start the server: `npm run start:css`
+2. In your Next.js app (port 3001), log in as **ruky** (`rukyjacob@gmail.com` / `Test123$`)
+3. Navigate to ruky's pod storage
+4. Create a folder or file
+5. Click "Share" on the resource
+6. Add a WebID to share with (e.g., `http://localhost:3000/alice/profile/card#me`)
+7. Select access level (Editor/Viewer) and click "Done"
+
+**Quick WebIDs for sharing:**
+- Alice: `http://localhost:3000/alice/profile/card#me`
+- Bob: `http://localhost:3000/bob/profile/card#me`
+- Charlie: `http://localhost:3000/charlie/profile/card#me`
+
+## Notes
+
+- The server uses ACP (not WAC), so ACRs should be at `.acr` location
+- Make sure to use `http://localhost:3000` as the OIDC issuer in your app
+- The server will create pods automatically when accounts are seeded
+

README.md

@@ -47,12 +47,13 @@ This application provides a user-friendly interface for managing files and folde
 - **Google Drive-like Interface**: Clean, modern interface with familiar UX patterns
 - **Left Sidebar**: Displays all available file manager menus
 - **File Item Display**: Shows files and folders with appropriate icons, metadata, and context menus
-- **Context Menus**: Hover on folder/file and click the menu button to access the file operations menu dropdown (Rename, Copy, Move, Delete, Preview, Download)
+- **Context Menus**: Hover on folder/file and click the menu button to access the file operations menu dropdown (Rename, Copy, Move, Delete, Preview, Download, Share)
 - **Modals & Dialogs**: 
   - Rename dialog for renaming resources
   - Move dialog for selecting destination folder
   - Preview modal for viewing files
-  - Permissions dialog (UI ready)
+  - Share dialog for sharing files/folders with WebIDs (with contact autocomplete)
+  - Share success modal for displaying shared resource URLs
 - **Loading States**: Loading spinners and error displays throughout
 - **Toast Notifications**: User feedback for all operations
 - **Minimal Design**: Black, white, and light purple color scheme
@@ -64,8 +65,10 @@ This application provides a user-friendly interface for managing files and folde
 - **Profile Utilities**: WebID profile fetching and parsing utilities
 - **URL Utilities**: URL state management, encoding/decoding, and path resolution
 - **Binary File Detection**: Automatic detection of binary/system files (e.g., `.DS_Store`) to prevent unnecessary RDF conversion attempts
+- **ACP Utilities**: ACP sharing operations using LDO for type-safe RDF parsing and N3.js for ACR creation/updates
+- **Contact Utilities**: Fetching and parsing user contacts from WebID profiles for sharing autocomplete
 - **Error Handling**: Comprehensive error handling with user-friendly messages
-- **Type Safety**: Full TypeScript support throughout
+- **Type Safety**: Full TypeScript support throughout, including LDO-generated types from SHACL shapes
 - **Cache-Busting**: Automatic cache-busting for container listings after uploads/deletes to ensure fresh data
 
 ## Tech Stack
@@ -75,6 +78,7 @@ This application provides a user-friendly interface for managing files and folde
 - **Styling**: Tailwind CSS 4
 - **Language**: TypeScript
 - **Solid SDK**: [@inrupt/solid-client-js](https://github.com/inrupt/solid-client-js)
+- **LDO (Linked Data Objects)**: [@ldo/ldo](https://github.com/o-development/ldo) for type-safe ACP operations
 - **Icons**: [@heroicons/react](https://heroicons.com/)
 - **Notifications**: [react-hot-toast](https://react-hot-toast.com/)
 
@@ -98,12 +102,19 @@ cd solid-file-manager
 npm install
 ```
 
-3. Run the development server:
+3. Build LDO types (automatically runs before dev server):
+```bash
+npm run build:ldo
+```
+
+4. Run the development server:
 ```bash
 npm run dev
 ```
 
-4. Open [http://localhost:3001](http://localhost:3001) in your browser.
+5. Open [http://localhost:3001](http://localhost:3001) in your browser.
+
+**Note**: For ACP sharing functionality, you'll need to run a local Community Solid Server. See `README-CSS.md` for setup instructions.
 
 ## Development Setup
 
@@ -146,8 +157,8 @@ solid-file-manager/
 │   │   ├── NewFolderDialog.tsx # Dialog for creating folders
 │   │   ├── RenameDialog.tsx  # Dialog for renaming resources
 │   │   ├── MoveDialog.tsx   # Dialog for moving files
-│   │   ├── PreviewModal.tsx # Modal for previewing files
-│   │   ├── PermissionsDialog.tsx # Sharing/permissions dialog
+│   │   ├── ShareDialog.tsx  # Dialog for sharing files/folders with WebIDs
+│   │   ├── ShareSuccessModal.tsx # Modal showing success after sharing
 │   │   ├── FileUploadHandler.tsx # File upload component
 │   │   ├── ProfileIcon.tsx  # User profile icon and logout
 │   │   ├── LoginPage.tsx   # Login page
@@ -173,20 +184,40 @@ solid-file-manager/
 │   │       ├── urlStateUtils.ts   # URL state management
 │   │       ├── urlUtils.ts        # URL utilities and binary file detection
 │   │       ├── fileTypeUtils.ts   # File type detection
+│   │       ├── acpUtils.ts        # ACP sharing utilities (LDO + N3.js)
+│   │       ├── contactUtils.ts    # Contact fetching for sharing
 │   │       └── ...
 │   ├── page.tsx             # Main page component
 │   ├── layout.tsx           # Root layout
 │   └── globals.css           # Global styles
+├── src/
+│   ├── shapes/              # SHACL Compact Syntax shape definitions
+│   │   └── Model.shaclc     # ACP shape definitions
+│   └── ldo/                 # Generated LDO types (auto-generated)
+│       ├── Model.typings.ts # TypeScript interfaces
+│       ├── Model.shapeTypes.ts # Shape type definitions
+│       ├── Model.context.ts # JSON-LD context
+│       └── Model.schema.ts  # ShEx schema
+├── scripts/
+│   ├── fix-shex.js          # Post-process ShEx output
+│   └── generate-ldo-files.js # Generate LDO files from ShEx
 ├── public/                   # Static assets
-└── README.md
+├── README.md
+└── README-CSS.md            # Local CSS setup instructions
 ```
 
 ## Solid Protocol Integration
 
 This application integrates with Solid using:
 
 - **Solid Protocol**: [https://solidproject.org/TR/protocol#resources](https://solidproject.org/TR/protocol#resources)
-- **ACP (Access Control Policies)**: [https://solid.github.io/authorization-panel/acp-specification/](https://solid.github.io/authorization-panel/acp-specification/) (UI ready, full integration pending)
+- **ACP (Access Control Policies)**: [https://solid.github.io/authorization-panel/acp-specification/](https://solid.github.io/authorization-panel/acp-specification/)
+  - Full ACP sharing implementation with WebID-based access control
+  - Uses LDO (Linked Data Objects) for type-safe ACR parsing
+  - Uses N3.js for ACR creation and updates
+  - Supports Editor (Read + Write) and Viewer (Read) access levels
+  - Automatic ACR discovery via Link headers or `.acr` convention
+  - Contact autocomplete from WebID profiles (`foaf:knows`)
 - **Storage Root Discovery**: 
   - Uses `pim:storage` predicate from WebID profile
   - Uses `solid:storage` predicate as fallback
@@ -200,6 +231,11 @@ This application integrates with Solid using:
   - Recursive folder operations for copy, move, and delete
   - Automatic handling of binary files and system files
 - **SDK**: [@inrupt/solid-client-js](https://github.com/inrupt/solid-client-js)
+- **LDO Type Generation**: 
+  - SHACL Compact Syntax shapes defined in `src/shapes/Model.shaclc`
+  - Automatically converted to ShEx via `@jeswr/shacl2shex`
+  - TypeScript types generated via `@ldo/cli` and custom scripts
+  - Types are regenerated on `npm run dev` and `npm run build`
 
 ## Design Principles
 
@@ -214,6 +250,7 @@ This application integrates with Solid using:
 - [Solid Protocol Specification](https://solidproject.org/TR/protocol)
 - [ACP Specification](https://solid.github.io/authorization-panel/acp-specification/)
 - [Inrupt Solid Client JS](https://github.com/inrupt/solid-client-js)
+- [LDO (Linked Data Objects)](https://github.com/o-development/ldo)
 - [Community Solid Server](https://github.com/CommunitySolidServer/CommunitySolidServer)
 
 ## License

app/components/FileItem.tsx

@@ -27,6 +27,7 @@ interface FileItemProps {
   onMove?: (file: FileItemData) => void;
   onDownload?: (file: FileItemData) => void;
   onDelete?: (file: FileItemData) => void;
+  onShare?: (file: FileItemData) => void;
   isSelected?: boolean;
   onContextMenu?: (file: FileItemData, event: React.MouseEvent) => void;
 }
@@ -42,6 +43,7 @@ export default function FileItem({
   onMove,
   onDownload,
   onDelete,
+  onShare,
   isSelected = false,
   onContextMenu,
 }: FileItemProps) {
@@ -146,6 +148,7 @@ export default function FileItem({
             onCopy={onCopy}
             onMove={onMove}
             onDelete={onDelete}
+            onShare={onShare}
           />
         )}
         <div className="mb-1 flex h-12 w-12 items-center justify-center sm:mb-2 sm:h-16 sm:w-16">
@@ -199,6 +202,7 @@ export default function FileItem({
           onCopy={onCopy}
           onMove={onMove}
           onDelete={onDelete}
+          onShare={onShare}
         />
       )}
     </section>

app/components/FileItemMenu.tsx

@@ -10,6 +10,7 @@ import {
   ArrowRightCircleIcon,
   TrashIcon,
   EyeIcon,
+  ShareIcon,
 } from "@heroicons/react/24/outline";
 import { useClickOutside } from "../lib/hooks";
 import { FileItemData } from "./FileItem";
@@ -22,6 +23,7 @@ interface FileItemMenuProps {
   onMove?: (file: FileItemData) => void;
   onDelete?: (file: FileItemData) => void;
   onPreview?: (file: FileItemData) => void;
+  onShare?: (file: FileItemData) => void;
   position?: "top-right" | "right";
 }
 
@@ -33,6 +35,7 @@ export default function FileItemMenu({
   onMove,
   onDelete,
   onPreview,
+  onShare,
   position = "right",
 }: FileItemMenuProps) {
   const [showMenu, setShowMenu] = useState(false);
@@ -104,6 +107,13 @@ export default function FileItemMenu({
       className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
       iconClassName: "text-gray-500",
     },
+    {
+      label: "Share",
+      icon: ShareIcon,
+      action: onShare,
+      className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
+      iconClassName: "text-gray-500",
+    },
     // Only show Move for files, not folders
     ...(file.type === "file"
       ? [

app/components/FileList.tsx

@@ -16,6 +16,7 @@ interface FileListProps {
   onFileMove?: (file: FileItemData) => void;
   onFileDownload?: (file: FileItemData) => void;
   onFileDelete?: (file: FileItemData) => void;
+  onFileShare?: (file: FileItemData) => void;
   selectedFileIds: string[];
   onFileContextMenu?: (file: FileItemData, event: React.MouseEvent) => void;
 }
@@ -33,6 +34,7 @@ export default function FileList({
   onFileMove,
   onFileDownload,
   onFileDelete,
+  onFileShare,
   selectedFileIds,
   onFileContextMenu,
 }: FileListProps) {
@@ -73,6 +75,7 @@ export default function FileList({
                 onMove={onFileMove}
                 onDownload={onFileDownload}
                 onDelete={onFileDelete}
+                onShare={onFileShare}
                 isSelected={selectedFileIds.includes(file.id)}
                 onContextMenu={onFileContextMenu}
               />
@@ -93,6 +96,7 @@ export default function FileList({
                 onMove={onFileMove}
                 onDownload={onFileDownload}
                 onDelete={onFileDelete}
+                onShare={onFileShare}
                 isSelected={selectedFileIds.includes(file.id)}
                 onContextMenu={onFileContextMenu}
               />