├── .github
    └── workflows
    │   └── release.yml
├── .gitignore
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    └── index.html
├── rollup.config.js
├── src
    ├── App.svelte
    ├── components
    │   ├── BoardLabel.svelte
    │   ├── ConfirmModal.svelte
    │   ├── CreateBoard.svelte
    │   ├── EditableTitle.svelte
    │   ├── SearchPalette.svelte
    │   ├── base
    │   │   ├── Editor.svelte
    │   │   ├── Modal.svelte
    │   │   └── Popover.svelte
    │   ├── card
    │   │   ├── CardDue.svelte
    │   │   ├── CardLabel.svelte
    │   │   └── CardPriority.svelte
    │   ├── column
    │   │   ├── InlineEditor.svelte
    │   │   ├── Layout.svelte
    │   │   ├── List.svelte
    │   │   ├── ListCard.svelte
    │   │   └── ListMenu.svelte
    │   └── zen
    │   │   └── Multiselect.svelte
    ├── datastore
    │   ├── db.ts
    │   ├── models
    │   │   ├── Board.ts
    │   │   ├── Card.ts
    │   │   ├── List.ts
    │   │   ├── Settings.ts
    │   │   └── index.ts
    │   └── stores.ts
    ├── main.ts
    ├── nimbo.ts
    ├── routes
    │   ├── Board.svelte
    │   ├── Card.svelte
    │   ├── Home.svelte
    │   ├── Zen.svelte
    │   └── index.ts
    ├── style
    │   └── TailwindCSS.svelte
    ├── types.ts
    └── util
    │   └── index.ts
├── tailwind.config.js
└── tsconfig.json


/.github/workflows/release.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | 
 3 | on:
 4 |   push:
 5 |     tags:
 6 |       - v**
 7 | 
 8 | jobs:
 9 |   build:
10 |     name: Create release
11 |     runs-on: ubuntu-latest
12 | 
13 |     steps:
14 |       - name: Check out repo
15 |         uses: actions/checkout@v2
16 |       - name: Install NodeJS
17 |         uses: actions/setup-node@v1
18 |         with:
19 |           node-version: '12.x'
20 |       - name: Build release
21 |         run: |
22 |           npm install
23 |           npm run build-release
24 |       - name: Get version
25 |         id: nimbo
26 |         run: |
27 |           echo ::set-output name=VERSION::$(git describe --tags)
28 |       - name: Create release
29 |         id: create_release
30 |         uses: actions/create-release@v1
31 |         env:
32 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
33 |         with:
34 |           tag_name: ${{ steps.nimbo.outputs.VERSION }}
35 |           release_name: nimbo ${{ steps.nimbo.outputs.VERSION }}
36 |           draft: false
37 |           prerelease: false
38 |       - name: Upload release
39 |         id: upload-release-asset
40 |         uses: actions/upload-release-asset@v1
41 |         env:
42 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
43 |         with:
44 |           upload_url: ${{ steps.create_release.outputs.upload_url }}
45 |           asset_path: ./public/nimbo.zip
46 |           asset_name: nimbo.zip
47 |           asset_content_type: application/zip


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | public/assets/
3 | 
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 sereneblue
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nimbo
 2 | 
 3 | ![nimbo version](https://img.shields.io/badge/version-1.0.6-brightgreen.svg)
 4 | ![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)
 5 | 
 6 | The nimble Kanban board.
 7 | 
 8 | ## Installation
 9 | 
10 | You can try nimbo [here](https://sereneblue.github.io/nimbo) or grab a local copy from the [releases](https://github.com/sereneblue/nimbo/releases) page.
11 | 
12 | ![screenshot](https://user-images.githubusercontent.com/14242625/103376268-2fb1a880-4aaa-11eb-8964-8da53a387e20.png)
13 | 
14 | ## Features
15 | 
16 | - Works offline, data stored in IndexedDB
17 | - Search for board and cards instantly
18 | - Keyboard shortcuts
19 | - Light/dark theme
20 | - Import/export data between browsers
21 | - Import boards from Trello
22 | - Archive and star boards
23 | - Card checklist, description, due date, labels, and priority 
24 | - Markdown support for card descriptions
25 | - Changes are synced between tabs
26 | - Zen mode with time tracking
27 | 
28 | See more [here](https://sereneblue.github.io/nimbo/about).


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nimbo",
 3 |   "version": "1.0.6",
 4 |   "scripts": {
 5 |     "build": "rollup -c --environment NODE_ENV:production",
 6 |     "build-release": "npm run build && cd public && rm assets/*.map && zip -r nimbo.zip .",
 7 |     "dev": "rollup -c -w",
 8 |     "start": "sirv public --single",
 9 |     "validate": "svelte-check"
10 |   },
11 |   "devDependencies": {
12 |     "@rollup/plugin-commonjs": "^14.0.0",
13 |     "@rollup/plugin-node-resolve": "^8.0.0",
14 |     "@rollup/plugin-replace": "^2.3.4",
15 |     "@rollup/plugin-typescript": "^4.0.0",
16 |     "@tailwindcss/custom-forms": "^0.2.1",
17 |     "@tsconfig/svelte": "^1.0.0",
18 |     "autoprefixer": "^9.8.6",
19 |     "cssnano": "^4.1.10",
20 |     "postcss": "^7.0.35",
21 |     "postcss-load-config": "^2.1.2",
22 |     "rollup": "^2.35.1",
23 |     "rollup-plugin-css-only": "^2.1.0",
24 |     "rollup-plugin-livereload": "^2.0.0",
25 |     "rollup-plugin-svelte": "^6.1.1",
26 |     "rollup-plugin-terser": "^7.0.0",
27 |     "svelte": "^3.31.0",
28 |     "svelte-check": "^1.1.23",
29 |     "svelte-preprocess": "^4.6.1",
30 |     "tailwindcss": "^1.9.6",
31 |     "tailwindcss-truncate-multiline": "^1.0.3",
32 |     "tslib": "^2.0.3",
33 |     "typescript": "^3.9.3"
34 |   },
35 |   "dependencies": {
36 |     "broadcast-channel": "^3.3.0",
37 |     "dexie": "^3.0.3",
38 |     "dexie-export-import": "^1.0.0",
39 |     "dompurify": "^2.2.6",
40 |     "file-saver": "^2.0.5",
41 |     "flatpickr": "^4.6.8",
42 |     "fuzzysort": "^1.1.4",
43 |     "marked": "^1.2.7",
44 |     "nanoid": "^3.1.20",
45 |     "parse-duration": "^0.4.4",
46 |     "sirv-cli": "^1.0.10",
47 |     "sortablejs": "^1.12.0",
48 |     "svelte-spa-router": "^3.1.0"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
 1 | const prod = !process.env.ROLLUP_WATCH;
 2 | 
 3 | module.exports = {
 4 |   plugins: [
 5 |     require('tailwindcss'),
 6 |     ...(prod
 7 |       ? [
 8 |           require('autoprefixer'),
 9 |           require('cssnano')({
10 |             preset: ['default', { discardComments: { removeAll: true } }],
11 |           }),
12 |         ]
13 |       : []),
14 |   ],
15 | };


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset='utf-8'>
 5 | 	<meta name='viewport' content='width=device-width,initial-scale=1'>
 6 | 
 7 | 	<title>nimbo</title>
 8 | 
 9 | 	<link rel="stylesheet" href="./assets/extra.css" />
10 | 	<link rel='stylesheet' href='./assets/bundle.css'>
11 | 
12 | 	<script defer src='./assets/bundle.js'></script>
13 | </head>
14 | 
15 | <body style="margin: 0;">
16 | </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import svelte from 'rollup-plugin-svelte';
 2 | import replace from '@rollup/plugin-replace';
 3 | import resolve from '@rollup/plugin-node-resolve';
 4 | import commonjs from '@rollup/plugin-commonjs';
 5 | import css from "rollup-plugin-css-only";
 6 | import livereload from 'rollup-plugin-livereload';
 7 | import { terser } from 'rollup-plugin-terser';
 8 | import sveltePreprocess from 'svelte-preprocess';
 9 | import typescript from '@rollup/plugin-typescript';
10 | 
11 | const production = !process.env.ROLLUP_WATCH;
12 | 
13 | function serve() {
14 |   let server;
15 | 
16 |   function toExit() {
17 |     if (server) server.kill(0);
18 |   }
19 | 
20 |   return {
21 |     writeBundle() {
22 |       if (server) return;
23 |       server = require('child_process').spawn(
24 |         'npm',
25 |         ['run', 'start', '--', '--dev'],
26 |         {
27 |           stdio: ['ignore', 'inherit', 'inherit'],
28 |           shell: true,
29 |         }
30 |       );
31 | 
32 |       process.on('SIGTERM', toExit);
33 |       process.on('exit', toExit);
34 |     },
35 |   };
36 | }
37 | 
38 | export default {
39 |   input: 'src/main.ts',
40 |   output: {
41 |     sourcemap: true,
42 |     format: 'iife',
43 |     name: 'app',
44 |     file: 'public/assets/bundle.js',
45 |   },
46 |   plugins: [
47 |     replace({
48 |       'process.env.NODE_ENV': production ? JSON.stringify( 'production' ) : JSON.stringify( 'development' )
49 |     }),
50 |     css({ output: "public/assets/extra.css" }),
51 |     svelte({
52 |       // enable run-time checks when not in production
53 |       dev: !production,
54 |       // we'll extract any component CSS out into
55 |       // a separate file - better for performance
56 |       css: (css) => {
57 |         css.write('bundle.css');
58 |       },
59 |       preprocess: sveltePreprocess({ postcss: true }),
60 |     }),
61 | 
62 |     // If you have external dependencies installed from
63 |     // npm, you'll most likely need these plugins. In
64 |     // some cases you'll need additional configuration -
65 |     // consult the documentation for details:
66 |     // https://github.com/rollup/plugins/tree/master/packages/commonjs
67 |     resolve({
68 |       browser: true,
69 |       dedupe: ['svelte'],
70 |     }),
71 |     commonjs(),
72 |     typescript({ sourceMap: !production }),
73 | 
74 |     // In dev mode, call `npm run start` once
75 |     // the bundle has been generated
76 |     !production && serve(),
77 | 
78 |     // Watch the `public` directory and refresh the
79 |     // browser on changes when not in production
80 |     !production && livereload('public'),
81 | 
82 |     // If we're building for production (npm run build
83 |     // instead of npm run dev), minify
84 |     production && terser(),
85 |   ],
86 |   watch: {
87 |     clearScreen: false,
88 |   },
89 | };


--------------------------------------------------------------------------------
/src/App.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { setContext } from 'svelte';
 3 |   import Router from 'svelte-spa-router';
 4 |   import { BroadcastChannel } from 'broadcast-channel';
 5 | 
 6 |   import TailwindCSS from "./style/TailwindCSS.svelte"
 7 |   import { Board, Card, Home, Zen } from "./routes";
 8 |   import { nimboStore } from "./datastore/stores";
 9 | 
10 |   const channel: BroadcastChannel<any> = new BroadcastChannel('nimbo');
11 | 
12 |   let timeout: number = 0; 
13 | 
14 |   $nimboStore.setChannel(channel);
15 | 
16 |   channel.onmessage = async (msg: any): Promise<void> => {
17 |     clearTimeout(timeout);
18 | 
19 |     timeout = setTimeout(async () => {
20 |       await $nimboStore.refresh();
21 |       $nimboStore = $nimboStore;
22 |     }, 250)
23 |   }
24 | 
25 |   let loading: Promise<boolean> = $nimboStore.init();
26 | 
27 |   setContext('nimbo', nimboStore);
28 | 
29 |   const routes = {
30 |     '/c/:cardId': Card,
31 |     '/b/:boardId': Board,
32 |     '/zen': Zen,
33 |     '/': Home
34 |   }
35 | </script>
36 | 
37 | <TailwindCSS />
38 | 
39 | {#await loading then done}
40 |   <div class:dark={$nimboStore.settings.theme === "dark"}>
41 |     <Router {routes}/>
42 |   </div>
43 | {/await}
44 | 


--------------------------------------------------------------------------------
/src/components/BoardLabel.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   import Popover from './base/Popover.svelte';
 4 |   import type nimbo from '../nimbo';
 5 |   import { LABEL_COLOR } from '../types';
 6 |   import type { BoardLabel } from '../types';
 7 | 
 8 |   export let isOpen: boolean = false;
 9 |   export let labels: BoardLabel[];
10 |   
11 |   const dispatch = createEventDispatcher();
12 | 
13 |   let selectedColor: LABEL_COLOR = null;
14 | 
15 |   const focus = (node: Node): void => {
16 |     node.focus();
17 |   }
18 | 
19 |   const handleButtonClick = (): void => {
20 |     isOpen = true;
21 |   }
22 | 
23 |   const handleClose = (e: CustomEvent): void => {
24 |     isOpen = false;
25 |     selectedColor = null;
26 |   }
27 | 
28 |   const handleEditLabelClick = (color: LABEL_COLOR): void => {
29 |     selectedColor = color;
30 |   }
31 | 
32 |   const handleInputBlur = (e: Event): void => {
33 |     selectedColor = null;
34 |   }
35 | 
36 |   const handleLabelInput = (e: KeyboardEvent): void => {
37 |     if (e.key == "Enter" && e.target.value) {
38 |       for (let i = 0; i < labels.length; i++) {
39 |         if (labels[i].color == e.target.dataset.color) {
40 |           labels[i].text = e.target.value;
41 | 
42 |           dispatch("update", labels);
43 |           break;
44 |         }
45 |       }
46 | 
47 |       e.target.blur();
48 |     }
49 |   }
50 | </script> 
51 | 
52 | <div>
53 |   <button on:click={handleButtonClick} class="py-1 px-2 rounded text-xs bg-indigo-500 text-white hover:bg-indigo-600">Labels</button>
54 | 
55 |   <Popover {isOpen} on:close={handleClose}>
56 |     <ul tabindex="-1" role="listbox" class="text-base w-40 space-y-1 py-2 leading-6 focus:outline-none w-80 rounded border border-indigo-500">
57 |       {#each labels as l (l)}
58 |         <li role="option" class="select-none relative py-1 pl-3 pr-9 hover:bg-light-200 dark:hover:bg-dark-100-50">
59 |           <div class="flex items-center space-x-2 mr-2">
60 |             <span
61 |               class="flex-shrink-0 rounded-full w-4 h-4"
62 |               class:bg-red-500={l.color == LABEL_COLOR.RED}
63 |               class:bg-orange-500={l.color == LABEL_COLOR.ORANGE}
64 |               class:bg-yellow-500={l.color == LABEL_COLOR.YELLOW}
65 |               class:bg-green-500={l.color == LABEL_COLOR.GREEN}
66 |               class:bg-teal-500={l.color == LABEL_COLOR.TEAL}
67 |               class:bg-blue-500={l.color == LABEL_COLOR.BLUE}
68 |               class:bg-purple-500={l.color == LABEL_COLOR.PURPLE}></span>
69 |             {#if selectedColor == l.color}
70 |               <input use:focus on:blur={handleInputBlur} on:keyup|stopPropagation on:keydown={handleLabelInput} data-color={l.color} class="block rounded w-full px-1 focus:bg-light-300 dark:focus:bg-dark-100 border border-transparent border-dashed hover:border-light dark:hover:border-dark py-1" value={l.text}>
71 |             {:else}
72 |               <span class="block truncate py-1">
73 |                 {l.text}
74 |               </span>
75 |             {/if}
76 |           </div>
77 |           <button on:click={e => handleEditLabelClick(l.color)} class="absolute mx-auto opacity-50 hover:opacity-100 inset-y-0 right-0 flex items-center mr-2.5 focus:bg-transparent outline-none" title="Edit label">
78 |             <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
79 |               <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
80 |             </svg>
81 |           </button>
82 |         </li>
83 |       {/each}
84 |     </ul>
85 |   </Popover>
86 | </div>


--------------------------------------------------------------------------------
/src/components/ConfirmModal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 | 
 4 |   import Modal from './base/Modal.svelte';
 5 |   
 6 |   export let isConfirmModalOpen: boolean;
 7 |   export let modalMessage: string;
 8 |   export let onConfirm: Function;
 9 |   
10 |   const dispatch = createEventDispatcher();
11 |   
12 |   const handleCloseModal = (e: Event): void => {
13 |     dispatch("close");
14 |   }
15 | 
16 |   const handleConfirmModal = async (e: Event): Promise<void> => {
17 |     await onConfirm();
18 |     dispatch("close");
19 |   }
20 | 
21 | </script> 
22 | 
23 | <Modal isOpen={isConfirmModalOpen} on:close={handleCloseModal}>
24 |   <div class="p-4">
25 |     <h3 class="text-2xl text-light dark:text-dark mb-4">
26 |       {modalMessage}
27 |     </h3>
28 |     <div class="flex justify-end">
29 |       <button on:click={handleCloseModal} class="mt-4 mr-2 text-light dark:text-white hover:text-white border border-gray-500 w-40 hover:bg-gray-500 text-xl font-bold py-2 px-4 rounded">
30 |         Close
31 |       </button>
32 |       <button on:click={handleConfirmModal} class="mt-4 bg-indigo-600 w-40 hover:bg-indigo-700 text-white text-xl font-bold py-2 px-4 rounded">
33 |         Confirm
34 |       </button>
35 |     </div>
36 |   </div>
37 | </Modal>


--------------------------------------------------------------------------------
/src/components/CreateBoard.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher, getContext } from 'svelte';
 3 |   import type { Writable } from 'svelte/store';
 4 |   import { push } from 'svelte-spa-router';
 5 | 
 6 |   import Modal from './base/Modal.svelte';
 7 |   import type nimbo from '../nimbo';
 8 |   
 9 |   export let isOpen: boolean;
10 |   
11 |   let boardTitle: string = "";
12 |   let couldNotImport: boolean = false;
13 | 
14 |   const dispatch = createEventDispatcher();
15 |   const nimboStore: Writable<nimbo> = getContext("nimbo");
16 | 
17 |   const handleInput = (e: KeyboardEvent): void => {
18 |     if (e.key == "Enter") {
19 |       handleCreateBoard(e);
20 |     }
21 |   }
22 | 
23 |   const handleClose = (e: CustomEvent): void => {
24 |     couldNotImport = false;
25 |     dispatch("close");
26 |   }
27 | 
28 |   const handleCreateBoard = async (e: Event): Promise<void> => {
29 |     e.preventDefault();
30 | 
31 |     if (boardTitle) {
32 |       let boardId: string = await $nimboStore.createBoard(boardTitle);
33 |       push("/b/" + boardId);
34 |     }
35 |   }
36 | 
37 |   const handlePasteEvent = async (e: ClipboardEvent): Promise<void> => {
38 |     if (e.target.tagName === "INPUT") return;
39 | 
40 |     let data: string = e.clipboardData.getData('text');
41 | 
42 |     try {
43 |       let importedBoard: object = JSON.parse(data);
44 |       let boardId: string = await $nimboStore.importTrelloBoard(importedBoard);
45 | 
46 |       await $nimboStore.init();
47 | 
48 |       push("/b/" + boardId);
49 |     } catch (e) {
50 |       // failed to import board
51 |       couldNotImport = true;
52 |     }
53 |   }
54 | 
55 |   $: {
56 |     if (isOpen) {
57 |       boardTitle = "";
58 |     }
59 |   };
60 | </script>
61 | 
62 | <Modal {isOpen} on:close={handleClose}>
63 |   <div class="p-4" on:paste={handlePasteEvent}>
64 |     <form on:submit={handleCreateBoard}>
65 |       <input title="Please enter a valid board name" autocomplete="off" pattern=".*\S+.*" class="text-light dark:text-dark text-2xl p-2 shadow-none w-full bg-light-300 dark:bg-dark-300 border border-transparent focus:border-indigo-500 appearance-none leading-normal rounded outline-none" placeholder="Board name" bind:value={boardTitle} on:keydown={handleInput} on:keyup|stopPropagation required type="text">
66 | 
67 |       <button type="submit" class="mt-4 bg-indigo-600 w-full hover:bg-indigo-700 text-white text-xl font-bold py-2 px-4 rounded">
68 |         Create board
69 |       </button>
70 | 
71 |       <div class="my-4 text-lg text-center">
72 |         <div class="">
73 |           OR
74 |         </div>
75 |       </div>
76 | 
77 |       <div class="border border-dashed border-light flex flex-col space-y-2 text-center py-4 text-lg opacity-75">
78 |         <span>Import from Trello.</span>
79 |         <span>Export board as JSON and paste (CTRL + V) here!</span>
80 |       </div>
81 | 
82 |       {#if couldNotImport}
83 |         <div class="mt-4 text-red-400 p-1 w-full font-bold text-center rounded">
84 |           Could not import board!
85 |         </div>
86 |       {/if}
87 |     </form>
88 |   </div>
89 | </Modal>


--------------------------------------------------------------------------------
/src/components/EditableTitle.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 | 
 4 |   export let content: string;
 5 |   export let isTitle: boolean = false;
 6 | 
 7 |   let bufferContent: string = content;
 8 |   let hasFocus: boolean = false;
 9 | 
10 |   const dispatch = createEventDispatcher();
11 | 
12 |   const handleTitleFocus = (e: FocusEvent): void => {
13 |     hasFocus = true;
14 |   }
15 | 
16 |   const handleTitleInput = (e: KeyboardEvent): void => {
17 |     if (e.key == "Enter") {
18 |       e.preventDefault();
19 | 
20 |       if (e.target.textContent) {
21 |         content = e.target.textContent;
22 |         e.target.blur();
23 |       }
24 |     } else if (e.key == "Escape") {
25 |       e.target.blur();
26 |     }
27 |   };
28 | 
29 |   const handleTitleBlur = (e: FocusEvent): void => {
30 |     hasFocus = false;
31 |     bufferContent = content;
32 |     e.target.scrollTop = 0;
33 |     dispatch("updateTitle", content);
34 |   }
35 | 
36 |   const handlePasteEvent = (node: Node): object => {
37 |     const handlePaste = (e: ClipboardEvent) => {
38 |       e.preventDefault();
39 |       var text = e.clipboardData.getData("text/plain");
40 |       document.execCommand("insertText", false, text);
41 |     }
42 | 
43 |     node.addEventListener("paste", handlePaste);
44 | 
45 |     return {
46 |       destroy() {
47 |         document.removeEventListener("paste", handlePaste);
48 |       },
49 |     };
50 |   }
51 | 
52 |   $: {
53 |     bufferContent = content;
54 |   }
55 | </script>
56 | 
57 | <style>
58 |   span[contenteditable]:empty:before {
59 |     content: "\feff";
60 |   }
61 | </style>
62 | 
63 | <div class="min-w-0 w-full">
64 |   <div class="min-w-0 editable-title">
65 |     {#if isTitle}
66 |       <h1 class="w-full text-2xl font-semibold" title={bufferContent}>
67 |         <span use:handlePasteEvent on:keyup|stopPropagation on:keydown={handleTitleInput} on:focus={handleTitleFocus} on:blur={handleTitleBlur} contenteditable class="block w-full focus:bg-light-100 dark:focus:bg-dark-100 border border-transparent border-dashed break-words hover:border-light dark:hover:border-dark rounded p-1" class:truncate-2-lines={!hasFocus} bind:textContent={bufferContent}></span>
68 |       </h1>
69 |     {:else}
70 |       <h2 class="w-full text-xl font-semibold pr-2" title={bufferContent}> 
71 |         <span use:handlePasteEvent on:keyup|stopPropagation on:keydown={handleTitleInput} on:focus={handleTitleFocus} on:blur={handleTitleBlur} contenteditable class="block w-full focus:bg-light-300 dark:focus:bg-dark-100 border border-transparent border-dashed break-words hover:border-light dark:hover:border-dark rounded p-1" class:truncate-3-lines={!hasFocus} bind:textContent={bufferContent}></span>
72 |       </h2>
73 |     {/if}
74 |   </div>
75 | </div>


--------------------------------------------------------------------------------
/src/components/SearchPalette.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { afterUpdate, getContext } from 'svelte';
  3 |   import { fade } from 'svelte/transition';
  4 |   import { push } from 'svelte-spa-router';
  5 |   import fuzzysort from 'fuzzysort';
  6 | 
  7 |   import { clickOutside } from '../util';
  8 |   import { RESULT_TYPE } from '../types';
  9 |   import type { SearchObject } from '../types';
 10 |   import type nimbo from '../nimbo';  
 11 | 
 12 |   let nimboStore: Writable<nimbo> = getContext('nimbo');
 13 |   let resultList: HTMLElement;
 14 |   let query: string = "";
 15 |   let searchResults: any[] = [];
 16 |   let searchList: SearchObject[] = [];
 17 | 
 18 |   $: {
 19 |     searchList = $nimboStore.everything();
 20 |   }
 21 | 
 22 |   $: {
 23 |     let q: string = query;
 24 |     let sl = searchList;
 25 | 
 26 |     if (query.startsWith("b/")) {
 27 |       q = query.replace('b/', '');
 28 |       sl = searchList.filter(s => s.type == RESULT_TYPE.BOARD);
 29 |     } else if (query.startsWith("c/")) {
 30 |       q = query.replace('c/', '');
 31 |       sl = searchList.filter(s => s.type == RESULT_TYPE.CARD);  
 32 |     }
 33 | 
 34 |     if (!q) {
 35 |       searchResults = sl.map(s => {
 36 |         return { obj: s }
 37 |       });
 38 |     } else {
 39 |       searchResults = fuzzysort.go(q, sl, {
 40 |         limit: 12,
 41 |         allowTypo: false,
 42 |         key: 'text'
 43 |       });
 44 |     }
 45 |     
 46 |     searchResults = searchResults.sort((a, b) => {
 47 |       if (a.obj.type < b.obj.type){
 48 |         return -1;  
 49 |       } else if (a.obj.type > b.obj.type){
 50 |         return 1;
 51 |       }
 52 | 
 53 |       return 0;
 54 |     }).slice(0, 12);
 55 |   }
 56 | 
 57 |   afterUpdate(() => {
 58 |     if (searchResults.length && resultList) {
 59 |       resultList.querySelector('li').classList.add('focused');
 60 |     }
 61 |   });
 62 | 
 63 |   const handleClickOutside = (node): object => {
 64 |     return clickOutside(node, function() {
 65 |       $nimboStore.closePalette();
 66 |       $nimboStore = $nimboStore;
 67 |     })
 68 |   };
 69 | 
 70 |   const handleResultsEvent = (e: KeyboardEvent, s: Search): void => {
 71 |     if (e.key == "ArrowUp") {
 72 |       if (e.target.previousElementSibling) {
 73 |         e.target.classList.remove('focused')
 74 |         e.target.previousElementSibling.classList.add('focused');
 75 |         e.target.previousElementSibling.focus();
 76 |       } else {
 77 |         document.querySelector('#cmdInput').focus();
 78 |       }
 79 |     } else if (e.key == "ArrowDown") {
 80 |       if (e.target.nextElementSibling) {
 81 |         e.target.classList.remove('focused')
 82 |         e.target.nextElementSibling.classList.add('focused');
 83 |         e.target.nextElementSibling.focus();
 84 |       }
 85 |     } else if (e.key == "Escape") {
 86 |       $nimboStore.closePalette();
 87 |       $nimboStore = $nimboStore;
 88 |     } else if (e.key == "Enter") {
 89 |       execAction(s);
 90 |     }
 91 |   }
 92 | 
 93 |   const handleSearchInput = (e: KeyboardEvent): void => {
 94 |     if (e.key == "ArrowDown") {
 95 |       let elements: HTMLElement[] = Array.from(document.querySelectorAll('.result'));
 96 |       
 97 |       if (elements.length > 1) {
 98 |         elements[0].classList.remove('focused');
 99 |         elements[1].classList.add('focused');
100 |         elements[1].focus();
101 |       } else if (elements.length == 1) {
102 |         elements[0].classList.add('focused');
103 |         elements[0].focus();
104 |       }
105 |     } else if (e.key == "Escape") {
106 |       $nimboStore.closePalette();
107 |       $nimboStore = $nimboStore;
108 |     } else if (e.key == "Enter") {
109 |       let elements: HTMLElement[] = Array.from(document.querySelectorAll('.result'));
110 | 
111 |       if (elements.length) {
112 |         elements[0].click();
113 |       }
114 |     }
115 |   }
116 | 
117 |   const execAction = (s: Search): void => {
118 |     $nimboStore.closePalette();
119 |     $nimboStore.setSelectedCard(null);
120 |     $nimboStore = $nimboStore;
121 |   
122 |     push(s.obj.path);
123 |   }
124 | 
125 |   const init = (): void => {
126 |     query = "";
127 |     let el: HTMLInputElement = document.querySelector("#cmdInput");
128 |     el.value = "";
129 |     el.focus();
130 |   }
131 | </script>
132 | 
133 | <style lang="postcss" global>
134 |   .focused {
135 |     @apply bg-light-100;
136 |   }
137 |   
138 |   .dark .focused {
139 |     @apply bg-dark-100;
140 |   }
141 | </style>
142 | 
143 | {#if $nimboStore.showCommandPalette }
144 |   <div use:init on:keyup|stopPropagation class="absolute w-full top-0 left-0 h-screen z-10 bg-dark-300-75" transition:fade={{ duration: 100 }}>
145 |     <div class="bg-light-200 dark:bg-dark-200 mt-24 w-3/4 md:w-2/3 xl:w-1/2 mx-auto rounded py-2 shadow-lg" use:handleClickOutside>
146 |       <div class="px-2">
147 |         <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute text-dark m-4"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
148 |         <input id="cmdInput" class="dark:text-dark dark:bg-dark-300 text-light text-2xl pl-12 pr-2 py-2 w-full bg-light-300 border border-transparent border-indigo-500 appearance-none leading-normal rounded outline-none" bind:value={query} on:keyup={handleSearchInput} type="text">
149 |       </div>
150 |       
151 |       <ul class="mt-2" bind:this={resultList}>
152 |         {#each searchResults as s}
153 |           <li class="result px-2 py-1 font-bold text-light dark:text-dark text-lg cursor-pointer focus:font-bold focus:bg-light-100 dark:focus:bg-dark-100 hover:bg-light-100-50 dark:hover:bg-dark-100-50 outline-none truncate" on:keydown={e => handleResultsEvent(e, s) } on:click={e => execAction(s) } tabindex="0">
154 |             {#if s.obj.type == RESULT_TYPE.BOARD}
155 |               <span class="rounded border border-2 px-2 uppercase text-sm mr-1 text-green-500 border-green-500 dark:text-green-300 dark:border-green-300">Board</span>
156 |             {:else if s.obj.type == RESULT_TYPE.CARD}
157 |               <span class="rounded border border-2 px-2 uppercase text-sm mr-1 text-red-500 border-red-500 dark:text-red-300 dark:border-red-300">Card</span>
158 |             {/if}
159 |             {#if s.target}
160 |               {@html fuzzysort.highlight(s, '<span class="font-bold text-blue-400">', '</span>')}
161 |             {:else}
162 |               {s.obj.text}
163 |             {/if}
164 |           </li>
165 |         {/each}
166 |       </ul>
167 |     </div>
168 |   </div>
169 | {/if}


--------------------------------------------------------------------------------
/src/components/base/Editor.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher, onMount } from "svelte";
  3 |   import { link } from "svelte-spa-router";
  4 |   import { formatDate, formatTime } from '../../util'; 
  5 |   import EditableTitle from '../EditableTitle.svelte';
  6 |   import CardDue from '../card/CardDue.svelte';
  7 |   import CardLabel from '../card/CardLabel.svelte';
  8 |   import CardPriority from '../card/CardPriority.svelte';
  9 |   import type { CardDetails } from '../../types';
 10 | 
 11 |   import Sortable from "sortablejs";
 12 |   import DOMPurify from 'dompurify';
 13 |   import marked from 'marked';
 14 |   import parse from 'parse-duration';
 15 | 
 16 |   export let cardDetails: CardDetails;
 17 |   export let inline: boolean;
 18 |   export let isZen: boolean;
 19 | 
 20 |   let boardLink: HTMLAnchorElement;
 21 |   let cardDescription: string;
 22 |   let checklist: HTMLElement;
 23 |   let editDescription: boolean = false;
 24 |   let hideCompleted: boolean = false;
 25 | 
 26 |   const dispatch = createEventDispatcher();
 27 |   const renderer = new marked.Renderer();
 28 | 
 29 |   renderer.link = function(href, title, text) {
 30 |     return marked.Renderer.prototype.link.apply(this, arguments).replace("<a","<a class='link' target='_blank'");
 31 |   };
 32 | 
 33 |   marked.setOptions({
 34 |       renderer: renderer
 35 |   });
 36 | 
 37 |   DOMPurify.addHook('afterSanitizeAttributes', function (node) {
 38 |     if ('target' in node) {
 39 |       node.setAttribute('target', '_blank');
 40 |       node.setAttribute('rel', 'noopener');
 41 |     }
 42 |   });
 43 | 
 44 |   const handleChecklistDelete = (e: Event): void => {    
 45 |     cardDetails.card.deleteFromChecklist(Number(e.target.dataset.index));
 46 |     cardDetails.card = cardDetails.card;
 47 |     
 48 |     dispatch("update", {
 49 |       card: cardDetails.card,
 50 |       property: "checklist"
 51 |     });
 52 |   }
 53 | 
 54 |   const handleChecklistClick = (e: Event): void => {
 55 |     dispatch("update", {
 56 |       card: cardDetails.card,
 57 |       property: "checklist"
 58 |     });
 59 |   }
 60 | 
 61 |   const handleChecklistInput = (e: KeyboardEvent): void => {
 62 |     if (e.target.value && e.key === "Enter") {
 63 |       let checklistItems: string[] = e.target.value.split('\n').filter(item => item.trim() != "");
 64 | 
 65 |       for (let i: number = 0; i < checklistItems.length; i++) {
 66 |         cardDetails.card.addToChecklist(checklistItems[i]);
 67 |       }
 68 | 
 69 |       dispatch("update", {
 70 |         card: cardDetails.card,
 71 |         property: "checklist"
 72 |       });
 73 | 
 74 |       cardDetails.card = cardDetails.card;
 75 |       e.preventDefault();
 76 |       e.target.value = "";
 77 |     } else if (e.key === "Enter") {
 78 |       e.preventDefault();
 79 |       e.target.value = "";
 80 |     }
 81 |   }
 82 | 
 83 |   const handleCloseClick = (): void => {
 84 |     dispatch("close");
 85 |   }
 86 | 
 87 |   const handleDateUpdate = (e: Event): void => {
 88 |     cardDetails.card.setDueDate(e.detail);
 89 | 
 90 |     dispatch("update", {
 91 |       card: cardDetails.card,
 92 |       property: "due"
 93 |     });
 94 | 
 95 |     cardDetails.card = cardDetails.card;
 96 |   }
 97 | 
 98 |   const handleDeleteChecklist = (e: Event): void => {
 99 |     dispatch("delete", {
100 |       message: "Are you sure you want to delete this checklist?",
101 |       onConfirm: () => {
102 |         cardDetails.card.checklist = [];
103 | 
104 |         dispatch("update", {
105 |           card: cardDetails.card,
106 |           property: "checklist"
107 |         });
108 |       }
109 |     });
110 |   }
111 | 
112 |   const handleDeleteCard = (e: Event): void => {
113 |     dispatch("delete", {
114 |       message: "Are you sure you want to delete this card?",
115 |       onConfirm: () => {
116 |         dispatch("update", {
117 |           list: cardDetails.list,
118 |           cardId: cardDetails.card.id
119 |         });
120 | 
121 |         if (inline) {
122 |           dispatch("close");
123 |         } else {
124 |           boardLink.click();
125 |         }
126 |       }
127 |     });
128 |   }
129 | 
130 |   const handleDescriptionClick = (e: Event): void => {
131 |     if (editDescription) {
132 |       cardDetails.card.description = cardDescription;
133 | 
134 |       dispatch("update", {
135 |         card: cardDetails.card,
136 |         property: "description"
137 |       });
138 |     } else {
139 |       cardDescription = cardDetails.card.description;
140 |     }
141 | 
142 |     editDescription = !editDescription;
143 |   }
144 | 
145 |   const handleDescriptionInput = (e: Event): void => {
146 |     cardDescription = e.target.value;
147 |   }
148 | 
149 |   const handleDueComplete = (e: Event): void => {
150 |     cardDetails.card.setComplete(e.detail);
151 | 
152 |     dispatch("update", {
153 |       card: cardDetails.card,
154 |       property: "isComplete"
155 |     })
156 |   }
157 | 
158 |   const handleLabelUpdate = (e: Event): void => {
159 |     cardDetails.card.setLabel(e.detail);
160 | 
161 |     dispatch("update", {
162 |       card: cardDetails.card,
163 |       property: "label"
164 |     })
165 |   }
166 | 
167 |   const handleListUpdate = (e: Event): void => {
168 |     let newList = cardDetails.board.lists.find(l => l.id === e.target.value);
169 | 
170 |     dispatch("update", {
171 |       boardId: cardDetails.board.id,
172 |       from: {
173 |         list: cardDetails.card.listId,
174 |         index: cardDetails.card.index
175 |       },
176 |       to: {
177 |         list: newList.id,
178 |         index: newList.cards.length
179 |       }
180 |     });
181 |   }
182 | 
183 |   const handlePriorityUpdate = (e: Event): void => {
184 |     cardDetails.card.setPriority(e.detail);
185 | 
186 |     dispatch("update", {
187 |       card: cardDetails.card,
188 |       property: "priority"
189 |     });
190 | 
191 |     cardDetails.card = cardDetails.card;
192 |   }
193 |   
194 |   const handleToggleHideCompleted = (e: Event): void => {
195 |     hideCompleted = !hideCompleted;
196 |   }
197 | 
198 |   const handleTimeLogDelete = (e: Event): void => {
199 |     dispatch("delete", {
200 |       message: "Are you sure you want to delete this time entry?",
201 |       onConfirm: () => {
202 |         cardDetails.card.deleteTimeEntry(Number(e.target.dataset.index));
203 |         cardDetails.card = cardDetails.card;
204 | 
205 |         dispatch("update", {
206 |           card: cardDetails.card,
207 |           property: "log"
208 |         });
209 |       }
210 |     });
211 |   }
212 | 
213 |   const handleTimeTrackingInput = (e: Event): void => {
214 |     if (e.target.value && e.key === "Enter") {
215 |       let duration: number | null = parse(e.target.value, "s");
216 | 
217 |       if (duration) {
218 |         cardDetails.card.trackTime(duration);
219 | 
220 |         dispatch("update", {
221 |           card: cardDetails.card,
222 |           property: "log"
223 |         })
224 | 
225 |         cardDetails.card = cardDetails.card;
226 |         e.target.value = "";
227 |       }
228 |     }
229 |   }
230 | 
231 |   const updateTitle = (e: CustomEvent): void => {
232 |     cardDetails.card.title = e.detail;
233 | 
234 |     dispatch("update", {
235 |       card: cardDetails.card,
236 |       property: "title"
237 |     })
238 |   }
239 | 
240 |   onMount(() => {
241 |     const sortable: any = Sortable.create(checklist, {
242 |       group: "checklistItems",
243 |       draggable: ".checklist__item",
244 |       ghostClass: "checklist__item--ghost",
245 |       chosenClass: "checklist__item--chosen",
246 |       dragClass: "checklist__item--drag",
247 |       onEnd: (evt: any): void => {
248 |         if (evt.oldDraggableIndex != evt.newDraggableIndex) {
249 |           cardDetails.card.checklist.splice(evt.newDraggableIndex, 0, cardDetails.card.checklist.splice(evt.oldDraggableIndex, 1)[0]);
250 |         }
251 | 
252 |         dispatch("update", {
253 |           card: cardDetails.card,
254 |           property: "checklist"
255 |         });
256 |       },
257 |     });
258 |   });
259 | 
260 |   $: checklistProgress = cardDetails.card.checklist.length === 0 ? 
261 |       "" :
262 |       Math.round( (cardDetails.card.checklist.filter(c => c.checked).length / cardDetails.card.checklist.length) * 100 ) + "%";
263 | 
264 |   $: lists = cardDetails.board.lists.map(l => {
265 |     return {
266 |       name: l.title,
267 |       value: l.id
268 |     }
269 |   });
270 | 
271 |   $: totalTime = cardDetails.card.log.reduce((a, b) => { return a + b.duration}, 0);
272 | 
273 |   $: if (cardDetails?.card.id) {
274 |     cardDescription = cardDetails?.card?.description;
275 |   };
276 | </script>
277 | 
278 | <div class="{inline ? 'w-96' : 'w-4/5 mx-auto'}">
279 |   <div class="mb-2">
280 |     {#if !inline}
281 |       <div class="flex items-center">
282 |         <div class="w-6 h-6 mr-2">
283 |           <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18"></path></svg>
284 |         </div>
285 |         <div class="text-lg">
286 |           <a bind:this={boardLink} class="link" use:link={"/b/" + cardDetails.board.id}>
287 |             {cardDetails.board.title}
288 |           </a>
289 |           <span>/ {cardDetails.list.title}</span>
290 |         </div>
291 |       </div>
292 |     {/if}
293 |     <div class="relative text-2xl font-semibold mt-1" class:ml-8={!inline}>
294 |       {#if inline}
295 |         <div class="flex flex-col space-y-4 absolute w-8 h-8 top-0 right-0 -mr-10">
296 |           <div class="relative cursor-pointer opacity-75 hover:opacity-100" title="Close" on:click={handleCloseClick}>
297 |             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
298 |           </div>
299 |           <a href={"#/c/" + cardDetails.card.id} target="_blank" class="link relative opacity-75 hover:opacity-100" title="Open in new tab">
300 |             <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
301 |           </a>
302 |         </div>
303 |       {/if}
304 |       <EditableTitle content={cardDetails.card.title} on:updateTitle={updateTitle} isTitle />
305 |     </div>
306 |   </div>
307 | 
308 | 
309 |   <div class="mb-2">
310 |     <div class="flex items-center">
311 |       <div class:ml-8={!inline}>
312 |         <h3 class="text-lg">
313 |           Description
314 |         </h3>
315 |       </div>
316 |       {#if editDescription || cardDetails.card.description }
317 |         <div>
318 |           <button on:click={handleDescriptionClick} class="ml-2 text-base underline dark:opacity-50 dark:hover:opacity-75"  >{editDescription ? "Save" : "Edit"}</button>
319 |         </div>
320 |       {/if}
321 |     </div>    
322 |     <div class="mt-2 text-lg" class:ml-8={!inline}>
323 |       {#if cardDetails.card.description && !editDescription}
324 |         <div class="rounded-sm px-1 break-words markdown">
325 |           {@html DOMPurify.sanitize(marked(cardDetails.card.description))}
326 |         </div>
327 |       {:else}
328 |         {#if editDescription}
329 |           <textarea value={cardDescription} on:keyup|stopPropagation={handleDescriptionInput} class="w-full bg-white border-light-200 border-2 dark:border-transparent dark:bg-dark-100 p-1 rounded placeholder-dark-200 dark:placeholder-gray-400 shadow-sm" placeholder="Add a description" rows="10"></textarea>
330 |         {:else}
331 |           <div class="opacity-75 hover:opacity-100 underline cursor-pointer" on:click={handleDescriptionClick}>Add a description</div>
332 |         {/if}
333 |       {/if}
334 |     </div>
335 |   </div>
336 | 
337 |   <div class="flex mb-2" class:flex-col={inline} class:space-y-1={inline}>
338 |     <div>
339 |       <div class="flex items-center">
340 |         <div class:ml-8={!inline}>
341 |           <h3 class="text-lg">
342 |             Due Date
343 |           </h3>
344 |         </div>
345 |       </div>    
346 |       <div class="flex mt-2 text-lg" class:ml-8={!inline}>
347 |         <CardDue date={cardDetails.card.due} complete={cardDetails.card.isComplete} on:complete={handleDueComplete} on:update={handleDateUpdate} />
348 |       </div>
349 |     </div>
350 |     <div>
351 |       <div class="flex items-center">
352 |         <div class:ml-8={!inline}>
353 |           <h3 class="text-lg">
354 |             Priority
355 |           </h3>
356 |         </div>
357 |       </div>
358 |       <div class="flex mt-2 text-lg" class:ml-8={!inline}>
359 |         <CardPriority selectedPriority={cardDetails.card.priority} on:update={handlePriorityUpdate} />
360 |       </div>
361 |     </div>
362 |     <div>
363 |       <div class="flex items-center">
364 |         <div class:ml-8={!inline}>
365 |           <h3 class="text-lg">
366 |             Label
367 |           </h3>
368 |         </div>
369 |       </div>    
370 |       <div class="flex mt-2 text-lg" class:ml-8={!inline}>
371 |         <CardLabel on:update={handleLabelUpdate} selected={cardDetails.card.label} labels={cardDetails.board.labels} />
372 |       </div>
373 |     </div>
374 |     {#if isZen}
375 |       <div>
376 |         <div class="flex items-center">
377 |           <div class:ml-8={!inline}>
378 |             <h3 class="text-lg">
379 |               List
380 |             </h3>
381 |           </div>
382 |         </div>    
383 |         <div class="flex mt-2 text-lg" class:ml-8={!inline}>
384 |           <select class="form-select p-1 bg-white dark:bg-dark-200 border border-light-200 dark:border-transparent w-full pr-8" on:change={handleListUpdate} bind:value={cardDetails.card.listId}>
385 |             {#each lists as l (l)}
386 |               <option value={l.value}>{l.name}</option>
387 |             {/each}
388 |           </select>
389 |         </div>
390 |       </div>
391 |     {/if}
392 |   </div>
393 | 
394 |   <div class="mb-2">
395 |     <div class="flex items-center">
396 |       {#if !inline}
397 |         <div class="w-6 h-6 mr-2">
398 |           <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
399 |         </div>
400 |       {/if}
401 |       <div class="w-full">
402 |         <h3 class="flex items-center w-full justify-between text-2xl font-bold">
403 |           <span>
404 |             Checklist
405 |             <span class="ml-1 opacity-75 text-base">{checklistProgress}</span>
406 |           </span>
407 |           {#if cardDetails.card.checklist.length}
408 |             <span>
409 |               <button on:click={handleToggleHideCompleted} class="ml-2 text-base underline opacity-75">
410 |                 {#if hideCompleted}
411 |                   Show completed
412 |                 {:else}
413 |                   Hide completed
414 |                 {/if}
415 |               </button>
416 |               <button on:click={handleDeleteChecklist} class="ml-2 text-base underline opacity-75">Delete all</button>
417 |             </span>
418 |           {/if}
419 |         </h3>
420 |       </div>
421 |     </div>
422 |     <div class="mt-2">
423 |       {#if cardDetails.card.checklist.length}
424 |         <div class="rounded-full w-full h-2 bg-light-100 shadow-sm dark:bg-dark-200 mb-2" class:ml-8={!inline}>
425 |           <div class="rounded-full w-1/2 bg-indigo-500 h-2 transition-all duration-200 ease-in-out" style={'width:' + checklistProgress }></div>
426 |         </div>
427 |       {/if}
428 |       <ul bind:this={checklist} class="ml-1 -mr-8">
429 |         {#each cardDetails.card.checklist as cl, index (cl)}
430 |           {#if (hideCompleted && !cl.checked) || hideCompleted == false }
431 |             <li class="checklist__item group relative flex mt-1 mr-1 p-1 rounded hover:bg-light-200 dark:hover:bg-dark-200">
432 |               <label class="flex items-center cursor-pointer w-full" class:opacity-50={cl.checked}>
433 |                 <input bind:checked={cl.checked} on:click={handleChecklistClick} type="checkbox" class="form-checkbox text-indigo-500 h-4 w-4 border-2 dark:border">
434 |                 <span class="ml-2 text-lg" class:line-through={cl.checked} class:italic={cl.checked} class:opacity-75={cl.checked}>{cl.text}</span>
435 |               </label>
436 |               <div on:click={handleChecklistDelete} data-index={index} class="absolute top-0 right-0 p-2 opacity-100 cursor-pointer hidden group-hover:block">
437 |                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
438 |               </div>
439 |             </li>
440 |           {/if}
441 |         {/each}
442 |       </ul>
443 |       <div class="mt-1" class:ml-8={!inline}>
444 |         <textarea
445 |         on:keydown={handleChecklistInput}
446 |         on:keyup|stopPropagation
447 |         class="bg-transparent text-base inline-block w-full p-1 rounded-sm placeholder-dark-200 dark:placeholder-gray-500 border border-transparent focus:border-indigo-500"
448 |         type="text" placeholder="Add an item to checklist"></textarea>
449 |       </div>
450 |     </div>
451 |   </div>
452 | 
453 |   <div class="mb-2">
454 |     <div class="flex items-center">
455 |       {#if !inline}
456 |         <div class="w-6 h-6 mr-2">
457 |           <svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
458 |         </div>
459 |       {/if}
460 |       <div class="w-full">
461 |         <h3 class="flex items-center w-full justify-between text-2xl font-bold">
462 |           <span>
463 |             Time Tracking
464 |             <span class="ml-1 opacity-75 text-base">{formatTime(totalTime)}</span>
465 |           </span>
466 |         </h3>
467 |       </div>
468 |     </div>
469 |     <div class="mt-2">
470 |       <ul class="-mr-8" class:ml-8={!inline}>
471 |         {#each cardDetails.card.log as l, index (l)}
472 |           <li class="timetrack__item group flex mt-1 -ml-1 p-1 items-center rounded hover:bg-light-200 dark:hover:bg-dark-200">
473 |             <div class="flex-grow ml-1">
474 |               <div class="text-xl font-semibold">{formatTime(l.duration)}</div>
475 |               <div class="-mt-1 opacity-75">{formatDate(l.date)}</div>
476 |             </div>
477 |             <div on:click={handleTimeLogDelete} data-index={index} class="p-2 opacity-100 cursor-pointer hidden group-hover:block">
478 |               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="pointer-events-none"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
479 |             </div>
480 |           </li>
481 |         {/each}
482 |       </ul>
483 |       <div class="mt-1" class:ml-8={!inline}>
484 |         <input
485 |         on:keydown={handleTimeTrackingInput}
486 |         on:keyup|stopPropagation
487 |         class="bg-transparent text-base inline-block w-full p-1 rounded-sm placeholder-dark-200 dark:placeholder-gray-500 border border-transparent focus:border-indigo-500"
488 |         type="text" placeholder="Add a duration. ex. 30m">
489 |       </div>
490 |     </div>
491 |   </div>
492 | 
493 |   <div class="my-6" class:ml-8={!inline}>
494 |     <button on:click={handleDeleteCard} class="bg-red-600 hover:bg-red-700 text-white text-lg font-bold py-1 px-2 rounded">
495 |       Delete card
496 |     </button>
497 |   </div>
498 | </div>


--------------------------------------------------------------------------------
/src/components/base/Modal.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   import { fade } from 'svelte/transition';
 4 |   import { clickOutside } from "../../util";
 5 | 
 6 |   export let isOpen: boolean;
 7 | 
 8 |   const dispatch = createEventDispatcher();
 9 |   
10 |   const handleClickOutside = (node: Node): object => {
11 |     return clickOutside(node, () => {
12 |       dispatch("close");
13 |     });
14 |   }
15 | 
16 |   const init = (): object => {
17 |     const handleKeyPress = (e: KeyboardEvent) => {
18 |       if (e.key === "Escape") {
19 |         dispatch("close");
20 |       }
21 |     };
22 | 
23 |     window.addEventListener("keydown", handleKeyPress)
24 | 
25 |     return {
26 |       destroy() {
27 |         window.removeEventListener("keydown", handleKeyPress);
28 |       }
29 |     }
30 |   };
31 | </script>
32 | 
33 | {#if isOpen }
34 |   <div use:init class="fixed w-full top-0 left-0 h-screen z-10 bg-dark-300-75" transition:fade={{ duration: 175 }}>
35 |     <div class="bg-light-200 mt-24 w-3/4 md:w-2/3 xl:w-1/2 mx-auto rounded py-2 shadow-lg dark:bg-dark-200" use:handleClickOutside>
36 |     	<slot isOpen={isOpen}></slot>
37 |     </div>
38 |   </div>
39 | {/if}


--------------------------------------------------------------------------------
/src/components/base/Popover.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   import { fade } from 'svelte/transition';
 4 |   import { clickOutside } from "../../util";
 5 | 
 6 |   export let isOpen: boolean;
 7 | 
 8 |   const dispatch = createEventDispatcher();
 9 |   
10 |   const handleClickOutside = (node: Node): object => {
11 |     return clickOutside(node, () => {
12 |       if (isOpen) {
13 |         dispatch("close");
14 |       }
15 |     });
16 |   }
17 | </script>
18 | 
19 | {#if isOpen }
20 |   <div use:handleClickOutside class="absolute mt-2 z-10 rounded bg-light-100 dark:bg-dark-200 text-light dark:text-dark shadow-xl w-auto">
21 | 	 <slot isOpen={isOpen}></slot>
22 |   </div>
23 | {/if}


--------------------------------------------------------------------------------
/src/components/card/CardDue.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher, onMount } from 'svelte';
  3 |   
  4 |   import flatpickr from 'flatpickr';
  5 |   import 'flatpickr/dist/themes/dark.css';
  6 | 
  7 |   export let date: number;
  8 |   export let complete: boolean = false;
  9 | 
 10 |   let calendar: flatpickr;
 11 |   let bufferDate: number;
 12 |   let bufferComplete: boolean;
 13 |   let mounted: boolean = false;
 14 | 
 15 |   const dispatch = createEventDispatcher();
 16 | 
 17 |   const handleDateClear = (e: Event): void => {
 18 |     calendar.clear();
 19 |   }
 20 | 
 21 |   const handleDueComplete = (e: Event): void => {
 22 |     complete = !complete;
 23 |     dispatch("complete", complete);
 24 |   }
 25 | 
 26 |   const setCalendar = (date: number): void => {
 27 |     calendar = flatpickr("#flatpickr", {
 28 |       altInput: true,
 29 |       altFormat: "M j, Y @ h:S K",
 30 |       defaultDate: date,
 31 |       enableTime: true,
 32 |       minDate: !!date && date < new Date().getTime() ? date : "today",
 33 |       onChange(selectedDates: Date[], dateString: string, instance: any) {
 34 |         if (selectedDates.length) {
 35 |           dispatch("update", selectedDates[0].getTime());
 36 |         } else {
 37 |           dispatch("update", null);
 38 |         }
 39 |       }
 40 |     });
 41 |   }
 42 | 
 43 |   onMount(() => {
 44 |     setCalendar(date);
 45 | 
 46 |     mounted = true;
 47 |   });
 48 | 
 49 |   $: {
 50 |     if (mounted) {
 51 |       bufferDate = date;
 52 |       bufferComplete = complete;
 53 |       
 54 |       if (bufferDate) {
 55 |         setCalendar(bufferDate);
 56 |         calendar._input.disabled = bufferComplete;
 57 |       } else {
 58 |         if (calendar) calendar.clear();
 59 |       }
 60 |     }
 61 |   }
 62 | </script>
 63 | 
 64 | <style lang="postcss" global>
 65 |   .flatpickr-weekdays {
 66 |     @apply bg-indigo-500;
 67 |   }
 68 |   span.flatpickr-weekday {
 69 |     @apply text-white bg-indigo-500;
 70 |   }
 71 |   .flatpickr-day.today {
 72 |     @apply border-indigo-500;
 73 |   }
 74 |   .flatpickr-day.selected {
 75 |     @apply bg-indigo-500 border-indigo-500 hover:bg-indigo-400; 
 76 |   }
 77 |   .flatpickr-months .flatpickr-month {
 78 |     @apply bg-indigo-500;
 79 |   }
 80 |   .flatpickr-current-month .flatpickr-monthDropdown-months {
 81 |     @apply bg-indigo-500;
 82 |   }
 83 |   .flatpickr-months {
 84 |     @apply bg-indigo-500;
 85 |     border-radius: 5px 5px 0px 0px;
 86 |   }
 87 |   .flatpickr-months .flatpickr-current-month {
 88 |     @apply text-white;
 89 |   }
 90 |   .flatpickr-month .flatpickr-monthDropdown-month {
 91 |     @apply text-black;
 92 |   }
 93 |   .flatpickr-calendar {
 94 |     @apply shadow;
 95 |   }
 96 |   span.arrowUp, span.arrowDown {
 97 |     @apply hover:bg-opacity-50;
 98 |   }
 99 |   .flatpickr-months .flatpickr-prev-month:hover {
100 |     @apply hover:text-indigo-900 fill-current;
101 |   }
102 |   .flatpickr-months .flatpickr-next-month:hover {
103 |     @apply hover:text-indigo-900 fill-current;
104 |   }
105 |   .flatpickr-months .flatpickr-prev-month:hover svg {
106 |     @apply hover:text-indigo-900 fill-current;
107 |   }
108 |   .flatpickr-months .flatpickr-next-month:hover svg {
109 |     @apply hover:text-indigo-900 fill-current;
110 |   }
111 |   .flatpickr-months .flatpickr-prev-month {
112 |     @apply text-white fill-current; 
113 |   }
114 |   .flatpickr-months .flatpickr-next-month {
115 |     @apply text-white fill-current; 
116 |   }
117 |   div.flatpickr-calendar {
118 |     @apply bg-light-200;
119 |   }
120 |   .dark ~ div.flatpickr-calendar {
121 |     @apply bg-dark-100;
122 |   }
123 |   .flatpickr-months .flatpickr-month {
124 |     @apply text-black text-opacity-50;
125 |   }
126 |   .flatpickr-time span.flatpickr-am-pm {
127 |    @apply text-black text-opacity-50;
128 |   }
129 |   .numInput.flatpickr-minute {
130 |    @apply text-black text-opacity-50;
131 |   }
132 |   .numInput.flatpickr-hour {
133 |    @apply text-black text-opacity-50;
134 |   }
135 |   .flatpickr-time span {
136 |    @apply text-black text-opacity-50;
137 |   }
138 |   .flatpickr-time-separator {
139 |    @apply text-black text-opacity-50;
140 |   }
141 | 
142 |   .dark ~ .flatpickr-calendar .flatpickr-months .flatpickr-month {
143 |     @apply text-white text-opacity-100;
144 |   }
145 |   .dark ~ .flatpickr-calendar .flatpickr-time span.flatpickr-am-pm {
146 |     @apply text-white text-opacity-100;
147 |   }
148 |   .dark ~ .flatpickr-calendar .numInput.flatpickr-minute{
149 |     @apply text-white text-opacity-100;
150 |   }
151 |   .dark ~ .flatpickr-calendar .numInput.flatpickr-hour {
152 |     @apply text-white text-opacity-100;
153 |   }
154 |   .dark ~ .flatpickr-calendar .flatpickr-time span.flatpickr-time-separator {
155 |     @apply text-white text-opacity-100;
156 |   }
157 | 
158 |   .flatpickr-time span.flatpickr-am-pm {
159 |     @apply hover:bg-light-100 focus:bg-light-100;
160 |   }
161 |   .numInput.flatpickr-minute {
162 |     @apply hover:bg-light-100 focus:bg-light-100;
163 |   }
164 |   .numInput.flatpickr-hour {
165 |     @apply hover:bg-light-100 focus:bg-light-100;
166 |   }
167 |   .dark ~ .flatpickr-calendar .flatpickr-time span.flatpickr-am-pm {
168 |     @apply hover:bg-dark-200 focus:bg-dark-200;
169 |   } 
170 |   .dark ~ .flatpickr-calendar .numInput.flatpickr-minute {
171 |     @apply hover:bg-dark-200 focus:bg-dark-200;
172 |   }
173 |   .dark ~ .flatpickr-calendar .numInput.flatpickr-hour {
174 |     @apply hover:bg-dark-200 focus:bg-dark-200;
175 |   }
176 |   .flatpickr-calendar.hasTime .flatpickr-time {
177 |     @apply border-black border-opacity-25;
178 |   }
179 |   .dark ~ .flatpickr-calendar.hasTime .flatpickr-time {
180 |     @apply border-dark-200;
181 |   }
182 | 
183 |   .flatpickr-day {
184 |     @apply text-black text-opacity-50 hover:bg-light-100;
185 |   }
186 |   .dark ~ .flatpickr-calendar .flatpickr-day {
187 |     @apply text-white text-opacity-100 hover:bg-dark-200;
188 |   }
189 | 
190 |   .flatpickr-day.prevMonthDay {
191 |     @apply text-dark hover:bg-light-100;
192 |   }
193 |   .flatpickr-day.nextMonthDay {
194 |     @apply text-dark hover:bg-light-100;
195 |   }
196 |   .flatpickr-day.flatpickr-disabled {
197 |     @apply text-dark hover:bg-light-100;
198 |   }
199 |   .dark ~ .flatpickr-calendar .flatpickr-day.prevMonthDay {
200 |     @apply text-dark hover:bg-dark-200;
201 |   }
202 |   .dark ~ .flatpickr-calendar .flatpickr-day.nextMonthDay {
203 |     @apply text-dark hover:bg-dark-200;
204 |   }
205 |   .dark ~ .flatpickr-calendar .flatpickr-day.flatpickr-disabled {
206 |     @apply text-dark hover:bg-dark-200;
207 |   }
208 | 
209 |   div .completed {
210 |     @apply bg-green-600 text-white;
211 |   }
212 | 
213 |   .dark div .completed {
214 |     @apply bg-green-600 text-white;
215 |   }
216 | </style>
217 | 
218 | <div class="flex items-center px-1 bg-light-100 dark:bg-dark-200 text-light dark:text-dark rounded" on:keyup|stopPropagation class:completed={complete}>
219 |   {#if date}
220 |     <span class="bg-transparent -mr-2 pl-2 py-1 min-w-0 outline-none pr-4">
221 |       <input on:click={handleDueComplete} bind:checked={complete} type="checkbox" class="form-checkbox -mt-1 text-indigo-500 h-4 w-4 border-2 dark:border">
222 |     </span>
223 |   {/if}
224 |   <input id="flatpickr" class="bg-transparent py-1 pr-4 min-w-0 placeholder-light dark:placeholder-dark placeholder-opacity-100 outline-none" placeholder="Select a date..." />
225 |   {#if !complete && date}
226 |     <button title="Clear date" on:click={handleDateClear}>
227 |       <svg class="-ml-8 cursor-pointer opacity-50 hover:opacity-100" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
228 |     </button>
229 |   {/if}
230 | </div>


--------------------------------------------------------------------------------
/src/components/card/CardLabel.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   import Popover from '../base/Popover.svelte';
 4 |   import { LABEL_COLOR } from '../../types';
 5 |   import type { BoardLabel } from '../../types';
 6 | 
 7 |   export let selected: LABEL_COLOR;
 8 |   export let labels: BoardLabel[];
 9 | 
10 |   let isOpen: boolean = false;
11 |   let selectedText: string;
12 | 
13 |   const dispatch = createEventDispatcher();
14 | 
15 |   const handleClose = (e: CustomEvent): void => {
16 |     isOpen = false;
17 |   }
18 | 
19 |   const handleLabelClick = (): void => {
20 |     isOpen = !isOpen;
21 |   }
22 | 
23 |   const handleSelectLabel = (color: LABEL_COLOR): void => {
24 |     selected = color === selected ? null : color;
25 | 
26 |     dispatch("update", selected);
27 |     isOpen = false;
28 |   }
29 | 
30 |   $: {
31 |     if (selected in LABEL_COLOR) {
32 |       selectedText = labels.find(l => l.color == selected).text;
33 |     }
34 |   }
35 | </script>
36 | 
37 | <div class="space-y-1">
38 |   <div class="relative">
39 |     <span class="inline-block w-full rounded shadow-sm">
40 |       <button on:click={handleLabelClick} type="button" aria-haspopup="listbox" aria-expanded="true" class="flex items-center px-1 bg-light-100 dark:bg-dark-200 text-light dark:text-dark rounded cursor-default relative w-64 pl-2 pr-10 py-1 text-left">
41 |         <div class="flex items-center space-x-2 truncate">
42 |           {#if selected in LABEL_COLOR}
43 |             <span
44 |               class="flex-shrink-0 rounded-full w-4 h-4"
45 |               class:bg-red-500={selected === LABEL_COLOR.RED}
46 |               class:bg-orange-500={selected === LABEL_COLOR.ORANGE}
47 |               class:bg-yellow-500={selected === LABEL_COLOR.YELLOW}
48 |               class:bg-green-500={selected === LABEL_COLOR.GREEN}
49 |               class:bg-teal-500={selected === LABEL_COLOR.TEAL}
50 |               class:bg-blue-500={selected === LABEL_COLOR.BLUE}
51 |               class:bg-purple-500={selected === LABEL_COLOR.PURPLE}></span>
52 |             <span class="block truncate">
53 |               {selectedText}
54 |             </span>
55 |           {:else}
56 |             Select a label...
57 |           {/if}
58 |         </div>
59 |         <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
60 |           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="none" stroke="currentColor">
61 |             <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
62 |           </svg>
63 |         </span>
64 |       </button>
65 |     </span>
66 |     
67 |     <Popover {isOpen} on:close={handleClose}>
68 |       <ul tabindex="-1" role="listbox" aria-activedescendant="listbox-item-3" class="max-h-56 w-64 rounded py-1 text-base leading-6 shadow-xs overflow-auto focus:outline-none sm:text-sm sm:leading-5">
69 |         {#each labels as l (l)}
70 |           <li on:click={e => handleSelectLabel(l.color)} data-label={l.color} role="option" class="hover:bg-light-200 dark:hover:bg-dark-100 dark:hover:bg-dark-100 cursor-pointer select-none relative py-2 pl-3 pr-9">
71 |             <div class="flex items-center space-x-2">
72 |               <span
73 |                 class="flex-shrink-0 rounded-full w-4 h-4"
74 |                 class:bg-red-500={l.color == LABEL_COLOR.RED}
75 |                 class:bg-orange-500={l.color == LABEL_COLOR.ORANGE}
76 |                 class:bg-yellow-500={l.color == LABEL_COLOR.YELLOW}
77 |                 class:bg-green-500={l.color == LABEL_COLOR.GREEN}
78 |                 class:bg-teal-500={l.color == LABEL_COLOR.TEAL}
79 |                 class:bg-blue-500={l.color == LABEL_COLOR.BLUE}
80 |                 class:bg-purple-500={l.color == LABEL_COLOR.PURPLE}></span>
81 |               <span class="font-normal block truncate">
82 |                 {l.text}
83 |               </span>
84 |             </div>
85 | 
86 |             {#if selected === l.color}
87 |               <span class="absolute inset-y-0 right-0 flex items-center pr-4">
88 |                 <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
89 |                   <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
90 |                 </svg>
91 |               </span>
92 |             {/if}
93 |           </li>
94 |         {/each}
95 |       </ul>
96 |     </Popover>
97 |   </div>
98 | </div>


--------------------------------------------------------------------------------
/src/components/card/CardPriority.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   import { PRIORITY } from '../../types';
 4 | 
 5 |   export let selectedPriority: PRIORITY;
 6 | 
 7 |   let priority: PRIORITY;
 8 | 
 9 |   const dispatch = createEventDispatcher();
10 | 
11 |   const handlePriorityClick = (p: PRIORITY): void => {
12 |     priority = priority === p ? null : p;
13 |     
14 |     dispatch("update", priority);
15 |   }
16 | 
17 |   $: {
18 |     priority = selectedPriority;
19 |   }
20 | </script>
21 | 
22 | <style lang="postcss" global>
23 |   .priority {
24 |     @apply bg-light-100 dark:bg-dark-200 text-center w-8 py-1 cursor-pointer rounded;
25 |   }
26 | 
27 |   .selected {
28 |     @apply font-bold text-white;
29 |   }
30 | 
31 |   .p1.selected {
32 |     @apply bg-red-500;
33 |   }
34 | 
35 |   .p2.selected {
36 |     @apply bg-orange-500;
37 |   }
38 | 
39 |   .p3.selected {
40 |     @apply bg-green-500;
41 |   }
42 | 
43 |   .p4.selected {
44 |     @apply bg-purple-500;
45 |   }
46 | </style>
47 | 
48 | <div class="flex space-x-2 text-light dark:text-dark rounded-sm">
49 |   <button on:click={e => handlePriorityClick(PRIORITY.P1) } class="priority p1" class:selected={priority == PRIORITY.P1} title="Urgent">
50 |     P1
51 |   </button>
52 |   <button on:click={e => handlePriorityClick(PRIORITY.P2) } class="priority p2" class:selected={priority == PRIORITY.P2} title="High">
53 |     P2
54 |   </button>
55 |   <button on:click={e => handlePriorityClick(PRIORITY.P3) } class="priority p3" class:selected={priority == PRIORITY.P3} title="Normal">
56 |     P3
57 |   </button>
58 |   <button on:click={e => handlePriorityClick(PRIORITY.P4) } class="priority p4" class:selected={priority == PRIORITY.P4} title="Low">
59 |     P4
60 |   </button>
61 | </div>


--------------------------------------------------------------------------------
/src/components/column/InlineEditor.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { createEventDispatcher, getContext } from "svelte";
 3 | 
 4 |   import Editor from "../base/Editor.svelte";
 5 |   import type nimbo from "../nimbo";
 6 |   import type { CardDetails } from '../types';
 7 | 
 8 |   let cardDetails: CardDetails, cd: CardDetails;
 9 |   let isConfirmModalOpen: boolean = false;
10 |   let modalMessage: string;
11 |   let onConfirm = () => {};
12 | 
13 |   export let id: string;
14 |   export let isZen: boolean = false;
15 | 
16 |   const dispatch = createEventDispatcher();
17 |   const nimboStore: Writable<nimbo> = getContext("nimbo");
18 | 
19 |   const handleCloseEvent = (): void => {
20 |     dispatch("close"); 
21 |   }
22 | 
23 |   const handleDeleteEvent = (e: CustomEvent): void => {
24 |     dispatch("delete", e.detail);
25 |   };
26 | 
27 |   const handleUpdate = async (e: CustomEvent): Promise<void> => {
28 |     if (e.detail.card) {
29 |       await $nimboStore.updateCard(e.detail.card, e.detail.property);
30 |     } else if (e.detail.boardId) {
31 |       await $nimboStore.moveCard(e.detail);
32 |     } else {
33 |       await $nimboStore.deleteCard(e.detail.list, e.detail.cardId);
34 |     }
35 | 
36 |     $nimboStore.boards = $nimboStore.boards;
37 |   }
38 | 
39 |   $: {
40 |     cd = $nimboStore.getCardDetails(id);
41 |         
42 |     if (cd) {
43 |       cardDetails = cd; 
44 |     }
45 |   }
46 | </script>
47 | 
48 | <div>
49 |   <div class="flex-none bg-light-300 inline-editor p-4 pb-8 h-auto border shadow-lg dark:bg-dark-300 overflow-y-auto rounded" 
50 |     class:border-indigo-500={!isZen}
51 |     class:border-transparent={isZen}
52 |     class:mr-4={!isZen}
53 |     class:w-116={!isZen}
54 |     class:hidden={id == null}>
55 |     {#if id}
56 |       <Editor {cardDetails} inline={true} {isZen}
57 |         on:close={handleCloseEvent}
58 |         on:delete={handleDeleteEvent}
59 |         on:update={handleUpdate} />
60 |     {/if}
61 |   </div>
62 | </div>


--------------------------------------------------------------------------------
/src/components/column/Layout.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { afterUpdate, getContext } from "svelte";
  3 |   import { flip } from "svelte/animate";
  4 | 
  5 |   import List from "./List.svelte";
  6 |   import ConfirmModal from "../ConfirmModal.svelte";
  7 |   import InlineEditor from "./InlineEditor.svelte";
  8 |   import type nimbo from "../../nimbo";
  9 |   import type { Board } from "../../datastore/models";
 10 | 
 11 |   export let boardId: string;
 12 | 
 13 |   let board: Board;
 14 |   let boardLists: HTMLElement;
 15 |   let isConfirmModalOpen: boolean = false;
 16 |   let modalMessage: string = "";
 17 |   let newIndex: number = null;
 18 | 
 19 |   let onConfirm = () => {};
 20 | 
 21 |   const nimboStore: Writable<nimbo> = getContext("nimbo");
 22 | 
 23 |   const addNewList = async (e: Event, index: number = null): Promise<void> => {
 24 |     $nimboStore.addNewList(boardId, index);
 25 |     $nimboStore = $nimboStore;
 26 | 
 27 |     newIndex = index === null ? board.lists.length - 1 : index + 1;
 28 |   };
 29 | 
 30 |   const handleCardEditEvent = (e: CustomEvent): void => {
 31 |     let inlineEditor = document.querySelector('.inline-editor');
 32 |     let list: HTMLElement = document.querySelectorAll('.list')[e.detail.listIndex];
 33 | 
 34 |     list.parentNode.after(inlineEditor);
 35 | 
 36 |     $nimboStore.setSelectedCard(e.detail.cardId);
 37 |     $nimboStore = $nimboStore;
 38 |   }
 39 | 
 40 |   const handleCloseConfirmModal = (): void => {
 41 |     isConfirmModalOpen = false;
 42 |   };
 43 | 
 44 |   const handleCloseEvent = (): void => {
 45 |     $nimboStore.setSelectedCard(null);
 46 |     $nimboStore = $nimboStore;
 47 |   }
 48 | 
 49 |   const handleCreateEvent = async (e: CustomEvent): Promise<void> => {
 50 |     await addNewList(e, e.detail);
 51 |   }
 52 | 
 53 |   const handleDeleteEvent = (e: CustomEvent): void => {
 54 |     modalMessage = e.detail.message;
 55 |     isConfirmModalOpen = true;
 56 |     onConfirm = e.detail.onConfirm;
 57 |   };
 58 | 
 59 |   const handleKeyPress = async (e: KeyboardEvent): Promise<void> => {
 60 |     if (e.key === "l" && $nimboStore.selectedCardId === null) {
 61 |       await addNewList();
 62 |       e.stopPropagation();
 63 |     } else if (e.code === "Space" || e.key === "h") {
 64 |       e.stopPropagation();
 65 |     }
 66 |   };
 67 | 
 68 |   afterUpdate(() => {
 69 |     if (newIndex != null) {
 70 |       let bl: HTMLElement[] = boardLists.querySelectorAll('.editable-title span');
 71 |       bl[newIndex].focus();
 72 | 
 73 |       // position cursor at end of text
 74 |       if (typeof window.getSelection != "undefined"
 75 |               && typeof document.createRange != "undefined") {
 76 |         let range = document.createRange();
 77 |         range.selectNodeContents(bl[newIndex]);
 78 |         range.collapse(false);
 79 |         let sel = window.getSelection();
 80 |         sel.removeAllRanges();
 81 |         sel.addRange(range);
 82 |       } else if (typeof document.body.createTextRange != "undefined") {
 83 |         let textRange = document.body.createTextRange();
 84 |         textRange.moveToElementText(bl[newIndex]);
 85 |         textRange.collapse(false);
 86 |         textRange.select();
 87 |       }
 88 |       
 89 |       bl[newIndex].closest('.list').scrollIntoView({
 90 |         behavior: 'smooth',
 91 |         inline: 'end'
 92 |       });
 93 | 
 94 |       newIndex = null;
 95 |     }
 96 |   });
 97 | 
 98 |   $: board = $nimboStore.getBoard(boardId);
 99 | </script>
100 | 
101 | <svelte:window on:keyup={handleKeyPress} />
102 | 
103 | <ConfirmModal
104 |   {isConfirmModalOpen}
105 |   {modalMessage}
106 |   {onConfirm}
107 |   on:close={handleCloseConfirmModal} />
108 | 
109 | <div bind:this={boardLists} class="flex max-h-full w-full pb-2 overflow-x-auto">
110 |   <InlineEditor id={$nimboStore.selectedCardId} on:delete={handleDeleteEvent} on:close={handleCloseEvent} />
111 | 
112 |   {#each board.lists as l (l.id)}
113 |     <div animate:flip={{ duration: 300 }}>
114 |       <List
115 |         list={l}
116 |         hasMore={l.index < board.lists.length - 1}
117 |         on:delete={handleDeleteEvent}
118 |         on:create={handleCreateEvent}
119 |         on:cardEdit={handleCardEditEvent} />
120 |     </div>
121 |   {/each}
122 |   <div>
123 |     <button
124 |       on:click={addNewList}
125 |       class="rounded py-2 w-80 text-center border border-dashed border-gray-700
126 |         focus:outline-none opacity-50 hover:opacity-75 min-h-0 h-auto">
127 |       Press <b>l</b> to add new list or click here
128 |     </button>
129 |   </div>
130 | </div>


--------------------------------------------------------------------------------
/src/components/column/List.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher, onMount } from "svelte";
  3 | 
  4 |   import EditableTitle from "../EditableTitle.svelte";
  5 |   import ListCard from "./ListCard.svelte";
  6 |   import ListMenu from "./ListMenu.svelte";
  7 |   import type List from "../../datastore/models/List";
  8 |   import { nimboStore } from "../../datastore/stores";
  9 | 
 10 |   import Sortable from "sortablejs";
 11 | 
 12 |   export let list: List;
 13 |   export let hasMore: boolean;
 14 | 
 15 |   let cardList: HTMLElement;
 16 |   let debounceScroll: number;
 17 |   let isListMenuOpen: boolean = false;
 18 | 
 19 |   const dispatch = createEventDispatcher();
 20 | 
 21 |   const handleCardClick = (cardId: string, listIndex: number): void => {
 22 |     dispatch("cardEdit", {
 23 |       cardId,
 24 |       listIndex
 25 |     });
 26 |   }
 27 | 
 28 |   const handleEmit = async (e: CustomEvent): Promise<void> => {
 29 |     if (e.detail[0] === "move") {
 30 |       await $nimboStore.swapLists(list.boardId, e.detail[1]);
 31 |       $nimboStore = $nimboStore;
 32 |     } else if (e.detail[0] === "create") {
 33 |       dispatch("create", e.detail[1]);
 34 |     } else if (e.detail[0] === "delete") {
 35 |       dispatch("delete", {
 36 |         message: "Are you sure you want to delete this list?",
 37 |         onConfirm() {
 38 |           $nimboStore.deleteList(list.boardId, list.id);
 39 |           $nimboStore = $nimboStore;
 40 |         }
 41 |       })
 42 |     }
 43 |     
 44 |     isListMenuOpen = false;
 45 |   };
 46 | 
 47 |   const handleListInput = async (e: KeyboardEvent): Promise<void> => {
 48 |     if (e.key == "Enter") {
 49 |       if (e.target.value) {
 50 |         await $nimboStore.addNewCard(list, e.target.value);
 51 |         $nimboStore = $nimboStore;
 52 | 
 53 |         scrollToBottom();
 54 |       }
 55 | 
 56 |       e.target.value = "";
 57 |     }
 58 |   };
 59 | 
 60 |   const scrollToBottom = (): void => {
 61 |     clearTimeout(debounceScroll);
 62 |     debounceScroll = window.setTimeout(() => {
 63 |       let cards = cardList.querySelectorAll(".card");
 64 | 
 65 |       if (cards.length) {
 66 |         cards[cards.length - 1].scrollIntoView({
 67 |           behavior: "smooth",
 68 |           block: "end",
 69 |         });
 70 |       }
 71 |     }, 100);
 72 |   };
 73 | 
 74 |   const updateTitle = async (e: CustomEvent): Promise<void> => {
 75 |     await $nimboStore.updateListTitle(list.boardId, list.id, e.detail);
 76 |   };
 77 | 
 78 |   onMount(() => {
 79 |     const sortable: any = Sortable.create(cardList, {
 80 |       group: "cardList",
 81 |       draggable: ".card-container",
 82 |       ghostClass: "card--ghost",
 83 |       chosenClass: "card--chosen",
 84 |       dragClass: "card--drag",
 85 |       onEnd: async (evt: any): Promise<void> => {
 86 |         await $nimboStore.moveCard({
 87 |           boardId: list.boardId,
 88 |           from: {
 89 |             list: evt.from.dataset.list,
 90 |             index: evt.oldDraggableIndex
 91 |           },
 92 |           to: {
 93 |             list: evt.to.dataset.list,
 94 |             index: evt.newDraggableIndex
 95 |           }
 96 |         });
 97 | 
 98 |         $nimboStore.boards = $nimboStore.boards;
 99 |       },
100 |     });
101 |   });
102 | </script>
103 | 
104 | <style lang="postcss" global>
105 |   .cards .card--chosen {
106 |     @apply bg-light-100 dark:bg-black border border-2 border-dashed opacity-50;
107 |   }
108 |   .cards .card--drag.card--chosen {
109 |     @apply bg-light-100 dark:bg-dark-100 border-white opacity-100;
110 |   }
111 |   .cards {
112 |     min-height: 1rem;
113 |   }
114 | </style>
115 | 
116 | <div class="flex flex-col list bg-light-200 dark:bg-dark-200 h-auto max-h-full relative w-80 rounded mr-4 text-light dark:text-dark p-2 shadow">
117 |   <div class="flex absolute top-0 right-0 mt-3 mr-2 cursor-pointer">
118 |     <div class="relative inline-block text-left mt-6">
119 |       <ListMenu isOpen={isListMenuOpen} index={list.index} {hasMore} on:emit={handleEmit} />
120 |     </div>
121 |   </div>
122 | 
123 |   <div class="flex items-center">
124 |     <div class="flex min-w-0 flex-grow">
125 |       <EditableTitle
126 |         content={list.title}
127 |         on:updateTitle={updateTitle} />
128 |     </div>
129 | 
130 |     <button on:click={(e) => (isListMenuOpen = !isListMenuOpen)} type="button" class="text-light opacity-75 hover:opacity-100" aria-haspopup="true" aria-expanded="true">
131 |       <svg
132 |         class="w-6 h-6 mr-1"
133 |         fill="none"
134 |         stroke="currentColor"
135 |         stroke-width="1.5"
136 |         stroke-linecap="round"
137 |         stroke-linejoin="round"><circle cx="12" cy="12" r="1" />
138 |         <circle cx="19" cy="12" r="1" />
139 |         <circle cx="5" cy="12" r="1" /></svg>
140 |     </button>
141 |   </div>
142 | 
143 |   <div bind:this={cardList} class="cards h-full mt-2 pr-1 overflow-y-auto" data-list={list.id}>
144 |     {#each list.cards as c (c.id)}
145 |       <div class="card-container bg-white hover:bg-light-100-50 dark:bg-dark-100 dark:hover:bg-dark-100-50 mb-2 rounded-sm" on:click={e => handleCardClick(c.id, list.index)}>
146 |         <ListCard {c} isFocused={$nimboStore.selectedCardId === c.id} />
147 |       </div>
148 |     {/each}
149 |   </div>
150 | 
151 |   <div class="w-full mt-2">
152 |     <input
153 |       on:keyup|stopPropagation={handleListInput}
154 |       class="bg-transparent inline-block w-full focus:bg-white dark:focus:bg-dark-100 p-2 rounded-sm border border-transparent focus:border-indigo-500 placeholder-light dark:placeholder-dark"
155 |       type="text"
156 |       placeholder="Add a card..." />
157 |   </div>
158 | </div>


--------------------------------------------------------------------------------
/src/components/column/ListCard.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher } from 'svelte';
  3 |   import { fly } from 'svelte/transition';
  4 |   import type { Card } from '../../datastore/models';
  5 |   import { PRIORITY, LABEL_COLOR } from '../../types';
  6 |   import type { TimeEntry } from '../../types';
  7 |   import { beforeDate, formatDate, formatForStopwatch, formatTime } from '../../util';
  8 |   
  9 |   export let c: Card;
 10 |   export let isFocused: boolean = false;
 11 |   export let isZen: boolean = false;
 12 | 
 13 |   const dispatch = createEventDispatcher();
 14 | 
 15 |   let seconds: number = 0;
 16 |   let stopwatchInterval: number;
 17 |   let stopwatchStarted: boolean = false;
 18 | 
 19 |   const handleStopwatchStart = (e: Event): void => {
 20 |     e.stopPropagation();
 21 |     
 22 |     clearInterval(stopwatchInterval);
 23 | 
 24 |     if (stopwatchStarted) {
 25 |       card.trackTime(seconds);
 26 | 
 27 |       dispatch("trackTime", card);
 28 | 
 29 |       seconds = 0;
 30 |       stopwatchStarted = false;
 31 |     } else {
 32 |       stopwatchStarted = true;
 33 |       stopwatchInterval = setInterval(() => {
 34 |         seconds++;
 35 |       }, 1000)
 36 |     }
 37 |   }
 38 | 
 39 |   $: card = c;
 40 |   $: checklistCompleted = card.checklist.filter(item => item.checked).length;
 41 |   $: totalTrackedTime = card.log.reduce((a: TimeEntry, b: TimeEntry): number => a + b.duration, 0);
 42 |   $: hasMoreDetails = !!card.checklist.length || !!card.log.length || !!card.due || !!card.description || card.priority in PRIORITY;
 43 | </script>
 44 | 
 45 | <div class="card card-label relative group cursor-pointer focus:outline-none focus:border-indigo-500 border-4 border-transparent shadow font-semibold p-2 rounded-sm" 
 46 |   class:border-indigo-500={isFocused}
 47 |   tabindex="0">
 48 |   {#if card.label != null}
 49 |     <div class="flex justify-end">
 50 |       <div class="w-6 h-2 mb-1 rounded-sm"
 51 |         class:bg-red-500={card.label == LABEL_COLOR.RED}
 52 |         class:bg-orange-500={card.label == LABEL_COLOR.ORANGE}
 53 |         class:bg-yellow-500={card.label == LABEL_COLOR.YELLOW}
 54 |         class:bg-green-500={card.label == LABEL_COLOR.GREEN}
 55 |         class:bg-teal-500={card.label == LABEL_COLOR.TEAL}
 56 |         class:bg-blue-500={card.label == LABEL_COLOR.BLUE}
 57 |         class:bg-purple-500={card.label == LABEL_COLOR.PURPLE}
 58 |       ></div>
 59 |     </div>
 60 |   {/if}
 61 |   <div class="break-words truncate-3-lines">
 62 |     {card.title}
 63 |   </div>
 64 |   {#if hasMoreDetails}
 65 |     <div class="flex justify-between group mt-2 text-sm -mb-1 opacity-75">
 66 |       <div class="flex items-center space-x-1.5">
 67 |         {#if card.description}
 68 |           <div class="py-1">
 69 |             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 10H3M21 6H3M21 14H3M17 18H3"/></svg>
 70 |           </div>
 71 |         {/if}
 72 |         {#if card.checklist.length}
 73 |           <div class={checklistCompleted == card.checklist.length ? "flex items-center rounded text-white bg-green-500 p-1" : "flex items-center rounded p-1"}>
 74 |             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><path d="M22 4L12 14.01l-3-3"/></svg>
 75 |             <span class="ml-1">{checklistCompleted} / {card.checklist.length}</span>
 76 |           </div>
 77 |         {/if}
 78 |         {#if card.log.length}
 79 |           <div class="flex items-center rounded py-1">
 80 |             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"></circle><polyline points="12 9 12 12 13.5 13.5"></polyline><path d="M16.51 17.35l-.35 3.83a2 2 0 0 1-2 1.82H9.83a2 2 0 0 1-2-1.82l-.35-3.83m.01-10.7l.35-3.83A2 2 0 0 1 9.83 1h4.35a2 2 0 0 1 2 1.82l.35 3.83"></path></svg>
 81 |             <span class="">{formatTime(totalTrackedTime)}</span>
 82 |           </div>
 83 |         {/if}
 84 |         {#if card.due}
 85 |           <div class={
 86 |               card.isComplete ? "flex items-center rounded text-white bg-green-500 p-1" : 
 87 |               beforeDate(card.due, 'today') ? 
 88 |                 "flex items-center rounded text-white bg-red-600 p-1" : 
 89 |                 beforeDate(card.due, 'tomorrow') ? 
 90 |                   "flex items-center rounded text-white bg-orange-600 p-1" : 
 91 |                   "flex items-center rounded p-1"}>
 92 |             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
 93 |             <span class="ml-1">{formatDate(card.due)}</span>
 94 |           </div>
 95 |         {/if}
 96 |         {#if card.priority in PRIORITY}
 97 |           <div class="flex font-bold text-center text-white">
 98 |             {#if card.priority == PRIORITY.P1}
 99 |               <span class="bg-red-500 p-1 rounded" title="Urgent">
100 |                 P1
101 |               </span>
102 |             {:else if card.priority == PRIORITY.P2}
103 |               <span class="bg-orange-500 p-1 rounded" title="High">
104 |                 P2
105 |               </span>
106 |             {:else if card.priority == PRIORITY.P3}
107 |               <span class="bg-green-500 p-1 rounded" title="Normal">
108 |                 P3
109 |               </span>
110 |             {:else if card.priority == PRIORITY.P4}
111 |               <span class="bg-purple-500 p-1 rounded" title="Low">
112 |                 P4
113 |               </span>
114 |             {/if}
115 |           </div>
116 |         {/if}
117 |       </div>
118 |     </div>
119 |   {/if}
120 |   {#if isZen}
121 |     <div class="absolute bottom-0 right-0 group-hover:block" class:hidden={!stopwatchStarted}>
122 |       <button class="flex items-center p-1 bg-indigo-500 hover:bg-indigo-600 rounded-tl-sm rounded-br-sm text-white" title="Start time tracking" on:click={handleStopwatchStart}>
123 |         {#if stopwatchStarted}
124 |           <div transition:fly="{{ x: 20 }}" class="relative ml-1 mr-1.5">
125 |             <span class="flex h-2 w-2">
126 |               <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
127 |               <span class="relative inline-flex rounded-full h-2 w-2 bg-white"></span>
128 |             </span>
129 |           </div>
130 |         {/if}
131 |         <span class="font-mono">{formatForStopwatch(seconds)}</span>
132 |       </button>
133 |     </div>
134 |   {/if}
135 | </div>


--------------------------------------------------------------------------------
/src/components/column/ListMenu.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher } from "svelte";
  3 |   import { fade } from "svelte/transition";
  4 | 
  5 |   import { clickOutside } from "../../util";
  6 | 
  7 |   export let isOpen: boolean;
  8 |   export let index: number;
  9 |   export let hasMore: boolean;
 10 | 
 11 |   const dispatch = createEventDispatcher();
 12 | 
 13 |   const emit = (data: any): void => {
 14 |     dispatch("emit", data);
 15 |   }
 16 | 
 17 |   const handleClickOutside = (node): object => {
 18 |     return clickOutside(node, () => {
 19 |       emit("close");
 20 |     })
 21 |   };
 22 | </script>
 23 | 
 24 | {#if isOpen}
 25 |   <div
 26 |     transition:fade={{ duration: 150 }}
 27 |     use:handleClickOutside
 28 |     class="origin-top-right absolute right-0 w-auto z-10 rounded shadow-lg">
 29 |     <div class="rounded border border-indigo-500 bg-light-100 dark:bg-dark-200 text-light dark:text-dark shadow-xl">
 30 |       <div
 31 |         class="flex"
 32 |         role="menu"
 33 |         aria-orientation="horizontal"
 34 |         aria-labelledby="options-menu">
 35 |         {#if index > 0}
 36 |           <button
 37 |             on:click={(e) => emit(['move', { from: index, to: index - 1}])}
 38 |             class="flex items-center w-full p-2 text-sm leading-5
 39 |               hover:bg-light-200 dark:hover:bg-dark-100-50"
 40 |             role="menuitem">
 41 |             <svg
 42 |               class="w-6 h-6 mr-1"
 43 |               fill="none"
 44 |               stroke="currentColor"
 45 |               stroke-width="1.5"
 46 |               stroke-linecap="round"
 47 |               stroke-linejoin="round"><polyline
 48 |                 points="15 18 9 12 15 6" /></svg>
 49 |           </button>
 50 |         {/if}
 51 |         {#if hasMore}
 52 |           <button
 53 |             on:click={(e) => emit(['move', { from: index, to: index + 1}])}
 54 |             class="flex items-center w-full p-2 text-sm leading-5
 55 |               hover:bg-light-200 dark:hover:bg-dark-100-50"
 56 |             role="menuitem">
 57 |             <svg
 58 |               class="w-6 h-6 mr-1"
 59 |               fill="none"
 60 |               stroke="currentColor"
 61 |               stroke-width="1.5"
 62 |               stroke-linecap="round"
 63 |               stroke-linejoin="round"><polyline
 64 |                 points="9 18 15 12 9 6" /></svg>
 65 |           </button>
 66 |         {/if}
 67 |         <button
 68 |           on:click={(e) => emit(['create', index])}
 69 |           class="flex items-center w-full p-2 text-sm leading-5
 70 |               hover:bg-light-200 dark:hover:bg-dark-100-50"
 71 |           role="menuitem">
 72 |           <svg
 73 |             class="w-6 h-6 mr-1"
 74 |             fill="none"
 75 |             stroke="currentColor"
 76 |             stroke-width="1.5"
 77 |             stroke-linecap="round"
 78 |             stroke-linejoin="round"
 79 |             ><line x1="12" y1="5" x2="12" y2="19"></line>
 80 |             <line x1="5" y1="12" x2="19" y2="12"></line></svg>
 81 |         </button>
 82 |         <button
 83 |           on:click={(e) => emit(['delete'])}
 84 |           class="flex items-center w-full p-2 text-sm leading-5
 85 |               hover:bg-light-200 dark:hover:bg-dark-100-50"
 86 |           role="menuitem">
 87 |           <svg
 88 |             class="w-6 h-6 mr-1"
 89 |             fill="none"
 90 |             stroke="currentColor"
 91 |             stroke-width="1.5"
 92 |             stroke-linecap="round"
 93 |             stroke-linejoin="round"><polyline points="3 6 5 6 21 6" />
 94 |             <path
 95 |               d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
 96 |             <line x1="10" y1="11" x2="10" y2="17" />
 97 |             <line x1="14" y1="11" x2="14" y2="17" /></svg>
 98 |         </button>
 99 |       </div>
100 |     </div>
101 |   </div>
102 | {/if}


--------------------------------------------------------------------------------
/src/components/zen/Multiselect.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { createEventDispatcher, onMount } from 'svelte';
  3 |   import { fade } from 'svelte/transition';
  4 |   import { clickOutside } from '../../util';
  5 | 
  6 |   export let options: any;
  7 |   export let selected: string[];
  8 | 
  9 |   const dispatch = createEventDispatcher();
 10 | 
 11 |   let selectedValues = [];
 12 |   let displayText: string = "";
 13 |   let open: boolean = false;
 14 | 
 15 |   $: {
 16 |     if (options.length === 0) {
 17 |       displayText = `No boards available`;
 18 |     } else if (selectedValues.includes('all') && options.length) {
 19 |       displayText = `All ${options.length} board(s) selected`;
 20 |     } else if (selectedValues.length === 1) {
 21 |       displayText = options.find(o => o.value == selectedValues[0]).name;
 22 |     } else if (selectedValues.length) {
 23 |       displayText = `${selectedValues.length} board(s) selected`;
 24 |     } else {
 25 |       displayText = 'No boards selected';
 26 |     }
 27 |   }
 28 | 
 29 |   $: allSelected = selectedValues.includes('all');
 30 | 
 31 |   $: dropdownOptions = [
 32 |     { name: 'Select all', value: 'all' }
 33 |   ].concat(options);
 34 | 
 35 |   const handleClickOutside = (node): object => {
 36 |     return clickOutside(node, function() {
 37 |       open = false;
 38 |     })
 39 |   };
 40 | 
 41 |   const handleOptionClick = (o: string): void => {
 42 |     let index: number = selectedValues.indexOf(o);
 43 | 
 44 |     if (index > -1) {
 45 |       if (o === 'all') {
 46 |         selectedValues = [];
 47 |       } else {
 48 |         selectedValues.splice(index, 1);
 49 | 
 50 |         let allIndex: number = selectedValues.indexOf('all');
 51 |         if (allIndex > -1) {
 52 |           selectedValues.splice(allIndex, 1);
 53 |         }
 54 |       }
 55 |     } else {
 56 |       if (o === 'all') {
 57 |         selectedValues = ['all'].concat(options.map(opt => opt.value));
 58 |       } else {
 59 |         selectedValues.push(o);
 60 |       }
 61 |     }
 62 | 
 63 |     if (!selectedValues.includes('all') && selectedValues.length === options.length) {
 64 |       selectedValues.push('all');
 65 |     }
 66 | 
 67 |     selectedValues = selectedValues;
 68 |     
 69 |     dispatch("update", selectedValues);
 70 |   }
 71 | 
 72 |   const handleMultiselectClick = (): void => {
 73 |     if (!(selectedValues.length === 1 && selectedValues[0] === 'all')) {
 74 |       open = !open;
 75 |     }
 76 |   }
 77 | 
 78 |   onMount(() => {
 79 |     let allSelected: boolean = selected.includes('all');
 80 |     let optionValues: string[] = options.map(o => o.value);
 81 | 
 82 |     if (allSelected) selectedValues.push('all');
 83 | 
 84 |     for (let i = 0; i < optionValues.length; i++) {
 85 |       if (allSelected || selected.includes(optionValues[i])) {
 86 |         selectedValues.push(optionValues[i]);
 87 |       }
 88 |     }
 89 | 
 90 |     selectedValues = selectedValues;
 91 |   })
 92 | </script>
 93 | 
 94 | <style lang="postcss" global>
 95 |   .inFocus, .dark .inFocus {
 96 |     box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.5);
 97 |     @apply border border-indigo-400;
 98 |   }
 99 | </style>
100 | 
101 | <div class="relative">
102 |   <div on:click={handleMultiselectClick} class="form-select p-1.5 mt-1 bg-white dark:bg-dark-200 border border-light-200 dark:border-transparent w-full"
103 |   class:inFocus={open}>
104 |     {displayText}
105 |   </div>
106 |   {#if open}
107 |     <div use:handleClickOutside transition:fade="{{ duration: 150 }}" class="absolute mt-0.5 w-full h-auto max-h-40 rounded-sm w-auto bg-light-100 dark:bg-dark-200 shadow-lg overflow-y-auto">
108 |       <div class="flex flex-col">
109 |         {#each dropdownOptions as o (o.value)}
110 |           <label on:click|preventDefault={() => handleOptionClick(o.value)} class="flex items-center p-2 hover:bg-light-200 dark:hover:bg-dark-100 cursor-pointer">
111 |             <input type="checkbox" class="form-checkbox text-indigo-500" checked={selectedValues.includes(o.value) || allSelected } value={o.value}>
112 |             <span class="ml-2">{o.name}</span>
113 |           </label>
114 |         {/each}
115 |       </div>
116 |     </div>
117 |   {/if}
118 | </div>


--------------------------------------------------------------------------------
/src/datastore/db.ts:
--------------------------------------------------------------------------------
 1 | import Dexie from 'dexie';
 2 | import { Board, Card, List, Settings } from './models';
 3 | 
 4 | export class nimboDB extends Dexie {
 5 |   boards: Dexie.Table<Board, string>;
 6 |   cards: Dexie.Table<Card, string>;
 7 |   lists: Dexie.Table<List, string>;
 8 |   settings: Dexie.Table<Settings, string>;
 9 | 
10 |   constructor() {
11 |     super("nimboDB");
12 | 
13 |     let db = this;
14 | 
15 |     db.version(1).stores({
16 |       boards: "&id, title",
17 |       cards: "&id, title, listId, index",
18 |       lists: "&id, boardId, index",
19 |       settings: "&id"
20 |     });
21 | 
22 |     db.boards.mapToClass(Board);
23 |     db.cards.mapToClass(Card);
24 |     db.lists.mapToClass(List);
25 |     db.settings.mapToClass(Settings);
26 |   }
27 | }


--------------------------------------------------------------------------------
/src/datastore/models/Board.ts:
--------------------------------------------------------------------------------
 1 | import { nanoid } from '../../util';
 2 | import { BOARD_COLORS, BoardColor, LABEL_COLOR } from '../../types';
 3 | import type { BoardLabel, SwapObject } from '../../types';
 4 | import type List from './List';
 5 | import type Card from './Card';
 6 | 
 7 | const BOARD_LABELS: BoardLabel[] = [
 8 |   { color: LABEL_COLOR.RED, text: "Red" },
 9 |   { color: LABEL_COLOR.ORANGE, text: "Orange" },
10 |   { color: LABEL_COLOR.YELLOW, text: "Yellow" },
11 |   { color: LABEL_COLOR.GREEN, text: "Green" },
12 |   { color: LABEL_COLOR.TEAL, text: "Teal" },
13 |   { color: LABEL_COLOR.BLUE, text: "Blue" },
14 |   { color: LABEL_COLOR.PURPLE, text: "Purple" }
15 | ]; 
16 | 
17 | export default class Board {
18 |   id: string;
19 |   title: string;
20 |   color: number;
21 |   isArchived: boolean;
22 |   isStarred: boolean;
23 |   labels: BoardLabel[];
24 |   lastViewTime: number;
25 |   lists: List[];
26 | 
27 |   constructor(title: string) {
28 |     this.id = nanoid();
29 |     this.title = title;
30 |     this.isArchived = false;
31 |     this.isStarred = false;
32 |     this.lastViewTime = new Date().getTime();
33 |     this.color = this.getRandomColor();
34 |     this.lists = new Array<List>();
35 |     this.labels = BOARD_LABELS;
36 | 
37 |     Object.defineProperties(this, {
38 |       lists: { value: [], enumerable: false, writable: true }
39 |     });
40 |   }
41 | 
42 |   private getRandomColor(): number {
43 |     return Math.floor(Math.random() * BOARD_COLORS.length);
44 |   }
45 | 
46 |   setLabels(labels: BoardLabel[]): void {
47 |     this.labels = labels;
48 |   }
49 | 
50 |   setLastViewTime(timestamp: number): void {
51 |     this.lastViewTime = timestamp;
52 |   }
53 | 
54 |   setTitle(title: string): void {
55 |     this.title = title;
56 |   }
57 | 
58 |   swapLists(l: SwapObject): void {
59 |     this.lists[l.from].index = l.to;
60 |     this.lists[l.to].index = l.from;
61 |     
62 |     let tmp: List = this.lists[l.from];
63 |     this.lists[l.from] = this.lists[l.to];
64 |     this.lists[l.to] = tmp;
65 |   }
66 | 
67 |   toggleBoardArchive(): void {
68 |     this.isArchived = !this.isArchived;
69 |   }
70 | 
71 |   toggleBoardStar(): void {
72 |     this.isStarred = !this.isStarred;
73 |   }
74 | }


--------------------------------------------------------------------------------
/src/datastore/models/Card.ts:
--------------------------------------------------------------------------------
 1 | import { nanoid } from '../../util';
 2 | import type List from './List';
 3 | import type { ChecklistItem, PRIORITY, LABEL_COLOR, TimeEntry } from '../../types';
 4 | 
 5 | export default class Card {
 6 |   created: number;
 7 |   checklist: ChecklistItem[];
 8 |   description: string;
 9 |   due: number;
10 |   id: string;
11 |   isComplete: boolean;
12 |   index: number;
13 |   label: LABEL_COLOR;
14 |   listId: string;
15 |   log: TimeEntry[];
16 |   priority: PRIORITY;
17 |   title: string;
18 | 
19 |   constructor(list: List, title: string) {
20 |     this.id = nanoid();
21 |     this.checklist = new Array<ChecklistItem>();
22 |     this.created = new Date().getTime();
23 |     this.description = "";
24 |     this.index = list.cards.length;
25 |     this.label = null;
26 |     this.listId = list.id;
27 |     this.log = new Array<TimeEntry>();
28 |     this.title = title;
29 |   }
30 | 
31 |   addToChecklist(text: string) {
32 |     this.checklist.push({
33 |       checked: false,
34 |       text
35 |     });
36 |   }
37 | 
38 |   deleteFromChecklist(index: number) {
39 |     this.checklist.splice(index, 1);
40 |   }
41 | 
42 |   deleteTimeEntry(index: number) {
43 |     this.log.splice(index, 1);
44 |   }
45 | 
46 |   setComplete(complete: boolean) {
47 |     this.isComplete = complete;
48 |   }
49 | 
50 |   setDueDate(timestamp: number) {
51 |     this.due = timestamp;
52 |   }
53 |   
54 |   setDescription(text: string) {
55 |     this.description = text;
56 |   }
57 | 
58 |   setLabel(label: LABEL_COLOR) {
59 |     this.label = label;
60 |   }
61 |   
62 |   setPriority(priority: PRIORITY) {
63 |     this.priority = priority;
64 |   }
65 | 
66 |   setTitle(title: string) {
67 |     this.title = title;
68 |   }
69 | 
70 |   trackTime(duration: number) {
71 |     this.log.push({
72 |       duration,
73 |       date: new Date().getTime()
74 |     });
75 |   }
76 | }


--------------------------------------------------------------------------------
/src/datastore/models/List.ts:
--------------------------------------------------------------------------------
 1 | import { nanoid } from '../../util';
 2 | import type Card from './Card';
 3 | 
 4 | export default class List {
 5 |   id: string;
 6 |   boardId: string;
 7 |   index: number;
 8 |   title: string;
 9 |   cards: Card[];
10 | 
11 |   constructor(boardId: string, index: number) {
12 |     this.id = nanoid();
13 |     this.title = "New List";
14 |     this.index = index;
15 |     this.boardId = boardId;
16 |     this.cards = new Array<Card>();
17 | 
18 |     Object.defineProperties(this, {
19 |       cards: { value: [], enumerable: false, writable: true }
20 |     });
21 |   }
22 | 
23 |   deleteCard(cardId: string): void {
24 |     let cardIndex: number = this.cards.findIndex(c => c.id === cardId);
25 | 
26 |     if (cardIndex > -1) {
27 |       this.cards.splice(cardIndex, 1);
28 |     } 
29 |   }
30 | 
31 |   setTitle(title: string): void {
32 |     this.title = title;
33 |   }
34 | }


--------------------------------------------------------------------------------
/src/datastore/models/Settings.ts:
--------------------------------------------------------------------------------
 1 | import type { DueFilterOptions, Theme } from '../../types';
 2 | 
 3 | export default class Settings {
 4 |   id: number;
 5 |   dueFilter: DueFilterOptions;
 6 |   listFilter: string;
 7 |   maxCards: number;
 8 |   theme: Theme;
 9 |   selectedBoards: string[];
10 | 
11 |   constructor() {
12 |     this.id = 1;
13 |     this.theme = "dark";
14 |     this.maxCards = 5;
15 |     this.dueFilter = "all";
16 |     this.listFilter = "";
17 |     this.selectedBoards = ["all"];
18 |   }
19 | }


--------------------------------------------------------------------------------
/src/datastore/models/index.ts:
--------------------------------------------------------------------------------
 1 | import Board from "./Board";
 2 | import Card from "./Card";
 3 | import List from "./List";
 4 | import Settings from "./Settings";
 5 | 
 6 | export {
 7 |   Board,
 8 |   Card,
 9 |   List,
10 |   Settings
11 | }


--------------------------------------------------------------------------------
/src/datastore/stores.ts:
--------------------------------------------------------------------------------
1 | import { writable, Writable } from 'svelte/store';
2 | import nimbo from '../nimbo';
3 | 
4 | export const nimboStore: Writable<any> = writable(new nimbo())


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import App from './App.svelte';
2 | 
3 | const app = new App({
4 | 	target: document.body
5 | });
6 | 
7 | export default app;


--------------------------------------------------------------------------------
/src/nimbo.ts:
--------------------------------------------------------------------------------
  1 | import { exportDB, peakImportFile} from "dexie-export-import";
  2 | import { nimboDB } from './datastore/db';
  3 | import type { BroadcastChannel } from 'broadcast-channel';
  4 | import { Board, Card, List, Settings } from './datastore/models';
  5 | import { BoardLabel, CardDetails, PRIORITY, RESULT_TYPE, SearchObject, SortObject, SwapObject, Theme } from './types';
  6 | import { getTimestamps } from './util';
  7 | 
  8 | export default class nimbo {
  9 |   db: nimboDB;
 10 |   boards: Board[];
 11 |   channel: BroadcastChannel;
 12 |   selectedCardId: string;
 13 |   settings: Settings;
 14 |   showCommandPalette: boolean;
 15 | 
 16 |   constructor() {
 17 |     this.db = new nimboDB();
 18 |     this.boards = new Array<Board>();
 19 |     this.selectedCardId = null;
 20 |     this.settings = new Settings();
 21 |     this.showCommandPalette = false;
 22 |   }
 23 | 
 24 |   public async init(): Promise<boolean> {
 25 |     this.boards = await this.db.boards.toArray();
 26 | 
 27 |     let lists: List[][] = await Promise.all(this.boards.map(b => this.db.lists.where({ boardId: b.id }).toArray()));
 28 | 
 29 |     for (let i: number = 0; i < lists.length; i++) {
 30 |       this.boards[i].lists = lists[i].sort((a: List, b: List): number => {
 31 |         return a.index - b.index
 32 |       });
 33 | 
 34 |       let cards: Card[][] = await Promise.all(this.boards[i].lists.map(l => this.db.cards.where({ listId: l.id }).toArray()));
 35 |       
 36 |       for (let j: number = 0; j < this.boards[i].lists.length; j++) {
 37 |         this.boards[i].lists[j].cards = cards[j].sort((a: Card, b: Card): number => {
 38 |           return a.index - b.index
 39 |         });
 40 |       }
 41 |     }
 42 | 
 43 |     let settings: Settings[] = await this.db.settings.toArray();
 44 |     if (settings.length === 0) {
 45 |       await this.updateSettings(this.settings);
 46 |     } else {
 47 |       this.settings = settings[0];
 48 |     }
 49 | 
 50 |     return true;
 51 |   }
 52 |   
 53 |   public openPalette() {
 54 |     this.showCommandPalette = true;
 55 |   }
 56 | 
 57 |   public closePalette() {
 58 |     this.showCommandPalette = false;
 59 |   }
 60 | 
 61 |   public async addNewCard(list: List, title: string): Promise<void> {
 62 |     let boardIndex: number = this.boards.findIndex(b => b.id === list.boardId);
 63 |     
 64 |     if (boardIndex > -1) {
 65 |       let listIndex: number = this.boards[boardIndex].lists.findIndex(l => l.id === list.id); 
 66 | 
 67 |       if (listIndex > -1) {
 68 |         let c: Card = new Card(list, title);
 69 | 
 70 |         this.boards[boardIndex].lists[listIndex].cards = [...this.boards[boardIndex].lists[listIndex].cards, c];
 71 | 
 72 |         await this.db.cards.add(c);
 73 |       }
 74 |     }
 75 | 
 76 |     this.update();
 77 |   }
 78 | 
 79 |   public async addNewList(boardId: string, index: number = null): Promise<void> {
 80 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
 81 |     
 82 |     if (boardIndex > -1) {
 83 |       let l: List = new List(boardId, this.boards[boardIndex].lists.length);
 84 | 
 85 |       if (index != null) {
 86 |         let listIndexes: object = {};
 87 | 
 88 |         this.boards[boardIndex].lists.splice(index + 1, 0, l);
 89 |         this.boards[boardIndex].lists = this.boards[boardIndex].lists;
 90 | 
 91 |         for (let i: number = 0; i < this.boards[boardIndex].lists.length; i++) {
 92 |           this.boards[boardIndex].lists[i].index = i;
 93 | 
 94 |           listIndexes[this.boards[boardIndex].lists[i].id] = i;
 95 |         };
 96 | 
 97 |         await this.updateListIndexes(listIndexes);
 98 |       } else {
 99 |         this.boards[boardIndex].lists = [...this.boards[boardIndex].lists, l];
100 |       }
101 | 
102 |       await this.db.lists.add(l);
103 |     }
104 | 
105 |     this.update();
106 |   }
107 | 
108 |   public async createBoard(title: string): Promise<string> {
109 |     let b: Board = new Board(title);
110 |     this.boards = [...this.boards, b];
111 | 
112 |     await this.db.boards.add(b);
113 | 
114 |     this.update();
115 | 
116 |     return b.id;
117 |   }
118 | 
119 |   public async deleteBoard(id: string): Promise<void> {
120 |     let boardIndex: number = this.boards.findIndex(b => b.id === id);
121 | 
122 |     if (boardIndex > -1) {
123 |       this.boards.splice(boardIndex, 1);
124 |     }
125 | 
126 |     await this.db.boards.delete(id);
127 | 
128 |     this.update();
129 |   }
130 | 
131 |   public async deleteCard(list: List, cardId: string): Promise<void> {
132 |     for (let i: number = 0; i < this.boards.length; i++) {
133 |       for (let j: number = 0; j < this.boards[i].lists.length; j++) {
134 |         if (this.boards[i].lists[j].id === list.id) {
135 |           list.deleteCard(cardId);
136 | 
137 |           this.boards[i].lists[j] = list;
138 |         }
139 |       }
140 |     }
141 | 
142 |     await this.db.cards.delete(cardId);
143 | 
144 |     this.update();
145 |   }
146 | 
147 |   public async deleteList(boardId: string, listId: string): Promise<void> {
148 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
149 |     
150 |     if (boardIndex > -1) {
151 |       let listIndex: number = this.boards[boardIndex].lists.findIndex(l => l.id === listId); 
152 | 
153 |       if (listIndex > -1) {
154 |         let listIndexes: object = {};
155 |         
156 |         this.boards[boardIndex].lists.splice(listIndex, 1);
157 |         
158 |         for (let i: number = 0; i < this.boards[boardIndex].lists.length; i++) {
159 |           this.boards[boardIndex].lists[i].index = i;
160 | 
161 |           listIndexes[this.boards[boardIndex].lists[i].id] = i;
162 |         };
163 | 
164 |         await this.db.transaction('rw', this.db.lists, this.db.cards, async (): Promise<void> =>{
165 |           await Promise.all([
166 |             this.db.lists.delete(listId),
167 |             this.db.cards.where({ listId }).delete()
168 |           ]);
169 |         });
170 | 
171 |         await this.updateListIndexes(listIndexes);
172 |       }
173 |     }
174 | 
175 |     this.update();
176 |   }
177 | 
178 |   public async export(): Promise<Blob> {
179 |     return await exportDB(this.db);
180 |   }
181 | 
182 |   public everything(): SearchObject[] {
183 |     return (this.boards.map((b) => {
184 |       if (b.isArchived) return [];
185 | 
186 |       return [{
187 |         type: RESULT_TYPE.BOARD,
188 |         text: b.title,
189 |         path: `/b/${b.id}`
190 |       }, b.lists.map(l => {
191 |           return l.cards.map(c => {
192 |             return {
193 |               type: RESULT_TYPE.CARD,
194 |               text: c.title,
195 |               path: `/c/${c.id}`
196 |             };
197 |           });
198 |         })
199 |       ];
200 |     }) as any).flat(4);
201 |   }
202 | 
203 |   public getBoard(boardId: string): Board | null {
204 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
205 | 
206 |     if (boardIndex > -1) {
207 |       return this.boards[boardIndex];
208 |     }
209 | 
210 |     return null;
211 |   }
212 | 
213 |   public getCardDetails(cardId: string): CardDetails | null {
214 |     for (let i: number = 0; i < this.boards.length; i++) {
215 |       for (let j: number = 0; j < this.boards[i].lists.length; j++) {
216 |         for (let k: number = 0; k < this.boards[i].lists[j].cards.length; k++) {
217 |           if (this.boards[i].lists[j].cards[k].id === cardId) {
218 |             return {
219 |               board: this.boards[i],
220 |               list: this.boards[i].lists[j],
221 |               card: this.boards[i].lists[j].cards[k]
222 |             }
223 |           }
224 |         }
225 |       }
226 |     }
227 | 
228 |     return null;
229 |   }
230 | 
231 |   public async import(db: File): Promise<boolean> {
232 |     try {
233 |       let e = await peakImportFile(db);
234 | 
235 |       if (e.formatName == "dexie" && e.formatVersion == 1)  {
236 |          await this.db.import(db, {
237 |            clearTablesBeforeImport: true
238 |          });
239 | 
240 |          this.update();
241 |          return true;
242 |       }
243 |     } catch (err) {};
244 | 
245 |     return;
246 |   }
247 | 
248 |   public async importTrelloBoard(b: any): Promise<string> {
249 |     let board: Board = new Board(b.name);
250 | 
251 |     board.lastViewTime = new Date(b.dateLastView).getTime();
252 |     board.isStarred = b.starred;
253 |     board.isArchived = b.closed;
254 | 
255 |     let cards: Card[] = [];
256 |     let lists: List[] = [];
257 | 
258 |     for (let i: number = 0; i < b.lists.length; i++) {
259 |       let l: List = new List(board.id, i);
260 |       l.setTitle(b.lists[i].name);
261 | 
262 |       for (let j: number = 0; j < b.cards.length; j++) {
263 |         if (b.lists[i].id === b.cards[j].idList) {
264 |           let c: Card = new Card(l, b.cards[j].name);
265 | 
266 |           c.description = b.cards[j].desc; 
267 |           c.due = b.cards[j].due ? new Date(b.cards[j].due).getTime() : null;
268 |           c.isComplete = b.cards[j].dueComplete;
269 |           
270 |           l.cards.push(c);
271 |         }
272 |       }
273 | 
274 |       lists.push(l);
275 |     }
276 | 
277 |     for (let i: number = 0; i < lists.length; i++) {
278 |       cards = cards.concat(lists[i].cards);
279 |     }
280 | 
281 |     await this.db.transaction('rw', this.db.boards, this.db.lists, this.db.cards, async (): Promise<void> =>{
282 |       await Promise.all([
283 |         this.db.boards.add(board),
284 |         this.db.lists.bulkAdd(lists),
285 |         this.db.cards.bulkAdd(cards)
286 |       ]);
287 |     });
288 | 
289 |     this.update();
290 | 
291 |     return board.id;
292 |   }
293 | 
294 |   public async moveCard(c: SortObject): Promise<void> {
295 |     let boardIndex: number = this.boards.findIndex(b => b.id === c.boardId);
296 | 
297 |     if (boardIndex > -1) {
298 |       let listFromIndex: number = this.boards[boardIndex].lists.findIndex(l => l.id === c.from.list); 
299 |       let listToIndex: number = this.boards[boardIndex].lists.findIndex(l => l.id === c.to.list); 
300 | 
301 |       if (listFromIndex > -1 && listToIndex > -1) {
302 |         let cardIndexes: object = {};
303 |         let tmp: Card;
304 | 
305 |         if (c.from.list != c.to.list) {
306 |           let fromListId: string;
307 | 
308 |           tmp = this.boards[boardIndex].lists[listFromIndex].cards.splice(c.from.index, 1)[0]; 
309 |           fromListId = tmp.listId;
310 | 
311 |           tmp.listId = this.boards[boardIndex].lists[listToIndex].id;
312 |           tmp.index = c.to.index;
313 | 
314 |           for (let i: number = 0; i < this.boards[boardIndex].lists[listFromIndex].cards.length; i++) {
315 |             this.boards[boardIndex].lists[listFromIndex].cards[i].index = i;
316 | 
317 |             cardIndexes[this.boards[boardIndex].lists[listFromIndex].cards[i].id] = i;
318 |           }
319 |           
320 |           this.boards[boardIndex].lists[listToIndex].cards.splice(c.to.index, 0, tmp);
321 | 
322 |           for (let i: number = 0; i < this.boards[boardIndex].lists[listToIndex].cards.length; i++) {
323 |             this.boards[boardIndex].lists[listToIndex].cards[i].index = i;
324 | 
325 |             cardIndexes[this.boards[boardIndex].lists[listToIndex].cards[i].id] = i;
326 |           }
327 |         } else {
328 |           if (c.from.index != c.to.index) {
329 |             tmp = this.boards[boardIndex].lists[listFromIndex].cards.splice(c.from.index, 1)[0];
330 |             tmp.index = c.to.index;
331 | 
332 |             this.boards[boardIndex].lists[listFromIndex].cards.splice(c.to.index, 0, tmp);
333 | 
334 |             for (let i: number = 0; i < this.boards[boardIndex].lists[listFromIndex].cards.length; i++) {
335 |               this.boards[boardIndex].lists[listFromIndex].cards[i].index = i;
336 | 
337 |               cardIndexes[this.boards[boardIndex].lists[listFromIndex].cards[i].id] = i;
338 |             }
339 |           }
340 |         }
341 | 
342 |         await this.updateCardIndexes(tmp, cardIndexes);
343 |       }
344 |     }
345 |   }
346 | 
347 |   public async refresh(): Promise<void> {
348 |     await this.init();
349 |   }
350 | 
351 |   public setChannel(channel: BroadcastChannel): void {
352 |     this.channel = channel;
353 |   }
354 | 
355 |   public setSelectedCard(cardId: string | null): void {
356 |     this.selectedCardId = cardId;
357 |   }
358 | 
359 |   public async swapLists(boardId: string, l: SwapObject): Promise<void> {
360 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
361 | 
362 |     if (boardIndex > -1) {
363 |       this.boards[boardIndex].swapLists(l);
364 | 
365 |       await this.db.transaction('rw', this.db.lists, async (): Promise<void> =>{
366 |         let [from, to]: List[] = await Promise.all([
367 |           this.db.lists.get({ boardId, index: l.from }),
368 |           this.db.lists.get({ boardId, index: l.to })
369 |         ]);
370 |         
371 |         from.index = l.to;
372 |         to.index = l.from;
373 | 
374 |         await this.db.lists.bulkPut([from, to]);
375 |       });
376 |     }
377 | 
378 |     this.update();
379 |   }
380 | 
381 |   public async toggleBoardArchive(boardId: string): Promise<void> {
382 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
383 | 
384 |     if (boardIndex > -1) {
385 |       this.boards[boardIndex].toggleBoardArchive();
386 | 
387 |       await this.db.boards.update(boardId, {
388 |         isArchived: this.boards[boardIndex].isArchived
389 |       });
390 |     }
391 | 
392 |     this.update();
393 |   }
394 | 
395 |   public async toggleBoardStar(boardId: string): Promise<void> {
396 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
397 | 
398 |     if (boardIndex > -1) {
399 |       this.boards[boardIndex].toggleBoardStar();
400 | 
401 |       await this.db.boards.update(boardId, {
402 |         isStarred: this.boards[boardIndex].isStarred
403 |       });
404 |     }
405 | 
406 |     this.update();
407 |   }
408 | 
409 |   public async toggleTheme(): Promise<void> {
410 |     let theme: Theme = this.settings.theme === 'dark' ? 'light' : 'dark';
411 | 
412 |     this.settings.theme = theme;
413 | 
414 |     await this.updateSettings(this.settings);
415 |     this.update();
416 |   }
417 | 
418 |   public update(): void {
419 |     this.channel.postMessage("update");
420 |   }
421 | 
422 |   public async updateBoardTitle(boardId: string, title: string): Promise<void> {
423 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
424 | 
425 |     if (boardIndex > -1) {
426 |       this.boards[boardIndex].setTitle(title);
427 | 
428 |       await this.db.boards.update(boardId, {
429 |         title
430 |       });
431 |     }
432 | 
433 |     this.update();
434 |   }
435 | 
436 |   public async updateCard(c: Card, property: string): Promise<void> {
437 |     for (let i: number = 0; i < this.boards.length; i++) {
438 |       for (let j: number = 0; j < this.boards[i].lists.length; j++) {
439 |         for (let k: number = 0; k < this.boards[i].lists[j].cards.length; k++) {
440 |           if (this.boards[i].lists[j].cards[k].id === c.id) {            
441 |             this.boards[i].lists[j].cards[k] = c;
442 |           }
443 |         }
444 |       }
445 |     }
446 |     
447 |     await this.db.cards.update(c.id, {
448 |       [property]: c[property]
449 |     });
450 | 
451 |     this.update();
452 |   }
453 | 
454 |   private async updateCardIndexes(c: Card, cardIndexes: object): Promise<void> {
455 |     await this.db.transaction('rw', this.db.cards, async (): Promise<void> =>{
456 |       await this.db.cards.update(c.id, {
457 |         listId: c.listId
458 |       });
459 | 
460 |       await this.db.cards.where("id").anyOf(Object.keys(cardIndexes)).modify(c => {
461 |         c.index = cardIndexes[c.id];
462 |       })
463 |     });
464 | 
465 |     this.update();
466 |   }
467 | 
468 |   public async updateLabels(boardId: string, labels: BoardLabel[]): Promise<void> {
469 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
470 | 
471 |     if (boardIndex > -1) {
472 |       this.boards[boardIndex].setLabels(labels);
473 | 
474 |       await this.db.boards.update(boardId, {
475 |         labels
476 |       });
477 |     }
478 | 
479 |     this.update();
480 |   }
481 | 
482 |   private async updateListIndexes(listIndexes: object): Promise<void> {
483 |     await this.db.lists.where("id").anyOf(Object.keys(listIndexes)).modify(l => {
484 |       l.index = listIndexes[l.id];
485 |     });
486 |   }
487 | 
488 |   public async updateListTitle(boardId: string, listId: string, title: string): Promise<void> {
489 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
490 |     
491 |     if (boardIndex > -1) {
492 |       let listIndex: number = this.boards[boardIndex].lists.findIndex(l => l.id === listId); 
493 | 
494 |       if (listIndex > -1) {
495 |         this.boards[boardIndex].lists[listIndex].setTitle(title);
496 | 
497 |         await this.db.lists.update(listId, {
498 |           title
499 |         });
500 |       }
501 |     }
502 | 
503 |     this.update();
504 |   }
505 | 
506 |   public async updateSettings(s: Settings): Promise<void> {
507 |     await this.db.settings.put(s);
508 | 
509 |     this.settings = s;
510 | 
511 |     this.update();
512 |   }
513 | 
514 |   public async updateViewTime(boardId: string): Promise<void> {
515 |     let boardIndex: number = this.boards.findIndex(b => b.id === boardId);
516 |     
517 |     if (boardIndex > -1) {
518 |       let lastViewTime: number = new Date().getTime();
519 |       this.boards[boardIndex].setLastViewTime(lastViewTime);
520 | 
521 |       await this.db.boards.update(boardId, {
522 |         lastViewTime
523 |       });
524 |     }
525 | 
526 |     this.update();
527 |   }
528 | 
529 |   public async zenCards(): Promise<Card[]> {
530 |     let d: Date = new Date();
531 |     d.setHours(23, 59, 59, 999);
532 | 
533 |     let t: any = getTimestamps(d);
534 |     let allBoardsSelected: boolean = this.settings.selectedBoards.includes('all');
535 |     let listFilters: string[]  = this.settings.listFilter.split(',').map(f => f.toLowerCase());
536 | 
537 |     let lists: string[] = this.boards
538 |       .filter(b =>  allBoardsSelected || this.settings.selectedBoards.includes(b.id))
539 |       .map(b => {
540 |         return b.lists
541 |           .filter(l => {
542 |             return listFilters.length === 0 || listFilters.some(filter => l.title.toLowerCase().includes(filter))
543 |           })
544 |           .map(l => l.id)
545 |       })
546 |       .reduce((acc, val) => acc.concat(val), []);
547 | 
548 |     let cards: Card[] = await this.db.cards
549 |       .where('listId')
550 |       .anyOf(lists)
551 |       .filter((c: Card) => {
552 |         if (this.settings.dueFilter === "all") {
553 |           return true;
554 |         } else if (this.settings.dueFilter === "overdue") {
555 |           return c.isComplete && c.due && d.getTime() > c.due;
556 |         } else if (this.settings.dueFilter === "tomorrow") {
557 |           return !c.isComplete && c.due && c.due < t.tomorrow;
558 |         } else if (this.settings.dueFilter === "week") {
559 |           return !c.isComplete && c.due && c.due < t.week;
560 |         } else if (this.settings.dueFilter === "month") {
561 |           return !c.isComplete && c.due && c.due < t.month;
562 |         }
563 |       })
564 |       .toArray();
565 | 
566 |     // sort by due date
567 |     let cardsSortByDueDate = cards.filter(c => c.due && !c.isComplete);
568 |     cardsSortByDueDate.sort((a: Card, b: Card) => {
569 |       return a.due - b.due
570 |     });
571 | 
572 |     let cardsWithOutDueDate = cards.filter(c => c.due === null || c.due === undefined);
573 | 
574 |     // sort by priority
575 |     let cardsSortByPriority = cardsWithOutDueDate.filter(c => c.priority in PRIORITY);
576 |     cardsSortByPriority.sort((a: Card, b: Card) => {
577 |       return a.priority - b.priority
578 |     });
579 | 
580 |     // sort by creation date
581 |     let cardsSortByCreationDate = cardsWithOutDueDate.filter(c => !(c.priority in PRIORITY));
582 |     cardsSortByCreationDate.sort((a: Card, b: Card) => {
583 |       return a.created - b.created
584 |     });
585 | 
586 |     cards = cardsSortByDueDate.concat(cardsSortByPriority, cardsSortByCreationDate);
587 | 
588 |     return cards.slice(0, this.settings.maxCards);
589 |   }
590 | }


--------------------------------------------------------------------------------
/src/routes/Board.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { getContext, onMount } from 'svelte';
 3 |   import { link, push } from 'svelte-spa-router';
 4 | 
 5 |   import ColumnLayout from '../components/column/Layout.svelte';
 6 |   import EditableTitle from '../components/EditableTitle.svelte';
 7 |   import BoardLabel from '../components/BoardLabel.svelte';
 8 |   import SearchPalette from "../components/SearchPalette.svelte";
 9 | 
10 |   import type nimbo from '../nimbo';
11 | 
12 |   export let params = {};
13 | 
14 |   let title: string;
15 |   const nimboStore: Writable<nimbo> = getContext('nimbo');
16 |   
17 |   const updateTitle = async (e: CustomEvent): Promise<void> => {
18 |     $nimboStore.updateBoardTitle($nimboStore.boards[boardIndex].id, e.detail);
19 |     $nimboStore = $nimboStore;
20 |   }
21 | 
22 |   const updateLabels = async (e: CustomEvent): Promise<void> => {
23 |     $nimboStore.updateLabels($nimboStore.boards[boardIndex].id, e.detail);
24 |     $nimboStore = $nimboStore;
25 |   }
26 | 
27 |   let boardIndex: number;
28 | 
29 |   $: { 
30 |     boardIndex = $nimboStore.boards.findIndex(b => b.id === params.boardId);
31 |   }
32 | 
33 |   $: {
34 |     title = boardIndex > -1 ?  $nimboStore.boards[boardIndex].title + " | nimbo" : "Board not found | nimbo";
35 |   }
36 | 
37 |   const handleKeyPress = (e: KeyboardEvent): void => {
38 |     if (!e.target.closest('.flatpickr-calendar')) {
39 |       if (e.code === "Space") {
40 |         $nimboStore.openPalette();
41 |         $nimboStore = $nimboStore;
42 |       } else if (e.key === "h") {
43 |         $nimboStore.closePalette();
44 |         $nimboStore.setSelectedCard(null);
45 |         push("/");
46 |       }
47 |     }
48 |   };
49 | 
50 |   onMount(() => {
51 |     if (boardIndex > -1) {
52 |       $nimboStore.updateViewTime($nimboStore.boards[boardIndex].id);
53 |     }
54 |   });
55 | </script>
56 | 
57 | <svelte:window on:keyup={handleKeyPress} />
58 | 
59 | <SearchPalette />
60 | 
61 | <svelte:head>
62 |   <title>{title}</title>
63 | </svelte:head>
64 | 
65 | <div class="flex flex-col min-h-screen max-h-full h-screen overflow-hidden bg-light-300 dark:bg-dark-300 text-light dark:text-dark">
66 |   {#if boardIndex > -1}
67 |     <div class="flex flex-col p-3 max-h-full">
68 |       <div class="mb-1">
69 |         <EditableTitle content={$nimboStore.boards[boardIndex].title} on:updateTitle={updateTitle} isTitle />
70 |       </div>
71 | 
72 |       <div class="flex space-x-2">
73 |         <BoardLabel on:update={updateLabels} labels={$nimboStore.boards[boardIndex].labels} />
74 |       </div>
75 |     
76 |       <div class="flex flex-col min-h-0 max-h-full w-full mt-2">
77 |         <ColumnLayout boardId={$nimboStore.boards[boardIndex].id} />
78 |       </div>
79 |     </div>
80 |   {:else}
81 |     <div class="flex flex-col p-3 max-h-full">
82 |       <div class="text-center text-2xl mt-6">
83 |         ¯\_(ツ)_/¯
84 |       </div>
85 |       <h1 class="text-center font-bold text-2xl mt-2 mb-4">Board not found</h1>
86 |       <a class="link text-center text-lg" href="/" use:link>View all boards</a>
87 |     </div>
88 |   {/if}
89 | </div>


--------------------------------------------------------------------------------
/src/routes/Card.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |   import { getContext } from "svelte";
 3 |   import { link, push } from "svelte-spa-router";
 4 | 
 5 |   import Editor from "../components/base/Editor.svelte";
 6 |   import ConfirmModal from "../components/ConfirmModal.svelte";
 7 |   import type nimbo from "../nimbo";
 8 |   import type { CardDetails } from "../types";
 9 | 
10 |   export let params = {};
11 | 
12 |   let cardDetails: CardDetails, cd: CardDetails;
13 |   let isConfirmModalOpen: boolean = false;
14 |   let modalMessage: string;
15 |   let onConfirm = () => {};
16 |   let title: string;
17 | 
18 |   const nimboStore: Writable<nimbo> = getContext("nimbo");
19 |   
20 |   const handleUpdate = async (e: CustomEvent): Promise<void> => {
21 |     if (e.detail.card) {
22 |       await $nimboStore.updateCard(e.detail.card, e.detail.property);
23 |     } else {
24 |       await $nimboStore.deleteCard(e.detail.list, e.detail.cardId);
25 |     }
26 | 
27 |     $nimboStore = $nimboStore;
28 |   }
29 | 
30 |   const handleCloseConfirmModal = (): void => {
31 |     isConfirmModalOpen = false;
32 |   };
33 | 
34 |   const handleDeleteEvent = async (e: CustomEvent): Promise<void> => {
35 |     modalMessage = e.detail.message;
36 |     isConfirmModalOpen = true;
37 |     onConfirm = e.detail.onConfirm;
38 |   };
39 | 
40 |   const handleKeyPress = (e: KeyboardEvent): void => {
41 |     if (e.key === "b" && cardDetails) {
42 |       push("/b/" + cardDetails.board.id);
43 |     }
44 |   };
45 | 
46 |   $: {
47 |     cd = $nimboStore.getCardDetails(params.cardId);
48 |     
49 |     if (cd) {
50 |       cardDetails = cd; 
51 |     }
52 |   }
53 | 
54 |   $: {
55 |     title = cardDetails ?  cardDetails.card.title + " | nimbo" : "Card not found | nimbo";
56 |   }
57 | </script>
58 | 
59 | <svelte:head>
60 |   <title>{title}</title>
61 | </svelte:head>
62 | 
63 | <svelte:window on:keyup={handleKeyPress} />
64 | 
65 | <ConfirmModal
66 |   {isConfirmModalOpen}
67 |   {modalMessage}
68 |   {onConfirm}
69 |   on:close={handleCloseConfirmModal} />
70 | 
71 | <div class="min-h-screen h-full bg-light-300 dark:bg-dark-300 text-light dark:text-dark">
72 |   <div class="w-3/4 py-8 mx-auto">
73 |     {#if cardDetails}
74 |       <Editor {cardDetails} inline={false} on:update={handleUpdate} on:delete={handleDeleteEvent} />
75 |     {:else}
76 |       <div class="flex flex-col p-3 max-h-full">
77 |         <div class="text-center text-2xl mt-6">
78 |           ¯\_(ツ)_/¯
79 |         </div>
80 |         <h1 class="text-center font-bold text-2xl mt-2 mb-4">Card not found</h1>
81 |         <a class="link text-center text-lg" href="/" use:link>Go to home</a>
82 |       </div>
83 |     {/if}
84 |   </div>
85 | </div>


--------------------------------------------------------------------------------
/src/routes/Home.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { getContext } from 'svelte';
  3 |   import type { Writable } from 'svelte/store';
  4 |   import { push } from 'svelte-spa-router';
  5 |   import { saveAs } from 'file-saver';
  6 | 
  7 |   import CreateBoard from "../components/CreateBoard.svelte";
  8 |   import ConfirmModal from "../components/ConfirmModal.svelte";
  9 |   import { BOARD_COLORS } from '../types';
 10 | 
 11 |   import type nimbo from '../nimbo';
 12 |   import type { Board } from '../datastore/models';
 13 |   
 14 |   let hideArchivedBoards: boolean = true;
 15 |   let importedDB: FileList;
 16 |   let isOpen: boolean = false;
 17 |   let isConfirmModalOpen: boolean = false;
 18 |   let modalMessage: string;
 19 |   let onConfirm: Function;
 20 | 
 21 |   const nimboStore: Writable<nimbo> = getContext('nimbo');
 22 | 
 23 |   const handleArchiveBoard = (boardId: string): void => {
 24 |     $nimboStore.toggleBoardArchive(boardId);
 25 | 
 26 |     $nimboStore = $nimboStore;
 27 |   }
 28 | 
 29 |   const handleOpenCreateBoard = (e: Event): void => {
 30 |     isOpen = true;
 31 |   }
 32 | 
 33 |   const handleCloseCreateBoard = (e: Event): void => {
 34 |     isOpen = false;
 35 |   }
 36 | 
 37 |   const handleCloseConfirmModal = (e: Event): void => {
 38 |     isConfirmModalOpen = false;
 39 |   }
 40 | 
 41 |   const handleDeleteBoard = (boardId: string): void => {
 42 |     onConfirm = async () => {
 43 |       await $nimboStore.deleteBoard(boardId);
 44 | 
 45 |       $nimboStore = $nimboStore;
 46 |     }
 47 | 
 48 |     modalMessage = "Are you sure you want to delete this board?";
 49 |     isConfirmModalOpen = true;
 50 |   }
 51 | 
 52 |   const handleExportBoards = async (): Promise<void> => {
 53 |     let boards: Blob = await $nimboStore.export();
 54 | 
 55 |     saveAs(boards, `nimbo_${new Date().getTime()}.db`);
 56 |   }
 57 | 
 58 |   const handleImportBoards = async (e: Event): void => {
 59 |     let ok: boolean = await $nimboStore.import(importedDB[0]);
 60 | 
 61 |     if (ok) {
 62 |       window.location.reload();
 63 |     }
 64 |   }
 65 | 
 66 |   const handleImportClick = (): void => {
 67 |     document.querySelector('#import').click();
 68 |   }
 69 | 
 70 |   const handleKeyPress = (e: KeyboardEvent): void => {
 71 |     if (e.key === "z") {
 72 |       push("/zen");
 73 |     }
 74 |   };
 75 | 
 76 |   const handleStarBoard = (boardId: string): void => {
 77 |     $nimboStore.toggleBoardStar(boardId);
 78 | 
 79 |     $nimboStore = $nimboStore;
 80 |   }
 81 | 
 82 |   const handleToggleArchivedBoards = (): void => {
 83 |     hideArchivedBoards = !hideArchivedBoards;
 84 |   }
 85 | 
 86 |   const handleToggleTheme = (): void => {
 87 |     $nimboStore.toggleTheme();
 88 | 
 89 |     $nimboStore = $nimboStore;
 90 |   }
 91 | 
 92 |   $: numArchived = [...$nimboStore.boards].filter(b => b.isArchived).length;
 93 | 
 94 |   $: starred = [...$nimboStore.boards].filter(b => b.isStarred).splice(0, 5);
 95 | 
 96 |   $: recentlyViewed = [...$nimboStore.boards].sort((a: Board, b: Board): number => {
 97 |     return b.lastViewTime - a.lastViewTime
 98 |   }).splice(0, 5);
 99 | 
100 |   $: sortedBoards = [...$nimboStore.boards].filter(b => !b.isArchived || !hideArchivedBoards).sort((a: Board, b: Board): number => {
101 |    return a.title.localeCompare(b.title);
102 |   });
103 | 
104 |   $: importedDB && handleImportBoards();
105 | </script>
106 | 
107 | <svelte:window on:keyup={handleKeyPress} />
108 | 
109 | <svelte:head>
110 |   <title>My Boards | nimbo</title>
111 | </svelte:head>
112 | 
113 | <div class="w-full min-h-screen h-full bg-light-300 dark:bg-dark-300 text-light dark:text-dark">
114 |   <CreateBoard {isOpen} on:close={handleCloseCreateBoard} />
115 |   <ConfirmModal {isConfirmModalOpen} {modalMessage} {onConfirm} on:close={handleCloseConfirmModal} />
116 | 
117 |   <div class="flex p-8">
118 |     <div class="w-1/4 fixed h-full pr-2 overflow-y-auto">
119 |       <h1 class="font-bold text-2xl">My Boards</h1>
120 |       <button class="opacity-75 hover:opacity-100 ml-0.5" on:click={handleToggleArchivedBoards}>
121 |         {#if hideArchivedBoards}
122 |           Show archived boards { numArchived ? `(${numArchived})` : '' }
123 |         {:else}
124 |           Hide archived boards
125 |         {/if}
126 |       </button>
127 |       <div class="flex my-3">
128 |         <input id="import" class="hidden" bind:files={importedDB} type="file" />
129 |         <div>
130 |           <button on:click={handleToggleTheme} class="flex items-center py-1 px-2 rounded text-sm border border-transparent bg-indigo-500 text-white hover:bg-indigo-600 mr-2">
131 |            {#if $nimboStore.settings.theme === 'light'}
132 |               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
133 |               <circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
134 |               </svg>
135 |               Light
136 |             {:else}
137 |               <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
138 |                   <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
139 |                 </svg>
140 |                 Dark
141 |             {/if}
142 |           </button>
143 |         </div>
144 |         <button on:click={handleImportClick} class="flex items-center py-1 px-2 rounded text-sm border border-indigo-500 text-light dark:text-dark hover:bg-indigo-600 hover:text-white dark:hover:text-white mr-2">
145 |           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
146 |             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>
147 |           </svg>
148 |           Import
149 |         </button>
150 |         <button on:click={handleExportBoards} class="flex items-center py-1 px-2 rounded text-sm border border-indigo-500 text-light dark:text-dark hover:bg-indigo-600 hover:text-white dark:hover:text-white mr-2"> 
151 |           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
152 |             <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
153 |           </svg>
154 |           Export
155 |         </button>
156 |       </div>
157 | 
158 |       <div class="mt-4 mb-8">
159 |         <h4 class="flex items-center uppercase opacity-75 text-base font-semibold leading mb-1">
160 |           <span class="mr-2">
161 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
162 |           </span>
163 |           Starred
164 |         </h4>
165 |         <ul class="pr-2">
166 |           {#each starred as s}
167 |             <a on:click={push("/b/" + s.id)} title={s.title} class="block flex hover:bg-light-100 dark:hover:bg-dark-200 p-2 rounded cursor-pointer font-bold">
168 |                 <div class="flex-none h-6 w-6 rounded mr-2" style={"background-color: " + BOARD_COLORS[s.color]}></div>
169 |               <span class="truncate">{s.title}</span>
170 |             </a>
171 |           {/each}
172 |         </ul>
173 |       </div>
174 |       <div>
175 |         <h4 class="flex items-center uppercase opacity-75 text-base font-semibold leading mb-1">
176 |           <span class="mr-2">
177 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
178 |           </span>
179 |           Recently Viewed
180 |         </h4>
181 |         <ul class="pr-2">
182 |           {#each recentlyViewed as r}
183 |             <a on:click={push("/b/" + r.id)} title={r.title} class="block flex hover:bg-light-100 dark:hover:bg-dark-200 p-2 rounded cursor-pointer font-bold">
184 |               <div class="flex-none h-6 w-6 rounded mr-2" style={"background-color: " + BOARD_COLORS[r.color]}></div>
185 |               <span class="truncate">{r.title}</span>
186 |             </a>
187 |           {/each}
188 |         </ul>
189 |       </div>
190 |     </div>
191 |     <div class="w-3/4 h-full" style="margin-left: 25%">
192 |       <ul class="flex flex-wrap max-w-6xl w-full">
193 |         <li on:click={handleOpenCreateBoard} class="p-2 w-60 h-32 opacity-50 hover:opacity-75 flex flex-col justify-center border border-dashed border-light dark:border-dark font-semibold text-xl text-center text-light dark:text-dark rounded ml-4 mb-3 cursor-pointer" tabindex="0">
194 |           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-full"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
195 |           Create a board
196 |         </li>
197 |         {#each sortedBoards as board (board.id)}
198 |           <li title={board.title} class="p-2 w-60 h-32 overflow-hidden text-white font-semibold text-xl rounded ml-4 mb-4 cursor-pointer" style={"background-color: " + BOARD_COLORS[board.color]}>
199 |             <a on:click={e => push('/b/' + board.id)}  class="flex flex-col relative group justify-between h-full">
200 |               {#if board.isArchived}
201 |                 <div class="absolute bg-indigo-500 mt-2 w-28 -mr-10 text-center top-0 right-0 transform rotate-45 text-white text-xs">Archived</div>
202 |               {/if}
203 |               <span class="truncate-2-lines">{board.title}</span>
204 |               <div class="flex bottom-0 pl-1">
205 |                 {#if board.isStarred}
206 |                   <div class="block group-hover:hidden">
207 |                     <button on:click|stopPropagation={e => handleStarBoard(board.id)} class="mr-4 transform ease-in-out hover:scale-150">
208 |                       <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
209 |                     </button>
210 |                   </div>
211 |                 {/if}
212 |                 <div class="hidden group-hover:block">
213 |                   <button title="Star board" on:click|stopPropagation={e => handleStarBoard(board.id)} class="mr-4 transform ease-in-out hover:scale-150">
214 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill={board.isStarred ? "currentColor" : "none" } stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
215 |                   </button>
216 |                   <button title="Archive board" on:click|stopPropagation={e => handleArchiveBoard(board.id)} class="mr-4 transform ease-in-out hover:scale-150">
217 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill={board.isArchived ? "currentColor" : "none" } stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>
218 |                   </button>
219 |                   <button title="Delete board" on:click|stopPropagation={e => handleDeleteBoard(board.id)} class="w-4 h-4 transform ease-in-out hover:scale-150">
220 |                     <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
221 |                   </button>
222 |                 </div>
223 |               </div>
224 |             </a>
225 |           </li>
226 |         {/each}
227 |       </ul>
228 |     </div>
229 |   </div>
230 | </div>


--------------------------------------------------------------------------------
/src/routes/Zen.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |   import { getContext } from 'svelte';
  3 |   import { slide, fly } from 'svelte/transition';
  4 |   import { push } from 'svelte-spa-router';
  5 | 
  6 |   import ConfirmModal from '../components/ConfirmModal.svelte';
  7 |   import InlineEditor from '../components/column/InlineEditor.svelte';
  8 |   import ListCard from '../components/column/ListCard.svelte';
  9 |   import Multiselect from '../components/zen/Multiselect.svelte';
 10 |   import type nimbo from '../nimbo';
 11 |   import type { Board, Card } from '../datastore/models';
 12 |   import { PRIORITY } from '../types';
 13 | 
 14 |   const nimboStore: Writable<nimbo> = getContext('nimbo');
 15 |  
 16 |   let cards: Card[] = [];
 17 |   let isConfirmModalOpen: boolean = false;
 18 |   let modalMessage: string;
 19 |   let onConfirm = () => {};
 20 |   let showFilters: boolean = false;
 21 | 
 22 |   const handleCloseConfirmModal = (): void => {
 23 |     isConfirmModalOpen = false;
 24 |   };
 25 | 
 26 |   const handleBoardFilterUpdate = async (e: CustomEvent): Promise<void> => {
 27 |     settings.selectedBoards = e.detail;
 28 | 
 29 |     await $nimboStore.updateSettings(settings);
 30 |     $nimboStore = $nimboStore;
 31 |   }
 32 | 
 33 |   const handleCardClick = (cardId: string): void => {
 34 |     $nimboStore.setSelectedCard(cardId);
 35 |     $nimboStore = $nimboStore;
 36 |   }
 37 | 
 38 |   const handleCloseEvent = (): void => {
 39 |     $nimboStore.setSelectedCard(null);
 40 |     $nimboStore = $nimboStore;
 41 |   }
 42 | 
 43 |   const handleDeleteEvent = (e: CustomEvent): void => {
 44 |     modalMessage = e.detail.message;
 45 |     isConfirmModalOpen = true;
 46 |     onConfirm = e.detail.onConfirm;
 47 |   };
 48 | 
 49 |   const handleFilterClick = (): void => {
 50 |     showFilters = !showFilters;
 51 |   }
 52 | 
 53 |   const handleKeyPress = (e: KeyboardEvent): void => {
 54 |     if (!e.target.closest('.flatpickr-calendar')) {
 55 |       if (e.key === "h") {
 56 |         $nimboStore.setSelectedCard(null);
 57 |         push("/");
 58 |       }
 59 |     }
 60 |   };
 61 | 
 62 |   const handleListInputBlur = async (e: FocusEvent): void => {
 63 |     settings.listFilter = e.target.value;
 64 | 
 65 |     await $nimboStore.updateSettings(settings);
 66 |     $nimboStore = $nimboStore;
 67 |   }
 68 | 
 69 |   const handleSettingsUpdate = async (key: string, value: any): void => {
 70 |     settings[key] = isNaN(parseInt(value, 10)) ? value : Number(value);
 71 | 
 72 |     await $nimboStore.updateSettings(settings);
 73 |     $nimboStore = $nimboStore;
 74 |   } 
 75 | 
 76 |   const refreshCardList = async (): Promise<void> => {
 77 |     cards = await $nimboStore.zenCards();
 78 |   }
 79 | 
 80 |   const updateTimeTracking = async (e: CustomEvent): Promise<void> => {
 81 |     await $nimboStore.updateCard(e.detail, "log");
 82 |     $nimboStore = $nimboStore;
 83 |   }
 84 | 
 85 |   $: $nimboStore && refreshCardList();
 86 |   $: settings = $nimboStore.settings;
 87 |   $: boards = $nimboStore.boards
 88 |     .filter(b => b.isArchived === false)
 89 |     .map(b => {
 90 |       return {
 91 |         name: b.title,
 92 |         value: b.id
 93 |       }
 94 |     });
 95 | </script>
 96 | 
 97 | <svelte:window on:keyup={handleKeyPress} />
 98 | 
 99 | <svelte:head>
100 |   <title>Zen Mode | nimbo</title>
101 | </svelte:head>
102 | 
103 | <ConfirmModal
104 |   {isConfirmModalOpen}
105 |   {modalMessage}
106 |   {onConfirm}
107 |   on:close={handleCloseConfirmModal} />
108 | 
109 | <div class="flex flex-col min-h-screen h-full justify-center max-h-full bg-light-300 dark:bg-dark-300 text-light dark:text-dark">
110 |   <div class="flex flex-col p-3 h-full max-h-full">
111 |     <div class="flex items-center space-x-4 m-auto">
112 |       <div>
113 |         <div class="flex flex-col p-3 rounded bg-light-200 dark:bg-dark-200">
114 |           <div class="overflow-y-auto flex flex-col space-y-2 h-auto">
115 |             {#if cards.length}
116 |               {#each cards as c}
117 |                 <div class="card-container bg-white hover:bg-light-100-50 dark:bg-dark-100 dark:hover:bg-dark-100-50 rounded-sm w-96" on:click={e => handleCardClick(c.id)}>
118 |                   <ListCard {c} on:trackTime={updateTimeTracking} isFocused={$nimboStore.selectedCardId === c.id} isZen />
119 |                 </div>
120 |               {/each}
121 |             {:else}
122 |               <div class="w-96">
123 |                 No cards to display.
124 |               </div>
125 |             {/if}
126 |           </div>
127 |         </div>
128 |         <div class="flex justify-end text-2xl my-1">
129 |           <button on:click={handleFilterClick} class="flex items-center py-1 px-2 rounded text-sm border border-transparent text-indigo-500">
130 |             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
131 |               <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
132 |             </svg>
133 |             <span class="ml-2">Filter</span>
134 |           </button>
135 |         </div>
136 |         {#if showFilters}
137 |           <div transition:slide class="flex flex-col space-y-4 p-3 border-t border-indigo-500 text-light dark:text-dark my-2">
138 |             <div class="w-96 space-y-2">
139 |               <div class="block">
140 |                 <span>Boards</span>
141 |                 <Multiselect options={boards} selected={settings.selectedBoards} on:update={handleBoardFilterUpdate} />
142 |               </div>
143 |               <div class="block">
144 |                 <span>Lists</span>
145 |                 <input
146 |                   class="bg-white dark:bg-dark-200 inline-block w-full focus:bg-white dark:focus:bg-dark-100 p-1.5 mt-1 rounded-sm border border-transparent focus:border-indigo-500 placeholder-light dark:placeholder-dark"
147 |                   type="text"
148 |                   on:blur={handleListInputBlur}
149 |                   on:keyup|stopPropagation
150 |                   placeholder="Ex. 'pending,todo' etc" />
151 |               </div>
152 |               <label class="block">
153 |                 <span>Due Date</span>
154 |                 <select class="form-select p-1.5 mt-1 bg-white dark:bg-dark-200 border border-light-200 dark:border-transparent w-full" on:change={e => handleSettingsUpdate('dueFilter', e.target.value)} value={settings.dueFilter}>
155 |                   <option value="all">All</option>
156 |                   <option value="overdue">Overdue</option>
157 |                   <option value="tomorrow">Due in the next day</option>
158 |                   <option value="week">Due in the next week</option>
159 |                   <option value="month">Due in the next month</option>
160 |                 </select>
161 |               </label>
162 |               <label class="block">
163 |                 <span>Max cards to display</span>
164 |                 <select class="form-select p-1.5 mt-1 bg-white dark:bg-dark-200 border border-light-200 dark:border-transparent w-full" on:change={e => handleSettingsUpdate('maxCards', e.target.value)} value={settings.maxCards}>
165 |                   <option value={1}>1</option>
166 |                   <option value={3}>3</option>
167 |                   <option value={5}>5</option>
168 |                   <option value={7}>7</option>
169 |                 </select>
170 |               </label>
171 |             </div>
172 |           </div>
173 |         {/if}
174 |       </div>
175 |       {#if $nimboStore.selectedCardId}
176 |         <div transition:fly="{{ x: -100 }}" class="min-h-0 overflow-y-auto max-h-160 w-116">
177 |           <InlineEditor isZen id={$nimboStore.selectedCardId} on:delete={handleDeleteEvent} on:close={handleCloseEvent} />
178 |         </div>
179 |       {/if}
180 |     </div>
181 |   </div>
182 | </div>


--------------------------------------------------------------------------------
/src/routes/index.ts:
--------------------------------------------------------------------------------
 1 | import Board from "./Board.svelte";
 2 | import Card from "./Card.svelte";
 3 | import Home from "./Home.svelte";
 4 | import Zen from "./Zen.svelte";
 5 | 
 6 | export {
 7 |   Board,
 8 |   Card,
 9 |   Home,
10 |   Zen
11 | }


--------------------------------------------------------------------------------
/src/style/TailwindCSS.svelte:
--------------------------------------------------------------------------------
  1 | <style lang="postcss" global>
  2 |   @tailwind base;
  3 |   @tailwind components;
  4 |   @tailwind utilities;
  5 | 
  6 |   html {
  7 |     font-size: 16px;
  8 |   }
  9 | 
 10 |   * {
 11 |     scrollbar-width: thin;
 12 |     scrollbar-color: #707070 #dbdcdd;
 13 |   }
 14 | 
 15 |   .dark * {
 16 |     scrollbar-color: #a5a8a7 #343537;
 17 |   }
 18 | 
 19 |   *::-webkit-scrollbar {
 20 |     width: 12px;
 21 |   }
 22 | 
 23 |   *::-webkit-scrollbar-track {
 24 |     background: #dbdcdd;
 25 |   }
 26 | 
 27 |   *::-webkit-scrollbar-thumb {
 28 |     background-color: #707070;
 29 |     border-radius: 20px;
 30 |     border: 3px solid #dbdcdd;
 31 |   }
 32 | 
 33 |   .dark *::-webkit-scrollbar-track {
 34 |     background: #343537;
 35 |   }
 36 | 
 37 |   .dark *::-webkit-scrollbar-thumb {
 38 |     background-color: #a5a8a7;
 39 |     border-radius: 20px;
 40 |     border: 3px solid #343537;
 41 |   }
 42 | 
 43 |   .link {
 44 |     @apply text-indigo-500 underline font-semibold opacity-100;
 45 |   }
 46 | 
 47 |   .markdown {
 48 |     @apply leading-normal break-words;
 49 |   }
 50 | 
 51 |   .markdown > * + * {
 52 |     @apply mt-0 mb-2;
 53 |   }
 54 | 
 55 |   .markdown li + li {
 56 |     @apply mt-1;
 57 |   }
 58 | 
 59 |   .markdown li > p + p {
 60 |     @apply mt-2;
 61 |   }
 62 | 
 63 |   .markdown strong {
 64 |     @apply font-semibold;
 65 |   }
 66 | 
 67 |   .markdown strong a {
 68 |     @apply font-bold;
 69 |   }
 70 | 
 71 |   .markdown h1 {
 72 |     @apply leading-tight border-b border-indigo-500 text-2xl font-semibold py-2;
 73 |   }
 74 | 
 75 |   .markdown h2 {
 76 |     @apply leading-tight border-b border-indigo-500 text-xl font-semibold py-2;
 77 |   }
 78 | 
 79 |   .markdown h3 {
 80 |     @apply leading-snug text-lg font-semibold py-2;
 81 |   }
 82 | 
 83 |   .markdown h4 {
 84 |     @apply leading-none text-base font-semibold py-2;
 85 |   }
 86 | 
 87 |   .markdown h5 {
 88 |     @apply leading-tight text-sm font-semibold py-2;
 89 |   }
 90 | 
 91 |   .markdown h6 {
 92 |     @apply leading-tight text-sm font-semibold text-gray-600 py-2;
 93 |   }
 94 | 
 95 |   .markdown blockquote {
 96 |     @apply text-base border-l-4 border-indigo-500 px-2 text-gray-600;
 97 |   }
 98 | 
 99 |   .markdown code {
100 |     @apply font-mono text-sm inline bg-gray-200 rounded px-1 py-0.5;
101 |   }
102 | 
103 |   .markdown pre {
104 |     @apply bg-gray-100 rounded p-2;
105 |   }
106 | 
107 |   .markdown pre code {
108 |     @apply block bg-transparent p-0 overflow-visible rounded-none;
109 |   }
110 | 
111 |   .markdown ul {
112 |     @apply text-base pl-8 list-disc;
113 |   }
114 | 
115 |   .markdown ol {
116 |     @apply text-base pl-8 list-decimal;
117 |   }
118 | 
119 |   .markdown kbd {
120 |     @apply text-xs inline-block rounded border px-1 py-0.5 align-middle font-normal font-mono shadow;
121 |   }
122 | 
123 |   .markdown table {
124 |     @apply text-base border-gray-600;
125 |   }
126 | 
127 |   .markdown th {
128 |     @apply border py-1 px-3;
129 |   }
130 | 
131 |   .markdown td {
132 |     @apply border py-1 px-3;
133 |   }
134 | 
135 |   .markdown .highlight pre {
136 |     @apply bg-gray-100 !important;
137 |   }
138 | </style>


--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
 1 | import type { Board, Card, List } from "./datastore/models";
 2 | 
 3 | export const BOARD_COLORS: string[] = [
 4 |   "#DC7684",
 5 |   "#A0C1B8",
 6 |   "#2D7F9D",
 7 |   "#A1B6B4",
 8 |   "#717D84",
 9 |   "#B5A25D",
10 |   "#6B436E",
11 |   "#9A83A3",
12 |   "#737088",
13 |   "#A63D11",
14 |   "#E97140",
15 |   "#818773"
16 | ];
17 | 
18 | export type BoardColor = typeof BOARD_COLORS[number];
19 | 
20 | export type BoardLabel = {
21 |   color: LABEL_COLOR;
22 |   text: string;
23 | }
24 | 
25 | export type CardDetails = {
26 |   board: Board;
27 |   list: List;
28 |   card: Card;
29 | }
30 | 
31 | export type ChecklistItem = {
32 |   text: string;
33 |   checked: boolean;
34 | }
35 | 
36 | export type DueFilterOptions = "all" | "overdue" | "month" | "tomorrow" | "week";
37 | 
38 | export enum PRIORITY {
39 |   P1,
40 |   P2,
41 |   P3,
42 |   P4
43 | }
44 | 
45 | export enum LABEL_COLOR {
46 |   RED,
47 |   ORANGE,
48 |   YELLOW,
49 |   GREEN,
50 |   TEAL,
51 |   BLUE,
52 |   PURPLE
53 | }
54 | 
55 | export enum RESULT_TYPE {
56 |   BOARD,
57 |   CARD
58 | }
59 | 
60 | export type SearchObject = {
61 |   type: RESULT_TYPE;
62 |   text: string;
63 |   path: string;
64 | }
65 | 
66 | export type SortObject = {
67 |   boardId: string,
68 |   from: {
69 |     list: string,
70 |     index: number
71 |   },
72 |   to: {
73 |     list: string,
74 |     index: number
75 |   }
76 | }
77 | 
78 | export type SwapObject = {
79 |   from: number;
80 |   to: number;
81 | }
82 | 
83 | export type TimeEntry = {
84 |   date: number;
85 |   duration: number;
86 | }
87 | 
88 | export type Theme = "dark" | "light";


--------------------------------------------------------------------------------
/src/util/index.ts:
--------------------------------------------------------------------------------
  1 | import { customAlphabet } from 'nanoid';
  2 | 
  3 | const d: Date = new Date();
  4 | const day: number = d.getDate();
  5 | const month: number = d.getMonth();
  6 | const year: number = d.getFullYear();
  7 | 
  8 | const beforeDate = (timestamp: number, when: string): boolean => {
  9 |   let tmpDate = new Date();
 10 | 
 11 |   if (when === 'today') {
 12 |     return timestamp < tmpDate.getTime();
 13 |   } else if (when === 'tomorrow') {
 14 |     tmpDate.setDate(tmpDate.getDate() + 1);
 15 |     return timestamp < tmpDate.getTime();
 16 |   }
 17 | 
 18 |   return false;
 19 | }
 20 | 
 21 | const clickOutside = (node: Node, closeAction: Function): object => {
 22 |   const handleClick = (event: Event) => {
 23 |     let path = event.composedPath();
 24 | 
 25 |     if (!path.includes(node)) {
 26 |       closeAction();
 27 |     }
 28 |   };
 29 | 
 30 |   setTimeout(() => {
 31 |     document.addEventListener("click", handleClick);
 32 |   }, 10);
 33 | 
 34 |   return {
 35 |     destroy() {
 36 |       document.removeEventListener("click", handleClick);
 37 |     },
 38 |   };
 39 | };
 40 | 
 41 | const getTimestamps = (d: Date): object => {
 42 |   let tmp: Date = new Date(d);
 43 |   let timestamps: any = {};
 44 | 
 45 |   tmp.setDate(d.getDate() + 1);
 46 |   timestamps.tomorrow = tmp.getTime();
 47 | 
 48 |   tmp.setDate(d.getDate() + 7);
 49 |   timestamps.week = tmp.getTime();
 50 | 
 51 |   tmp.setDate(d.getDate() + 30);
 52 |   timestamps.month = tmp.getTime();
 53 | 
 54 |   return timestamps;
 55 | }
 56 | 
 57 | const formatDate = (timestamp: number): string => {
 58 |   d.setTime(timestamp);
 59 |   
 60 |   if (
 61 |     d.getDate() === day &&
 62 |     d.getMonth() === month &&
 63 |     d.getFullYear() === year
 64 |   ) {
 65 |     return d.toLocaleString('default', { hour: 'numeric', minute: 'numeric' });
 66 |   } else if (d.getFullYear() == year) {
 67 |     return d.toLocaleString('default', { month: 'short', day: 'numeric' });
 68 |   }
 69 | 
 70 |   return d.toLocaleString('default', { year: 'numeric' });
 71 | }
 72 | 
 73 | const formatForStopwatch = (seconds: number): string => {
 74 |   let hours   = Math.floor(seconds / 3600)
 75 |   let minutes = Math.floor(seconds / 60) % 60
 76 |   seconds = seconds % 60
 77 | 
 78 |   return [hours,minutes,seconds]
 79 |     .map(v => v < 10 ? "0" + v : v)
 80 |     .filter((v,i) => v !== "00" || i > 0)
 81 |     .join(":")
 82 | }
 83 | 
 84 | const formatTime = (seconds: number): string => {
 85 |   let t: string = "";
 86 | 
 87 |   let hrs: number = Math.floor(seconds / 3600);
 88 |   let min: number = Math.floor((seconds % 3600) / 60);
 89 |   let sec: number = seconds % 60;
 90 | 
 91 |   if (hrs) {
 92 |     t += `${hrs}h `;
 93 |   }
 94 | 
 95 |   if (min) {
 96 |     t += `${min}m `;
 97 |   }
 98 | 
 99 |   if (sec) {
100 |     t += `${sec}s`;
101 |   }
102 | 
103 |   return t;
104 | }
105 | 
106 | const nanoid = customAlphabet('2346789ABCDEFGHJKLMNPQRTUVWXYZabcdefghijkmnpqrtwxyz', 10);
107 | 
108 | export {
109 |   beforeDate,
110 |   clickOutside,
111 |   getTimestamps,
112 |   formatDate,
113 |   formatForStopwatch,
114 |   formatTime,
115 |   nanoid
116 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: {
 3 |     mode: 'all',
 4 |     content: [
 5 |       "./src/**/*.svelte"
 6 |     ],
 7 |     options: {
 8 |       defaultExtractor: (content) => {
 9 |         const regExp = new RegExp(/[A-Za-z0-9-_:\./]+/g)
10 |         const matchedTokens = []
11 |         let match = regExp.exec(content)
12 | 
13 |         while (match) {
14 |           if (match[0].startsWith('class:')) {
15 |             matchedTokens.push(match[0].substring(6))
16 |           } else {
17 |             matchedTokens.push(match[0])
18 |           }
19 |           match = regExp.exec(content)
20 |         }
21 |         return matchedTokens
22 |       }
23 |     }
24 |   },
25 |   theme: {
26 |     customForms: theme => ({
27 |       default: {
28 |         checkbox: {
29 |           '&:focus': {
30 |             boxShadow: '0 0 0 3px rgba(102, 126, 234, 0.5)',
31 |             borderColor: theme('colors.indigo.400')
32 |           }
33 |         },
34 |         select: {
35 |           '&:focus': {
36 |             boxShadow: '0 0 0 3px rgba(102, 126, 234, 0.5)',
37 |             borderColor: theme('colors.indigo.400')
38 |           }
39 |         }
40 |       }
41 |     }),
42 |     extend: {
43 |       colors: {
44 |         "dark-100": "#4a4c4d",
45 |         "dark-100-50": "rgba(74, 76, 77, 0.5)",
46 |         "dark-200": "#343537",
47 |         "dark-300": "#1d1f21",
48 |         "dark-300-75": "rgba(29, 31, 33, 0.75)",
49 |         "dark": "#a5a8a7",
50 |         "light-100": "#e7e7e5",
51 |         "light-100-50": "rgba(231, 231, 229, 0.5)",
52 |         "light-200": "#dbdcdd",
53 |         "light-300": "#fafbfd",
54 |         "light": "#707070"
55 |       },
56 |       spacing: {
57 |         '116': '29rem',
58 |         '160': '40rem'
59 |       }
60 |     },
61 |     truncate: {
62 |       lines: {
63 |         2: '2',
64 |         3: '3'
65 |       }
66 |     }
67 |   },
68 |   variants: {
69 |     display: ({ after }) => after(['group-hover']),
70 |   },
71 |   plugins: [
72 |     require('@tailwindcss/custom-forms'),
73 |     require('tailwindcss-truncate-multiline')(),
74 |   ],
75 |   future: {
76 |     removeDeprecatedGapUtilities: true,
77 |   },
78 |   dark: 'class',
79 |   experimental: {
80 |     extendedSpacingScale: true,
81 |     applyComplexClasses: true,
82 |     darkModeVariant: true,
83 |     purgeLayersByDefault: true
84 |   },
85 | }
86 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@tsconfig/svelte/tsconfig.json",
3 | 
4 |   "include": ["src/**/*"],
5 |   "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
6 | }


--------------------------------------------------------------------------------