Calendar total basic calendar view #210, #160

package.json

@@ -34,7 +34,8 @@
     "@tauri-apps/plugin-log": "^2.0.0-beta.2",
     "@tauri-apps/plugin-process": "^2.0.0-beta.2",
     "@tauri-apps/plugin-shell": "^2.0.0-beta.2",
-    "@tauri-apps/plugin-updater": "^2.0.0-beta.2"
+    "@tauri-apps/plugin-updater": "^2.0.0-beta.2",
+    "react-day-picker": "^9.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.3.0",
@@ -43,8 +44,8 @@
     "@stylistic/eslint-plugin": "^1.6.2",
     "@tauri-apps/api": "^2.0.0-beta.4",
     "@tauri-apps/cli": "^2.0.0-beta.8",
-    "@types/glob": "^8.1.0",
     "@types/d3": "^7.4.3",
+    "@types/glob": "^8.1.0",
     "@types/jest": "^29.5.12",
     "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.17.7",

src/apps/toolbar/modules/Date/infra/DateCalendar.tsx

@@ -0,0 +1,18 @@
+import { DayPicker } from 'react-day-picker';
+
+import { BackgroundByLayersV2 } from '../../../../seelenweg/components/BackgroundByLayers/infra';
+
+import 'react-day-picker/style.css';
+
+export function DateCalendar() {
+  return (
+    <BackgroundByLayersV2 className="calendar-container" prefix="calendar">
+      <DayPicker
+        classNames={{
+          root: 'calendar rdp-root',
+        }}
+        showWeekNumber={true}
+      />
+    </BackgroundByLayersV2>
+  );
+}

src/apps/toolbar/modules/Date/infra/Module.tsx

@@ -0,0 +1,48 @@
+import { Popover } from 'antd';
+import moment from 'moment';
+import { useState } from 'react';
+import { useSelector } from 'react-redux';
+import { DateToolbarModule, useInterval, useWindowFocusChange } from 'seelen-core';
+
+import { Item } from '../../item/infra/infra';
+
+import { Selectors } from '../../shared/store/app';
+
+import { DateCalendar } from './DateCalendar';
+
+interface Props {
+  module: DateToolbarModule;
+}
+
+export function DateModule({ module }: Props) {
+  const dateFormat = useSelector(Selectors.dateFormat);
+
+  const [openCalendar, setOpenCalendar] = useState(false);
+
+  const [date, setDate] = useState(moment().format(dateFormat));
+
+  let interval = dateFormat.includes('ss') ? 1000 : 1000 * 60;
+  useInterval(
+    () => {
+      setDate(moment().format(dateFormat));
+    },
+    interval,
+    [dateFormat],
+  );
+
+  useWindowFocusChange((focused) => {
+    if (!focused) {
+      setOpenCalendar(false);
+    }
+  });
+
+  return (<Popover
+    open={openCalendar}
+    trigger="click"
+    onOpenChange={setOpenCalendar}
+    arrow={false}
+    content={<DateCalendar />}
+  >
+    <Item extraVars={{ date }} module={module} />
+  </Popover>);
+}

src/apps/toolbar/modules/main/infra.tsx

@@ -2,15 +2,14 @@ import { Reorder, useForceUpdate } from 'framer-motion';
 import { debounce } from 'lodash';
 import { JSXElementConstructor, useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { HideMode, useWindowFocusChange } from 'seelen-core';
 import {
-  Placeholder,
+  HideMode, Placeholder,
   ToolbarModule,
-  ToolbarModuleType,
+  ToolbarModuleType, useWindowFocusChange,
 } from 'seelen-core';
 
 import { BackgroundByLayersV2 } from '../../../seelenweg/components/BackgroundByLayers/infra';
-import { DateModule } from '../Date/infra';
+import { DateModule } from '../Date/infra/Module';
 import { DeviceModule } from '../Device/infra';
 import { GenericItem, Item } from '../item/infra/infra';
 import { MediaModule } from '../media/infra/Module';

static/themes/default/theme.toolbar.css

@@ -462,3 +462,58 @@
     }
   }
 }
+
+.calendar-container {
+  margin: var(--popups-margin);
+  width: 350px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: calc(100vh - var(--config-height) - (var(--popups-margin) * 2));
+  padding: var(--popups-margin);  
+  overflow-y: hidden;
+  overflow-x: hidden;
+
+  .bg-layer-1 {
+    opacity: 0.4;
+    filter: saturate(0);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='10' numOctaves='3' stitchTiles='stitch '/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+    background-size: cover;
+    border-radius: 12px;
+  }
+
+  .bg-layer-2 {
+    opacity: 0.85;
+    background-color: var(--color-gray-100);
+    border-radius: 12px;
+  }
+
+  & .calendar {
+    padding: var(--popups-margin); 
+
+    --rdp-accent-color: var(--config-accent-color) !important;
+
+    & .rdp-month_caption {
+      font-style: italic !important;
+      border-bottom: solid 1px var(--color-gray-400);
+    }
+
+    & .rdp-weekdays {
+      font-style: italic !important;
+      opacity: 0.4 !important;
+      border-bottom: solid 1px rgba(var(--config-accent-color-rgb), 0.2) !important;
+    }
+
+    & .rdp-week_number {
+      vertical-align: middle;
+      font-style: italic !important;
+      opacity: 0.4 !important;
+      border-right: solid 1px rgba(var(--config-accent-color-rgb), 0.2) !important;
+    }
+
+    & .rdp-day {
+      vertical-align: middle;
+      background-color: rgba(175, 175, 175, 0.05) !important;
+    }
+  }
+}