Merge branch 'main' into main

.gitignore

@@ -13,3 +13,4 @@ node_modules
 dist/*
 dist
 src-tauri/license.html
+LICENSES_3RD_PARTY.txt

components/LanguageSelector.vue

@@ -1,3 +1,23 @@
+<!-- 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/>. -->
+
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
   <ComboboxRoot v-model="selectedLocale" class="relative">

components/PinnedBar.vue

@@ -0,0 +1,65 @@
+<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev>, PwshLab -->
+<!-- -->
+<!-- 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>
+  <nav
+    class="flex h-screen flex-col items-center justify-between overflow-x-hidden overflow-y-auto px-8 pb-6 pt-4 my-2"
+  >
+    <section id="tabitem-list" class="flex flex-col items-center gap-3">
+      <PinnedItem
+        v-for="board in pins"
+        id="tabitem"
+        :key="board.id"
+        :board="board"
+      />
+    </section>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import emitter from "@/utils/emitter";
+import type { Board } from "@/types/kanban-types";
+import PinnedItem from "./PinnedItem.vue";
+
+const store = useTauriStore().store;
+const pins: Ref<Array<Board>> = ref([]);
+const boards: Ref<Array<Board>> = ref([]);
+
+onMounted(async () => {
+  boards.value = (await store.get("boards")) || [];
+  pins.value = (await store.get("pins")) || [];
+
+  emitter.on("toggleBoardPin", onPinToggle);
+  emitter.on("boardDeletion", onKanbanDelete);
+});
+
+const onPinToggle = async (board: Board) => {
+  const boardIsPinned = findObjectById(pins.value, board.id) ? true : false;
+  if (boardIsPinned) pins.value = pins.value.filter((x) => x.id !== board.id);
+  else pins.value = [board, ...pins.value];
+
+  store.set("pins", pins.value);
+};
+
+const onKanbanDelete = async (board: Board) => {
+  pins.value = pins.value.filter((x) => x.id !== board.id);
+  store.set("pins", pins.value);
+};
+</script>

components/PinnedItem.vue

@@ -0,0 +1,77 @@
+<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev>, PwshLab -->
+<!-- -->
+<!-- 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>
+  <Tooltip v-if="isActivePin">
+    <template #trigger>
+      <nuxt-link :to="'/kanban/' + props.board.id">
+        <div class="bg-elevation-3 transition-button rounded-md p-2">
+          <PhArticle class="size-7" />
+        </div>
+      </nuxt-link>
+    </template>
+
+    <template #content>
+      {{ props.board.title }}
+    </template>
+  </Tooltip>
+
+  <Tooltip v-else>
+    <template #trigger>
+      <nuxt-link :to="'/kanban/' + props.board.id">
+        <div class="bg-elevation-2-hover transition-button rounded-md p-2">
+          <PhArticle class="size-7" />
+        </div>
+      </nuxt-link>
+    </template>
+
+    <template #content>
+      {{ props.board.title }}
+    </template>
+  </Tooltip>
+</template>
+
+<script setup lang="ts">
+import emitter from "@/utils/emitter";
+import { PhArticle } from "@phosphor-icons/vue";
+import type { Board } from "@/types/kanban-types";
+
+const props = defineProps<{
+  board: Board;
+}>();
+
+const isActivePin = ref(false);
+const router = useRouter();
+
+onMounted(async () => {
+  emitter.on("openKanbanPage", onNavigation);
+  emitter.on("closeKanbanPage", onNavigation);
+
+  onNavigation();
+});
+
+const onNavigation = () => {
+  isActivePin.value = false;
+
+  if (router.currentRoute.value.path.includes("/kanban/" + props.board.id)) {
+    isActivePin.value = true;
+  }
+};
+</script>

components/Sidebar.vue

@@ -1,4 +1,4 @@
-<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev> -->
+<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev>, PwshLab -->
 <!-- -->
 <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
 <!--
@@ -42,7 +42,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
         />
       </div>
 
-      <Tooltip v-if="showAddButton">
+      <Tooltip>
         <template #trigger>
           <button
             class="bg-elevation-2-hover transition-button rounded-md p-2"
@@ -55,7 +55,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
         <template #content> Home </template>
       </Tooltip>
 
-      <Tooltip v-else>
+      <Tooltip v-if="!showAddButton">
         <template #trigger>
           <button
             class="bg-elevation-2-hover transition-button rounded-md p-2"
@@ -82,6 +82,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
       </Tooltip>
     </section>
 
+    <PinnedBar />
+
     <section id="icons-bottom" class="flex flex-col items-center gap-4">
       <Tooltip>
         <template #trigger>
@@ -133,6 +135,8 @@ import {
   PhQuestion,
 } from "@phosphor-icons/vue";
 
+const router = useRouter();
+
 const helpModalVisible = ref(false);
 const newBoardModalVisible = ref(false);
 
@@ -151,11 +155,11 @@ onMounted(async () => {
   });
 
   emitter.on("openKanbanPage", () => {
-    showAddButton.value = false;
+    updateAddButton();
   });
 
   emitter.on("closeKanbanPage", () => {
-    showAddButton.value = true;
+    updateAddButton();
   });
 
   emitter.on("showSidebarBackArrow", () => {
@@ -185,6 +189,13 @@ const keyDownListener = (e: KeyboardEvent) => {
     return;
   }
 };
+
+const updateAddButton = () => {
+  const currentPath = router.currentRoute.value.path;
+
+  if (currentPath.endsWith("/")) showAddButton.value = true;
+  else showAddButton.value = false;
+};
 </script>
 
 <style scoped>

pages/index.vue

@@ -1,4 +1,4 @@
-<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev>, gitoak -->
+<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev>, gitoak, PwshLab -->
 <!-- -->
 <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
 <!--
@@ -412,8 +412,10 @@ const deleteBoardModal = (index: number | undefined) => {
 const deleteBoard = async (boardIndex: number | undefined) => {
   if (boardIndex === -1 || boardIndex == undefined) return;
 
-  boards.value.splice(boardIndex, 1);
+  const deletedBoard = boards.value.splice(boardIndex, 1);
   store.set("boards", boards.value);
+
+  deletedBoard.forEach((board) => emitter.emit("boardDeletion", board));
 };
 
 const sortBoardsAlphabetically = () => {

pages/kanban/[id].vue

@@ -1,4 +1,4 @@
-<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev> -->
+<!-- SPDX-FileCopyrightText: Copyright (c) 2022-2024 trobonox <hello@trobo.dev>, PwshLab -->
 <!-- -->
 <!-- SPDX-License-Identifier: GPL-3.0-or-later -->
 <!--
@@ -175,6 +175,13 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. -->
                 >
                   Export Board
                 </DropdownMenuItem>
+                <DropdownMenuItem
+                  class="bg-elevation-2-hover w-full cursor-pointer rounded-md px-4 py-1.5 pr-6 text-left"
+                  @click="toggleBoardPin"
+                >
+                  <span v-if="!isPinned">Pin Board</span>
+                  <span v-else>Unpin Board</span>
+                </DropdownMenuItem>
                 <DropdownMenuItem
                   class="bg-elevation-2-hover w-full cursor-pointer rounded-md px-4 py-1.5 pr-6 text-left"
                   @click="deleteBoardModal(getBoardIndex())"
@@ -281,6 +288,7 @@ const router = useRouter();
 const boards: Ref<Array<Board>> = ref([]);
 const board: Ref<Board> = ref({ columns: [], id: "123", title: "" });
 const draggingEnabled = ref(true);
+const isPinned = ref(false);
 
 const searchQuery = ref("");
 
@@ -356,6 +364,9 @@ onMounted(async () => {
   columnCardCountEnabled.value =
     (await store.get("displayColumnCardCountEnabled")) || false;
 
+  const pinned = ((await store.get("pins")) as Board[]) || [];
+  isPinned.value = findObjectById(pinned, board.value.id) ? true : false;
+
   document.addEventListener("keydown", keyDownListener);
 
   emitter.emit("openKanbanPage");
@@ -896,6 +907,11 @@ const getBoardIndex = () => {
   return boards.value.indexOf(board.value);
 };
 
+const toggleBoardPin = () => {
+  emitter.emit("toggleBoardPin", board.value);
+  isPinned.value = !isPinned.value;
+};
+
 /**
  * Board background utilities
  */