create-lupine 1.0.13 → 1.0.15

package/templates/responsive-starter/web/src/components/mine-settings-page.tsx

@@ -0,0 +1,219 @@
+import {
+  ActionSheetSelect,
+  CssProps,
+  HeaderWithBackFrame,
+  HtmlVar,
+  NotificationColor,
+  NotificationMessage,
+  RefProps,
+  SliderFrame,
+  SliderFrameHookProps,
+  ToggleSwitch,
+  ToggleSwitchSize,
+} from 'lupine.components';
+import { MineService } from '../services/mine-service';
+import { MineAboutPage } from './mine-about-page';
+
+export const MineSettingsPage = (props: { sliderFrameHook: SliderFrameHookProps; onDataChanged: () => void }) => {
+  const innerSliderHook: SliderFrameHookProps = {};
+
+  const onClearAll = async () => {
+    await ActionSheetSelect.show({
+      title: 'DANGER: Are you sure you want to permanently delete ALL local data? This cannot be undone.',
+      options: ['Erase Everything'],
+      cancelButtonText: 'Cancel',
+      handleClicked: async (index: number, close: () => void) => {
+        close();
+        if (index === 0) {
+          MineService.clearAllData();
+          props.onDataChanged();
+        }
+      },
+    });
+  };
+
+  const onClearCache = async () => {
+    // Fake mock loading for UX
+    const loader = document.createElement('div');
+    loader.style.position = 'fixed';
+    loader.style.top = '50%';
+    loader.style.left = '50%';
+    loader.style.transform = 'translate(-50%, -50%)';
+    loader.style.background = 'rgba(0,0,0,0.8)';
+    loader.style.color = '#fff';
+    loader.style.padding = '16px 24px';
+    loader.style.borderRadius = '8px';
+    loader.style.zIndex = '9999';
+    loader.innerText = 'Clearing cache...';
+    document.body.appendChild(loader);
+
+    setTimeout(() => {
+      document.body.removeChild(loader);
+      NotificationMessage.sendMessage('Cache cleared.', NotificationColor.Success);
+    }, 800);
+  };
+
+  const renderContent = () => {
+    const css: CssProps = {
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1',
+      padding: '0 16px',
+      backgroundColor: 'var(--secondary-bg-color)',
+      overflowY: 'auto',
+
+      '.setting-section-group': {
+        marginBottom: '24px',
+      },
+      '.setting-section-title': {
+        fontSize: '14px',
+        color: 'var(--secondary-color)',
+        marginBottom: '8px',
+        paddingLeft: '16px',
+        marginTop: '16px',
+      },
+      '.setting-section-block': {
+        backgroundColor: 'var(--primary-bg-color)',
+        borderRadius: '12px',
+        overflow: 'hidden',
+      },
+      '.setting-section-item': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '16px',
+        borderBottom: '1px solid var(--primary-border-color)',
+        cursor: 'pointer',
+        transition: 'background-color 0.2s',
+      },
+      '.setting-section-item:last-child': {
+        borderBottom: 'none',
+      },
+      '.setting-section-item:active': {
+        backgroundColor: 'rgba(0,0,0,0.02)',
+      },
+      '.setting-section-item-text': {
+        fontSize: '16px',
+        color: 'var(--primary-color)',
+      },
+      '.setting-section-item-text.danger': {
+        color: '#ff4d4f',
+      },
+      '.setting-section-item-icon': {
+        color: 'var(--secondary-color)',
+        opacity: 0.5,
+      },
+      'a.setting-section-item': {
+        textDecoration: 'none',
+      },
+    };
+
+    const ref: RefProps = {
+      onLoad: async (el: Element) => {
+        // any sub loaders
+      },
+    };
+
+    return (
+      <div css={css} ref={ref} class='user-settings-top'>
+        <div class='setting-section-group'>
+          <div class='setting-section-title'>App Layout</div>
+          <div class='setting-section-block'>
+            <div class='setting-section-item'>
+              <div class='setting-section-item-text'>
+                <div style={{ fontWeight: 'bold' }}>Desktop Menu</div>
+                <div style={{ fontSize: '14px', color: 'var(--secondary-color)', marginTop: '4px' }}>
+                  {(localStorage.getItem('app-layout') || 'tabs') === 'sidemenu' ? 'Sidebar Menu' : 'Bottom Tabs'}
+                </div>
+              </div>
+              <div class='setting-section-item-icon' style={{ opacity: 1 }}>
+                <ToggleSwitch
+                  size={ToggleSwitchSize.Medium}
+                  checked={(localStorage.getItem('app-layout') || 'tabs') === 'sidemenu'}
+                  disabled={false}
+                  onClick={async (v) => {
+                    const newLayout = v ? 'sidemenu' : 'tabs';
+                    localStorage.setItem('app-layout', newLayout);
+                    dom.value = renderContent(); // Re-render first
+
+                    await ActionSheetSelect.show({
+                      title: 'Layout changed. Restart app to apply?',
+                      options: ['Restart Now'],
+                      cancelButtonText: 'Later',
+                      handleClicked: async (index: number, close: () => void) => {
+                        close();
+                        if (index === 0) {
+                          window.location.href = '/';
+                        }
+                      },
+                    });
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class='setting-section-group'>
+          <div class='setting-section-title'>Application</div>
+          <div class='setting-section-block'>
+            <a
+              class='setting-section-item'
+              href='javascript:void(0)'
+              onClick={() => {
+                innerSliderHook.load!(<MineAboutPage sliderFrameHook={innerSliderHook} />);
+              }}
+            >
+              <div class='setting-section-item-text'>Feedback & Support</div>
+              <div class='setting-section-item-icon'>
+                <i class='ifc-icon ma-chevron-right' />
+              </div>
+            </a>
+            <div class='setting-section-item' onClick={onClearCache}>
+              <div class='setting-section-item-text'>Clear Temporary Cache</div>
+              <div class='setting-section-item-icon'>
+                <i class='ifc-icon ma-chevron-right' />
+              </div>
+            </div>
+            <div
+              class='setting-section-item'
+              onClick={() => {
+                // props.sliderFrameHook.addClass!('desktop-slide-left');
+                // innerSliderHook.addClass!('desktop-slide-right');
+                innerSliderHook.load!(<MineAboutPage sliderFrameHook={innerSliderHook} />);
+              }}
+            >
+              <div class='setting-section-item-text'>About</div>
+              <div class='setting-section-item-icon'>
+                <i class='ifc-icon ma-chevron-right' />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class='setting-section-group'>
+          <div class='setting-section-title text-danger'>Danger Zone</div>
+          <div class='setting-section-block'>
+            <div class='setting-section-item' onClick={onClearAll}>
+              <div class='setting-section-item-text danger'>Clear All Application Data</div>
+              <div class='setting-section-item-icon'>
+                <i class='ifc-icon ma-delete-outline text-danger' />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const dom = new HtmlVar(renderContent());
+
+  return (
+    <HeaderWithBackFrame title='Settings' onBack={(event) => props.sliderFrameHook.close!(event)}>
+      <>
+        <SliderFrame hook={innerSliderHook} />
+        {dom.node}
+      </>
+    </HeaderWithBackFrame>
+  );
+};

package/templates/responsive-starter/web/src/components/mobile-top-search-menu.tsx

@@ -0,0 +1,119 @@
+import { CssProps, RefProps } from 'lupine.components';
+import { MobileTopSysIcon } from 'lupine.components';
+
+// Helper hook pattern to pass search calls back to the Homepage
+export const NoteSearchHelper: {
+  triggerSearch?: (query: string) => void;
+} = {};
+
+export const MobileTopSearchMenu = () => {
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'row',
+    width: '100%',
+    alignItems: 'center',
+
+    '.mobile-top-menu-left': {
+      display: 'flex',
+      flexDirection: 'row',
+      flex: 1,
+      alignItems: 'center',
+      fontSize: '18px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+    },
+    '.mobile-top-menu-right': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: '12px',
+    },
+    '.mtm-input-group': {
+      display: 'none',
+      flex: 1,
+      marginRight: '12px',
+    },
+    '.mtm-input-box': {
+      width: '100%',
+      padding: '4px 8px',
+      borderRadius: '4px',
+      border: '1px solid var(--secondary-border-color)',
+      backgroundColor: 'var(--primary-bg-color)',
+      color: 'var(--primary-color)',
+    },
+    '.mtm-search-icon, .mtm-menu-icon, .mtm-search-cancel': {
+      cursor: 'pointer',
+      display: 'flex',
+    },
+    '.mtm-search-cancel': {
+      display: 'none',
+      fontSize: '14px',
+      color: 'var(--primary-color)',
+    },
+
+    // Toggle state specific styles
+    '&.show-search': {
+      '.mobile-title': { display: 'none' },
+      '.mtm-search-icon': { display: 'none' },
+      '.mtm-input-group': { display: 'flex' },
+      '.mtm-search-cancel': { display: 'flex' },
+    },
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      ref.$('.mtm-input-box')?.addEventListener('keyup', (e: Event) => {
+        if ((e as KeyboardEvent).key === 'Enter') {
+          onStartSearch();
+        }
+      });
+    },
+  };
+
+  const toggleSearchMode = () => {
+    const root = ref.current;
+    if (root) {
+      const isSearchMode = root.classList.toggle('show-search');
+      if (isSearchMode) {
+        (ref.$('.mtm-input-box') as HTMLElement)?.focus();
+      } else {
+        // Clear search when canceling
+        (ref.$('.mtm-input-box') as HTMLInputElement).value = '';
+        NoteSearchHelper.triggerSearch?.('');
+      }
+    }
+  };
+
+  const onStartSearch = () => {
+    const val = (ref.$('.mtm-input-box') as HTMLInputElement).value;
+    NoteSearchHelper.triggerSearch?.(val);
+  };
+
+  return (
+    <div ref={ref} css={css} class='mobile-top-menu-box'>
+      <div class='mobile-top-menu-left'>
+        <div class='mobile-title'>Notes</div>
+        <div class='mtm-input-group'>
+          <input
+            type='text'
+            spellcheck={false}
+            class='mtm-input-box'
+            placeholder='Search notes...'
+            autocomplete='off'
+          />
+        </div>
+      </div>
+      <div class='mobile-top-menu-right'>
+        <div class='mtm-search-cancel' onClick={toggleSearchMode}>
+          Cancel
+        </div>
+        <div class='mtm-search-icon' onClick={toggleSearchMode}>
+          <i class='ifc-icon bs-search'></i>
+        </div>
+        <div class='mtm-menu-icon'>
+          <MobileTopSysIcon />
+        </div>
+      </div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/components/note-detail.tsx

@@ -0,0 +1,116 @@
+import {
+  CssProps,
+  PageProps,
+  RefProps,
+  SliderFrameHookProps,
+  HeaderWithBackFrame,
+  ActionSheetSelect,
+} from 'lupine.components';
+import { LocalNoteProps, LocalNotesService } from '../services/local-notes-service';
+import { NoteEditComponent } from './note-edit';
+
+interface NoteDetailProps {
+  note: LocalNoteProps;
+  sliderFrameHook: SliderFrameHookProps;
+  onSaved: () => void;
+}
+
+export const NoteDetailComponent = async (props: NoteDetailProps) => {
+  const css: CssProps = {
+    flex: 1,
+    overflowY: 'auto',
+    padding: '24px',
+    backgroundColor: 'var(--primary-bg-color)',
+
+    '.note-detail-title': {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+      marginBottom: '12px',
+      lineHeight: '1.4',
+    },
+    '.note-detail-date': {
+      fontSize: '13px',
+      color: 'var(--secondary-color)',
+    },
+    '.note-detail-meta': {
+      display: 'flex',
+      gap: '12px',
+      alignItems: 'center',
+      marginBottom: '24px',
+      paddingBottom: '16px',
+      borderBottom: '1px solid var(--primary-border-color)',
+    },
+    '.note-detail-content': {
+      fontSize: '16px',
+      color: 'var(--primary-color)',
+      lineHeight: '1.6',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-word',
+    },
+    '.header-action-icon': {
+      fontSize: '20px',
+      padding: '4px',
+      cursor: 'pointer',
+      color: 'var(--primary-color)',
+    },
+    '.header-actions-container': {
+      display: 'flex',
+      gap: '16px',
+      alignItems: 'center',
+    },
+    '.header-action-delete': {
+      color: '#ff4d4f',
+    },
+    '.note-detail-color-marker': {
+      width: '16px',
+      height: '16px',
+      borderRadius: '4px',
+    },
+  };
+
+  const onEdit = () => {
+    // Open edit component and pass the current note
+    props.sliderFrameHook.load!(
+      <NoteEditComponent note={props.note} sliderFrameHook={props.sliderFrameHook} onSaved={props.onSaved} />
+    );
+  };
+
+  const onDelete = async () => {
+    await ActionSheetSelect.show({
+      title: 'Are you sure you want to delete this note?',
+      options: ['Remove'],
+      cancelButtonText: 'Cancel',
+      handleClicked: async (index: number, close: () => void) => {
+        close();
+        if (index === 0) {
+          LocalNotesService.deleteNote(props.note.id);
+          props.onSaved(); // trigger list refresh
+          props.sliderFrameHook.close!(new MouseEvent('click')); // close detail view
+        }
+      },
+    });
+  };
+
+  const pageRight = (
+    <div class='header-actions-container'>
+      <i class='ifc-icon ma-pencil-outline header-action-icon' onClick={onEdit}></i>
+      <i class='ifc-icon ma-delete-off-outline header-action-icon header-action-delete' onClick={onDelete}></i>
+    </div>
+  );
+
+  return (
+    <HeaderWithBackFrame title='Details' onBack={(e: Event) => props.sliderFrameHook.close!(e)} right={pageRight}>
+      <div css={css} class='note-detail-wrapper no-scrollbar-container flex-col h-100'>
+        <div class='note-detail-title'>{props.note.title}</div>
+        <div class='note-detail-meta'>
+          {props.note.color && (
+            <div class='note-detail-color-marker' style={{ backgroundColor: props.note.color }}></div>
+          )}
+          <div class='note-detail-date'>{new Date(props.note.updatedAt).toLocaleString()}</div>
+        </div>
+        <div class='note-detail-content'>{props.note.content}</div>
+      </div>
+    </HeaderWithBackFrame>
+  );
+};

package/templates/responsive-starter/web/src/components/note-edit.tsx

@@ -0,0 +1,154 @@
+import {
+  CssProps,
+  NotificationColor,
+  NotificationMessage,
+  RefProps,
+  SliderFrameHookProps,
+  HeaderWithBackFrame,
+  ActionSheetColorPicker,
+} from 'lupine.components';
+// HEditor relies on complex setup in original app, fallback to simple textarea for robustness here
+import { LocalNoteProps, LocalNotesService } from '../services/local-notes-service';
+
+export const NoteEditComponent = (props: {
+  note?: LocalNoteProps;
+  sliderFrameHook: SliderFrameHookProps;
+  onSaved: () => void;
+}) => {
+  const isEdit = !!props.note;
+  const noteId = props.note ? props.note.id : -1;
+  const defaultTitle = props.note ? props.note.title : '';
+  const defaultContent = props.note ? props.note.content : '';
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      // Auto-focus title if new note
+      if (!isEdit) {
+        const tInput = ref.$('.note-edit-title-input') as HTMLInputElement;
+        tInput?.focus();
+      }
+    },
+  };
+
+  let selectedColor = props.note?.color || '';
+
+  const pickColor = async () => {
+    const res = await ActionSheetColorPicker({
+      value: selectedColor,
+      title: 'Select Color Tag',
+    });
+    if (res !== undefined) {
+      selectedColor = res;
+      const ind = ref.$('.note-color-preview') as HTMLDivElement;
+      if (ind) ind.style.backgroundColor = res || 'transparent';
+    }
+  };
+
+  const onSave = () => {
+    const title = (ref.$('.note-edit-title-input') as HTMLInputElement).value.trim();
+    const content = (ref.$('.note-edit-body-input') as HTMLTextAreaElement).value.trim();
+
+    if (!title) {
+      NotificationMessage.sendMessage('Please enter a note title', NotificationColor.Error);
+      return;
+    }
+
+    LocalNotesService.saveNote({
+      id: noteId,
+      title,
+      content,
+      color: selectedColor,
+      updatedAt: Date.now(),
+    });
+
+    NotificationMessage.sendMessage(isEdit ? 'Modified and saved' : 'Note added', NotificationColor.Success);
+    props.onSaved();
+    props.sliderFrameHook.close!(new MouseEvent('click'));
+  };
+
+  const css: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    backgroundColor: 'var(--primary-bg-color)',
+    padding: '16px',
+
+    '.note-edit-title-input': {
+      width: '100%',
+      fontSize: '20px',
+      fontWeight: 'bold',
+      padding: '8px',
+      backgroundColor: 'transparent',
+      color: 'var(--primary-color)',
+      outline: 'none',
+      marginBottom: '16px',
+      '&:focus': {
+        borderBottomColor: 'var(--primary-accent-color)',
+      },
+    },
+    '.note-edit-body-input': {
+      flex: 1,
+      padding: '12px',
+      backgroundColor: 'transparent',
+      color: 'var(--primary-color)',
+      fontSize: '16px',
+      resize: 'none',
+      outline: 'none',
+      lineHeight: '1.6',
+    },
+    '.note-edit-color-row': {
+      display: 'flex',
+      alignItems: 'center',
+      padding: '12px',
+      cursor: 'pointer',
+      backgroundColor: 'var(--secondary-bg-color)',
+      borderRadius: '8px',
+      marginBottom: '16px',
+      color: 'var(--primary-color)',
+      fontWeight: 'bold',
+      fontSize: '16px',
+    },
+  };
+
+  return (
+    <HeaderWithBackFrame
+      title={isEdit ? 'Edit Note' : 'New Note'}
+      onBack={(e: Event) => props.sliderFrameHook.close!(e)}
+      right={
+        <div
+          onClick={onSave}
+          style={{
+            color: 'var(--primary-accent-color)',
+            fontWeight: 'bold',
+            fontSize: '16px',
+            padding: '0 8px',
+            cursor: 'pointer',
+          }}
+        >
+          Save
+        </div>
+      }
+    >
+      <div ref={ref} css={css} class='note-edit-container flex-col h-100'>
+        <input
+          type='text'
+          class='input-base note-edit-title-input'
+          placeholder='Title...'
+          value={defaultTitle}
+          maxLength={50}
+        />
+        <div class='note-edit-color-row' onClick={pickColor}>
+          <div class='flex-1'>Color Tag</div>
+          <div
+            class='note-color-preview color-preview-box'
+            style={{ backgroundColor: selectedColor || 'transparent' }}
+          ></div>
+          <i class='ifc-icon ma-pencil-outline icon-btn-secondary' />
+        </div>
+        <textarea class='input-base note-edit-body-input' placeholder='Write your note...'>
+          {defaultContent}
+        </textarea>
+      </div>
+    </HeaderWithBackFrame>
+  );
+};