+
+ {Object.keys(defMenu).map((key) => (
+ <>
+ {defMenu[key].title}
+ {(defMenu[key] as any).breakAfter && }
+
+ ))}
+
+
+ ) : (
+ <>
+ );
+};
+
+type ContextMenuButtonProps = {
+ children: ComponentChildren;
+};
+
+const ContextMenuButton = ({ children }: ContextMenuButtonProps) => {
+ const ref = useRef
+
+
+
+ );
+};
diff --git a/src/components/Desktop/Window/TrafficLights.module.scss b/src/components/Desktop/Window/TrafficLights.module.scss
new file mode 100644
index 00000000..8389e9d1
--- /dev/null
+++ b/src/components/Desktop/Window/TrafficLights.module.scss
@@ -0,0 +1,52 @@
+.container {
+ --button-size: 0.8rem;
+
+ display: grid;
+ grid-template-columns: repeat(3, var(--button-size));
+ align-items: center;
+ gap: 0.6rem;
+
+ height: 100%;
+
+ &.unFocussed .trafficLight {
+ --bgcolor: hsla(var(--app-color-dark-hsl), 0.3);
+ --border-color: hsla(var(--app-color-dark-hsl), 0.5);
+ }
+
+ svg {
+ visibility: hidden;
+ }
+
+ &:hover svg {
+ visibility: visible;
+ }
+}
+
+.trafficLight {
+ height: var(--button-size);
+ width: var(--button-size);
+
+ border-radius: 50%;
+
+ background-color: var(--bgcolor);
+ box-shadow: 0 0 0 0.5px var(--border-color);
+}
+
+.closeLight {
+ composes: trafficLight;
+ --bgcolor: #ff5f56;
+ --border-color: #e0443e;
+}
+
+.stretchLight {
+ composes: trafficLight;
+ --bgcolor: #27c93f;
+ --border-color: #1aab29;
+ transform: rotate(90deg);
+}
+
+.minimizeLight {
+ composes: trafficLight;
+ --bgcolor: #ffbd2e;
+ --border-color: #dea123;
+}
diff --git a/src/components/Desktop/Window/TrafficLights.tsx b/src/components/Desktop/Window/TrafficLights.tsx
new file mode 100644
index 00000000..bfa2525a
--- /dev/null
+++ b/src/components/Desktop/Window/TrafficLights.tsx
@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import { useAtom } from 'jotai';
+import { useImmerAtom } from 'jotai/immer';
+import { CloseIcon } from '__/assets/traffic-icons/Close.svg';
+import { GreenLightIcon } from '__/assets/traffic-icons/GreenLightIcon';
+import { MinimizeIcon } from '__/assets/traffic-icons/Minimize.svg';
+import { appsConfig } from '__/data/apps/apps-config';
+import { activeAppStore, AppID, openAppsStore } from '__/stores/apps.store';
+import css from './TrafficLights.module.scss';
+
+type TrafficLightProps = {
+ appID: AppID;
+ onMaximizeClick: () => void;
+ class?: string | null;
+};
+
+export const TrafficLights = ({ appID, onMaximizeClick, class: className }: TrafficLightProps) => {
+ const [, setOpenApps] = useImmerAtom(openAppsStore);
+ const [activeApp] = useAtom(activeAppStore);
+
+ const closeApp = () =>
+ setOpenApps((openApps) => {
+ openApps[appID] = false;
+ return openApps;
+ });
+
+ const greenLightAction = () => {
+ if (appsConfig[appID].expandable) {
+ // Action not available right now!
+ } else {
+ onMaximizeClick();
+ }
+ };
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/src/components/Desktop/Window/Window.module.scss b/src/components/Desktop/Window/Window.module.scss
new file mode 100644
index 00000000..54e768a7
--- /dev/null
+++ b/src/components/Desktop/Window/Window.module.scss
@@ -0,0 +1,45 @@
+.container {
+ width: 100%;
+ height: 100%;
+
+ display: grid;
+ grid-template-rows: 1fr;
+
+ position: relative;
+
+ border-radius: 0.75rem;
+ box-shadow: 0 33px 81px rgba(0, 0, 0, 0.31);
+
+ cursor: var(--app-cursor-default), auto;
+
+ :global(body.dark) & > section,
+ :global(body.dark) & > div {
+ border-radius: inherit;
+ box-shadow: inset 0 0 0 0.9px hsla(var(--app-color-dark-hsl), 0.3),
+ 0 0 0 1px hsla(var(--app-color-light-hsl), 0.5);
+ }
+}
+
+.titleBar {
+ height: 2.5rem;
+ width: 100%;
+
+ padding: 0 0.75rem;
+}
+
+.divider {
+ width: 100%;
+ height: 0.2px;
+
+ background-color: hsla(var(--app-color-dark-hsl), 0.2);
+}
+
+.trafficLightsContainer {
+ position: absolute;
+ top: 1rem;
+ left: 1rem;
+ z-index: 1;
+
+ // Necessary, as `.container` tries to apply shadow on it
+ box-shadow: none !important;
+}
diff --git a/src/components/Desktop/Window/Window.tsx b/src/components/Desktop/Window/Window.tsx
new file mode 100644
index 00000000..b025131a
--- /dev/null
+++ b/src/components/Desktop/Window/Window.tsx
@@ -0,0 +1,181 @@
+import clsx from 'clsx';
+import { useAtom } from 'jotai';
+import { RefObject } from 'preact';
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Suspense } from 'react';
+import { Rnd } from 'react-rnd';
+import { AppNexus } from '__/components/apps/AppNexus';
+import { appsConfig } from '__/data/apps/apps-config';
+import { randint } from '__/helpers/random';
+import { activeAppStore, activeAppZIndexStore, AppID } from '__/stores/apps.store';
+import { TrafficLights } from './TrafficLights';
+import css from './Window.module.scss';
+
+type WindowProps = {
+ appID: AppID;
+};
+
+type WindowSize = {
+ width: string | number;
+ height: string | number;
+};
+
+type WindowPosition = {
+ x: number;
+ y: number;
+};
+
+class WindowRnd extends Rnd {
+ base?: HTMLDivElement;
+}
+
+export const Window = ({ appID }: WindowProps) => {
+ const [activeAppZIndex] = useAtom(activeAppZIndexStore);
+ const [activeApp, setActiveApp] = useAtom(activeAppStore);
+
+ const containerRef = useRef
+
+ mouseX.set(event.nativeEvent.x)}
+ onMouseLeave={() => mouseX.set(null)}
+ >
+
+ {Object.keys(appsConfig).map((appID, i) => (
+
+
+
+ {appsConfig[appID].dockBreaksBefore && (
+
+ )}
+
+ ))}
+ {label}
}
+ trigger="focusin mouseenter"
+ appendTo={document.body}
+ sticky
+ plugins={[sticky]}
+ delay={50}
+ offset={[0, 5]}
+ interactive={true}
+ animation={false}
+ inertia={true}
+ maxWidth={200}
+ // DON'T REMOVE: Blurry text will be there
+ popperOptions={{
+ modifiers: [
+ {
+ name: 'computeStyles',
+ options: {
+ gpuAcceleration: false,
+ },
+ },
+ ],
+ }}
+ >
+ {children as any}
+
+
+
+ );
+};
diff --git a/src/components/TopBar/ActionCenter/ACSlider.module.scss b/src/components/TopBar/ActionCenter/ACSlider.module.scss
new file mode 100644
index 00000000..902e946e
--- /dev/null
+++ b/src/components/TopBar/ActionCenter/ACSlider.module.scss
@@ -0,0 +1,33 @@
+.slider {
+ --size: 1.4rem;
+ width: 100%;
+ height: var(--size);
+
+ box-shadow: 0 0 0 0.35px hsla(var(--app-color-grey-600-hsl), 0.7);
+ border-radius: 1rem;
+
+ background-color: hsla(var(--app-color-dark-hsl), 0.1);
+
+ display: flex;
+}
+
+.track {
+ height: inherit;
+
+ background-color: var(--bgcolor);
+
+ border-radius: inherit;
+}
+
+.thumb {
+ height: var(--size);
+ width: var(--size);
+
+ background-color: white;
+
+ border-radius: 50%;
+
+ box-shadow: hsla(0, 0%, 0%, 0.3) 0px 0px 3px 1px;
+
+ cursor: grab;
+}
diff --git a/src/components/TopBar/ActionCenter/ACSlider.tsx b/src/components/TopBar/ActionCenter/ACSlider.tsx
new file mode 100644
index 00000000..43030a08
--- /dev/null
+++ b/src/components/TopBar/ActionCenter/ACSlider.tsx
@@ -0,0 +1,49 @@
+import { Slider, SliderProps } from '@reach/slider';
+import clsx from 'clsx';
+import { FC } from 'preact/compat';
+import css from './ACSlider.module.scss';
+
+export const ACSlider: FC
+ 
+
+
+
+ Administrator
+
+
+
+ {children}
+
+ );
+};
diff --git a/src/components/TopBar/ActionCenter/ActionCenterToggle.module.scss b/src/components/TopBar/ActionCenter/ActionCenterToggle.module.scss
new file mode 100644
index 00000000..0e057862
--- /dev/null
+++ b/src/components/TopBar/ActionCenter/ActionCenterToggle.module.scss
@@ -0,0 +1,10 @@
+.menuParent {
+ z-index: 1;
+ position: absolute;
+ right: 1rem;
+ margin-top: 4.5px;
+
+ &.hidden {
+ visibility: hidden;
+ }
+}
diff --git a/src/components/TopBar/ActionCenter/ActionCenterToggle.tsx b/src/components/TopBar/ActionCenter/ActionCenterToggle.tsx
new file mode 100644
index 00000000..e28b84a9
--- /dev/null
+++ b/src/components/TopBar/ActionCenter/ActionCenterToggle.tsx
@@ -0,0 +1,31 @@
+import clsx from 'clsx';
+import { useRef, useState } from 'preact/hooks';
+import { SwitchSVG } from '__/assets/sf-icons/switch.svg';
+import { useFocusOutside, useOutsideClick } from '__/hooks';
+import { TopBarIconButton } from '../TopBarIconButton';
+import { ActionCenter } from './ActionCenter';
+import css from './ActionCenterToggle.module.scss';
+
+export const ActionCenterToggle = () => {
+ const containerRef = useRef
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/TopBar/TopBar.tsx b/src/components/TopBar/TopBar.tsx
new file mode 100644
index 00000000..466485ef
--- /dev/null
+++ b/src/components/TopBar/TopBar.tsx
@@ -0,0 +1,20 @@
+import { ActionCenterToggle } from './ActionCenter/ActionCenterToggle';
+import { MenuBar } from './menubar/MenuBar';
+import css from './Topbar.module.scss';
+import { TopBarTime } from './TopBarTime';
+
+export const TopBar = () => {
+ return (
+
+ {format(time, 'EEE MMM dd')} {format(time, 'h:mm aa')}
+
+ );
+};
diff --git a/src/components/TopBar/Topbar.module.scss b/src/components/TopBar/Topbar.module.scss
new file mode 100644
index 00000000..2327c674
--- /dev/null
+++ b/src/components/TopBar/Topbar.module.scss
@@ -0,0 +1,41 @@
+.header {
+ display: flex;
+ align-items: center;
+
+ width: 100%;
+ height: 1.4rem;
+
+ background-color: hsla(var(--app-color-light-hsl), 0.3);
+ // backdrop-filter: blur(12px);
+
+ color: var(--app-color-light-contrast);
+ fill: var(--app-color-light-contrast);
+
+ button {
+ font-weight: 500;
+ font-size: 0.8rem;
+ font-family: var(--app-font-family);
+
+ letter-spacing: 0.3px;
+
+ position: relative;
+
+ height: 100%;
+
+ text-shadow: 0 0 1px hsla(0, 0%, 0%, 0.1);
+ }
+}
+
+.header::before {
+ content: '';
+
+ width: inherit;
+ height: inherit;
+
+ position: fixed;
+ left: 0;
+ top: 0;
+
+ z-index: 0;
+ backdrop-filter: blur(12px);
+}
diff --git a/src/components/TopBar/menubar/Menu.module.scss b/src/components/TopBar/menubar/Menu.module.scss
new file mode 100644
index 00000000..8d72f5e2
--- /dev/null
+++ b/src/components/TopBar/menubar/Menu.module.scss
@@ -0,0 +1,70 @@
+.container {
+ // Initial invisible border
+ --additional-box-shadow: 0 0 0 0 white;
+
+ display: block;
+
+ min-width: 16rem;
+ width: max-content;
+
+ padding: 0.5rem;
+
+ position: relative;
+
+ user-select: none;
+
+ background-color: hsla(var(--app-color-light-hsl), 0.3);
+ backdrop-filter: blur(25px);
+
+ border-radius: 0.5rem;
+
+ box-shadow: hsla(0, 0%, 0%, 0.3) 0px 0px 11px 0px, var(--additional-box-shadow);
+
+ :global(body.dark) & {
+ --additional-box-shadow: inset 0 0 0 0.9px hsla(var(--app-color-dark-hsl), 0.3),
+ 0 0 0 1.2px hsla(var(--app-color-light-hsl), 0.3);
+ }
+}
+
+.menuItem {
+ --alpha: 1;
+
+ display: flex;
+ justify-content: flex-start;
+
+ width: 100%;
+
+ padding: 0.2rem 0.4rem;
+ margin: 0.1rem;
+
+ letter-spacing: 0.4px;
+ font-weight: 400 !important;
+ font-size: 0.9rem !important;
+
+ border-radius: 0.3rem;
+
+ transition: none;
+
+ color: hsla(var(--app-color-dark-hsl), var(--alpha));
+
+ &.disabled {
+ --alpha: 0.5;
+ }
+
+ &:not(.disabled) {
+ &:hover,
+ &:focus-visible {
+ background-color: var(--app-color-primary);
+ color: var(--app-color-primary-contrast);
+ }
+ }
+}
+
+.divider {
+ width: 100%;
+ height: 0.2px;
+
+ background-color: hsla(var(--app-color-dark-hsl), 0.2);
+
+ margin: 2px 0;
+}
diff --git a/src/components/TopBar/menubar/Menu.tsx b/src/components/TopBar/menubar/Menu.tsx
new file mode 100644
index 00000000..fe47cbb7
--- /dev/null
+++ b/src/components/TopBar/menubar/Menu.tsx
@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+import { useRef } from 'preact/hooks';
+import { RovingTabIndexProvider, useFocusEffect, useRovingTabIndex } from 'react-roving-tabindex';
+import css from './Menu.module.scss';
+
+type MenuProps = {
+ menu: any;
+};
+
+export const Menu = ({ menu }: MenuProps) => {
+ return (
+
+
+ {Object.keys(menu).map((key) => (
+ <>
+
+ {menu[key].title}
+
+ {menu[key].breakAfter && }
+
+ ))}
+
+
+ );
+};
+
+const MenuItemButton = ({
+ children,
+ disabled = false,
+ ...props
+}: JSX.IntrinsicElements['button']) => {
+ const ref = useRef
+ {Object.keys(currentAppMenus).map((menuID) => (
+
+ );
+};
diff --git a/src/components/apps/AppNexus.tsx b/src/components/apps/AppNexus.tsx
new file mode 100644
index 00000000..e4d244a9
--- /dev/null
+++ b/src/components/apps/AppNexus.tsx
@@ -0,0 +1,21 @@
+import { AppID } from '__/stores/apps.store';
+import { lazy } from 'react';
+
+type AppNexusProps = {
+ appID: AppID;
+ isBeingDragged: boolean;
+};
+
+const Calculator = lazy(() => import('./Calculator/Calculator'));
+const VSCode = lazy(() => import('./VSCode/VSCode'));
+const Calendar = lazy(() => import('./Calendar/Calendar'));
+
+const PlaceholderApp = lazy(() => import('./Placeholder/Placeholder'));
+
+export const AppNexus = ({ appID, isBeingDragged }: AppNexusProps) => {
+ if (appID === 'calculator') return
+
+
+
+
+
+ ))}
+
+
+
+ {format(selectedDate, 'MMMM')}{' '}
+ {format(selectedDate, 'yyyy')}
+
+
+
+
+
+
+
+
+ );
+ });
+ };
+
+ return (
+ {d}
+
+ {DAYS_OF_THE_WEEK.map((day, i) => (
+
+ );
+};
+
+export default MonthView;
diff --git a/src/components/apps/Calendar/Views/WeekView.tsx b/src/components/apps/Calendar/Views/WeekView.tsx
new file mode 100644
index 00000000..28ddfbe5
--- /dev/null
+++ b/src/components/apps/Calendar/Views/WeekView.tsx
@@ -0,0 +1,5 @@
+export const WeekView = () => {
+ return ;
+};
+
+export default WeekView;
diff --git a/src/components/apps/Calendar/Views/YearView.tsx b/src/components/apps/Calendar/Views/YearView.tsx
new file mode 100644
index 00000000..ce56e7d7
--- /dev/null
+++ b/src/components/apps/Calendar/Views/YearView.tsx
@@ -0,0 +1,5 @@
+export const YearView = () => {
+ return ;
+};
+
+export default YearView;
diff --git a/src/components/apps/Calendar/calendar-utils.ts b/src/components/apps/Calendar/calendar-utils.ts
index 4f5d6cad..ed3ce353 100644
--- a/src/components/apps/Calendar/calendar-utils.ts
+++ b/src/components/apps/Calendar/calendar-utils.ts
@@ -1,12 +1,12 @@
import { getDay, getMonth, getYear, startOfMonth } from 'date-fns';
-import { DAYS, DAYS_LEAP, NUMBER_OF_CELLS_IN_CALENDAR } from './calendar-constants.ts';
+import { DAYS, DAYS_LEAP, NUMBER_OF_CELLS_IN_CALENDAR } from './constants';
/**
* Check if the year is a leap year
* @param year
*/
-export function is_leap_year(year: number) {
- return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+export function isLeapYear(year: number) {
+ return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}
/**
@@ -14,12 +14,12 @@ export function is_leap_year(year: number) {
* @param lower lower bound, exclusive
* @param upper upper bound, inclusive
*/
-export function get_range_array(lower: number, upper: number) {
- const arr: number[] = [];
- for (let i = lower + 1; i <= upper; i++) {
- arr.push(i);
- }
- return arr;
+export function getRangeArray(lower: number, upper: number) {
+ const arr: number[] = [];
+ for (let i = lower + 1; i <= upper; i++) {
+ arr.push(i);
+ }
+ return arr;
}
/**
@@ -29,28 +29,25 @@ export function get_range_array(lower: number, upper: number) {
* Ones belong to next month.
* @param selectedDate the selected date which indicates the current month
*/
-export function get_display_days(selectedDate: Date) {
- const this_month = getMonth(selectedDate);
- const prev_month = this_month - 1 < 0 ? 11 : this_month - 1;
+export function getDisplayDays(selectedDate: Date) {
+ const thisMonth = getMonth(selectedDate);
+ const prevMonth = thisMonth - 1 < 0 ? 11 : thisMonth - 1;
- const days = is_leap_year(getYear(selectedDate)) ? DAYS_LEAP : DAYS;
- const weekday = getDay(startOfMonth(selectedDate));
+ const days = isLeapYear(getYear(selectedDate)) ? DAYS_LEAP : DAYS;
+ const weekday = getDay(startOfMonth(selectedDate));
- // If it's Sunday, weekday is 0
- const days_to_show_in_prev_month = weekday === 0 ? 6 : weekday - 1;
- const days_to_show_in_next_month =
- NUMBER_OF_CELLS_IN_CALENDAR - days[this_month] - days_to_show_in_prev_month;
+ // If it's Sunday, weekday is 0
+ const daysToShowInPrevMonth = weekday === 0 ? 6 : weekday - 1;
+ const daysToShowInNextMonth =
+ NUMBER_OF_CELLS_IN_CALENDAR - days[thisMonth] - daysToShowInPrevMonth;
- const days_in_prev_month = get_range_array(
- days[prev_month] - days_to_show_in_prev_month,
- days[prev_month],
- );
- const days_in_this_month = get_range_array(0, days[this_month]);
- const days_in_next_month = get_range_array(0, days_to_show_in_next_month);
+ const daysInPrevMonth = getRangeArray(days[prevMonth] - daysToShowInPrevMonth, days[prevMonth]);
+ const daysInThisMonth = getRangeArray(0, days[thisMonth]);
+ const daysInNextMonth = getRangeArray(0, daysToShowInNextMonth);
- return {
- days_in_prev_month,
- days_in_this_month,
- days_in_next_month,
- };
+ return {
+ daysInPrevMonth,
+ daysInThisMonth,
+ daysInNextMonth,
+ };
}
diff --git a/src/components/apps/Calendar/constants.ts b/src/components/apps/Calendar/constants.ts
new file mode 100644
index 00000000..a7e872e9
--- /dev/null
+++ b/src/components/apps/Calendar/constants.ts
@@ -0,0 +1,18 @@
+export const DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as const;
+export const DAYS_LEAP = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] as const;
+export const DAYS_OF_THE_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;
+export const MONTHS = [
+ 'JAN',
+ 'FEB',
+ 'MAR',
+ 'APR',
+ 'MAY',
+ 'JUN',
+ 'JUL',
+ 'AUG',
+ 'SEP',
+ 'OCT',
+ 'NOV',
+ 'DEC',
+] as const;
+export const NUMBER_OF_CELLS_IN_CALENDAR = 42; // 6 rows x 7 columns
diff --git a/src/components/apps/Placeholder/Placeholder.module.scss b/src/components/apps/Placeholder/Placeholder.module.scss
new file mode 100644
index 00000000..083df78a
--- /dev/null
+++ b/src/components/apps/Placeholder/Placeholder.module.scss
@@ -0,0 +1,33 @@
+.container {
+ background-color: var(--app-color-light);
+
+ border-radius: inherit;
+}
+
+.titleBar {
+ padding: 1rem 1rem;
+
+ width: 100%;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.mainArea {
+ font-size: 1.618rem;
+ color: var(--app-color-light-contrast);
+
+ height: 100%;
+ width: 100%;
+
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.img {
+ max-width: 8rem;
+ aspect-ratio: 1 / 1;
+}
diff --git a/src/components/apps/Placeholder/Placeholder.tsx b/src/components/apps/Placeholder/Placeholder.tsx
new file mode 100644
index 00000000..4d956235
--- /dev/null
+++ b/src/components/apps/Placeholder/Placeholder.tsx
@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import type { AppID } from '__/stores/apps.store';
+import css from './Placeholder.module.scss';
+
+type PlaceholderAppTypes = {
+ appID: AppID;
+};
+
+const PlaceholderApp = ({ appID }: PlaceholderAppTypes) => {
+ return (
+ {day}
+ ))}
+ {renderDay(daysInPrevMonth, false)}
+ {renderDay(daysInThisMonth, true)}
+ {renderDay(daysInNextMonth, false)}
+ Apps coming soon!
+
+
+
+