Merge pull request #592 from trobonox/main (Release v0.7.1)

Release v0.7.1

.github/workflows/devskim.yml

@@ -0,0 +1,33 @@
+# SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <[email protected]>
+#
+# SPDX-License-Identifier: Apache-2.0
+
+name: DevSkim
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  schedule:
+    - cron: '33 12 * * 4'
+
+jobs:
+  lint:
+    name: DevSkim
+    runs-on: ubuntu-20.04
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Run DevSkim scanner
+        uses: microsoft/DevSkim-Action@v1
+
+      - name: Upload DevSkim scan results to GitHub Security tab
+        uses: github/codeql-action/upload-sarif@v3
+        with:
+          sarif_file: devskim-results.sarif

.github/workflows/release.yml

@@ -61,7 +61,7 @@ jobs:
           yarn config delete proxy
           yarn config delete https-proxy
           yarn config delete registry
-          yarn install --network-timeout 1000000
+          yarn install --network-timeout 1000000 --frozen-lockfile
 
       - name: Build frontend
         run: yarn generate
@@ -88,7 +88,7 @@ jobs:
 
       runs-on: ubuntu-20.04
       steps:
-        - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4
+        - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
         - uses: actions/setup-node@v4
           with:
             node-version: 18

.github/workflows/test_frontend.yml

@@ -19,7 +19,7 @@ jobs:
 
     runs-on: ubuntu-20.04
     steps:
-    - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4
+    - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
     - name: setup node
       uses: actions/setup-node@v4
       with:

.github/workflows/test_tauri.yml

@@ -22,7 +22,7 @@ jobs:
 
     runs-on: ${{ matrix.platform }}
     steps:
-    - uses: actions/checkout@a5ac7e51b41094c92402da3b24376905380afc29 # v4
+    - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
     - name: setup node
       uses: actions/setup-node@v4
       with:

README.md

@@ -8,14 +8,12 @@ SPDX-License-Identifier: Apache-2.0
     <img src="https://github.com/trobonox/kanri/assets/57040351/39aae8cf-f9bc-4e9e-821b-78c61a0fcb1d" alt="Kanri banner" />
     <b> Kanban boards done right. Made with simplicity and user experience in mind, Kanri helps you create Kanban boards easily, right from your desktop. No internet connection or account needed! </b>
     <br> <br>
+    <img src="https://img.shields.io/github/v/release/trobonox/kanri" alt="Release Version Badge" />
     <img src="https://github.com/trobonox/kanri/actions/workflows/release.yml/badge.svg" alt="GitHub Build Status" />
     <br>
     <img src="https://img.shields.io/github/license/trobonox/kanri" alt="Repo license" />
     <img src="https://api.reuse.software/badge/github.com/trobonox/kanri" alt="Reuse status" />
     <br>
-    <img src="https://img.shields.io/discord/965559337726656552" alt="Discord Status" />
-    <img src="https://img.shields.io/github/v/release/trobonox/kanri" alt="Release Version Badge" />
-    <br>
     <div align="center">
         <a href="https://kanriapp.com/download">
             <img width="180" src="https://github.com/trobonox/kanri/assets/57040351/f13c0cd7-6f6e-44e7-95ce-74282acdae51"/> 

SECURITY.md

@@ -11,8 +11,8 @@ Since this app is constantly changing and previous versions are not receiving an
 
 | Version | Supported          |
 | ------- | ------------------ |
-| 0.6.1   |   :white_check_mark:              |
-| < 0.6.1   | :x:                |
+| 0.7.0   |   :white_check_mark:              |
+| < 0.7.0   | :x:                |
 
 ## Reporting a Vulnerability
 If you find any vulnerability, please write an email at [email protected] with a short description, reproduction steps and possible attacks.

components/kanban/Card.vue

@@ -70,7 +70,9 @@ limitations under the License.
             class="-ml-0.5 -mt-0.5 mb-1 flex flex-row flex-wrap items-center gap-1"
             @click="$emit('openEditCardModal', index, card)"
         >
-            <div v-for="tag in cardTags" :key="tag.id" :style="tag.style" class="text-normal bg-elevation-3 rounded-xl px-2 py-0.5 text-xs">{{ tag.text }}</div>
+            <div v-for="tag in cardTags" :key="tag.id">
+                <KanbanTagDisplay :tag="tag"/>
+            </div>
         </div>
 
         <div

components/kanban/Column.vue

@@ -315,7 +315,12 @@ const filteredCards = computed(() => {
     }
 
     return cards.value.filter((card) => {
-        return fuzzyMatch(props.cardSearchQuery ?? "", card.name);
+        const searchQuery = props.cardSearchQuery ?? "";
+        const cardName = card.name;
+        const cardTags = card.tags || [];
+
+        return fuzzyMatch(searchQuery, cardName) ||
+            cardTags.some(tag => tag.text.includes(searchQuery));
     });
 })
 
@@ -400,13 +405,13 @@ const addCard = () => {
     }
     else {
         cards.value[cards.value.length] = { id: generateUniqueID(), name: newCardName.value };
+        scrollCardIntoView();
     }
 
     newCardName.value = "";
     cardAddMode.value = false;
     cardAddModeAddToTopOfColumn.value = false;
     updateStorage();
-    scrollCardIntoView();
 };
 
 const scrollCardIntoView = () => {

components/kanban/KanbanDescriptionEditor.vue

@@ -116,6 +116,7 @@ export default {
     height: 148px;
     overflow: auto;
     padding: 4px;
+    resize: vertical;
 }
 
  .tiptap ul, .tiptap ol {
@@ -160,5 +161,4 @@ export default {
 .tiptap ul {
     list-style-type: disc;
 }
-
 </style>

components/kanban/TagDisplay.vue

@@ -0,0 +1,41 @@
+<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev> -->
+<!-- -->
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+<!--
+Kanri is an offline Kanban board app made using Tauri and Nuxt.
+Copyright (C) 2022-2024 trobonox <[email protected]>
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
+
+<template>
+    <div
+        class="bg-elevation-3 rounded-xl px-2 py-0.5 text-xs"
+        :class="getTagTextColor"
+        :style="props.tag.style"
+    >
+        {{ props.tag.text }}
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Tag } from '~/types/kanban-types';
+
+const props = defineProps<{
+    tag: Tag;
+}>();
+
+const getTagTextColor = computed(() => {
+    return getContrast(props.tag.color);
+});
+</script>

components/kanban/TagEdit.vue

@@ -46,7 +46,12 @@ const props = defineProps<{
 
 const tagColor = ref(props.tag.color);
 
+onMounted(() => {
+    console.log(props.tag.color);
+})
+
 const setTagColor = () => {
+    console.log(tagColor.value);
     emit("setTagColor", props.tag.id, tagColor.value);
 }
 </script>

components/modal/Changelog.vue

@@ -44,22 +44,19 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
                 </p>
                 <p>
                     <br>
-                    <spam class="text-xl font-bold">New features:</spam>
+                    <span class="text-xl font-bold">Changes:</span>
                     <ul>
                         <li>
-                            New logo
+                            Improved text contrast for card tags
                         </li>
                         <li>
-                            Card tags
+                            Import tags and due date from Trello® boards
                         </li>
                         <li>
-                            Due dates on cards (without reminders for now)
+                            Search bar now also includes card tags in search
                         </li>
                         <li>
-                            Search bar for cards
-                        </li>
-                        <li>
-                            And much more... (full changelog on GitHub or the Discord announcement)
+                            Remove scrolling to the bottom of a column when adding cards at the top
                         </li>
                     </ul>
                 </p>

components/modal/EditCard.vue

@@ -177,22 +177,22 @@ limitations under the License.
                             <h1
                                 v-if="!titleEditing"
                                 :v-model="title"
-                                class="text-no-overflow pointer-events-auto min-w-[64px] pr-5 text-2xl font-bold"
+                                class="text-no-overflow pointer-events-auto min-w-[64px] max-w-[475px] pr-5 text-2xl font-bold"
                                 @click="enableTitleEditing()"
                             >
                                 {{ title }}
                             </h1>
-                            <input
+                            <textarea
                                 v-if="titleEditing"
-                                ref="titleInput"
+                                ref="titleTextArea"
                                 v-model="title"
                                 v-focus
-                                class="bg-elevation-2 text-normal border-accent-focus pointer-events-auto text-xl focus:border-2 focus:border-dotted focus:outline-none"
+                                class="bg-elevation-2 text-normal border-accent-focus pointer-events-auto w-[450px] text-xl focus:border-2 focus:border-dotted focus:outline-none"
                                 maxlength="1000"
                                 type="text"
                                 @blur="updateTitle"
                                 @keypress.enter="updateTitle"
-                            >
+                            />
                         </div>
                         <XMarkIcon
                             class="text-accent-hover size-6 shrink-0 cursor-pointer"
@@ -256,6 +256,8 @@ limitations under the License.
                             v-model="description"
                             @editorBlurred="updateDescription"
                         />
+                    </div>
+                    <div>
                         <div class="mb-1 mt-4 flex flex-row items-center gap-2">
                             <h2
                                 class="text-lg font-semibold"
@@ -270,7 +272,7 @@ limitations under the License.
                         <ProgressRoot
                             v-if="tasks"
                             v-model="getTaskPercentage"
-                            class="bg-elevation-2 relative mb-4 h-2 w-full overflow-hidden rounded-full"
+                            class="bg-elevation-2 relative mb-4 h-2 w-[96%] overflow-hidden rounded-full"
                             style="transform: translateZ(0)"
                         >
                             <ProgressIndicator
@@ -283,7 +285,7 @@ limitations under the License.
                         >
                             <div
                                 v-if="tasks && tasks.length !== 0"
-                                class="flex max-h-[148px] w-full flex-col gap-4 overflow-auto pl-1"
+                                class="flex max-h-[148px] w-full flex-col gap-4 overflow-auto pl-1 pr-6"
                             >
                                 <Container
                                     drag-class="cursor-grabbing"
@@ -362,7 +364,7 @@ limitations under the License.
                                 ref="newTaskInput"
                                 v-model="newTaskName"
                                 v-focus
-                                class="bg-elevation-2 text-normal border-accent-focus pointer-events-auto rounded-md p-1 text-base focus:border-2 focus:border-dotted focus:outline-none"
+                                class="bg-elevation-2 text-normal border-accent-focus pointer-events-auto w-[96%] rounded-md p-1 text-base focus:border-2 focus:border-dotted focus:outline-none"
                                 maxlength="1000"
                                 placeholder="Enter a task name..."
                                 type="text"
@@ -384,7 +386,7 @@ limitations under the License.
                             </div>
                             <button
                                 v-if="!taskAddMode"
-                                class="bg-elevation-1 bg-elevation-2-hover mr-8 flex h-min w-full cursor-pointer flex-row items-center gap-2 rounded-md py-1 pl-1 pr-2"
+                                class="bg-elevation-1 bg-elevation-2-hover mr-8 mt-1 flex h-min w-[96%] cursor-pointer flex-row items-center gap-2 rounded-md py-1 pl-0.5 pr-2"
                                 @click="enableTaskAddMode"
                             >
                                 <PlusIcon class="text-accent size-6" />
@@ -448,7 +450,7 @@ const emit = defineEmits<{
 
 const columnID = ref("");
 const cardIndex = ref(0);
-const title = ref("");
+const { textarea: titleTextArea, input: title } = useTextareaAutosize();
 const description = ref("");
 const tasks: Ref<Array<{finished: boolean; id?: string, name: string }>> = ref([]);
 const selectedColor = ref("");
@@ -464,7 +466,6 @@ const customColor = ref("#ffffff");
 const showCustomColorPopup = ref(false);
 
 const titleEditing = ref(false);
-const titleInput: Ref<HTMLInputElement | null> = ref(null);
 
 const newTaskName = ref("");
 const taskAddMode = ref(false);
@@ -765,6 +766,15 @@ watch(props, (newVal) => {
 </style>
 
 <style scoped>
+textarea {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+textarea::-webkit-scrollbar {
+    display: none;
+}
+
 input[type="color"] {
     -webkit-appearance: none;
     appearance: none;

package.json

@@ -1,7 +1,7 @@
 {
     "name": "kanri",
     "private": true,
-    "version": "0.7.0",
+    "version": "0.7.1",
     "description": "Offline-first Kanban board desktop app",
     "author": "trobonox <[email protected]>",
     "license": "GPL-3.0",
@@ -21,10 +21,10 @@
         "@nuxt/eslint-config": "0.3.13",
         "@nuxtjs/tailwindcss": "6.12.0",
         "@tauri-apps/cli": "1.5.14",
-        "@types/node": "^18.11.18",
+        "@types/node": "^20.14.7",
         "@vueuse/core": "^10.2.1",
         "@vueuse/nuxt": "^10.2.1",
-        "eslint": "9.4.0",
+        "eslint": "9.5.0",
         "eslint-plugin-perfectionist": "^2.2.0",
         "eslint-plugin-tailwindcss": "^3.8.0",
         "nuxt": "^3.7.1",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@eslint/eslintrc": "^3.1.0",
-        "@heroicons/vue": "2.1.3",
+        "@heroicons/vue": "2.1.4",
         "@paralleldrive/cuid2": "^2.1.0",
         "@phosphor-icons/vue": "^2.1.6",
         "@pinia/nuxt": "0.5.1",
@@ -59,7 +59,7 @@
     },
     "resolutions": {
         "terser": "5.31.1",
-        "undici": "6.18.2",
+        "undici": "6.19.2",
         "json5": "2.2.3",
         "semver": "7.6.2"
     }