From ea977f961659cf1f3ba55ac3d86119752a34053c Mon Sep 17 00:00:00 2001
From: Ivan Isekeev <work@ivanisekeev.com>
Date: Sat, 3 Aug 2024 20:54:03 +0600
Subject: [PATCH] Decrease print width formatter

---
 .prettierrc                      |   2 +-
 .vscode/extensions.json          |   2 +-
 api.ts                           |  15 ++++-
 components/ProjectsActivator.vue |  42 ++++++++-----
 components/Task.vue              |  10 ++-
 entrypoints/background.ts        |  12 ++--
 entrypoints/sidepanel/App.vue    |  17 +++++-
 helpers.ts                       | 102 +++++++++++++++----------------
 tsconfig.json                    |   2 +-
 uno.config.ts                    |   6 +-
 views/Projects.vue               |   4 +-
 views/Settings.vue               |   5 +-
 views/Tasks.vue                  |  71 +++++++++++++--------
 13 files changed, 173 insertions(+), 117 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 703b3fc..317868b 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,7 +2,7 @@
     "tabWidth": 4,
     "useTabs": false,
     "singleQuote": true,
-    "printWidth": 180,
+    "printWidth": 140,
     "semi": false,
     "bracketSpacing": false,
     "trailingComma": "none",
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index a7cea0b..10eb3fb 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar"]
+    "recommendations": ["Vue.volar"]
 }
diff --git a/api.ts b/api.ts
index 949a956..9aa7728 100644
--- a/api.ts
+++ b/api.ts
@@ -16,7 +16,17 @@ export const getClients = () => api.get('/clients?per_page=6&page=1?status=activ
 export const getProjects = () => api.get('/projects?per_page=6&page=1?&status=active&without_deleted_clients=true&sort=budgeted_hours|desc')
 export const getProject = (id: string) => api.get(`/projects/${id}`)
 
-export const getTasks = ({clientId, projectId, taskStatusId, filter}: {clientId?: string; projectId: string | null; taskStatusId?: string; filter?: string}) =>
+export const getTasks = ({
+    clientId,
+    projectId,
+    taskStatusId,
+    filter
+}: {
+    clientId?: string
+    projectId: string | null
+    taskStatusId?: string
+    filter?: string
+}) =>
     api.get(`/tasks?without_deleted_clients=true&sort=number|desc&per_page=6&page=1&client_status=uninvoiced&status=active`, {
         params: {
             project_tasks: projectId,
@@ -41,7 +51,8 @@ export const putTask = (
             ...(action && {[action]: true})
         }
     })
-export const postTask = ({description, projectId}: {description: string; projectId: string}) => api.post(`/tasks`, {description, project_id: projectId})
+export const postTask = ({description, projectId}: {description: string; projectId: string}) =>
+    api.post(`/tasks`, {description, project_id: projectId})
 export const deleteTask = (id: string) => api.delete(`/tasks/${id}`)
 
 export const getTaskStatuses = () => api.get('/task_statuses')
diff --git a/components/ProjectsActivator.vue b/components/ProjectsActivator.vue
index 9712eca..1119764 100644
--- a/components/ProjectsActivator.vue
+++ b/components/ProjectsActivator.vue
@@ -19,43 +19,53 @@
 </style>
 <template>
     <div style="width: 100%; height: 36.25px; box-sizing: border-box; position: relative">
-        <button style="width:100%; height: 100%" @click="$emit('open-projects-page')">
+        <button style="width: 100%; height: 100%" @click="$emit('open-projects-page')">
             <Transition mode="out-in">
-                <div v-if="projectId"
-                     style="position: relative; display: flex; align-items: center; justify-items: start">
-                    <div v-if="isPending" class="project-name-skeleton"/>
+                <div v-if="projectId" style="position: relative; display: flex; align-items: center; justify-items: start">
+                    <div v-if="isPending" class="project-name-skeleton" />
                     <div v-else-if="isError">Error</div>
                     <div v-else class="project-name">
-                        {{
-                            project.data.name === '' ? project.data.display_name : project.data.name
-                        }}
+                        {{ project.data.name === '' ? project.data.display_name : project.data.name }}
                     </div>
                 </div>
 
-                <div v-else>
-                    All projects
-                </div>
+                <div v-else>All projects</div>
             </Transition>
         </button>
         <button
-            style="font-weight: bold; position: absolute; background: #747bff22; color: #747bff; font-size: large; padding: 0.25em 0.5em; right: 0.25em; top: 0.15em; line-height: 1em;"
-            @click.stop="$emit('clear-project-choose')">
+            style="
+                font-weight: bold;
+                position: absolute;
+                background: #747bff22;
+                color: #747bff;
+                font-size: large;
+                padding: 0.25em 0.5em;
+                right: 0.25em;
+                top: 0.15em;
+                line-height: 1em;
+            "
+            @click.stop="$emit('clear-project-choose')"
+        >
             <div style="transform: rotate(45deg)">+</div>
         </button>
     </div>
 </template>
 
 <script lang="ts" setup>
-import {useQuery} from "@tanstack/vue-query";
-import {getProject} from "@/api";
-import {computed} from "vue";
+import {useQuery} from '@tanstack/vue-query'
+import {getProject} from '@/api'
+import {computed} from 'vue'
 
 const props = defineProps<{
     projectId: string | null | undefined
 }>()
 
 const enabled = computed(() => props.projectId !== null && props.projectId !== undefined)
-const {data: project, isPending, isError} = useQuery({
+const {
+    data: project,
+    isPending,
+    isError
+} = useQuery({
     enabled,
     queryKey: ['project', props.projectId],
     queryFn: () => getProject(props.projectId)
diff --git a/components/Task.vue b/components/Task.vue
index e072679..6833994 100644
--- a/components/Task.vue
+++ b/components/Task.vue
@@ -10,7 +10,11 @@
         />
         <div class="info">
             <span class="time">{{ getTime() }}</span>
-            <button v-if="!task.project_id" class="assign-project-button i-mdi-folder-plus-outline" @click="enableAssignProjectMode(task)"></button>
+            <button
+                v-if="!task.project_id"
+                class="assign-project-button i-mdi-folder-plus-outline"
+                @click="enableAssignProjectMode(task)"
+            ></button>
             <button v-if="false" class="i-mdi-content-save-outline save"></button>
             <button class="i-mdi-timer-play" :disabled="taskFinished" @click="startTask({task, status: statuses.running})"></button>
             <button
@@ -227,7 +231,9 @@ const getTime = () => {
         transform: translate(50%, 50%);
 
         button {
-            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+            box-shadow:
+                0 4px 8px 0 rgba(0, 0, 0, 0.2),
+                0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
             div {
                 font-size: 2em;
diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index 8051fe9..72d2542 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -1,9 +1,7 @@
 export default defineBackground(() => {
-  console.log('Hello background!', { id: browser.runtime.id });
+    console.log('Hello background!', {id: browser.runtime.id})
 
-  // Allows users to open the side panel by clicking on the action toolbar icon
-  // @ts-expect-error: sidePanel is not typed
-  browser.sidePanel
-      .setPanelBehavior({ openPanelOnActionClick: true })
-      .catch((error: unknown) => console.error(error));
-});
+    // Allows users to open the side panel by clicking on the action toolbar icon
+    // @ts-expect-error: sidePanel is not typed
+    browser.sidePanel.setPanelBehavior({openPanelOnActionClick: true}).catch((error: unknown) => console.error(error))
+})
diff --git a/entrypoints/sidepanel/App.vue b/entrypoints/sidepanel/App.vue
index 81a414a..2e26302 100644
--- a/entrypoints/sidepanel/App.vue
+++ b/entrypoints/sidepanel/App.vue
@@ -57,8 +57,15 @@ if (!isComplete.value) {
             <div v-else style="display: flex; flex-direction: column; gap: 1em">
                 <div class="control-panel">
                     <Transition mode="out-in">
-                        <div v-if="page === 'tasks'" style="display: flex; flex-direction: column; gap: 1em; width: 100%; align-items: center">
-                            <ProjectsActivator :projectId @open-projects-page="page = 'projects'" @clear-project-choose="updateProjectChoose(null)" />
+                        <div
+                            v-if="page === 'tasks'"
+                            style="display: flex; flex-direction: column; gap: 1em; width: 100%; align-items: center"
+                        >
+                            <ProjectsActivator
+                                :projectId
+                                @open-projects-page="page = 'projects'"
+                                @clear-project-choose="updateProjectChoose(null)"
+                            />
                             <div v-if="project" class="values">
                                 <div>
                                     Budget
@@ -77,7 +84,11 @@ if (!isComplete.value) {
                         <button v-else-if="assignProjectMode" id="project-choose-activator" @click="cancelAssignProjectMode">
                             <span>Cancel</span>
                         </button>
-                        <button v-else-if="page === 'projects' || page === 'settings'" id="project-choose-activator" @click="page = 'tasks'">
+                        <button
+                            v-else-if="page === 'projects' || page === 'settings'"
+                            id="project-choose-activator"
+                            @click="page = 'tasks'"
+                        >
                             <span>Return to tasks</span>
                         </button>
                     </Transition>
diff --git a/helpers.ts b/helpers.ts
index ef373fe..b11f3e4 100644
--- a/helpers.ts
+++ b/helpers.ts
@@ -1,115 +1,111 @@
-import dayjs from 'dayjs';
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import relativeTime from 'dayjs/plugin/relativeTime'
 
-export type TimeLogType = [number, number, string, boolean];
-export type TimeLogsType = TimeLogType[];
+export type TimeLogType = [number, number, string, boolean]
+export type TimeLogsType = TimeLogType[]
 
 export function parseTimeLog(log: string) {
     if (log === '' || log === '[]') {
-        return [];
+        return []
     }
 
-    const defaultRow: TimeLogsType = [[0, 0, '', true]];
-    const parsed: TimeLogsType = JSON.parse(log);
+    const defaultRow: TimeLogsType = [[0, 0, '', true]]
+    const parsed: TimeLogsType = JSON.parse(log)
 
     if (!parsed.length) {
-        return defaultRow;
+        return defaultRow
     }
 
-    return parsed;
+    return parsed
 }
 
 export function calculateHours(log: string, includeRunning = false) {
-    const times = parseTimeLog(log);
+    const times = parseTimeLog(log)
 
-    let seconds = 0;
+    let seconds = 0
 
     for (const [start, finish] of times) {
         if (start > finish && !includeRunning) {
-            continue;
+            continue
         }
 
-        const finishTime = finish !== 0 ? finish : Math.floor(Date.now() / 1000);
-        const durationInSeconds = finishTime - start;
+        const finishTime = finish !== 0 ? finish : Math.floor(Date.now() / 1000)
+        const durationInSeconds = finishTime - start
 
-        seconds += Math.max(durationInSeconds, 0);
+        seconds += Math.max(durationInSeconds, 0)
     }
 
-    const totalHours = Math.floor(seconds / 3600);
-    const totalMinutes = Math.floor((seconds % 3600) / 60);
-    const totalSecondsRemaining = seconds % 60;
+    const totalHours = Math.floor(seconds / 3600)
+    const totalMinutes = Math.floor((seconds % 3600) / 60)
+    const totalSecondsRemaining = seconds % 60
 
     if (totalHours < 24) {
-        return `${totalHours}:${totalMinutes
-            .toString()
-            .padStart(2, '0')}:${totalSecondsRemaining.toString().padStart(2, '0')}`;
+        return `${totalHours}:${totalMinutes.toString().padStart(2, '0')}:${totalSecondsRemaining.toString().padStart(2, '0')}`
     }
 
-    return `${totalHours}h`;
+    return `${totalHours}h`
 }
 
 interface CalculateTimeOptions {
-    inSeconds?: boolean;
-    calculateLastTimeLog?: boolean;
+    inSeconds?: boolean
+    calculateLastTimeLog?: boolean
 }
 
 export function calculateTime(log: string, options?: CalculateTimeOptions) {
-    const times = parseTimeLog(log);
-    dayjs.extend(duration);
-    dayjs.extend(relativeTime);
+    const times = parseTimeLog(log)
+    dayjs.extend(duration)
+    dayjs.extend(relativeTime)
 
-    let seconds = 0;
+    let seconds = 0
 
     if (options?.calculateLastTimeLog) {
-        const lastLogIndex = times.length - 1;
+        const lastLogIndex = times.length - 1
 
-        const start = times[lastLogIndex][0];
-        const startTime = start ? dayjs.unix(start) : dayjs();
+        const start = times[lastLogIndex][0]
+        const startTime = start ? dayjs.unix(start) : dayjs()
 
-        seconds += dayjs().diff(startTime, 'seconds');
+        seconds += dayjs().diff(startTime, 'seconds')
     } else {
         times.map(([start, stop]) => {
-            const startTime = start ? dayjs.unix(start) : dayjs();
-            const stopTime = stop ? dayjs.unix(stop) : dayjs();
+            const startTime = start ? dayjs.unix(start) : dayjs()
+            const stopTime = stop ? dayjs.unix(stop) : dayjs()
 
-            seconds += stopTime.diff(startTime, 'seconds');
-        });
+            seconds += stopTime.diff(startTime, 'seconds')
+        })
     }
 
     if (options?.inSeconds) {
-        return seconds.toString();
+        return seconds.toString()
     }
 
-    return seconds > 86400
-        ? dayjs.duration(seconds, 'seconds').humanize()
-        : dayjs.duration(seconds, 'seconds').format('HH:mm:ss');
+    return seconds > 86400 ? dayjs.duration(seconds, 'seconds').humanize() : dayjs.duration(seconds, 'seconds').format('HH:mm:ss')
 }
 
 export function calculateDifferenceBetweenLogs(log: string, logIndex: number) {
-    const times = parseTimeLog(log);
-    const logTimes = times[logIndex];
+    const times = parseTimeLog(log)
+    const logTimes = times[logIndex]
 
-    const start = logTimes ? dayjs.unix(logTimes[0]) : dayjs();
-    const end = logTimes ? dayjs.unix(logTimes[1]) : dayjs();
+    const start = logTimes ? dayjs.unix(logTimes[0]) : dayjs()
+    const end = logTimes ? dayjs.unix(logTimes[1]) : dayjs()
 
-    const seconds = end.diff(start, 'seconds');
+    const seconds = end.diff(start, 'seconds')
 
-    return new Date(seconds * 1000).toISOString().slice(11, 19);
+    return new Date(seconds * 1000).toISOString().slice(11, 19)
 }
 
 export const isTaskRunning = (task): boolean => {
-    let running = false;
+    let running = false
 
     parseTimeLog(task.time_log).forEach(([, stop]) => {
         if (stop === 0) {
-            running = true;
+            running = true
         }
-    });
+    })
 
-    return running;
-};
+    return running
+}
 
 export function capitalizeFirstLetter(string: string) {
-    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
+    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase()
 }
diff --git a/tsconfig.json b/tsconfig.json
index 008bc3c..58524bf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,3 @@
 {
-  "extends": "./.wxt/tsconfig.json"
+    "extends": "./.wxt/tsconfig.json"
 }
diff --git a/uno.config.ts b/uno.config.ts
index f6bfb7c..29ead10 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -4,7 +4,9 @@ import presetIcons from '@unocss/preset-icons'
 
 export default defineConfig({
     presets: [
-        presetIcons({ /* options */}),
+        presetIcons({
+            /* options */
+        })
         // ...other presets
-    ],
+    ]
 })
diff --git a/views/Projects.vue b/views/Projects.vue
index 82acb8b..bafc766 100644
--- a/views/Projects.vue
+++ b/views/Projects.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import {useQuery} from "@tanstack/vue-query";
-import {getProjects} from "@/api";
+import {useQuery} from '@tanstack/vue-query'
+import {getProjects} from '@/api'
 
 const emit = defineEmits(['project-choose'])
 
diff --git a/views/Settings.vue b/views/Settings.vue
index c10777f..b27222b 100644
--- a/views/Settings.vue
+++ b/views/Settings.vue
@@ -62,7 +62,10 @@ const updateStatus = (value: string | null, key: 'beginning' | 'running' | 'fini
                     <a href="https://app.invoicing.co/?#/settings/task_settings">statuses</a>
                     for task
                 </h3>
-                <template v-for="(value, key) in statuses" style="width: 100%; display: flex; align-items: start; flex-direction: column; gap: 0.5em">
+                <template
+                    v-for="(value, key) in statuses"
+                    style="width: 100%; display: flex; align-items: start; flex-direction: column; gap: 0.5em"
+                >
                     <label :for="value || key">{{ capitalizeFirstLetter(key) }} status</label>
                     <template v-if="isError">
                         <select :id="value || key" disabled required>
diff --git a/views/Tasks.vue b/views/Tasks.vue
index 86d81ec..8ea1b63 100644
--- a/views/Tasks.vue
+++ b/views/Tasks.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import {useMutation, useQuery, useQueryClient} from "@tanstack/vue-query";
-import {getTasks, postTask} from "@/api";
-import {computed, Ref, ref, watch} from "vue";
-import Task from "@/components/Task.vue";
+import {useMutation, useQuery, useQueryClient} from '@tanstack/vue-query'
+import {getTasks, postTask} from '@/api'
+import {computed, Ref, ref, watch} from 'vue'
+import Task from '@/components/Task.vue'
 
 const props = defineProps<{
     project: unknown | null
@@ -23,14 +23,20 @@ const useDebounce = (value: Ref<string>, delay: number): Ref<string> => {
     return debounceValue
 }
 const filterDebounced = useDebounce(filter, 1000)
-const {data: tasks, isPending, isError, error} = useQuery({
+const {
+    data: tasks,
+    isPending,
+    isError,
+    error
+} = useQuery({
     queryKey: ['tasks', projectId, filterDebounced],
-    queryFn: () => getTasks({projectId: projectId.value, filter: filter.value}),
+    queryFn: () => getTasks({projectId: projectId.value, filter: filter.value})
 })
 const inputRef = ref()
 window.onkeydown = (e) => {
-    if (e.ctrlKey && e.keyCode == 75) { // Ctrl+k
-        event.preventDefault();
+    if (e.ctrlKey && e.keyCode == 75) {
+        // Ctrl+k
+        event.preventDefault()
         if (inputRef.value) {
             inputRef.value.focus()
         }
@@ -39,39 +45,52 @@ window.onkeydown = (e) => {
 
 const queryClient = useQueryClient()
 const {mutate: createTask} = useMutation({
-    mutationFn: async ({taskDescription}: { taskDescription: string }) => postTask({
-        projectId: props.project?.id ?? null,
-        description: taskDescription
-    }),
+    mutationFn: async ({taskDescription}: {taskDescription: string}) =>
+        postTask({
+            projectId: props.project?.id ?? null,
+            description: taskDescription
+        }),
     onSettled() {
         filter.value = ''
         queryClient.invalidateQueries({queryKey: ['tasks', props.project?.id ?? null, '']})
-    },
+    }
 })
-
 </script>
 
 <template>
     <div>
         <div style="position: relative">
-            <input ref="inputRef" v-model.trim="filter" placeholder="Find or add a task"
-                   style="width: 100%; font-size: 1.2em; padding-right: 2.8em"
-                   type="text"
-                   @keydown.enter="createTask({ taskDescription: filter})"/>
+            <input
+                ref="inputRef"
+                v-model.trim="filter"
+                placeholder="Find or add a task"
+                style="width: 100%; font-size: 1.2em; padding-right: 2.8em"
+                type="text"
+                @keydown.enter="createTask({taskDescription: filter})"
+            />
             <button
-                style="font-weight: bold; position: absolute; background: #747bff22; color: #747bff; font-size: large; padding: 0.25em 0.5em; right: 0.2em; top:0.2em; line-height: 1em"
-                @click="createTask({taskDescription: filter})">
+                style="
+                    font-weight: bold;
+                    position: absolute;
+                    background: #747bff22;
+                    color: #747bff;
+                    font-size: large;
+                    padding: 0.25em 0.5em;
+                    right: 0.2em;
+                    top: 0.2em;
+                    line-height: 1em;
+                "
+                @click="createTask({taskDescription: filter})"
+            >
                 +
             </button>
         </div>
         <h3 style="display: flex; justify-content: center">
             <Transition mode="out-in">
                 <div v-if="isPending" class="span-skeleton" style="width: 8em"></div>
-                <div v-else-if="isError"> Error</div>
+                <div v-else-if="isError">Error</div>
                 <span v-else-if="!filterDebounced">Recent tasks</span>
-                <div v-else-if="!isPending">Found
-                    {{ tasks.meta.pagination.total }} tasks
-                </div>
+                <div v-else-if="!isPending">Found {{ tasks.meta.pagination.total }} tasks</div>
             </Transition>
         </h3>
         <Transition mode="out-in">
@@ -80,10 +99,10 @@ const {mutate: createTask} = useMutation({
                     <div class="task-text-skeleton"></div>
                 </div>
             </div>
-            <div v-else-if="isError"> {{ error.message }}</div>
+            <div v-else-if="isError">{{ error.message }}</div>
             <div v-else class="tasks">
                 <TransitionGroup name="list">
-                    <Task v-for="task in tasks?.data" :key="task.id" :project :task="task"/>
+                    <Task v-for="task in tasks?.data" :key="task.id" :project :task="task" />
                 </TransitionGroup>
             </div>
         </Transition>