add mobile support, add window minimization, add icon higlighted state

2026-01-30 20:46:44 -05:00
parent f678313f4c
commit 7f56539831
4 changed files with 273 additions and 59 deletions
--- a/app/components/DesktopIcon.vue
+++ b/app/components/DesktopIcon.vue
@@ -1,22 +1,25 @@
 <template>
  <div
-    class="desktop-icon flex flex-col items-center cursor-pointer p-2 rounded select-none w-20"
-    :class="{ 'bg-[#000080] bg-opacity-50': isSelected }"
-    @click="$emit('click')"
-    @dblclick="$emit('dblclick')"
+    class="desktop-icon flex flex-col items-center cursor-pointer p-1 md:p-2 rounded select-none w-16 md:w-20"
+    :class="{ 'bg-gray-700 bg-opacity-15': isSelected }"
+    @click="handleClick"
+    @dblclick="handleDoubleClick"
+    @touchend="handleTouchEnd"
  >
-    <div class="icon-image w-12 h-12 mb-1 flex items-center justify-center">
+    <div class="icon-image w-10 h-10 md:w-12 md:h-12 mb-1 flex items-center justify-center">
      <component
        :is="icon"
-        :size="48"
+        :size="40"
+        class="md:w-12 md:h-12"
        color="white"
      />
    </div>
-    <span class="text-white text-xs text-center drop-shadow-lg">{{ label }}</span>
+    <span class="text-white text-[10px] md:text-xs text-center drop-shadow-lg">{{ label }}</span>
  </div>
 </template>

 <script setup lang="ts">
+import { ref } from 'vue'
 import type { Component } from 'vue'

 defineProps<{
@@ -25,14 +28,44 @@ defineProps<{
  isSelected?: boolean
 }>()

-defineEmits<{
+const emit = defineEmits<{
  click: []
  dblclick: []
 }>()
+
+// Double-tap detection for mobile
+const lastTapTime = ref(0)
+const DOUBLE_TAP_DELAY = 300 // milliseconds
+
+const handleClick = () => {
+  emit('click')
+}
+
+const handleDoubleClick = () => {
+  emit('dblclick')
+}
+
+const handleTouchEnd = (e: TouchEvent) => {
+  // Prevent the default behavior and mouse event emulation
+  e.preventDefault()
+
+  const currentTime = Date.now()
+  const timeDiff = currentTime - lastTapTime.value
+
+  if (timeDiff < DOUBLE_TAP_DELAY && timeDiff > 0) {
+    // Double tap detected
+    emit('dblclick')
+    lastTapTime.value = 0 // Reset
+  } else {
+    // Single tap
+    emit('click')
+    lastTapTime.value = currentTime
+  }
+}
 </script>

 <style scoped>
 .desktop-icon:hover {
-  background: rgba(0, 0, 128, 0.3);
+  background: rgba(75, 85, 99, 0.4);
 }
 </style>
--- a/app/components/TaskbarButton.vue
+++ b/app/components/TaskbarButton.vue
@@ -2,7 +2,7 @@
  <Transition name="taskbar-fade">
    <button
      v-if="isOpen"
-      class="taskbar-item px-3 py-1 border-2 text-sm"
+      class="taskbar-item px-1 md:px-3 py-1 border-2 text-xs md:text-sm min-w-0"
      :class="[
        isActive
          ? 'bg-[#000080] text-white border-[#808080] border-r-white border-b-white active-button'
@@ -14,8 +14,9 @@
        <component
          :is="icon"
          :size="16"
+          class="flex-shrink-0"
        />
-        <span>{{ label }}</span>
+        <span class="hidden sm:inline truncate">{{ label }}</span>
      </div>
    </button>
  </Transition>
--- a/app/components/Window.vue
+++ b/app/components/Window.vue
@@ -2,24 +2,42 @@
 <template>
  <div
    ref="windowRef"
-    class="window absolute bg-[#c0c0c0] border-2 shadow-lg"
+    class="window bg-[#c0c0c0] border-2 shadow-lg"
    :style="windowStyle"
-    :class="{ 'z-50': isActive, 'z-10': !isActive }"
+    :class="[
+      { 'z-50': isActive, 'z-10': !isActive },
+      isMobile ? 'fixed' : 'absolute',
+      { 'minimize-animation': shouldAnimate && isMinimized }
+    ]"
    @mousedown="bringToFront"
  >
    <!-- Title Bar -->
    <div
-      class="title-bar flex items-center justify-between px-1 py-1 cursor-move select-none"
-      :class="isActive ? 'bg-[#000080]' : 'bg-[#808080]'"
+      class="title-bar flex items-center justify-between px-1 py-1 select-none"
+      :class="[
+        isActive ? 'bg-[#000080]' : 'bg-[#808080]',
+        isMobile ? '' : 'cursor-move'
+      ]"
      @mousedown="startDrag"
+      @touchstart="startDrag"
    >
      <span class="text-white font-bold text-sm px-2">{{ title }}</span>
-      <button
-        class="close-btn w-5 h-5 bg-[#c0c0c0] border border-white border-b-[#808080] border-r-[#808080] flex items-center justify-center text-xs font-bold hover:bg-[#dfdfdf]"
-        @click="$emit('close')"
-      >
-         <X :size="60" />
-      </button>
+      <div class="flex gap-0.5">
+        <button
+          class="title-btn w-5 h-5 bg-[#c0c0c0] border border-white border-b-[#808080] border-r-[#808080] flex items-center justify-center text-xs font-bold hover:bg-[#dfdfdf]"
+          @click.stop="$emit('minimize')"
+          title="Minimize"
+        >
+          <Minus :size="16" />
+        </button>
+        <button
+          class="title-btn w-5 h-5 bg-[#c0c0c0] border border-white border-b-[#808080] border-r-[#808080] flex items-center justify-center text-xs font-bold hover:bg-[#dfdfdf]"
+          @click.stop="$emit('close')"
+          title="Close"
+        >
+          <X :size="16" />
+        </button>
+      </div>
    </div>

    <!-- Window Content -->
@@ -30,8 +48,8 @@
 </template>

 <script setup lang="ts">
-import { X } from 'lucide-vue-next';
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { X, Minus } from 'lucide-vue-next';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'

 const props = defineProps<{
  title: string
@@ -40,11 +58,13 @@ const props = defineProps<{
  width?: number
  height?: number
  isActive?: boolean
+  isMinimized?: boolean
 }>()

 const emit = defineEmits<{
  close: []
  activate: []
+  minimize: []
 }>()

 const windowRef = ref<HTMLElement | null>(null)
@@ -53,29 +73,68 @@ const y = ref(props.initialY ?? 100)
 const isDragging = ref(false)
 const dragStartX = ref(0)
 const dragStartY = ref(0)
+const isMobile = ref(false)
+const wasMinimized = ref(false)
+const shouldAnimate = ref(false)

-const windowStyle = computed(() => ({
-  left: `${x.value}px`,
-  top: `${y.value}px`,
-  width: props.width ? `${props.width}px` : '600px',
-}))
+// Check if device is mobile
+const checkMobile = () => {
+  if (typeof window !== 'undefined') {
+    isMobile.value = window.innerWidth < 768
+  }
+}

-const contentStyle = computed(() => ({
-  height: props.height ? `${props.height}px` : '400px',
-}))
+const windowStyle = computed(() => {
+  if (isMobile.value) {
+    // On mobile, make windows fullscreen with small padding
+    return {
+      left: '10px',
+      top: '10px',
+      right: '10px',
+      bottom: '50px', // Leave room for taskbar
+      width: 'calc(100vw - 20px)',
+      height: 'calc(100vh - 60px)',
+    }
+  }
+
+  return {
+    left: `${x.value}px`,
+    top: `${y.value}px`,
+    width: props.width ? `${props.width}px` : '600px',
+  }
+})
+
+const contentStyle = computed(() => {
+  if (isMobile.value) {
+    return {
+      height: 'calc(100% - 32px)', // Subtract title bar height
+    }
+  }
+
+  return {
+    height: props.height ? `${props.height}px` : '400px',
+  }
+})
+
+const startDrag = (e: MouseEvent | TouchEvent) => {
+  // Don't allow dragging on mobile
+  if (isMobile.value) return

-const startDrag = (e: MouseEvent) => {
  isDragging.value = true
-  dragStartX.value = e.clientX - x.value
-  dragStartY.value = e.clientY - y.value
+  const clientX = 'touches' in e ? e.touches[0]!.clientX : e.clientX
+  const clientY = 'touches' in e ? e.touches[0]!.clientY : e.clientY
+  dragStartX.value = clientX - x.value
+  dragStartY.value = clientY - y.value
  emit('activate')
 }

-const onDrag = (e: MouseEvent) => {
-  if (!isDragging.value) return
+const onDrag = (e: MouseEvent | TouchEvent) => {
+  if (!isDragging.value || isMobile.value) return

-  x.value = e.clientX - dragStartX.value
-  y.value = e.clientY - dragStartY.value
+  const clientX = 'touches' in e ? e.touches[0]!.clientX : e.clientX
+  const clientY = 'touches' in e ? e.touches[0]!.clientY : e.clientY
+  x.value = clientX - dragStartX.value
+  y.value = clientY - dragStartY.value
 }

 const stopDrag = () => {
@@ -86,14 +145,35 @@ const bringToFront = () => {
  emit('activate')
 }

+// Watch for minimize state changes
+watch(() => props.isMinimized, (newVal, oldVal) => {
+  // Only animate if transitioning from false to true (not minimized -> minimized)
+  if (newVal && !oldVal) {
+    shouldAnimate.value = true
+    wasMinimized.value = true
+  } else if (!newVal && oldVal) {
+    // Restore from minimized - no animation needed, just reset
+    shouldAnimate.value = false
+    wasMinimized.value = false
+  }
+})
+
 onMounted(() => {
+  checkMobile()
+  wasMinimized.value = props.isMinimized ?? false
+  window.addEventListener('resize', checkMobile)
  document.addEventListener('mousemove', onDrag)
  document.addEventListener('mouseup', stopDrag)
+  document.addEventListener('touchmove', onDrag)
+  document.addEventListener('touchend', stopDrag)
 })

 onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
+  document.removeEventListener('touchmove', onDrag)
+  document.removeEventListener('touchend', stopDrag)
 })
 </script>

@@ -106,7 +186,23 @@ onUnmounted(() => {
  background: linear-gradient(90deg, #000080, #1084d0);
 }

-.close-btn:active {
+.title-btn:active {
  border-style: inset;
 }
+
+.minimize-animation {
+  animation: minimize 0.3s ease-out forwards;
+  transform-origin: bottom left;
+}
+
+@keyframes minimize {
+  0% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(0.1) translateY(calc(100vh - 100px));
+    opacity: 0;
+  }
+}
 </style>