Changelog (#399)

* feat: add changelog feature and update site navigation

- Introduced a new Changelog page with pagination and detailed entry views.
- Added components for displaying changelog entries, pagination, and entry details.
- Updated site navigation to include a link to the new Changelog page.
- Enhanced localization for changelog-related texts in marketing.json.

* refactor: enhance Changelog page layout and entry display

- Increased the number of changelog entries displayed per page from 2 to 20 for better visibility.
- Improved the layout of the Changelog page by adjusting the container styles and removing unnecessary divs.
- Updated the ChangelogEntry component to enhance the visual presentation of entries, including a new date badge with an icon.
- Refined the CSS styles for Markdoc headings to improve typography and spacing.

* refactor: enhance Changelog page functionality and layout

- Increased the number of changelog entries displayed per page from 20 to 50 for improved user experience.
- Updated ChangelogEntry component to make the highlight prop optional and refined the layout for better visual clarity.
- Adjusted styles in ChangelogHeader and ChangelogPagination components for a more cohesive design.
- Removed unnecessary order fields from changelog markdown files to streamline content management.

* feat: enhance Changelog entry navigation and data loading

- Refactored ChangelogEntry page to load previous and next entries for improved navigation.
- Introduced ChangelogNavigation component to facilitate navigation between changelog entries.
- Updated ChangelogDetail component to display navigation links and entry details.
- Enhanced data fetching logic to retrieve all changelog entries alongside the current entry.
- Added localization keys for navigation text in marketing.json.

* Update package dependencies and enhance documentation layout

- Upgraded various packages including @turbo/gen and turbo to version 2.6.0, and react-hook-form to version 7.66.0.
- Updated lucide-react to version 0.552.0 across multiple packages.
- Refactored documentation layout components for improved styling and structure.
- Removed deprecated loading components and adjusted navigation elements for better user experience.
- Added placeholder notes in changelog entries for clarity.

apps/web/content/documentation/features/team-collaboration.mdoc

@@ -0,0 +1,276 @@
+---
+title: "Team Collaboration"
+description: "Manage team members, roles, and permissions in your application."
+publishedAt: 2024-04-11
+order: 1
+status: "published"
+---
+
+> **Note:** This is mock/placeholder content for demonstration purposes.
+
+Enable teams to collaborate effectively with built-in team management features.
+
+## Team Accounts
+
+The application supports multi-tenant team accounts where multiple users can collaborate.
+
+### Creating a Team
+
+Users can create new team accounts:
+
+```typescript
+import { createTeamAccount } from '~/lib/teams/create-team';
+
+const team = await createTeamAccount({
+  name: 'Acme Corp',
+  slug: 'acme-corp',
+  ownerId: currentUser.id,
+});
+```
+
+### Team Workspace
+
+Each team has its own workspace with isolated data:
+- Projects and resources
+- Team-specific settings
+- Billing and subscription
+- Activity logs
+
+## Inviting Members
+
+### Send Invitations
+
+Invite new members to your team:
+
+```typescript
+import { inviteTeamMember } from '~/lib/teams/invitations';
+
+await inviteTeamMember({
+  teamId: team.id,
+  email: 'member@example.com',
+  role: 'member',
+});
+```
+
+### Invitation Flow
+
+1. Owner sends invitation via email
+2. Recipient receives email with invitation link
+3. Recipient accepts invitation
+4. Member gains access to team workspace
+
+### Managing Invitations
+
+```tsx
+import { PendingInvitations } from '~/components/teams/pending-invitations';
+
+<PendingInvitations teamId={team.id} />
+```
+
+## Roles and Permissions
+
+### Default Roles
+
+**Owner**
+- Full access to team and settings
+- Manage billing and subscriptions
+- Invite and remove members
+- Delete team
+
+**Admin**
+- Manage team members
+- Manage team resources
+- Cannot access billing
+- Cannot delete team
+
+**Member**
+- View team resources
+- Create and edit own content
+- Limited team settings access
+
+### Custom Roles
+
+Define custom roles with specific permissions:
+
+```typescript
+const customRole = {
+  name: 'Editor',
+  permissions: [
+    'read:projects',
+    'write:projects',
+    'read:members',
+  ],
+};
+```
+
+### Checking Permissions
+
+```typescript
+import { checkPermission } from '~/lib/teams/permissions';
+
+const canEdit = await checkPermission(userId, teamId, 'write:projects');
+
+if (!canEdit) {
+  throw new Error('Insufficient permissions');
+}
+```
+
+## Member Management
+
+### Listing Members
+
+```typescript
+import { getTeamMembers } from '~/lib/teams/members';
+
+const members = await getTeamMembers(teamId);
+```
+
+### Updating Member Role
+
+```typescript
+import { updateMemberRole } from '~/lib/teams/members';
+
+await updateMemberRole({
+  memberId: member.id,
+  role: 'admin',
+});
+```
+
+### Removing Members
+
+```typescript
+import { removeMember } from '~/lib/teams/members';
+
+await removeMember(memberId);
+```
+
+## Team Settings
+
+### Updating Team Info
+
+```tsx
+'use client';
+
+import { useForm } from 'react-hook-form';
+import { updateTeamAction } from '../_lib/server/actions';
+
+export function TeamSettingsForm({ team }) {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      name: team.name,
+      description: team.description,
+    },
+  });
+
+  const onSubmit = async (data) => {
+    await updateTeamAction({ teamId: team.id, ...data });
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <input {...register('name')} placeholder="Team name" />
+      <textarea {...register('description')} placeholder="Description" />
+      <button type="submit">Save Changes</button>
+    </form>
+  );
+}
+```
+
+### Team Avatar
+
+```typescript
+import { uploadTeamAvatar } from '~/lib/teams/avatar';
+
+const avatarUrl = await uploadTeamAvatar({
+  teamId: team.id,
+  file: avatarFile,
+});
+```
+
+## Activity Log
+
+Track team activity for transparency:
+
+```typescript
+import { logActivity } from '~/lib/teams/activity';
+
+await logActivity({
+  teamId: team.id,
+  userId: user.id,
+  action: 'member_invited',
+  metadata: {
+    invitedEmail: 'new@example.com',
+  },
+});
+```
+
+### Viewing Activity
+
+```typescript
+import { getTeamActivity } from '~/lib/teams/activity';
+
+const activities = await getTeamActivity(teamId, {
+  limit: 50,
+  offset: 0,
+});
+```
+
+## Team Switching
+
+Allow users to switch between their teams:
+
+```tsx
+'use client';
+
+import { useTeamAccountWorkspace } from '@kit/team-accounts/hooks/use-team-account-workspace';
+
+export function TeamSwitcher() {
+  const { accounts, account } = useTeamAccountWorkspace();
+
+  return (
+    <select
+      value={account.id}
+      onChange={(e) => switchTeam(e.target.value)}
+    >
+      {accounts.map((team) => (
+        <option key={team.id} value={team.id}>
+          {team.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+```
+
+## Notifications
+
+### Member Joined
+
+```typescript
+await createNotification({
+  teamId: team.id,
+  title: 'New Member',
+  message: `${user.name} joined the team`,
+  type: 'info',
+});
+```
+
+### Role Changed
+
+```typescript
+await createNotification({
+  userId: member.userId,
+  title: 'Role Updated',
+  message: `Your role was changed to ${newRole}`,
+  type: 'info',
+});
+```
+
+## Best Practices
+
+1. **Clear role hierarchy** - Define roles that make sense for your use case
+2. **Principle of least privilege** - Give minimum required permissions
+3. **Audit trail** - Log important team actions
+4. **Easy onboarding** - Simple invitation process
+5. **Self-service** - Let members manage their own settings
+6. **Transparent billing** - Show usage and costs clearly