@zhang_libo/resource-hub 1.0.2

package/public/components/Skeleton.jsx

@@ -0,0 +1,68 @@
+// Skeleton.jsx
+
+// Inject shimmer keyframes once
+(function() {
+  if (document.getElementById('skeleton-shimmer-style')) return;
+  const style = document.createElement('style');
+  style.id = 'skeleton-shimmer-style';
+  style.textContent = '@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }';
+  document.head.appendChild(style);
+})();
+
+function Skeleton({ rows = 1, type = 'row' }) {
+  const shimmerStyle = {
+    background: 'linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%)',
+    backgroundSize: '200% 100%',
+    animation: 'shimmer 1.5s infinite',
+    borderRadius: '6px',
+  };
+
+  if (type === 'card') {
+    return React.createElement('div', {
+      style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '16px' }
+    },
+      Array.from({ length: rows }).map((_, i) =>
+        React.createElement('div', {
+          key: i,
+          style: {
+            background: 'var(--bg-primary)',
+            border: '1px solid var(--border)',
+            borderRadius: '12px',
+            padding: '16px',
+          }
+        },
+          React.createElement('div', { style: { display: 'flex', gap: '10px', marginBottom: '12px' } },
+            React.createElement('div', { style: { ...shimmerStyle, width: '32px', height: '32px', borderRadius: '6px', flexShrink: 0 } }),
+            React.createElement('div', { style: { ...shimmerStyle, flex: 1, height: '18px', marginTop: '7px' } })
+          ),
+          React.createElement('div', { style: { ...shimmerStyle, height: '12px', marginBottom: '8px', width: '60%' } }),
+          React.createElement('div', { style: { ...shimmerStyle, height: '13px', marginBottom: '6px' } }),
+          React.createElement('div', { style: { ...shimmerStyle, height: '13px', marginBottom: '12px', width: '80%' } }),
+          React.createElement('div', { style: { display: 'flex', gap: '6px' } },
+            React.createElement('div', { style: { ...shimmerStyle, width: '40px', height: '20px', borderRadius: '4px' } }),
+            React.createElement('div', { style: { ...shimmerStyle, width: '40px', height: '20px', borderRadius: '4px' } })
+          )
+        )
+      )
+    );
+  }
+
+  return React.createElement('div', null,
+    Array.from({ length: rows }).map((_, i) =>
+      React.createElement('div', {
+        key: i,
+        style: {
+          display: 'flex', alignItems: 'center', gap: '12px',
+          padding: '12px 0',
+          borderBottom: '1px solid var(--border)',
+        }
+      },
+        React.createElement('div', { style: { ...shimmerStyle, width: '24px', height: '24px', borderRadius: '4px', flexShrink: 0 } }),
+        React.createElement('div', { style: { ...shimmerStyle, width: `${60 + (i % 3) * 15}%`, height: '16px' } }),
+        React.createElement('div', { style: { ...shimmerStyle, width: '80px', height: '16px', marginLeft: 'auto' } })
+      )
+    )
+  );
+}
+
+window.Skeleton = Skeleton;

package/public/components/Toast.jsx

@@ -0,0 +1,80 @@
+// Toast.jsx
+const { useEffect, useRef } = React;
+
+// Single toast item
+function ToastItem({ toast, onRemove }) {
+  const { X, CheckCircle, AlertCircle, Info } = lucide;
+  const timerRef = useRef(null);
+  const [visible, setVisible] = React.useState(false);
+
+  useEffect(() => {
+    // Trigger enter animation
+    requestAnimationFrame(() => setVisible(true));
+    timerRef.current = setTimeout(() => {
+      setVisible(false);
+      setTimeout(() => onRemove(toast.id), 300);
+    }, 3000);
+    return () => clearTimeout(timerRef.current);
+  }, []);
+
+  const iconMap = {
+    success: React.createElement(CheckCircle, { size: 16, style: { color: 'var(--success)', flexShrink: 0 } }),
+    error: React.createElement(AlertCircle, { size: 16, style: { color: 'var(--danger)', flexShrink: 0 } }),
+    info: React.createElement(Info, { size: 16, style: { color: 'var(--brand)', flexShrink: 0 } }),
+  };
+
+  return React.createElement('div', {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '10px',
+      width: '320px',
+      padding: '12px 16px',
+      background: 'var(--bg-primary)',
+      border: '1px solid var(--border)',
+      borderRadius: '10px',
+      boxShadow: 'var(--shadow-dropdown)',
+      marginTop: '8px',
+      transform: visible ? 'translateX(0)' : 'translateX(120%)',
+      opacity: visible ? 1 : 0,
+      transition: 'transform 300ms cubic-bezier(0.4,0,0.2,1), opacity 300ms cubic-bezier(0.4,0,0.2,1)',
+    }
+  },
+    iconMap[toast.type] || iconMap.info,
+    React.createElement('span', {
+      style: { flex: 1, fontSize: '14px', color: 'var(--text-primary)' }
+    }, toast.message),
+    React.createElement('button', {
+      onClick: () => { setVisible(false); setTimeout(() => onRemove(toast.id), 300); },
+      style: { background: 'none', border: 'none', cursor: 'pointer', padding: '2px', color: 'var(--text-secondary)' }
+    }, React.createElement(X, { size: 14 }))
+  );
+}
+
+// Container - reads from AppContext
+function ToastContainer() {
+  const state = window.useAppState();
+  const dispatch = window.useAppDispatch();
+  if (!state) return null;
+
+  const removeToast = (id) => dispatch({ type: 'REMOVE_TOAST', id });
+
+  return React.createElement('div', {
+    style: {
+      position: 'fixed',
+      bottom: '24px',
+      right: '24px',
+      zIndex: 9999,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-end',
+    }
+  },
+    state.toasts.map(toast =>
+      React.createElement(ToastItem, { key: toast.id, toast, onRemove: removeToast })
+    )
+  );
+}
+
+window.ToastContainer = ToastContainer;
+window.ToastItem = ToastItem;

package/public/components/TooltipIconButton.jsx

@@ -0,0 +1,55 @@
+function TooltipIconButton({ label, children, buttonStyle, tooltipOffset = 8, placement = 'top', ...buttonProps }) {
+  const [visible, setVisible] = React.useState(false);
+  const tooltipPositionStyle = placement === 'left'
+    ? {
+        right: `calc(100% + ${tooltipOffset}px)`,
+        top: '50%',
+        transform: 'translateY(-50%)',
+      }
+    : {
+        bottom: `calc(100% + ${tooltipOffset}px)`,
+        left: '50%',
+        transform: 'translateX(-50%)',
+      };
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+      <button
+        aria-label={label}
+        title={label}
+        onMouseEnter={() => setVisible(true)}
+        onMouseLeave={() => setVisible(false)}
+        onFocus={() => setVisible(true)}
+        onBlur={() => setVisible(false)}
+        {...buttonProps}
+        style={buttonStyle}
+      >
+        {children}
+      </button>
+      {visible && (
+        <div
+          role="tooltip"
+          style={{
+            position: 'absolute',
+            ...tooltipPositionStyle,
+            padding: '6px 10px',
+            borderRadius: '10px',
+            background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--control-bg-muted))',
+            border: '1px solid var(--control-border)',
+            color: 'var(--text-primary)',
+            fontSize: '12px',
+            fontWeight: 600,
+            whiteSpace: 'nowrap',
+            pointerEvents: 'none',
+            boxShadow: 'var(--shadow-control-hover)',
+            zIndex: 20,
+          }}
+        >
+          {label}
+        </div>
+      )}
+    </div>
+  );
+}
+
+window.TooltipIconButton = TooltipIconButton;

package/public/context/AppContext.jsx

@@ -0,0 +1,314 @@
+// AppContext — global state via useReducer
+const { createContext, useContext, useReducer } = React;
+
+const AppStateContext = createContext(null);
+const AppDispatchContext = createContext(null);
+
+const initialUiPreferences = window.uiPreferences?.getInitialUiState?.() || {
+  locale: window.i18n?.detectBrowserLocale?.() || 'zh-Hans',
+  theme: localStorage.getItem('rh_theme') || 'system',
+  viewMode: 'card',
+  sortBy: 'hot',
+  quickAccessFilter: null,
+};
+
+function persistUiPreferencesForState(state) {
+  if (!window.uiPreferences?.savePreferencesForActor) return;
+  window.uiPreferences.savePreferencesForActor(state.currentUser || null, {
+    locale: state.locale,
+    theme: state.theme,
+    viewMode: state.viewMode,
+    sortBy: state.sortBy,
+    quickAccessFilter: state.quickAccessFilter,
+  });
+}
+
+const initialState = {
+  currentUser: null,
+  token: sessionStorage.getItem('rh_token'),
+  resources: [],
+  categories: [],
+  tags: [],
+  config: null,
+  favorites: [],
+  history: [],
+  mine: [],
+  locale: initialUiPreferences.locale,
+  theme: initialUiPreferences.theme,
+  searchQuery: '',
+  selectedCategory: null,
+  selectedTags: [],
+  quickAccessFilter: initialUiPreferences.quickAccessFilter,
+  viewMode: initialUiPreferences.viewMode,
+  sortBy: initialUiPreferences.sortBy,
+  homeMode: 'overview',
+  toasts: [],
+  activeModal: null,
+  emailPreview: null,
+};
+
+function appReducer(state, action) {
+  switch (action.type) {
+    case 'LOGIN': {
+      sessionStorage.setItem('rh_token', action.token);
+      const authenticatedPreferences = window.uiPreferences?.getUserPreferences?.(action.user?.id) || initialUiPreferences;
+      if (window.i18n?.applyLocale) window.i18n.applyLocale(authenticatedPreferences.locale);
+      if (window.applyTheme) window.applyTheme(authenticatedPreferences.theme);
+      return {
+        ...state,
+        currentUser: action.user,
+        token: action.token,
+        locale: authenticatedPreferences.locale,
+        theme: authenticatedPreferences.theme,
+        viewMode: authenticatedPreferences.viewMode,
+        sortBy: authenticatedPreferences.sortBy,
+        quickAccessFilter: null,
+        homeMode: 'overview',
+      };
+    }
+
+    case 'LOGOUT': {
+      sessionStorage.removeItem('rh_token');
+      const guestPreferences = window.uiPreferences?.getGuestPreferences?.() || initialUiPreferences;
+      if (window.i18n?.applyLocale) window.i18n.applyLocale(guestPreferences.locale);
+      if (window.applyTheme) window.applyTheme(guestPreferences.theme);
+      return {
+        ...state,
+        currentUser: null,
+        token: null,
+        favorites: [],
+        history: [],
+        mine: [],
+        locale: guestPreferences.locale,
+        theme: guestPreferences.theme,
+        viewMode: guestPreferences.viewMode,
+        sortBy: guestPreferences.sortBy,
+        quickAccessFilter: guestPreferences.quickAccessFilter,
+        homeMode: 'overview',
+      };
+    }
+
+    case 'SET_CURRENT_USER':
+      return { ...state, currentUser: action.user };
+
+    case 'SET_RESOURCES':
+      return { ...state, resources: action.resources };
+
+    case 'SET_CATEGORIES':
+      return { ...state, categories: action.categories };
+
+    case 'SET_TAGS':
+      return { ...state, tags: action.tags };
+
+    case 'SET_CONFIG':
+      return { ...state, config: action.config };
+
+    case 'SET_FAVORITES':
+      return { ...state, favorites: action.favorites };
+
+    case 'SET_HISTORY':
+      return { ...state, history: action.history };
+
+    case 'SET_MINE':
+      return { ...state, mine: action.mine };
+
+    case 'ADD_RESOURCE':
+      return { ...state, resources: [action.resource, ...state.resources] };
+
+    case 'UPDATE_RESOURCE':
+      return {
+        ...state,
+        resources: state.resources.map(r => r.id === action.resource.id ? action.resource : r),
+        favorites: state.favorites.map(r => r.id === action.resource.id ? action.resource : r),
+        history: state.history.map(r => r.id === action.resource.id ? action.resource : r),
+        mine: state.mine.map(r => r.id === action.resource.id ? action.resource : r),
+      };
+
+    case 'SET_RESOURCE_VISIT_COUNT': {
+      const applyVisitCount = (resource) => (
+        resource.id === action.id
+          ? { ...resource, visitCount: action.visitCount }
+          : resource
+      );
+      return {
+        ...state,
+        resources: state.resources.map(applyVisitCount),
+        favorites: state.favorites.map(applyVisitCount),
+        history: state.history.map(applyVisitCount),
+        mine: state.mine.map(applyVisitCount),
+      };
+    }
+
+    case 'DELETE_RESOURCE':
+      return {
+        ...state,
+        resources: state.resources.filter(r => r.id !== action.id),
+        favorites: state.favorites.filter(r => r.id !== action.id),
+        history: state.history.filter(r => r.id !== action.id),
+        mine: state.mine.filter(r => r.id !== action.id),
+      };
+
+    case 'ADD_CATEGORY':
+      return { ...state, categories: [...state.categories, action.category] };
+
+    case 'UPDATE_CATEGORY':
+      return {
+        ...state,
+        categories: state.categories.map(c => c.id === action.category.id ? action.category : c),
+      };
+
+    case 'DELETE_CATEGORY':
+      return {
+        ...state,
+        categories: state.categories.filter(c => c.id !== action.id),
+      };
+
+    case 'TOGGLE_FAVORITE': {
+      const exists = state.favorites.some(r => r.id === action.resource.id);
+      return {
+        ...state,
+        favorites: exists
+          ? state.favorites.filter(r => r.id !== action.resource.id)
+          : [action.resource, ...state.favorites],
+      };
+    }
+
+    case 'SET_THEME': {
+      if (window.applyTheme) window.applyTheme(action.theme);
+      const nextThemeState = { ...state, theme: action.theme };
+      persistUiPreferencesForState(nextThemeState);
+      return nextThemeState;
+    }
+
+    case 'SET_LOCALE': {
+      if (window.i18n?.applyLocale) window.i18n.applyLocale(action.locale);
+      const nextLocaleState = { ...state, locale: action.locale };
+      persistUiPreferencesForState(nextLocaleState);
+      return nextLocaleState;
+    }
+
+    case 'SET_SEARCH':
+      return { ...state, searchQuery: action.query };
+
+    case 'SET_CATEGORY': {
+      const nextCategoryState = {
+        ...state,
+        selectedCategory: action.category,
+        selectedTags: [],
+      };
+      persistUiPreferencesForState(nextCategoryState);
+      return nextCategoryState;
+    }
+
+    case 'TOGGLE_TAG': {
+      const tags = state.selectedTags.includes(action.tag)
+        ? state.selectedTags.filter(t => t !== action.tag)
+        : [...state.selectedTags, action.tag];
+      const nextTagState = { ...state, selectedTags: tags };
+      persistUiPreferencesForState(nextTagState);
+      return nextTagState;
+    }
+
+    case 'SET_QUICK_ACCESS_FILTER': {
+      const nextQuickAccessState = {
+        ...state,
+        quickAccessFilter: action.filter,
+      };
+      persistUiPreferencesForState(nextQuickAccessState);
+      return nextQuickAccessState;
+    }
+
+    case 'CLEAR_FILTERS': {
+      const nextClearState = {
+        ...state,
+        searchQuery: '',
+        selectedCategory: null,
+        selectedTags: [],
+        quickAccessFilter: null,
+      };
+      persistUiPreferencesForState(nextClearState);
+      return nextClearState;
+    }
+
+    case 'SET_VIEW_MODE': {
+      const nextViewModeState = { ...state, viewMode: action.viewMode };
+      persistUiPreferencesForState(nextViewModeState);
+      return nextViewModeState;
+    }
+
+    case 'SET_SORT': {
+      const nextSortState = { ...state, sortBy: action.sortBy };
+      persistUiPreferencesForState(nextSortState);
+      return nextSortState;
+    }
+
+    case 'SET_HOME_MODE':
+      return { ...state, homeMode: action.mode };
+
+    case 'HYDRATE_UI_PREFERENCES': {
+      const basePreferences = {
+        locale: state.locale,
+        theme: state.theme,
+        viewMode: state.viewMode,
+        sortBy: state.sortBy,
+        quickAccessFilter: state.quickAccessFilter,
+      };
+      const nextHydratedPreferences = window.uiPreferences?.sanitizePreferencesForActor?.(
+        Object.prototype.hasOwnProperty.call(action, 'user') ? action.user : state.currentUser,
+        { ...basePreferences, ...(action.preferences || {}) },
+        basePreferences,
+      ) || { ...basePreferences, ...(action.preferences || {}) };
+      if (window.i18n?.applyLocale) window.i18n.applyLocale(nextHydratedPreferences.locale);
+      if (window.applyTheme) window.applyTheme(nextHydratedPreferences.theme);
+      return {
+        ...state,
+        locale: nextHydratedPreferences.locale,
+        theme: nextHydratedPreferences.theme,
+        viewMode: nextHydratedPreferences.viewMode,
+        sortBy: nextHydratedPreferences.sortBy,
+        quickAccessFilter: nextHydratedPreferences.quickAccessFilter,
+      };
+    }
+
+    case 'ADD_TOAST': {
+      const toast = { id: Date.now() + Math.random(), type: action.toastType || 'info', message: action.message };
+      return { ...state, toasts: [...state.toasts, toast] };
+    }
+
+    case 'REMOVE_TOAST':
+      return { ...state, toasts: state.toasts.filter(t => t.id !== action.id) };
+
+    case 'OPEN_MODAL':
+      return { ...state, activeModal: action.modal };
+
+    case 'CLOSE_MODAL':
+      return { ...state, activeModal: null };
+
+    case 'SET_EMAIL_PREVIEW':
+      return { ...state, emailPreview: action.emailPreview };
+
+    default:
+      return state;
+  }
+}
+
+function AppProvider({ children }) {
+  const [state, dispatch] = useReducer(appReducer, initialState);
+  return React.createElement(
+    AppStateContext.Provider,
+    { value: state },
+    React.createElement(AppDispatchContext.Provider, { value: dispatch }, children)
+  );
+}
+
+function useAppState() {
+  return useContext(AppStateContext);
+}
+
+function useAppDispatch() {
+  return useContext(AppDispatchContext);
+}
+
+window.AppProvider = AppProvider;
+window.useAppState = useAppState;
+window.useAppDispatch = useAppDispatch;