Init commit

resources/css/app.css

@@ -0,0 +1,126 @@
+@import "./dongle.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
+@layer base {
+  :root {
+    --background: var(--gray);
+    --foreground: 0 0% 3.9%;
+    --card: var(--white);
+    --card-foreground: var(--foreground);
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: var(--white);
+    --primary-foreground: var(--white-foreground);
+    --secondary: var(--green-300);
+    --secondary-foreground: var(--green-foreground);
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+
+    /* WHITE */
+    --white: 180 13% 95%;
+    --white-50: 180 20% 99%;
+    --white-100: 180 20% 99%;
+    --white-200: 180 20% 98%;
+    --white-300: 180 12.5% 96.9%;
+    --white-400: 180 12.5% 96.9%;
+    --white-500: 180 13% 95.5%;
+    --white-600: 180 12.7% 86.1%;
+    --white-700: 180 12.8% 73.9%;
+    --white-800: 180 12.7% 60%;
+    --white-900: 180 13.2% 42.9%;
+    --white-950: 180 12.7% 31%;
+
+    /* GRAY */
+    --gray: 195 17% 86%;
+    --gray-50: 180 20% 99%;
+    --gray-100: 210 20% 98%;
+    --gray-200: 195 15.4% 94.9%;
+    --gray-300: 197.1 17.1% 92%;
+    --gray-400: 198 17.9% 89%;
+    --gray-500: 195 17.1% 86.3%;
+    --gray-600: 192.6 16.8% 77.8%;
+    --gray-700: 195 17.1% 67.8%;
+    --gray-800: 195.8 17% 56.1%;
+    --gray-900: 195.4 16.7% 41%;
+    --gray-950: 194.4 17.5% 28%;
+
+    /* GREEN  */
+    --green: 120 100% 21.2%;
+    --green-50: 120 100% 92%;
+    --green-100: 120 100% 82%;
+    --green-200: 120 100% 48%;
+    --green-300: 120 100% 41%;
+    --green-400: 120 100% 33.9%;
+    --green-500: 120 100% 21.2%;
+    --green-600: 120 100% 19%;
+    --green-700: 120 100% 16.1%;
+    --green-800: 120 100% 12.9%;
+    --green-900: 120 100% 9%;
+    --green-950: 120 100% 6.1%;
+
+    /* DARK GREEN */
+    --dark-green: 156 48% 15%;
+    --dark-green-50: 155 46.2% 94.9%;
+    --dark-green-100: 153.1 47.5% 88%;
+    --dark-green-200: 154 48.9% 73.1%;
+    --dark-green-300: 153.7 48.7% 54.1%;
+    --dark-green-400: 154.3 48% 40%;
+    --dark-green-500: 154.3 48.5% 19.8%;
+    --dark-green-600: 154.3 48.8% 16.9%;
+    --dark-green-700: 154.3 49.3% 13.9%;
+    --dark-green-800: 155.2 47.5% 12%;
+    --dark-green-900: 154.7 46.3% 8%;
+    --dark-green-950: 154.7 46.3% 8%;
+  }
+  /* .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  } */
+}
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

resources/js/Components/Layout/AppLogo.vue

@@ -0,0 +1,10 @@
+<script setup>
+import { appName } from '@/app.ts'
+</script>
+
+<template>
+    <router-link class="flex justify-center items-center gap-3" to="/">
+        <img src="@/Assets/logo.png" alt="logo DatBrowser" class="h-20" />
+        <h1 class="text-xl font-display select-none">{{ appName }}</h1>
+    </router-link>
+</template>

resources/js/Components/Layout/Content/TitleDescription.vue

@@ -0,0 +1,4 @@
+<template>
+    <h2 class="text-xl"><slot name="title" /></h2>
+    <p class="text-dark-green"><slot name="description" /></p>
+</template>

resources/js/Components/Layout/MainNav/MainNavItem.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import Card from "@/Components/ui/card/Card.vue";
+import CardContent from "@/Components/ui/card/CardContent.vue";
+import { Link } from "@inertiajs/vue3";
+
+defineProps<{
+    link: string;
+}>();
+</script>
+
+<template>
+    <li>
+        <Link :href="link">
+            <Card :class="{ 'bg-secondary': $page.url === link, 'hover:bg-gray': $page.url !== link ,'w-full transition': true }">
+                <CardContent class="p-3">
+                    <slot />
+                </CardContent>
+            </Card>
+        </Link>
+    </li>
+</template>

resources/js/Components/Layout/MainNav/MainNavJobLink.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import MainNavItem from "@/Components/Layout/MainNav/MainNavItem.vue";
+import { Job } from "@/types/Jobs/job";
+
+defineProps<{
+    job: Job;
+}>();
+</script>
+
+<template>
+    <MainNavItem :link="`/job/${job.id}`">
+        {{ job.name }}
+    </MainNavItem>
+</template>

resources/js/Components/ui/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+import { type ButtonVariants, buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

resources/js/Components/ui/button/index.ts

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

resources/js/Components/ui/card/Card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

resources/js/Components/ui/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

resources/js/Components/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils.ts'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('text-2xl font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>

resources/js/Components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'

resources/js/Components/ui/job/JobCard.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import TitleDescription from "@/Components/Layout/Content/TitleDescription.vue";
+import { Job } from "@/types/Jobs/job";
+
+defineProps<{
+    job: Job;
+}>();
+</script>
+
+<template>
+    <TitleDescription>
+        <template #title>
+            {{ job.name }}
+        </template>
+        <template #description>
+            {{ job.description }}
+        </template>
+    </TitleDescription>
+</template>

resources/js/Components/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import ScrollBar from './ScrollBar.vue'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

resources/js/Components/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>

resources/js/Components/ui/scroll-area/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'

resources/js/Layouts/BaseLayout.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import AppLogo from "@/Components/Layout/AppLogo.vue";
+import Card from "@/Components/ui/card/Card.vue";
+import CardContent from "@/Components/ui/card/CardContent.vue";
+import CardHeader from "@/Components/ui/card/CardHeader.vue";
+import { Link } from "@inertiajs/vue3";
+
+defineOptions({
+    inheritAttrs: false,
+});
+</script>
+
+<template>
+    <section class="bg-background p-3 border-2 flex justify-center items-center">
+        <Card
+            class="w-[95dvw] md:w-[80dvw] md:max-w-[60em] h-[90dvh] max-h-[200em] flex flex-col justify-stretch"
+        >
+            <CardHeader>
+                <nav class="flex justify-between items-center p-3">
+                    <Link href="/">
+                        <AppLogo />
+                    </Link>
+                </nav>
+            </CardHeader>
+
+            <CardContent v-bind="$attrs" class="flex-1 min-h-0 overflow-auto">
+                <slot />
+            </CardContent>
+        </Card>
+    </section>
+</template>
+
+<style lang="scss" scoped>
+section {
+    width: 100dvw;
+    height: 100dvh;
+}
+</style>

resources/js/Layouts/JobLayout.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import ScrollArea from "@/Components/ui/scroll-area/ScrollArea.vue";
+import BaseLayout from "./BaseLayout.vue";
+import MainNavJobLink from "@/Components/Layout/MainNav/MainNavJobLink.vue";
+import { Job } from "@/types/Jobs/job";
+import MainNavItem from "@/Components/Layout/MainNav/MainNavItem.vue";
+
+let jobs = [
+    { id: 1, name: "Hellcase" },
+    { id: 2, name: "Jeu gratuit Epic Games" },
+    { id: 3, name: "Envoyer un post instagram" },
+];
+</script>
+
+<template>
+    <BaseLayout class="flex justify-stretch items-start gap-3">
+        <ScrollArea class="h-full w-50 overflow-auto">
+            <nav class="p-3">
+                <ul class="flex flex-col gap-2">
+                    <MainNavItem link="/"> Accueil </MainNavItem>
+                    <MainNavJobLink
+                        :job="job as Job"
+                        v-for="job in jobs"
+                        :key="job.id"
+                    />
+                </ul>
+            </nav>
+        </ScrollArea>
+
+        <ScrollArea class="flex-1 h-full overflow-auto">
+            <main>
+                <slot />
+            </main>
+        </ScrollArea>
+    </BaseLayout>
+</template>

resources/js/Pages/Home.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Head } from "@inertiajs/vue3";
+import TitleDescription from "@/Components/Layout/Content/TitleDescription.vue";
+</script>
+
+<template>
+    <Head title="Welcome" />
+
+    <TitleDescription>
+        <template #title>
+            Bienvenue
+        </template>
+        <template #description>
+            DatBrowser, le navigateur automatisé par Datboi.
+        </template>
+    </TitleDescription>
+    <p>
+        Commencez par sélectionner un job à donner à Datboi en cliquant dessus
+        dans la liste à gauche.
+    </p>
+</template>

resources/js/Pages/Job.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import JobCard from '../Components/ui/job/JobCard.vue'
+import { Job } from "@/types/Jobs/job";
+import { Head } from "@inertiajs/vue3";
+
+defineProps<{
+    job: Job;
+}>();
+</script>
+
+<template>
+    <Head title="Welcome" />
+
+    <JobCard :job="job" />
+</template>

resources/js/app.ts

@@ -0,0 +1,32 @@
+import "../css/app.css";
+import "./bootstrap";
+
+import { createInertiaApp } from "@inertiajs/vue3";
+import { createApp, DefineComponent, h } from "vue";
+import { ZiggyVue } from "../../vendor/tightenco/ziggy";
+import JobLayout from "./Layouts/JobLayout.vue";
+
+export const appName = import.meta.env.VITE_APP_NAME || "Laravel";
+
+createInertiaApp({
+    title: (title) => `${title} - ${appName}`,
+    resolve: (name : string) => {
+        // resolvePageComponent(
+        //     `./Pages/${name}.vue`,
+        //     import.meta.glob<DefineComponent>('./Pages/**/*.vue'),
+        // )
+        const pages: Record<string, DefineComponent> = import.meta.glob("./Pages/**/*.vue", { eager: true });
+        let page: DefineComponent = pages[`./Pages/${name}.vue`];
+        page.default.layout = page.default.layout || JobLayout;
+        return page;
+    },
+    setup({ el, App, props, plugin }) {
+        createApp({ render: () => h(App, props) })
+            .use(plugin)
+            .use(ZiggyVue)
+            .mount(el);
+    },
+    progress: {
+        color: "hsl(120 100% 41%)",
+    },
+});

resources/js/bootstrap.ts

@@ -0,0 +1,4 @@
+import axios from 'axios';
+window.axios = axios;
+
+window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/js/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

resources/js/types/Jobs/job.d.ts

@@ -0,0 +1,7 @@
+export type Job = {
+    id: number;
+    name: string;
+    description: string;
+    is_active: boolean;
+    created_at: Date;
+}

resources/js/types/global.d.ts

@@ -0,0 +1,23 @@
+import { PageProps as InertiaPageProps } from '@inertiajs/core';
+import { AxiosInstance } from 'axios';
+import { route as ziggyRoute } from 'ziggy-js';
+import { PageProps as AppPageProps } from './';
+
+declare global {
+    interface Window {
+        axios: AxiosInstance;
+    }
+
+    /* eslint-disable no-var */
+    var route: typeof ziggyRoute;
+}
+
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        route: typeof ziggyRoute;
+    }
+}
+
+declare module '@inertiajs/core' {
+    interface PageProps extends InertiaPageProps, AppPageProps {}
+}

resources/js/types/index.d.ts

@@ -0,0 +1,4 @@
+export type PageProps<
+    T extends Record<string, unknown> = Record<string, unknown>,
+> = T & {
+};

resources/js/types/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

resources/views/app.blade.php

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title inertia>{{ config('app.name', 'Laravel') }}</title>
+
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
+
+        <!-- Scripts -->
+        @routes
+        @vite(['resources/js/app.ts', "resources/js/Pages/{$page['component']}.vue"])
+        @inertiaHead
+    </head>
+    <body class="font-sans antialiased">
+        @inertia
+    </body>
+</html>