Function PileLayout

src/renderer/pages/Pile/Layout.jsx:18–98

({ children })

import Chat from './Chat';

export default function PileLayout({ children }) {
  const { pileName } = useParams();
  const { index, refreshIndex } = useIndexContext();
  const { visibleIndex, closestDate } = useTimelineContext();
  const { currentTheme } = usePilesContext();

  const [now, setNow] = useState(DateTime.now().toFormat('cccc, LLL dd, yyyy'));

  useEffect(() => {
    try {
      if (visibleIndex < 5) {
        setNow(DateTime.now().toFormat('cccc, LLL dd, yyyy'));
      } else {
        setNow(DateTime.fromISO(closestDate).toFormat('cccc, LLL dd, yyyy'));
      }
    } catch (error) {
      console.log('Failed to render header date');
    }
  }, [visibleIndex, closestDate]);

  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);

  const themeStyles = useMemo(() => {
    return currentTheme ? currentTheme + 'Theme' : '';
  }, [currentTheme]);

  const osStyles = useMemo(
    () => (window.electron.isMac ? styles.mac : styles.win),
    []
  );

  return (
    <div className={`${styles.frame} ${themeStyles} ${osStyles}`}>
      <div className={styles.bg}></div>
      <div className={styles.main}>
        <div className={styles.sidebar}>
          <div className={styles.top}>
            <div className={styles.part}>
              <div className={styles.count}>
                <span>{index.size}</span> entries
              </div>
            </div>
          </div>
          <Sidebar />
        </div>
        <div className={styles.content}>
          <div className={styles.nav}>
            <div className={styles.left}>
              {pileName} <span style={{ padding: '6px' }}>·</span>
              <motion.span
                key={now}
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
                transition={{ duration: 0.5 }}
              >