feat(core): allow editing calendar name (#12251)

close AF-2569

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added the ability to edit calendar subscription names directly within the interface using an inline editor.

- **Style**
  - Improved the appearance of calendar subscription names by updating layout and alignment for better readability.

- **Bug Fixes**
  - Ensured that custom calendar subscription names are displayed and updated correctly.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/integration/calendar/subscription-setting.css.ts

@@ -80,6 +80,9 @@ export const name = style({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
+  padding: '0px 4px',
+  display: 'inline-flex',
+  alignItems: 'center',
 });
 
 export const allDayEventsContainer = style({

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/integration/calendar/subscription-setting.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, useConfirmModal } from '@affine/component';
+import { Button, InlineEdit, Menu, useConfirmModal } from '@affine/component';
 import {
   type CalendarSubscription,
   IntegrationService,
@@ -41,6 +41,13 @@ export const SubscriptionSetting = ({
     });
   }, [calendar, subscription.url, config?.showAllDayEvents]);
 
+  const handleNameChange = useCallback(
+    (value: string) => {
+      calendar.updateSubscription(subscription.url, { name: value });
+    },
+    [calendar, subscription.url]
+  );
+
   if (!config) return null;
 
   return (
@@ -61,7 +68,13 @@ export const SubscriptionSetting = ({
             style={{ color: config.color }}
           />
         </Menu>
-        <div className={styles.name}>{name}</div>
+        <InlineEdit
+          className={styles.name}
+          editable
+          trigger="click"
+          value={name}
+          onChange={handleNameChange}
+        />
         <UnsubscribeButton url={subscription.url} name={name} />
       </div>
       <div className={styles.divider} />

packages/frontend/core/src/modules/integration/entities/calendar-subscription.ts

@@ -32,7 +32,12 @@ export class CalendarSubscription extends Entity<{ url: string }> {
     this.store.watchSubscriptionCache(this.props.url),
     ''
   );
-  name$ = this.content$.selector(content => {
+  name$ = LiveData.computed(get => {
+    const config = get(this.config$);
+    if (config?.name !== undefined) {
+      return config.name;
+    }
+    const content = get(this.content$);
     if (!content) return '';
     try {
       const jCal = ICAL.parse(content ?? '');
@@ -42,6 +47,7 @@ export class CalendarSubscription extends Entity<{ url: string }> {
       return '';
     }
   });
+
   eventsByDateMap$ = LiveData.computed(get => {
     const content = get(this.content$);
     const config = get(this.config$);

packages/frontend/core/src/modules/integration/store/calendar.ts

@@ -8,6 +8,7 @@ import type { WorkspaceService } from '../../workspace';
 
 export interface CalendarSubscriptionConfig {
   color: string;
+  name?: string;
   showEvents?: boolean;
   showAllDayEvents?: boolean;
 }