Device info

<script setup>
import Layout from '@/layouts/Main.vue'
import Text from '@/components/Text.vue'
import { useDeviceInfo } from '@/utils/device-info'

const { rows } = useDeviceInfo()
</script>

<template>
    <Layout>
        <div class="device-info-page">
            <div class="device-info-page__head">
                <Text type="body/xxl">Device info</Text>
                <Text type="body/m-reg">EmojiCopy {{ APP_VERSION }}</Text>
            </div>
            <div class="settings-modal-group">
                <DeviceInfoList :rows="rows" />          <!-- the list from section 2 (look 1 or 2) -->
            </div>
        </div>
    </Layout>
</template>

import { ref, onMounted, onUnmounted } from 'vue'

export function useDeviceInfo () {
    const rows = ref([])

    const collect = async () => {
        // ...the exact collector that lives in AllSettings.vue today,
        //    unchanged, writing the 20 { name, description, value } rows
        //    (+ a `group` key for look 2: 'sys' | 'screen' | 'input' | 'hw')
    }

    onMounted(() => {
        collect()
        window.addEventListener('resize', collect)
        window.visualViewport?.addEventListener('resize', collect)
        window.screen.orientation?.addEventListener('change', collect)
    })
    onUnmounted(() => {
        window.removeEventListener('resize', collect)
        window.visualViewport?.removeEventListener('resize', collect)
        window.screen.orientation?.removeEventListener('change', collect)
    })

    return { rows }
}

const DeviceInfo = () => import('@/pages/DeviceInfo.vue')
// ...
{ path: '/device-info', component: DeviceInfo, name: 'device-info' },

.device-info-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px 64px;

    .device-info-page__head {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}

<script setup>
const showDeviceInfo = ref(false)
</script>

<!-- template: last children of .settings-modal-contents -->
<button class="settings-modal-foot" type="button" :aria-expanded="showDeviceInfo" @click="showDeviceInfo = !showDeviceInfo">
    <Text type="body/s-reg" color="text-tertiary">EmojiCopy {{ APP_VERSION }}</Text>
</button>

<!-- what opens: pick one from section 2 —
     look 1/2: a group under the line   → <div class="settings-modal-group" v-if="showDeviceInfo"><DeviceInfoList /></div>
     look 3:   the sub-view             → view = 'device-info'
     look 4:   its own modal            → deviceInfoPopped = true -->

.settings-modal-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding: 8px 0 0;
    border: 0;
    background: none;
    cursor: pointer;
}

<script setup>
const revealDeviceInfo = ref(new URLSearchParams(location.search).get('devinfo') === '1')

// ⌥-click the title (desktop) or 5 taps in 3s (touch)
let taps = 0, tapTimer = null
const onHeaderClick = e => {
    if (e.altKey) { revealDeviceInfo.value = !revealDeviceInfo.value; return }
    taps += 1
    clearTimeout(tapTimer)
    tapTimer = setTimeout(() => { taps = 0 }, 3000)
    if (taps >= 5) { taps = 0; revealDeviceInfo.value = true }
}
</script>

<template>
    <SettingsModal ... @header-click="onHeaderClick">
        <div class="settings-modal-contents">
            <!-- ...Quick Settings / Behavior / Display unchanged... -->

            <!-- the list, gated (look 1/2 shown; look 3/4 = set view / pop the modal instead) -->
            <div class="settings-modal-group" v-if="revealDeviceInfo">
                <Text tag="i" type="body/l-heavy">Device info</Text>
                <DeviceInfoList :rows="rows" />
            </div>
        </div>
    </SettingsModal>
</template>

<!-- ModalHeaderAllSettings.vue: add @click="$emit('header-click', $event)"
     on the title's wrapper and re-emit it through SettingsModal (one
     line each). -->

/* no additions — the list brings its own (section 2) */

<script setup>
import Icon from '@/components/Icon.vue'
const openDeviceInfo = () => { view.value = 'device-info' }      // look 3 — or deviceInfoPopped.value = true for look 4
</script>

<!-- template: 4th group, replaces Device Info -->
<div class="settings-modal-group">
    <Text tag="i" type="body/l-heavy">About</Text>
    <div class="settings-internal-group">
        <div class="setting-row">
            <div class="start">
                <Text class="setting-name" tag="i" type="body/m-heavy">Version</Text>
            </div>
            <div class="end">
                <Text type="body/m-med">EmojiCopy {{ APP_VERSION }}</Text>
            </div>
        </div>
        <button class="setting-drill" type="button" @click="openDeviceInfo">
            <div class="start">
                <Text class="setting-name" tag="i" type="body/m-heavy">Device info</Text>
            </div>
            <Icon name="arrow-caret-right" />
        </button>
    </div>
</div>

.settings-internal-group {
    .setting-drill {
        display: flex;
        align-items: center;
        gap: 16px;
        align-self: stretch;
        padding: 8px 0;
        border: 0;
        background: none;
        text-align: left;
        cursor: pointer;

        .start { display: flex; flex-direction: column; gap: 4px; flex: 1 0 0; }
        .icon  { font-size: 2rem; color: var(--c-text-tertiary); }
        &:hover .icon { color: var(--c-text-primary); }
    }
}

<script setup>
import Layout from '@/layouts/Main.vue'
import Text from '@/components/Text.vue'
import { useDeviceInfo } from '@/utils/device-info'

const { rows } = useDeviceInfo()
</script>

<template>
    <Layout>
        <div class="contact-page">
            <div class="contact-page__head">
                <Text type="body/xxl">Contact</Text>
                <Text type="body/m-reg">Write to hello@emojicopy.com. Include a screenshot of the details below if something isn't working.</Text>
            </div>
            <div class="settings-modal-group">
                <Text tag="i" type="body/l-heavy">Device info</Text>
                <DeviceInfoList :rows="rows" />          <!-- the list from section 2 (look 1 or 2) -->
            </div>
        </div>
    </Layout>
</template>

.contact-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px 64px;

    .contact-page__head {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
}

<!-- ui/components/DeviceInfoList.vue — the one component every place renders -->
<script setup>
import Text from '@/components/Text.vue'
const props = defineProps(['rows'])
</script>

<template>
    <dl class="device-info-list">
        <template v-for="row in props.rows" :key="row.name">
            <Text tag="dt" type="body/m-reg" color="text-secondary">{{ row.name }}</Text>
            <Text tag="dd" type="body/m-med">{{ row.value }}</Text>
        </template>
    </dl>
</template>

<!-- in AllSettings.vue (B / C) — under the trigger: -->
<div class="settings-modal-group" v-if="showDeviceInfo">
    <Text tag="i" type="body/l-heavy">Device info</Text>
    <DeviceInfoList :rows="rows" />
</div>

.device-info-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 24px;
    align-items: baseline;
    align-self: stretch;
    margin: 0;

    dd {
        margin: 0;
        text-align: right;
        overflow-wrap: anywhere;
        color: var(--c-text-primary);
    }
}

<script setup>
import { computed } from 'vue'
import Text from '@/components/Text.vue'
const props = defineProps({ rows: Array, grouped: Boolean })

const GROUPS = [
    ['sys',    'Browser & system'],   // Browser · Operating system · Architecture · Model · Raw user agent
    ['screen', 'Screen'],            // Viewport · Visual viewport · Screen · Available screen · DPR · Color depth · Orientation
    ['input',  'Input'],             // Touch points · Coarse pointer · Fine pointer · Hover available
    ['hw',     'Locale & hardware'],  // CPU cores · Device memory · Language · Timezone
]
const sections = computed(() => GROUPS.map(([key, label]) => ({ key, label, rows: props.rows.filter(r => r.group === key) })))
</script>

<template>
    <dl class="device-info-list">
        <template v-if="props.grouped" v-for="s in sections" :key="s.key">
            <Text tag="dt" type="body/s-heavy" color="text-tertiary" class="device-info-list__head">{{ s.label }}</Text>
            <template v-for="row in s.rows" :key="row.name">
                <Text tag="dt" type="body/m-reg" color="text-secondary">{{ row.name }}</Text>
                <Text tag="dd" type="body/m-med">{{ row.value }}</Text>
            </template>
        </template>
        <template v-else v-for="row in props.rows" :key="row.name">
            <Text tag="dt" type="body/m-reg" color="text-secondary">{{ row.name }}</Text>
            <Text tag="dd" type="body/m-med">{{ row.value }}</Text>
        </template>
    </dl>
</template>

.device-info-list {
    .device-info-list__head {
        grid-column: 1 / -1;
        padding-top: 12px;
        text-transform: uppercase;
        letter-spacing: .06em;
    }
    .device-info-list__head:first-child { padding-top: 0; }
}

<script setup>
import TextButton from '@/buttons/TextButton.vue'
import DeviceInfoList from '@/components/DeviceInfoList.vue'
import { useDeviceInfo } from '@/utils/device-info'

const view = ref('settings')            // 'settings' | 'device-info'
const { rows } = useDeviceInfo()
watch(() => doShow.value, open => { if (!open) view.value = 'settings' })   // reopen on the main view
</script>

<template>
    <SettingsModal
        v-model:popped="doShow"
        :background-class="'settings-modal-bg'"
        width="674px"
        scroll="content"
        :title="view === 'settings' ? 'Settings' : 'Device info'"
        :subtitle="view === 'settings' ? 'Manage your preferences and customize your experience.' : ''"
    >
        <div class="settings-modal-contents" v-if="view === 'settings'">
            <!-- ...the groups; the trigger (B line / C flag / D row) sets view = 'device-info' -->
        </div>

        <div class="settings-modal-contents" v-else>
            <TextButton variant="menu-back" iconStart="arrow-left" label="Settings" @click="view = 'settings'" />
            <div class="settings-modal-group">
                <DeviceInfoList :rows="rows" />
            </div>
        </div>
    </SettingsModal>
</template>

/* the sub-view reuses .settings-modal-contents / .settings-modal-group as-is */

<!-- ui/modals/DeviceInfoModal.vue -->
<script setup>
import SettingsModal from '@/modals/SettingsModal.vue'
import DeviceInfoList from '@/components/DeviceInfoList.vue'
import { useDeviceInfo } from '@/utils/device-info'
const props = defineProps(['popped'])
const emit = defineEmits(['update:popped'])
const { rows } = useDeviceInfo()
</script>

<template>
    <SettingsModal
        :popped="props.popped"
        @update:popped="v => emit('update:popped', v)"
        :background-class="'settings-modal-bg'"
        width="520px"
        scroll="content"
        title="Device info"
    >
        <div class="settings-modal-contents">
            <div class="settings-modal-group">
                <DeviceInfoList :rows="rows" />
            </div>
        </div>
    </SettingsModal>
</template>

<!-- any trigger (B line, C gesture, D row, a support link) — in Main.vue: -->
<DeviceInfoModal v-model:popped="deviceInfoPopped" />

/* the modal reuses .settings-modal-bg / -contents / -group as-is */