2.7

New profile tabs Moved Solar model to Why box
2026-06-05 03:46:16 +01:00
parent 714eb109fd
commit f9b5c2b248
7 changed files with 240 additions and 158 deletions
@@ -42,7 +42,7 @@
 // ------------------------------------------------------------------------

 import { h, Fragment } from '../../vendor/preact.js';
-import { useRef, useEffect } from '../../vendor/preact-hooks.js';
+import { useRef, useEffect, useState } from '../../vendor/preact-hooks.js';
 import htm from '../../vendor/htm.js';
 import { confidenceBand } from '../utils.js';
 import { FREE_DAYS, FILTER_PROFILES, OUTDOORS_VARIANTS, profileButtonOrder, activityVariantKeys, placeVariantKeys, workVariantKeys } from '../config.js';
@@ -96,6 +96,17 @@ export function DayTabs({
  const profileScrollRef = useRef(null);
  const profileWrapRef   = useRef(null);

+  // Active tab: common - places - activities - work.
+  // Auto-derived from the current profile on mount and on change.
+  const getTab = () => {
+    if (activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)) return 'places';
+    if (activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)) return 'activities';
+    if (activeProfile === 'farming' || (activeProfile === 'outdoors' && workVariantKeys.includes(outdoorsVariant))) return 'work';
+    return 'common';
+  };
+  const [activeTab, setActiveTab] = useState(getTab);
+  useEffect(() => { setActiveTab(getTab()); }, [activeProfile, outdoorsVariant]);
+
  useEffect(() => {
    const el   = profileScrollRef.current;
    const wrap = profileWrapRef.current;
@@ -155,139 +166,98 @@ export function DayTabs({
    <${Fragment}>

      <div class="filter-profiles">
+        <div class="profile-tabs">
+          ${[['common','Common'],['places','Places'],['activities','Activities'],['work','Work']].map(([key, label]) => html`
+            <button
+              key=${key}
+              class=${`profile-tab${activeTab === key ? ' active' : ''}`}
+              onClick=${() => setActiveTab(key)}
+            >${label}</button>
+          `)}
+        </div>
        <div class="profile-scroll-wrap" ref=${profileWrapRef}>
        <div class="profile-scroll" ref=${profileScrollRef}>
-        ${profileButtonOrder.slice(0, 3).map((key) => {
-          const profile = FILTER_PROFILES[key];
-          const locked  = profile.proOnly && !isPro;
-          return html`
+
+          ${activeTab === 'common' && profileButtonOrder.map((key) => {
+            const profile = FILTER_PROFILES[key];
+            const locked  = profile.proOnly && !isPro;
+            return html`
+              <button
+                key=${key}
+                class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
+                style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
+                title=${locked ? `Profile ${profile.label} is part of SunScope Extra` : ''}
+                onClick=${() => {
+                  if (locked) { setProPromptSource(`profile:${key}`); setProPromptDay(0); return; }
+                  activateProfile(key);
+                }}
+              >
+                <span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
+                <span class="profile-btn-label">${profile.label}${locked ? ' locked' : ''}</span>
+              </button>`;
+          })}
+
+          ${activeTab === 'places' && placeOptions.map((opt) => html`
            <button
-              key=${key}
-              class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
-              style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
-              title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
+              key=${opt.value}
+              class=${`profile-btn${placeValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
+              style=${{ opacity: opt.disabled ? 0.6 : 1, cursor: opt.disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
              onClick=${() => {
-                if (locked) {
-                  setProPromptSource(`profile:${key}`);
-                  setProPromptDay(0);
-                  return;
-                }
-                activateProfile(key);
+                if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
+                try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
+                setActiveProfile('outdoors');
+                setOutdoorsVariantAndSave(opt.value);
+                setVisibleCols({ ...OUTDOORS_VARIANTS[opt.value].cols });
+                setIndoorMode('off');
+                setIndoorManaged(false);
              }}
            >
-              <span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
-              <span class="profile-btn-label">${profile.label}${locked ? ' 🔒' : ''}</span>
-            </button>`;
-        })}
-        <span class="profile-divider" aria-hidden="true"></span>
-        <${CustomSelect}
-          key="places"
-          value=${placeValue}
-          isOn=${activeProfile === 'outdoors' && placeVariantKeys.includes(outdoorsVariant)}
-          noHide=${true}
-          hideLabel="Places"
-          buttonLabel=${placeValue === 'off' ? 'Places' : `${placeLabel}`}
-          grpClass="profile-card"
-          sceneStyle=${{ background: placeValue !== 'off' && OUTDOORS_VARIANTS[placeValue]?.scene ? OUTDOORS_VARIANTS[placeValue].scene : "url('assets/images/profiles/places.png') center / cover no-repeat, linear-gradient(160deg,#98ccc0,#c4e4dc)" }}
-          sceneContent=${null}
-          options=${placeOptions}
-          onChange=${(v) => {
-            if (v === 'off') { activateProfile('basic'); return; }
-            if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
-              setProPromptSource(`variant:${v}`);
-              setProPromptDay(0);
-              return;
-            }
-            try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
-            setActiveProfile('outdoors');
-            setOutdoorsVariantAndSave(v);
-            setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
-            setIndoorMode('off');
-            setIndoorManaged(false);
-          }}
-        />
-        <${CustomSelect}
-          key="activities"
-          value=${activityValue}
-          isOn=${activeProfile === 'outdoors' && activityVariantKeys.includes(outdoorsVariant)}
-          noHide=${true}
-          hideLabel="Activities"
-          buttonLabel=${activityValue === 'off' ? 'Activities' : `${activityLabel}`}
-          grpClass="profile-card"
-          sceneStyle=${{ background: activityValue !== 'off' && OUTDOORS_VARIANTS[activityValue]?.scene ? OUTDOORS_VARIANTS[activityValue].scene : "url('assets/images/profiles/activities.png') center / cover no-repeat, linear-gradient(160deg,#e0c0a0,#f0d8c0)" }}
-          sceneContent=${null}
-          options=${activityOptions}
-          onChange=${(v) => {
-            if (v === 'off') { activateProfile('basic'); return; }
-            if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
-              setProPromptSource(`variant:${v}`);
-              setProPromptDay(0);
-              return;
-            }
-            try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
-            setActiveProfile('outdoors');
-            setOutdoorsVariantAndSave(v);
-            setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
-            setIndoorMode('off');
-            setIndoorManaged(false);
-          }}
-        />
-        <${CustomSelect}
-          key="work"
-          value=${workValue}
-          isOn=${activeProfile === 'farming' || (activeProfile === 'outdoors' && workVariantKeys.includes(outdoorsVariant))}
-          noHide=${true}
-          hideLabel="Work"
-          buttonLabel=${workValue === 'off' ? 'Work' : `${workLabel}`}
-          grpClass="profile-card"
-          sceneStyle=${{ background: workValue === 'farming' ? FILTER_PROFILES.farming.scene : workValue !== 'off' && OUTDOORS_VARIANTS[workValue]?.scene ? OUTDOORS_VARIANTS[workValue].scene : "url('assets/images/profiles/work.png') center / cover no-repeat, linear-gradient(160deg,#b0b0d4,#d0d0e8)" }}
-          sceneContent=${null}
-          options=${workOptions}
-          onChange=${(v) => {
-            if (v === 'off') { activateProfile('basic'); return; }
-            if (v === 'farming') { activateProfile('farming'); return; }
-            if (OUTDOORS_VARIANTS[v]?.proOnly && !isPro) {
-              setProPromptSource(`variant:${v}`);
-              setProPromptDay(0);
-              return;
-            }
-            try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch (e) { /* ignore */ }
-            setActiveProfile('outdoors');
-            setOutdoorsVariantAndSave(v);
-            setVisibleCols({ ...OUTDOORS_VARIANTS[v].cols });
-            if (v === 'office') {
-              setBuildingType('office');
-              setIndoorMode('on');
-              setIndoorManaged(false);
-            } else {
-              setIndoorMode('off');
-              setIndoorManaged(false);
-            }
-          }}
-        />
-        <span class="profile-divider" aria-hidden="true"></span>
-        ${profileButtonOrder.slice(3).map((key) => {
-          const profile = FILTER_PROFILES[key];
-          const locked  = profile.proOnly && !isPro;
-          return html`
+              <span class="profile-btn-scene" style=${{ background: opt.scene }}></span>
+              <span class="profile-btn-label">${opt.name}</span>
+            </button>
+          `)}
+
+          ${activeTab === 'activities' && activityOptions.map((opt) => html`
            <button
-              key=${key}
-              class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
-              style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
-              title=${locked ? `🔒 ${profile.label} is part of SunScope Extra` : ''}
+              key=${opt.value}
+              class=${`profile-btn${activityValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
+              style=${{ opacity: opt.disabled ? 0.6 : 1, cursor: opt.disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
              onClick=${() => {
-                if (locked) {
-                  setProPromptSource(`profile:${key}`);
-                  setProPromptDay(0);
-                  return;
-                }
-                activateProfile(key);
+                if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
+                try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
+                setActiveProfile('outdoors');
+                setOutdoorsVariantAndSave(opt.value);
+                setVisibleCols({ ...OUTDOORS_VARIANTS[opt.value].cols });
+                setIndoorMode('off');
+                setIndoorManaged(false);
              }}
            >
-              <span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
-              <span class="profile-btn-label">${profile.label}${locked ? ' 🔒' : ''}</span>
-            </button>`;
-        })}
+              <span class="profile-btn-scene" style=${{ background: opt.scene }}></span>
+              <span class="profile-btn-label">${opt.name}</span>
+            </button>
+          `)}
+
+          ${activeTab === 'work' && workOptions.map((opt) => html`
+            <button
+              key=${opt.value}
+              class=${`profile-btn${workValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
+              style=${{ opacity: opt.disabled ? 0.6 : 1, cursor: opt.disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
+              onClick=${() => {
+                if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
+                if (opt.value === 'farming') { activateProfile('farming'); return; }
+                try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
+                setActiveProfile('outdoors');
+                setOutdoorsVariantAndSave(opt.value);
+                setVisibleCols({ ...OUTDOORS_VARIANTS[opt.value].cols });
+                if (opt.value === 'office') { setBuildingType('office'); setIndoorMode('on'); setIndoorManaged(false); }
+                else { setIndoorMode('off'); setIndoorManaged(false); }
+              }}
+            >
+              <span class="profile-btn-scene" style=${{ background: opt.scene }}></span>
+              <span class="profile-btn-label">${opt.name}</span>
+            </button>
+          `)}
+
        </div>
        </div>
      </div>
@@ -363,7 +333,10 @@ export function DayTabs({
              style=${{
                background: isActive ? wBgActive : wBg,
                color: wText,
-                border: '1px solid #c9b08a',
+                borderTop: '1px solid #c9b08a',
+                borderRight: '1px solid #c9b08a',
+                borderBottom: '1px solid #c9b08a',
+                borderLeft: i === 0 ? '1px solid #c9b08a' : 'none',
                opacity: locked ? 0.5 : 1,
                cursor: locked ? 'not-allowed' : 'pointer',
                position: 'relative',