Added new modules and updated existing logic

dev/ui-ux/Opus 4.6/src/components/workspace-drawer/workspace-drawer.css

@@ -0,0 +1,7 @@
+/* workspace-drawer — left settings panel */
+/* All styling uses Quasar utility classes in the template.
+   This file is a placeholder for future custom styles. */
+
+.workspace-drawer-root {
+  /* intentionally empty — styled via Quasar props */
+}

dev/ui-ux/Opus 4.6/src/components/workspace-drawer/workspace-drawer.js

@@ -0,0 +1,122 @@
+/**
+ * workspace-drawer.js
+ * ====================
+ * Left drawer: timeline range, date-picker start, dev tools,
+ * grid visibility toggles, compact/weekend switches.
+ */
+
+const { nextTick } = Vue;
+
+import {
+  leftDrawer,
+  viewScope,
+  pickerStartDay,
+  crosshairActive,
+  showEodTargets,
+  showAvailability,
+  isCompact,
+  weekendsAreWorkingDays,
+  startDate,
+  getStartOfWeek,
+  rightDrawer,
+  editMode,
+  selectedDate,
+  pendingShift
+} from '../../services/planner-state.js';
+
+import { simulateWssLock } from '../../services/socket-service.js';
+
+const { useQuasar } = Quasar;
+
+export default {
+  name: 'WorkspaceDrawer',
+  setup() {
+    const $q = useQuasar();
+
+    const doSimulate = () => simulateWssLock($q);
+
+    const resetToToday = () => {
+      const today = new Date();
+      startDate.value = getStartOfWeek(today);
+      if (rightDrawer.value && editMode.value === 'assignment') {
+        selectedDate.value = today;
+        pendingShift.value = null;
+      }
+      leftDrawer.value = false;
+    };
+
+    return {
+      leftDrawer,
+      viewScope,
+      pickerStartDay,
+      crosshairActive,
+      showEodTargets,
+      showAvailability,
+      isCompact,
+      weekendsAreWorkingDays,
+      doSimulate,
+      resetToToday
+    };
+  },
+  template: `
+    <q-drawer v-model="leftDrawer" side="left" bordered :width="300" class="bg-white">
+      <q-scroll-area class="fit">
+        <div class="q-pa-lg">
+          <div class="text-h6 text-weight-bold q-mb-xs text-grey-9">Workspace</div>
+          <div class="text-caption text-grey-6 q-mb-xl">Manage grid and picker preferences.</div>
+
+          <div class="column q-gutter-y-lg">
+            <div>
+              <div class="text-overline text-grey-6 q-mb-sm">Timeline Range</div>
+              <q-select v-model="viewScope" :options="[4, 8, 12]" outlined dense rounded emit-value map-options suffix=" Weeks" bg-color="white"></q-select>
+            </div>
+            <div>
+              <div class="text-overline text-grey-6 q-mb-sm">Date Picker Week Start</div>
+              <q-select v-model="pickerStartDay" :options="[{label: 'Sunday', value: 0}, {label: 'Monday', value: 1}]" outlined dense rounded emit-value map-options bg-color="white"></q-select>
+            </div>
+
+            <q-separator></q-separator>
+
+            <!-- Dev Tools -->
+            <div>
+              <div class="text-overline text-grey-6 q-mb-sm">Dev Tools</div>
+              <q-btn outline rounded color="grey-7" label="Simulate WSS Lock" class="full-width" icon="lock" @click="doSimulate">
+                <q-tooltip>Simulate receiving a "Lock Cell" message from server</q-tooltip>
+              </q-btn>
+            </div>
+
+            <q-separator></q-separator>
+
+            <div>
+              <div class="text-overline text-grey-6 q-mb-sm">Grid Visibility</div>
+              <q-item tag="label" v-ripple class="q-px-none">
+                <q-item-section><q-item-label class="text-weight-medium">Reading Crosshair</q-item-label><q-item-label caption>Dynamic highlight on hover</q-item-label></q-item-section>
+                <q-item-section side><q-toggle v-model="crosshairActive" color="grey-8"></q-toggle></q-item-section>
+              </q-item>
+              <q-item tag="label" v-ripple class="q-px-none">
+                <q-item-section><q-item-label class="text-weight-medium">Show EOD Targets</q-item-label><q-item-label caption>Top row KPI</q-item-label></q-item-section>
+                <q-item-section side><q-toggle v-model="showEodTargets" color="grey-8"></q-toggle></q-item-section>
+              </q-item>
+              <q-item tag="label" v-ripple class="q-px-none">
+                <q-item-section><q-item-label class="text-weight-medium">Show Availability</q-item-label><q-item-label caption>Traffic light indicators</q-item-label></q-item-section>
+                <q-item-section side><q-toggle v-model="showAvailability" color="grey-8"></q-toggle></q-item-section>
+              </q-item>
+            </div>
+
+            <q-separator></q-separator>
+
+            <q-item tag="label" v-ripple class="q-px-none">
+              <q-item-section><q-item-label class="text-weight-medium">Compact Grid</q-item-label><q-item-label caption>High density view</q-item-label></q-item-section>
+              <q-item-section side><q-toggle v-model="isCompact" color="grey-8"></q-toggle></q-item-section>
+            </q-item>
+            <q-item tag="label" v-ripple class="q-px-none">
+              <q-item-section><q-item-label class="text-weight-medium">Working Weekends</q-item-label><q-item-label caption>Enable Sat/Sun shifts</q-item-label></q-item-section>
+              <q-item-section side><q-toggle v-model="weekendsAreWorkingDays" color="grey-8"></q-toggle></q-item-section>
+            </q-item>
+            <q-btn outline rounded color="grey-8" label="Reset to Today" icon="today" class="full-width q-mt-md" @click="resetToToday"></q-btn>
+          </div>
+        </div>
+      </q-scroll-area>
+    </q-drawer>
+  `
+};