@escalated-dev/escalated 0.6.0 → 0.7.1

package/src/components/FileDropzone.vue

@@ -1,41 +1,57 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-
-const emit = defineEmits(['files']);
-const dark = inject('esc-dark', computed(() => false));
-
-const dragging = ref(false);
-const fileInput = ref(null);
-
-function onDrop(e) {
-    dragging.value = false;
-    if (e.dataTransfer?.files?.length) {
-        emit('files', Array.from(e.dataTransfer.files));
-    }
-}
-
-function onFileSelect(e) {
-    if (e.target.files?.length) {
-        emit('files', Array.from(e.target.files));
-        e.target.value = '';
-    }
-}
-
-function browse() {
-    fileInput.value?.click();
-}
-</script>
-
-<template>
-    <div @dragover.prevent="dragging = true" @dragleave="dragging = false" @drop.prevent="onDrop"
-         :class="['cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
-                  dark
-                      ? (dragging ? 'border-white/20 bg-white/[0.04]' : 'border-white/[0.08] hover:border-white/[0.12]')
-                      : (dragging ? 'border-blue-400 bg-blue-50' : 'border-gray-300 hover:border-gray-400')]"
-         @click="browse">
-        <p :class="dark ? 'text-neutral-500' : 'text-gray-500'">
-            Drop files here or <span :class="['font-medium', dark ? 'text-white' : 'text-blue-600']">browse</span>
-        </p>
-        <input ref="fileInput" type="file" multiple class="hidden" @change="onFileSelect" />
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+
+const emit = defineEmits(['files']);
+const dark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const dragging = ref(false);
+const fileInput = ref(null);
+
+function onDrop(e) {
+    dragging.value = false;
+    if (e.dataTransfer?.files?.length) {
+        emit('files', Array.from(e.dataTransfer.files));
+    }
+}
+
+function onFileSelect(e) {
+    if (e.target.files?.length) {
+        emit('files', Array.from(e.target.files));
+        e.target.value = '';
+    }
+}
+
+function browse() {
+    fileInput.value?.click();
+}
+</script>
+
+<template>
+    <div
+        role="button"
+        aria-label="Drop files here or click to upload"
+        :class="[
+            'cursor-pointer rounded-lg border-2 border-dashed px-4 py-3 text-center text-xs transition-colors',
+            dark
+                ? dragging
+                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)]'
+                    : 'border-[var(--esc-panel-border)] hover:border-[var(--esc-panel-border-input)]'
+                : dragging
+                  ? 'border-blue-400 bg-blue-50'
+                  : 'border-gray-300 hover:border-gray-400',
+        ]"
+        @dragover.prevent="dragging = true"
+        @dragleave="dragging = false"
+        @drop.prevent="onDrop"
+        @click="browse"
+    >
+        <p :class="dark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500'">
+            Drop files here or
+            <span :class="['font-medium', dark ? 'text-[var(--esc-panel-text)]' : 'text-blue-600']">browse</span>
+        </p>
+        <input ref="fileInput" type="file" multiple aria-label="Upload files" class="hidden" @change="onFileSelect" />
+    </div>
+</template>

package/src/components/FollowButton.stories.js

@@ -0,0 +1,30 @@
+import FollowButton from './FollowButton.vue';
+
+export default {
+    title: 'Components/FollowButton',
+    component: FollowButton,
+};
+
+export const NotFollowing = {
+    args: {
+        action: '#',
+        isFollowing: false,
+        followersCount: 3,
+    },
+};
+
+export const Following = {
+    args: {
+        action: '#',
+        isFollowing: true,
+        followersCount: 5,
+    },
+};
+
+export const NoFollowers = {
+    args: {
+        action: '#',
+        isFollowing: false,
+        followersCount: 0,
+    },
+};

package/src/components/FollowButton.vue

@@ -1,63 +1,88 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-
-const props = defineProps({
-    action: { type: String, required: true },
-    isFollowing: { type: Boolean, default: false },
-    followersCount: { type: Number, default: 0 },
-});
-
-const escDark = inject('esc-dark', computed(() => false));
-const following = ref(props.isFollowing);
-const count = ref(props.followersCount);
-const processing = ref(false);
-
-function toggle() {
-    if (processing.value) return;
-    processing.value = true;
-    router.post(props.action, {}, {
-        preserveScroll: true,
-        onSuccess: () => {
-            following.value = !following.value;
-            count.value += following.value ? 1 : -1;
-        },
-        onFinish: () => {
-            processing.value = false;
-        },
-    });
-}
-</script>
-
-<template>
-    <button @click="toggle"
-            :disabled="processing"
-            :class="['inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
-                     escDark
-                         ? (following
-                             ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20 hover:bg-cyan-500/25'
-                             : 'border border-white/10 bg-white/[0.03] text-neutral-400 hover:bg-white/[0.06] hover:text-neutral-200')
-                         : (following
-                             ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
-                             : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800'),
-                     processing && 'opacity-50 cursor-not-allowed']">
-        <!-- Eye icon -->
-        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-            <template v-if="following">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
-                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-            </template>
-            <template v-else>
-                <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
-            </template>
-        </svg>
-        {{ following ? 'Following' : 'Follow' }}
-        <span v-if="count > 0"
-              :class="['rounded-full px-1.5 py-0.5 text-xs',
-                       escDark
-                           ? 'bg-white/[0.06] text-neutral-400'
-                           : 'bg-gray-100 text-gray-500']">
-            {{ count }}
-        </span>
-    </button>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    isFollowing: { type: Boolean, default: false },
+    followersCount: { type: Number, default: 0 },
+});
+
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+const following = ref(props.isFollowing);
+const count = ref(props.followersCount);
+const processing = ref(false);
+
+function toggle() {
+    if (processing.value) return;
+    processing.value = true;
+    router.post(
+        props.action,
+        {},
+        {
+            preserveScroll: true,
+            onSuccess: () => {
+                following.value = !following.value;
+                count.value += following.value ? 1 : -1;
+            },
+            onFinish: () => {
+                processing.value = false;
+            },
+        },
+    );
+}
+</script>
+
+<template>
+    <button
+        :disabled="processing"
+        :class="[
+            'inline-flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
+            escDark
+                ? following
+                    ? 'bg-cyan-500/15 text-[var(--esc-panel-text)] ring-1 ring-[var(--esc-panel-accent)]/20 hover:bg-cyan-500/25'
+                    : 'border border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                : following
+                  ? 'bg-blue-100 text-blue-700 ring-1 ring-blue-300 hover:bg-blue-200'
+                  : 'border border-gray-300 bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800',
+            processing && 'opacity-50 cursor-not-allowed',
+        ]"
+        :aria-pressed="following"
+        :aria-label="following ? 'Unfollow ticket' : 'Follow ticket'"
+        @click="toggle"
+    >
+        <!-- Eye icon -->
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
+            <template v-if="following">
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+                />
+                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </template>
+            <template v-else>
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+                />
+            </template>
+        </svg>
+        {{ following ? 'Following' : 'Follow' }}
+        <span
+            v-if="count > 0"
+            :class="[
+                'rounded-full px-1.5 py-0.5 text-xs',
+                escDark
+                    ? 'bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)]'
+                    : 'bg-gray-100 text-gray-500',
+            ]"
+        >
+            {{ count }}
+        </span>
+    </button>
+</template>

package/src/components/KeyboardShortcutHelp.vue

@@ -1,123 +1,213 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-    show: { type: Boolean, default: false },
-    context: { type: String, default: 'list' },
-});
-
-const emit = defineEmits(['update:show']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const shortcutGroups = [
-    {
-        title: 'List View',
-        contexts: ['list'],
-        shortcuts: [
-            { keys: ['j'], description: 'Move down' },
-            { keys: ['k'], description: 'Move up' },
-            { keys: ['x'], description: 'Toggle select' },
-            { keys: ['Enter'], description: 'Open ticket' },
-        ],
-    },
-    {
-        title: 'Detail View',
-        contexts: ['detail'],
-        shortcuts: [
-            { keys: ['r'], description: 'Reply' },
-            { keys: ['n'], description: 'Internal note' },
-            { keys: ['s'], description: 'Change status' },
-            { keys: ['p'], description: 'Change priority' },
-            { keys: ['f'], description: 'Follow/unfollow' },
-        ],
-    },
-    {
-        title: 'Global',
-        contexts: ['list', 'detail'],
-        shortcuts: [
-            { keys: ['?'], description: 'Show this help' },
-        ],
-    },
-];
-
-const filteredGroups = computed(() =>
-    shortcutGroups.filter(g => g.contexts.includes(props.context))
-);
-
-function closeModal() {
-    emit('update:show', false);
-}
-</script>
-
-<template>
-    <Teleport to="body">
-        <Transition enter-active-class="transition duration-200 ease-out" enter-from-class="opacity-0" enter-to-class="opacity-100"
-                    leave-active-class="transition duration-150 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">
-            <div v-if="show" class="fixed inset-0 z-[100] flex items-center justify-center" @keydown.escape="closeModal">
-                <!-- Backdrop -->
-                <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeModal"></div>
-
-                <!-- Modal -->
-                <div :class="['relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border shadow-2xl',
-                              escDark ? 'border-white/[0.06] bg-neutral-900' : 'border-gray-200 bg-white']">
-                    <!-- Header -->
-                    <div :class="['flex items-center justify-between border-b px-6 py-4',
-                                  escDark ? 'border-white/[0.06]' : 'border-gray-200']">
-                        <div class="flex items-center gap-3">
-                            <svg :class="['h-5 w-5', escDark ? 'text-neutral-400' : 'text-gray-500']"
-                                 fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z" />
-                            </svg>
-                            <h2 :class="['text-base font-semibold', escDark ? 'text-white' : 'text-gray-900']">
-                                Keyboard Shortcuts
-                            </h2>
-                        </div>
-                        <button @click="closeModal"
-                                :class="['rounded-lg p-1.5 transition-colors',
-                                         escDark ? 'text-neutral-500 hover:bg-white/[0.04] hover:text-neutral-300' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600']">
-                            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-
-                    <!-- Body -->
-                    <div class="max-h-[60vh] overflow-y-auto px-6 py-4">
-                        <div v-for="(group, gi) in filteredGroups" :key="gi"
-                             :class="['pb-4', gi < filteredGroups.length - 1 && 'mb-4 border-b',
-                                      escDark ? 'border-white/[0.06]' : 'border-gray-100']">
-                            <h3 :class="['mb-3 text-xs font-semibold uppercase tracking-wider',
-                                         escDark ? 'text-neutral-500' : 'text-gray-500']">
-                                {{ group.title }}
-                            </h3>
-                            <div class="space-y-2">
-                                <div v-for="(shortcut, si) in group.shortcuts" :key="si"
-                                     class="flex items-center justify-between">
-                                    <span :class="['text-sm', escDark ? 'text-neutral-300' : 'text-gray-700']">
-                                        {{ shortcut.description }}
-                                    </span>
-                                    <div class="flex items-center gap-1">
-                                        <kbd v-for="(key, ki) in shortcut.keys" :key="ki"
-                                             :class="['inline-flex min-w-[24px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold',
-                                                      escDark
-                                                          ? 'border-white/10 bg-white/[0.06] text-neutral-300'
-                                                          : 'border-gray-300 bg-gray-100 text-gray-700']">
-                                            {{ key }}
-                                        </kbd>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <!-- Footer -->
-                    <div :class="['border-t px-6 py-3 text-center text-xs',
-                                  escDark ? 'border-white/[0.06] text-neutral-600' : 'border-gray-100 text-gray-400']">
-                        Press <kbd :class="['mx-1 inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold',
-                                           escDark ? 'border-white/10 bg-white/[0.06] text-neutral-400' : 'border-gray-300 bg-gray-100 text-gray-600']">Esc</kbd> to close
-                    </div>
-                </div>
-            </div>
-        </Transition>
-    </Teleport>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+    show: { type: Boolean, default: false },
+    context: { type: String, default: 'list' },
+});
+
+const emit = defineEmits(['update:show']);
+const escDark = inject(
+    'esc-dark',
+    computed(() => false),
+);
+
+const shortcutGroups = [
+    {
+        title: 'List View',
+        contexts: ['list'],
+        shortcuts: [
+            { keys: ['j'], description: 'Move down' },
+            { keys: ['k'], description: 'Move up' },
+            { keys: ['x'], description: 'Toggle select' },
+            { keys: ['Enter'], description: 'Open ticket' },
+        ],
+    },
+    {
+        title: 'Detail View',
+        contexts: ['detail'],
+        shortcuts: [
+            { keys: ['r'], description: 'Reply' },
+            { keys: ['n'], description: 'Internal note' },
+            { keys: ['s'], description: 'Change status' },
+            { keys: ['p'], description: 'Change priority' },
+            { keys: ['f'], description: 'Follow/unfollow' },
+        ],
+    },
+    {
+        title: 'Global',
+        contexts: ['list', 'detail'],
+        shortcuts: [{ keys: ['?'], description: 'Show this help' }],
+    },
+];
+
+const filteredGroups = computed(() => shortcutGroups.filter((g) => g.contexts.includes(props.context)));
+
+function closeModal() {
+    emit('update:show', false);
+}
+</script>
+
+<template>
+    <Teleport to="body">
+        <Transition
+            enter-active-class="transition duration-200 ease-out"
+            enter-from-class="opacity-0"
+            enter-to-class="opacity-100"
+            leave-active-class="transition duration-150 ease-in"
+            leave-from-class="opacity-100"
+            leave-to-class="opacity-0"
+        >
+            <div
+                v-if="show"
+                class="fixed inset-0 z-[100] flex items-center justify-center"
+                @keydown.escape="closeModal"
+            >
+                <!-- Backdrop -->
+                <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="closeModal"></div>
+
+                <!-- Modal -->
+                <div
+                    role="dialog"
+                    aria-modal="true"
+                    aria-label="Keyboard shortcuts"
+                    :class="[
+                        'relative z-10 w-full max-w-lg overflow-hidden rounded-2xl border shadow-2xl',
+                        escDark
+                            ? 'border-[var(--esc-panel-border)] bg-[var(--esc-panel-surface)]'
+                            : 'border-gray-200 bg-white',
+                    ]"
+                >
+                    <!-- Header -->
+                    <div
+                        :class="[
+                            'flex items-center justify-between border-b px-6 py-4',
+                            escDark ? 'border-[var(--esc-panel-border)]' : 'border-gray-200',
+                        ]"
+                    >
+                        <div class="flex items-center gap-3">
+                            <svg
+                                :class="[
+                                    'h-5 w-5',
+                                    escDark ? 'text-[var(--esc-panel-text-tertiary)]' : 'text-gray-500',
+                                ]"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+                                />
+                            </svg>
+                            <h2
+                                :class="[
+                                    'text-base font-semibold',
+                                    escDark ? 'text-[var(--esc-panel-text)]' : 'text-gray-900',
+                                ]"
+                            >
+                                Keyboard Shortcuts
+                            </h2>
+                        </div>
+                        <button
+                            aria-label="Close"
+                            :class="[
+                                'rounded-lg p-1.5 transition-colors',
+                                escDark
+                                    ? 'text-[var(--esc-panel-text-muted)] hover:bg-[var(--esc-panel-hover)] hover:text-[var(--esc-panel-text-secondary)]'
+                                    : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600',
+                            ]"
+                            @click="closeModal"
+                        >
+                            <svg
+                                class="h-5 w-5"
+                                fill="none"
+                                stroke="currentColor"
+                                stroke-width="1.5"
+                                viewBox="0 0 24 24"
+                            >
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                            </svg>
+                        </button>
+                    </div>
+
+                    <!-- Body -->
+                    <div class="max-h-[60vh] overflow-y-auto px-6 py-4">
+                        <div
+                            v-for="(group, gi) in filteredGroups"
+                            :key="gi"
+                            :class="[
+                                'pb-4',
+                                gi < filteredGroups.length - 1 && 'mb-4 border-b',
+                                escDark ? 'border-[var(--esc-panel-border)]' : 'border-gray-100',
+                            ]"
+                        >
+                            <h3
+                                :class="[
+                                    'mb-3 text-xs font-semibold uppercase tracking-wider',
+                                    escDark ? 'text-[var(--esc-panel-text-muted)]' : 'text-gray-500',
+                                ]"
+                            >
+                                {{ group.title }}
+                            </h3>
+                            <div class="space-y-2">
+                                <div
+                                    v-for="(shortcut, si) in group.shortcuts"
+                                    :key="si"
+                                    class="flex items-center justify-between"
+                                >
+                                    <span
+                                        :class="[
+                                            'text-sm',
+                                            escDark ? 'text-[var(--esc-panel-text-secondary)]' : 'text-gray-700',
+                                        ]"
+                                    >
+                                        {{ shortcut.description }}
+                                    </span>
+                                    <div class="flex items-center gap-1">
+                                        <kbd
+                                            v-for="(key, ki) in shortcut.keys"
+                                            :key="ki"
+                                            :class="[
+                                                'inline-flex min-w-[24px] items-center justify-center rounded-md border px-2 py-0.5 text-xs font-semibold',
+                                                escDark
+                                                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-secondary)]'
+                                                    : 'border-gray-300 bg-gray-100 text-gray-700',
+                                            ]"
+                                        >
+                                            {{ key }}
+                                        </kbd>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Footer -->
+                    <div
+                        :class="[
+                            'border-t px-6 py-3 text-center text-xs',
+                            escDark
+                                ? 'border-[var(--esc-panel-border)] text-[var(--esc-panel-text-muted)]'
+                                : 'border-gray-100 text-gray-400',
+                        ]"
+                    >
+                        Press
+                        <kbd
+                            :class="[
+                                'mx-1 inline-flex items-center rounded border px-1.5 py-0.5 text-[10px] font-semibold',
+                                escDark
+                                    ? 'border-[var(--esc-panel-border-input)] bg-[var(--esc-panel-hover)] text-[var(--esc-panel-text-tertiary)]'
+                                    : 'border-gray-300 bg-gray-100 text-gray-600',
+                            ]"
+                            >Esc</kbd
+                        >
+                        to close
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>