Merge pull request #130 from YakuBrangJa/main

feat: App Setting (Enhanced mobile mode)

apps/docs/content/2.api/1.components.md

@@ -108,11 +108,15 @@ Not found!
 
 ::code-block{label="Preview"}
 ::block-hero
+
 ---
+
 cta: - Get started - /introduction/getting-started
 secondary: - Open on GitHub → - https://github.com/nuxtlabs/docus
 snippet: npx nuxi@latest init docus-app -t nuxtlabs/docus-starter
+
 ---
+
 #title
 Document-driven framework
 
@@ -250,9 +254,11 @@ This is the content of the callout.
 
 ::code-block{label="Preview"}
 ::card
+
 ---
-icon: logos:nuxt-icon
----
+
+## icon: logos:nuxt-icon
+
 #title
 Nuxt Architecture.
 #description

apps/myanmar_calendar/package.json

@@ -37,6 +37,7 @@
     "@radix-ui/react-context-menu": "^2.1.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
@@ -59,6 +60,8 @@
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
     "react-redux": "^8.1.3",
+    "react-router": "^6.20.0",
+    "react-router-dom": "^6.20.0",
     "sonner": "^1.2.3",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.6",

apps/myanmar_calendar/src/components/LanguageMenu.tsx

@@ -19,7 +19,7 @@ const LanguageMenu = ({
     <Menu as="div" className="relative">
       <Menu.Button
         type="button"
-        className="capitalize flex items-center gap-x-1.5 rounded-md bg-gray-0 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+        className="flex items-center gap-x-1.5 rounded-md bg-gray-0 px-3 py-2 text-sm font-semibold capitalize text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
       >
         <LanguageIcon
           className="-ml-1 mr-2 h-5 w-5 text-gray-400"

apps/myanmar_calendar/src/components/MyanmarCalendar.tsx

@@ -18,7 +18,6 @@ import FullMoonIcon from "../assets/icons/FullMoonIcon";
 import { classNames } from "@/utils/classNames";
 import LanguageMenu, { Language } from "./LanguageMenu";
 // import DayDialog from "./modals/DayDialog(Depre)";
-import { getLocalTime } from "@/utils/helpers";
 import useKeyPress from "../hooks/useKeyPress";
 import {
   ContextMenu,
@@ -28,6 +27,7 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/menus/context-menu";
 import RenderDayDialog2 from "./modals/DayDialog/RenderDayDialog";
+import { getLocalTime } from "@/utils/dateTimeHelper";
 
 const colStartClasses = [
   "",
@@ -101,7 +101,7 @@ export default function MyanmarCalendar() {
             <time dateTime={format(firstDayCurrentMonth, "yyyy-MM-dd")}>
               {format(firstDayCurrentMonth, "MMMM yyyy")}
             </time>
-            <div className="font-normal text-sm">
+            <div className="text-sm font-normal">
               {i18n("Myanmar Year", "english", language as any)}{" "}
               {i18n(
                 engToMyanmarNumber(
@@ -220,15 +220,15 @@ export default function MyanmarCalendar() {
                         setSelectedDay(day);
                       }}
                     >
-                      <div className="absolute top-3 left-3 text-sm">
+                      <div className="absolute left-3 top-3 text-sm">
                         {i18n(
                           engToMyanmarNumber(englishToMyanmarDate(day).date),
                           "myanmar",
                           language as any,
                         )}
                       </div>
 
-                      <div className="absolute top-3 right-3 text-xs font-light">
+                      <div className="absolute right-3 top-3 text-xs font-light">
                         <div>
                           {englishToMyanmarDate(day).moonPhase === "လပြည့်" && (
                             <>
@@ -245,7 +245,7 @@ export default function MyanmarCalendar() {
                                       language as any,
                                     ) === "လါ၁ ှဲၤ" && "လါပှဲၤ"}
                               </div>
-                              <FullMoonIcon className="ml-3.5 w-6 h-6" />
+                              <FullMoonIcon className="ml-3.5 h-6 w-6" />
                             </>
                           )}
                         </div>

apps/myanmar_calendar/src/components/MyanmarCalendar2.tsx

@@ -7,7 +7,7 @@ function MyanmarCalendar2() {
   return (
     <>
       <Header />
-      <main className="h-[calc(100vh-theme(spacing.nav-h))] supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100dvh]:h-[calc(100svh-theme(spacing.nav-h))] flex items-stretch ">
+      <main className="flex h-[calc(100vh-theme(spacing.nav-h))] items-stretch supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100dvh]:h-[calc(100svh-theme(spacing.nav-h))] ">
         <Sidebar />
         <Calendar />
       </main>

apps/myanmar_calendar/src/components/layouts/Calendar/Calendar.tsx

@@ -1,11 +1,13 @@
 import { RootState } from "@/store";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 
 import WeekMode from "./WeekMode/WeekMode";
 import MonthMode from "./MonthMode/MonthMode";
 import YearMode from "./YearMode/YearMode";
 import { cn } from "@/lib/utils";
+import { useMotionValueEvent, useScroll } from "framer-motion";
+import useScrollEvent from "@/hooks/useScrollEvent";
 
 const calendar_modes = {
   W: <WeekMode />,
@@ -17,14 +19,26 @@ function Calendar() {
   const calendarMode = useSelector(
     (state: RootState) => state.calendarState.calendarMode,
   );
-  // const sidebarOpen = useSelector((state: RootState) => state.systemState.sidebarOpen);
-  // const sidebarOpen = useSelector((state: RootState) => state.systemState.sidebarOpen);
+
+  // const [showOverflowInset, setShowOverflowInset] = useState(false)
+
+  // const calendarRef = useScrollEvent({
+  //   customCallback: ({offsetHeight,scrollHeight,scrollTop}) => {
+  //     if(offsetHeight === scrollHeight) return
+
+  //     setShowOverflowInset(true)
+
+  //     if((scrollHeight - offsetHeight) === scrollTop) {
+  //       setShowOverflowInset(false)
+  //     }
+  //   }
+  // })
 
   return (
     <section
       aria-label="Calendar"
       className={cn(
-        "flex-1 h-[calc(100vh-theme(spacing.nav-h))] supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100svh]:h-[calc(100svh-theme(spacing.nav-h))] xl:border-l  xl:border-gray-200 __scrollbar-md",
+        "__scrollbar-md h-[calc(100vh-theme(spacing.nav-h))] flex-1 supports-[height:100cqh]:h-[calc(100cqh-theme(spacing.nav-h))] supports-[height:100svh]:h-[calc(100svh-theme(spacing.nav-h))]  xl:border-l xl:border-gray-200",
       )}
     >
       {calendar_modes[calendarMode]}

apps/myanmar_calendar/src/components/layouts/Calendar/CommingSoonBanner.tsx

@@ -1,10 +1,20 @@
 import React from "react";
 
-function CommingSoonBanner({ title }: { title: string }) {
+interface CommingSoonBannerProps {
+  title: string;
+  commingSoonText?: boolean;
+}
+
+function CommingSoonBanner({
+  title,
+  commingSoonText = true,
+}: CommingSoonBannerProps) {
   return (
-    <div className="w-full h-full flex flex-col items-center justify-center gap3">
-      <p className="text-[1.3rem] text-gray-400 font-semibold">{title}</p>
-      <p className="text-[2.8rem] font-bold text-gray-300">Coming Soon</p>
+    <div className="gap3 flex h-full w-full flex-col items-center justify-center">
+      <p className="text-[1.3rem] font-semibold text-gray-400">{title}</p>
+      {commingSoonText && (
+        <p className="text-[2.8rem] font-bold text-gray-300">Coming Soon</p>
+      )}
     </div>
   );
 }

apps/myanmar_calendar/src/components/layouts/Calendar/MonthMode/MonthCell.tsx

@@ -56,29 +56,29 @@ function MonthCell({ day, calendarState }: MonthCellT) {
     // min-h-[8.5rem]
     <div
       className={cn(
-        "border-b border-r flex gap-1 flex-col items-stretch border-gray-200 p-2 py-[0.25rem] pb-[0.3rem]  min-h-[8.5rem] hover:bg-gray-50",
+        "flex min-h-[8.5rem] flex-col items-stretch gap-1 border-b border-r border-gray-200 p-2 py-[0.25rem] pb-[0.3rem]  hover:bg-gray-50 dark:border-gray-100",
         dayIsInEndWeek ? "min-h-[8.65rem] pb-[0.45rem]" : "",
       )}
       onClick={() => {
         dispatch(setDayDialongTargetDay(day.toISOString()));
       }}
     >
       {/* ------ CELL TOP ------- */}
-      <div className=" flex justify-between items-start">
+      <div className=" flex items-start justify-between">
         <time
           dateTime={format(day, "yyyy-MM-dd")}
           className={cn(
-            "flex justify-start -mt-[0.05rem] text-gray-500 flex-1 text-[0.825rem] leading-5",
+            "-mt-[0.05rem] flex flex-1 justify-start text-[0.825rem] leading-5 text-gray-500",
             dayBelongsInActiveMonth ? "text-gray-500" : "text-gray-300",
           )}
         >
           {mmDate}
         </time>
         <time
           className={cn(
-            "flex justify-center font-medium text-[1.025rem]  h-[1.6rem] aspect-square leading-7",
+            "flex aspect-square h-[1.6rem] justify-center  text-[1.025rem] font-medium leading-7",
             dayBelongsInActiveMonth ? "text-gray-600" : "text-gray-300",
-            dayIsToday && "text-gray-50 bg-red-500 rounded-full",
+            dayIsToday && "rounded-full bg-red-500 text-gray-50",
           )}
           dateTime={format(day, "yyyy-MM-dd")}
         >
@@ -90,21 +90,21 @@ function MonthCell({ day, calendarState }: MonthCellT) {
         {/* ASTRO */}
         <div
           className={cn(
-            "flex flex-1 self-stretch min-w-[1.5rem] justify-end items-center gap-1 transition-all",
+            "flex min-w-[1.5rem] flex-1 items-center justify-end gap-1 self-stretch transition-all",
             show.astroEvent ? "opacity-100" : "opacity-0",
           )}
         >
           {/* long text on large screen */}
           <span
-            className={`hidden md3:inline text-[0.65rem] whitespace-nowrap ${
+            className={`hidden whitespace-nowrap text-[0.65rem] md3:inline ${
               myanmarDate.pyathada ? "text-red-500" : "text-blue-500"
             }`}
           >
             {myanmarDate.pyathada || myanmarDate.yatyaza}
           </span>
           {/* short text on small screen */}
           <span
-            className={`inline md3:hidden text-[0.65rem] ${
+            className={`inline text-[0.65rem] md3:hidden ${
               myanmarDate.pyathada ? "text-red-400" : "text-blue-500"
             }`}
           >
@@ -119,15 +119,15 @@ function MonthCell({ day, calendarState }: MonthCellT) {
         type="hover"
         scrollHideDelay={100}>
       <ScrollViewport className="max-h-full w-full"> */}
-      <div className="flex-1 __scrollbar-xxs">
+      <div className="__scrollbar-xxs flex-1">
         <ul className=" space-y-[0.15rem] ">
           {checkedEvents.map((eventCalendar) => (
             <Fragment key={eventCalendar.id}>
               {eventCalendar.events.map((event) => (
                 // h-[1.25rem]
                 <li
                   key={event}
-                  className="rounded-sm flex items-start py-[0.335rem] px-1 gap-1 bg-gray-100"
+                  className="flex items-start gap-1 rounded-sm bg-gray-100 px-1 py-[0.335rem]"
                   style={{
                     backgroundColor: modifyColorOpacity(
                       eventCalendar.tagColor,
@@ -137,13 +137,13 @@ function MonthCell({ day, calendarState }: MonthCellT) {
                   }}
                 >
                   <span
-                    className="inline-block w-[0.35rem] h-[0.35rem] rounded-full bg-gray-500 mt-[0.15rem] flex-shrink-0"
+                    className="mt-[0.15rem] inline-block h-[0.35rem] w-[0.35rem] flex-shrink-0 rounded-full bg-gray-500"
                     style={{
                       backgroundColor: eventCalendar.tagColor,
                     }}
                   ></span>
                   <span
-                    className="text-[0.7rem] text-gray-600 -mt-[0.025rem] font-semibold leading-[0.7rem]"
+                    className="-mt-[0.025rem] text-[0.7rem] font-semibold leading-[0.7rem] text-gray-600"
                     style={{
                       color: eventCalendar.tagColor,
                     }}
@@ -165,24 +165,24 @@ function MonthCell({ day, calendarState }: MonthCellT) {
 
       {/* ------ CELL BOTTOM ------- */}
       {(mmDate == "၁" || moonAlign) && show.moonPhase && (
-        <div className="flex justify-between items-center h-[1.1rem] flex-shrink-0">
+        <div className="flex h-[1.1rem] flex-shrink-0 items-center justify-between">
           <div aria-hidden="true"></div>
           {/* MOON PHASE */}
           <div
             className={cn(
-              "flex gap-1 items-center transition-all",
+              "flex items-center gap-1 transition-all",
               show.moonPhase ? "opacity-100" : "opacity-0",
             )}
           >
             {(mmDate == "၁" || moonAlign) && (
-              <span className="hidden md2:inline text-[0.68rem] leading-[1.3rem] text-gray-600 whitespace-nowrap overflow-x-hidden">
+              <span className="hidden overflow-x-hidden whitespace-nowrap text-[0.68rem] leading-[1.3rem] text-gray-600 md2:inline">
                 {myanmarDate.month}
                 {myanmarDate.moonPhase}
               </span>
             )}
             {moonAlign && (
               <span
-                className={`w-[0.91rem] h-[0.91rem] flex-shrink-0  rounded-full ${
+                className={`h-[0.91rem] w-[0.91rem] flex-shrink-0  rounded-full ${
                   myanmarDate.moonPhase === "လပြည့်"
                     ? "bg-red-500"
                     : "bg-gray-700"