Implement calendar view settings and some renames

apps/desktop/src/renderer/components/databases/boards/board-view-column-records.tsx

@@ -4,7 +4,7 @@ import {
   SelectOptionAttributes,
   ViewFilterAttributes,
 } from '@colanode/core';
-import { BoardViewCard } from '@/renderer/components/databases/boards/board-view-card';
+import { BoardViewRecord } from '@/renderer/components/databases/boards/board-view-record';
 import { useView } from '@/renderer/contexts/view';
 import { useRecordsQuery } from '@/renderer/hooks/user-records-query';
 import { RecordProvider } from '@/renderer/components/records/record-provider';
@@ -42,7 +42,7 @@ export const BoardViewColumnRecords = ({
 
         return (
           <RecordProvider key={record.id} record={record} role={role}>
-            <BoardViewCard />
+            <BoardViewRecord />
           </RecordProvider>
         );
       })}

apps/desktop/src/renderer/components/databases/boards/board-view-record.tsx

@@ -11,7 +11,7 @@ interface DragResult {
   field: SelectFieldAttributes;
 }
 
-export const BoardViewCard = () => {
+export const BoardViewRecord = () => {
   const workspace = useWorkspace();
   const view = useView();
   const record = useRecord();
@@ -19,6 +19,9 @@ export const BoardViewCard = () => {
   const [, drag] = useDrag({
     type: 'board-record',
     item: { id: record.id },
+    canDrag: () => {
+      return record.canEdit;
+    },
     end: (_, monitor) => {
       const dropResult = monitor.getDropResult<DragResult>();
       if (dropResult != null) {
@@ -53,19 +56,21 @@ export const BoardViewCard = () => {
       <p className={hasName ? '' : 'text-muted-foreground'}>
         {name ?? 'Unnamed'}
       </p>
-      <div className="flex flex-col gap-1 mt-2">
-        {view.fields.map((viewField) => {
-          if (!viewField.display) {
-            return null;
-          }
+      {view.fields.length > 0 && (
+        <div className="flex flex-col gap-1 mt-2">
+          {view.fields.map((viewField) => {
+            if (!viewField.display) {
+              return null;
+            }
 
-          return (
-            <div key={viewField.field.id}>
-              <RecordFieldValue field={viewField.field} />
-            </div>
-          );
-        })}
-      </div>
+            return (
+              <div key={viewField.field.id}>
+                <RecordFieldValue field={viewField.field} />
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 };

apps/desktop/src/renderer/components/databases/calendars/calendar-view-card.tsx

@@ -1,28 +0,0 @@
-import { useWorkspace } from '@/renderer/contexts/workspace';
-import { RecordNode } from '@colanode/core';
-import { cn } from '@/shared/lib/utils';
-
-interface CalendarViewCardProps {
-  record: RecordNode;
-}
-
-export const CalendarViewCard = ({ record }: CalendarViewCardProps) => {
-  const workspace = useWorkspace();
-
-  const name = record.attributes.name;
-  const hasName = name !== null && name !== '';
-
-  return (
-    <button
-      role="presentation"
-      key={record.id}
-      className={cn(
-        'animate-fade-in flex cursor-pointer flex-col gap-1 rounded-md border p-2 hover:bg-gray-50',
-        hasName ? '' : 'text-muted-foreground'
-      )}
-      onClick={() => workspace.openInModal(record.id)}
-    >
-      {name ?? 'Unnamed'}
-    </button>
-  );
-};

apps/desktop/src/renderer/components/databases/calendars/calendar-view-day.tsx

@@ -1,7 +1,10 @@
 import { cn, isSameDay } from '@/shared/lib/utils';
-import { RecordNode } from '@colanode/core';
-import { CalendarViewCard } from '@/renderer/components/databases/calendars/calendar-view-card';
+import { extractNodeRole, RecordNode } from '@colanode/core';
+import { CalendarViewRecord } from '@/renderer/components/databases/calendars/calendar-view-record';
 import { Plus } from 'lucide-react';
+import { useWorkspace } from '@/renderer/contexts/workspace';
+import { useDatabase } from '@/renderer/contexts/database';
+import { RecordProvider } from '@/renderer/components/records/record-provider';
 
 interface CalendarViewDayProps {
   date: Date;
@@ -16,6 +19,9 @@ export const CalendarViewDay = ({
   records,
   onCreate,
 }: CalendarViewDayProps) => {
+  const workspace = useWorkspace();
+  const database = useDatabase();
+
   const isToday = isSameDay(date, new Date());
   const dateMonth = date.getMonth();
   const displayMonth = month.getMonth();
@@ -42,7 +48,13 @@ export const CalendarViewDay = ({
         </p>
       </div>
       {records.map((record) => {
-        return <CalendarViewCard key={record.id} record={record} />;
+        const role = extractNodeRole(record, workspace.userId) ?? database.role;
+
+        return (
+          <RecordProvider key={record.id} record={record} role={role}>
+            <CalendarViewRecord />
+          </RecordProvider>
+        );
       })}
     </div>
   );

apps/desktop/src/renderer/components/databases/calendars/calendar-view-record.tsx

@@ -0,0 +1,41 @@
+import { useWorkspace } from '@/renderer/contexts/workspace';
+import { useRecord } from '@/renderer/contexts/record';
+import { useView } from '@/renderer/contexts/view';
+import { RecordFieldValue } from '@/renderer/components/records/record-field-value';
+
+export const CalendarViewRecord = () => {
+  const workspace = useWorkspace();
+  const view = useView();
+  const record = useRecord();
+
+  const name = record.name;
+  const hasName = name !== null && name !== '';
+
+  return (
+    <div
+      role="presentation"
+      key={record.id}
+      className="animate-fade-in flex justify-start items-start cursor-pointer flex-col gap-1 rounded-md border p-2 hover:bg-gray-50"
+      onClick={() => workspace.openInModal(record.id)}
+    >
+      <p className={hasName ? '' : 'text-muted-foreground'}>
+        {name ?? 'Unnamed'}
+      </p>
+      {view.fields.length > 0 && (
+        <div className="flex flex-col gap-1 mt-2">
+          {view.fields.map((viewField) => {
+            if (!viewField.display) {
+              return null;
+            }
+
+            return (
+              <div key={viewField.field.id}>
+                <RecordFieldValue field={viewField.field} />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};

apps/desktop/src/renderer/components/databases/calendars/calendar-view.tsx

@@ -6,6 +6,7 @@ import { ViewSearchBar } from '@/renderer/components/databases/search/view-searc
 import { ViewSortButton } from '@/renderer/components/databases/search/view-sort-button';
 import { ViewFilterButton } from '@/renderer/components/databases/search/view-filter-button';
 import { useView } from '@/renderer/contexts/view';
+import { CalendarViewSettings } from '@/renderer/components/databases/calendars/calendar-view-settings';
 
 export const CalendarView = () => {
   const database = useDatabase();
@@ -24,6 +25,7 @@ export const CalendarView = () => {
       <div className="mt-2 flex flex-row justify-between border-b">
         <ViewTabs />
         <div className="invisible flex flex-row items-center justify-end group-hover/database:visible">
+          <CalendarViewSettings />
           <ViewSortButton />
           <ViewFilterButton />
         </div>