feat(phone): add (semi) responsiveness & screen dragging

src/App.tsx

@@ -1,15 +1,6 @@
 import Phone from "@/components/phone/Phone";
-import usePhoneStore from "@/store/phone";
-import { useEffect } from "react";
-import { defaultViews } from "@/views/index";
 
 export default function App() {
-    const setViews = usePhoneStore((state) => state.setViews);
-
-    useEffect(() => {
-        setViews(defaultViews);
-    }, [setViews]);
-
     return (
         <main className="flex flex-col items-center justify-center min-h-screen">
             <Phone />

src/components/phone/Phone.tsx

@@ -1,33 +1,33 @@
-import PhoneContainer from "@/components/phone/PhoneContainer";
 import PhoneHeader from "@/components/phone/PhoneHeader";
-import PhoneGrid, { PhoneGridAppList } from "@/components/phone/PhoneGrid";
 import PhoneDock from "@/components/phone/PhoneDock";
 import usePhoneStore from "@/store/phone";
+import defaultPhoneOutline from "@/assets/phone/phone_container.webp";
+import PhoneScreenList from "@/components/phone/PhoneScreenList";
 
 export default function Phone() {
-    const { 
-        views, 
-        viewIndex, 
+    const {  
         isDiverged,
-        divergence,
-        // @ts-ignore
-        incrementIndex,
-        // @ts-ignore
-        decrementIndex
+        divergence
     } = usePhoneStore((state) => state);
-    const currentView = views[viewIndex] as PhoneGridAppList || [];
-
+
     return (
-        <PhoneContainer>
-            <PhoneHeader />
-            {
-                isDiverged 
-                    ? divergence
-                    : <>
-                        <PhoneGrid apps={currentView} />
-                        <PhoneDock />
-                    </>
-            }
-        </PhoneContainer>
+        <div className="relative h-[32rem] flex justify-center items-center">
+            <img
+                src={defaultPhoneOutline}
+                className="z-30 w-full h-full object-contain pointer-events-none"
+            />
+            <div className="absolute top-0 flex h-full w-[90%] pt-[2%] sm:pt-[4%] pb-[4%] pl-[17%] pr-[17%] sm:pr-[1%] sm:pl-[2%] overflow-hidden">
+                <div className="h-full min-w-full flex justify-evenly flex-col bg-phone-background bg-cover bg-center">
+                    <PhoneHeader />
+                    {isDiverged && 
+                        <div className="absolute top-0 h-full w-full pt-[2%] sm:pt-[5%] pb-[4%] pr-[38%] sm:pr-[4%] overflow-hidden z-10">
+                            {divergence}
+                        </div>
+                    }
+                    <PhoneScreenList />
+                    <PhoneDock />
+                </div>
+            </div>
+        </div>
     )
 }

src/components/phone/PhoneApp.tsx

@@ -13,12 +13,12 @@ export default function PhoneApp({
     link, 
     onClick 
 }: PhoneAppProps) {
-    const logoImage = <img src={logo} className="h-full w-full object-cover rounded-lg" />;
+    const logoImage = <img src={logo} className="object-cover rounded-md" />;
 
     return isLink 
         ? (
             <a 
-                className="overflow-hidden w-12 h-12 p-1 cursor-pointer"
+                className="overflow-hidden w-full h-full p-1 cursor-pointer"
                 href={link}
                 target="_blank"
             >
@@ -27,7 +27,7 @@ export default function PhoneApp({
         ) 
         : (
             <button
-                className="overflow-hidden w-12 h-12 p-1"
+                className="overflow-hidden w-full h-full p-1"
                 onClick={onClick}
             >
                 {logoImage}

src/components/phone/PhoneDock.tsx

@@ -5,7 +5,7 @@ import settingsLogo from "@/assets/phone/apps/settings.webp";
 
 export default function PhoneDock() {
     return (
-        <div className="mt-auto flex justify-evenly px-8 py-[0.35rem] gap-3 bg-gray-700 rounded-3xl">
+        <div className="relative mt-auto mb-[15%] mx-[5%] flex justify-evenly px-8 py-[0.35rem] gap-3 bg-gray-700 rounded-3xl">
             <PhoneApp
                 logo={notesLogo}
                 isLink={false}

src/components/phone/PhoneGrid.tsx

@@ -9,7 +9,7 @@ export interface PhoneGridProps {
 export default function PhoneGrid({ apps }: PhoneGridProps) {
     const appsInGrid = apps.map((app: PhoneAppProps & { name: string } | null, index: number) => {
         if (!app)
-            return <div key={index} className="w-12 h-12 p-1"></div>;
+            return <div key={index} className="w-full p-1"></div>;
         return (
             <div key={index} className="flex flex-col justify-center items-center text-center">
                 <PhoneApp {...app} />
@@ -19,7 +19,7 @@ export default function PhoneGrid({ apps }: PhoneGridProps) {
     });
 
     return (
-        <div className="grid grid-cols-4 gap-x-6 gap-y-3 mt-4 mx-4">
+        <div className="grid grid-cols-4 gap-x-1 gap-y-2 mt-4 px-[10%]">
             {appsInGrid}
         </div>
     );

src/components/phone/PhoneHeader.tsx

@@ -1,4 +1,5 @@
 import topRightIcons from "@/assets/phone/top_right_icons.webp";
+import usePhoneStore from "@/store/phone";
 import { useEffect, useState } from "react";
 
 export interface PhoneHeaderProps {
@@ -7,6 +8,7 @@ export interface PhoneHeaderProps {
 
 export default function PhoneHeader({ leftSide }: PhoneHeaderProps) {
     const [currentTime, setCurrentTime] = useState<string>(getPhoneTime());
+    const divergence = usePhoneStore((state) => state.divergence);
 
     useEffect(() => {
         if (leftSide)
@@ -25,7 +27,7 @@ export default function PhoneHeader({ leftSide }: PhoneHeaderProps) {
     }, []);
 
     return (
-        <div className="flex justify-between items-center py-1 text-white h-8 w-full">
+        <div className={`flex justify-between min-w-full items-center px-[2%] py-1 h-8 text-white z-20 ${divergence ? "mb-auto bg-gray-800 bg-opacity-40" : ""}`}>
             <div className="flex justify-evenly items-center text-center w-[30%] h-full">
                 <span className="text-xs">
                     {
@@ -35,10 +37,10 @@ export default function PhoneHeader({ leftSide }: PhoneHeaderProps) {
                     }
                 </span>
             </div>
-            <div className="flex justify-evenly items-center h-full">
+            <div className="flex h-full">
                 <img 
                     src={topRightIcons}
-                    className="w-[90%] h-full object-contain"
+                    className="h-[90%] object-contain"
                 />
             </div>
         </div>

src/components/phone/PhoneScreenList.tsx

@@ -0,0 +1,43 @@
+import PhoneGrid from "@/components/phone/PhoneGrid";
+import { useState } from "react";
+import usePhoneStore from "@/store/phone";
+
+export default function PhoneScreenList() {
+    const {
+        views,
+        viewIndex,
+        // @ts-ignore
+        incrementIndex,
+        // @ts-ignore
+        decrementIndex
+    } = usePhoneStore((state) => state);
+    const [dragX, setDragX] = useState(0);
+
+    // Temporary - just to test multiple views with drag
+    const handleDrag = (event: React.MouseEvent<HTMLDivElement>) => {
+        if (event.buttons === 1) {
+            const dx = event.movementX;
+            setDragX((prev) => prev + dx);
+        }
+    };
+
+    return (
+        <div className="h-full overflow-hidden">
+            <div 
+                className={`flex h-full`}
+                style={{ 
+                    width: `${views.length * 100}%`,
+                    transform: `translateX(${dragX}px)` 
+                }}
+                onMouseMove={handleDrag}
+            >
+                <div className="relative w-full h-full flex justify-start items-center flex-col">
+                    <PhoneGrid apps={views[viewIndex]} />
+                </div> 
+                <div className="relative w-full h-full flex justify-start items-center flex-col">
+                    <PhoneGrid apps={views[viewIndex+1]} />
+                </div> 
+            </div>
+        </div>
+    );
+}

src/store/phone.ts

@@ -1,4 +1,5 @@
 import { PhoneGridAppList } from "@/components/phone/PhoneGrid";
+import { defaultViews } from "@/views";
 import { create } from "zustand";
 
 interface PhoneState {
@@ -9,18 +10,16 @@ interface PhoneState {
     setDivergence: (view: React.ReactNode) => void;
     incrementIndex: () => void;
     decrementIndex: () => void;
-    setViews: (views: PhoneGridAppList[]) => void;
 }
 
 const usePhoneStore = create<PhoneState>()((set) => ({
-    views: [],
+    views: defaultViews,
     viewIndex: 0,
     isDiverged: false,
     divergence: null,
     setDivergence: (view: React.ReactNode) => set(() => ({ isDiverged: true, divergence: view })),
     incrementIndex: () => set((state) => ({ viewIndex: state.viewIndex + 1 })),
     decrementIndex: () => set((state) => ({ viewIndex: state.viewIndex - 1 })),
-    setViews: (views: PhoneGridAppList[]) => set(() => ({ views: views })),
 }));
 
 export default usePhoneStore;

src/views/OfficerView.tsx

@@ -8,7 +8,7 @@ export interface OfficerViewProps {
 // Temporary - testing diverging views
 export default function OfficerView({ name, image, title, description }: OfficerViewProps) {
     return (
-        <div className="absolute h-full w-full bg-gray-900 text-white">
+        <div className="h-full w-full p-5 pt-10 break-words overflow-y-scroll z-20 bg-gray-900 text-white">
             <img 
                 src={image}
             />