A few version changes.

New database function to get all tages.
New database function to get like tags.
Added those changes to electron IPC.
Changed list to support all image formats possible.
Added debounce lib for events.
Working on new timechain tags view.

main.js

@@ -1,8 +1,18 @@
 const { app, BrowserWindow } = require('electron')
-require('./src/data/sqlite-electron-ipc');
+const path = require('path')
 
+const here = app.getAppPath()
+console.log('here', here)
 
-let mainWin;
+require('./src/data/sqlite-electron-ipc')
+
+// Preload
+const Sentry = require('@sentry/browser')
+Sentry.init({
+  dsn: 'http://a12d5c5f800b406f8d1c0c5d2ed63a78@216.128.138.128:8000/1'
+})
+
+let mainWin
 
 function createWindow () {
   mainWin = new BrowserWindow({
@@ -13,6 +23,7 @@ function createWindow () {
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
+      preload: path.join(here, 'preload.js')
     },
     nodeIntegration: true
   })
@@ -25,4 +36,3 @@ function createWindow () {
 app.whenReady().then(() => {
   createWindow()
 })
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "time-chain",
-  "version": "1.0.0",
+  "version": "1.1.4",
   "description": "timechain",
   "author": "Jaosn Tudisco",
   "license": "UNLICENSED",
@@ -17,7 +17,7 @@
     "watch": "parcel --dist-dir ./src/dist --target \"jason\" start.js",
     "build-main": "parcel build --dist-dir ./src/dist --target \"jason\" main.js",
     "rebuild": "electron-rebuild -f -w better-sqlite3",
-    "postinstall": "electron-builder install-app-deps"
+    "xxxpostinstall": "electron-builder install-app-deps"
   },
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "targets": {
@@ -29,12 +29,13 @@
     "@parcel/transformer-less": "^2.3.0",
     "@parcel/transformer-sass": "^2.3.0",
     "@riotjs/compiler": "^6.1.3",
-    "@riotjs/parcel-transformer-riot": "^7.0.3",
+    "@riotjs/parcel-transformer-riot": "https://git.ptud.biz/tudisco/parcel-transformer-riot/archive/v8.tar.gz",
     "electron": "^16.0.7",
     "electron-rebuild": "^3.2.7",
     "jest": "^27.4.7",
     "less": "^4.1.2",
-    "parcel": "^2"
+    "parcel": "^2",
+    "standard": "^16.0.4"
   },
   "dependencies": {
     "@sentry/browser": "^6.17.6",
@@ -43,6 +44,8 @@
     "better-sqlite3": "^7.5.0",
     "conf": "^10.1.1",
     "dayjs": "^1.10.7",
+    "debounce": "^1.2.1",
+    "electron-config": "^2.0.0",
     "empty-lite": "^1.2.0",
     "es6-interface": "^3.2.1",
     "hash.js": "^1.1.7",
@@ -50,6 +53,7 @@
     "nanoid": "^3.2.0",
     "pubsub-js": "^1.9.4",
     "riot": "^6.1.2",
-    "sanitize-html": "^2.6.1"
+    "sanitize-html": "^2.6.1",
+    "sweetalert2": "^11.4.8"
   }
 }

preload.js

@@ -0,0 +1,22 @@
+// Preload
+const Sentry = require('@sentry/browser')
+// const { BrowserTracing } require( '@sentry/tracing' )
+
+Sentry.init({
+  dsn: 'http://a12d5c5f800b406f8d1c0c5d2ed63a78@216.128.138.128:8000/1',
+
+  // Alternatively, use `process.env.npm_package_version` for a dynamic release version
+  // if your build tool supports it.
+  release: 'timechain@1.0.0'
+  // integrations: [new BrowserTracing()],
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  // tracesSampleRate: 1.0
+})
+
+window.Sentry = Sentry
+window.Timechain_isElectron = true
+window.Timechain_dbModule = 'sqlite-client'
+window.Timechain_canChooseDbLocation = true

src/data/sqlite-client.js

@@ -32,6 +32,14 @@ class TimeChainDataSqliteTag //extends Interface(InterfaceTag)
         return this.send('has',{tag:tag})
     }
 
+    all(){
+        return this.send('all',{})
+    }
+
+    like(str){
+        return this.send('like',{str:str})
+    }
+
 }
 
 class TimeChainDataSqliteTagLink //extends Interface(InterfaceTagLink)

src/data/sqlite-electron-ipc.js

@@ -1,146 +1,198 @@
-const { ipcMain } = require('electron');
-
-const {app} = require('electron');
+const { ipcMain } = require('electron')
+const { app } = require('electron')
+const path = require('path')
+const fs = require('fs')
 // const config = app.getPath('userData');
 
-const {TimeChainDataSqliteRecord,ConnectToDatabase, TimeChainDataSqliteFile, TimeChainDataSqliteTag, TimeChainDataSqliteTagLink} = require('./sqlite');
+const Config = require('electron-config')
+const config = new Config()
 
+let DBPath = config.get('database.path')
+if (!DBPath) {
+  DBPathDir = app.getPath('userData')
+  DBPath = path.join(DBPathDir, '/timechain.db')
+  config.set('database.path', DBPath)
+}
 
-const appPath = app.getPath('userData');
+const { TimeChainDataSqliteRecord, ConnectToDatabase, TimeChainDataSqliteFile, TimeChainDataSqliteTag, TimeChainDataSqliteTagLink } = require('./sqlite')
 
-const DBPath = appPath+"/timechain.db";
-console.log(DBPath);
+console.log(DBPath)
 
-const DB = ConnectToDatabase(DBPath);
+const DB = ConnectToDatabase(DBPath)
 
-const DbRecord = new TimeChainDataSqliteRecord();
-const DbFile = new TimeChainDataSqliteFile();
-const DbTag = new TimeChainDataSqliteTag();
-const DbTagLink = new TimeChainDataSqliteTagLink();
-//const configDir = app.getPath('userData');
-//const appPath = app.getPath('exe');
+const DbRecord = new TimeChainDataSqliteRecord()
+const DbFile = new TimeChainDataSqliteFile()
+const DbTag = new TimeChainDataSqliteTag()
+const DbTagLink = new TimeChainDataSqliteTagLink()
 
+// ** Extra IPC Functions
 
+ipcMain.handle('select-sqlite-file', (event, arg) => {
+  const { dialog } = require('electron')
+  const files = dialog.showOpenDialog({
+    filters: [{
+      name: 'Sqlite File',
+      extensions: ['db', 'db3']
+    }]
+  })
 
+  if (!files) return false
+  return files
+})
 
-// ** Extra Data
-ipcMain.handle('timechain-config-dir', (event,arg) => {
-    return false;
-});
+ipcMain.handle('create-sqlite-file', (event, arg) => {
+  const { dialog } = require('electron')
+  const files = dialog.showSaveDialogSync({
+    filters: [{
+      name: 'Sqlite File',
+      extensions: ['db', 'db3']
+    }]
+  })
+
+  if (!files) return false
+  return files
+})
+
+/**
+ * Allows the UI to select another database file
+ */
+ipcMain.handle('timechain-database-open', (event, arg) => {
+  if (!arg.filename) return false
+  if (!fs.existsSync(arg.filename)) return false
+  config.set('database.path', arg.filename)
+  app.relaunch()
+  app.quit()
+  // DB = ConnectToDatabase(arg.filename)
+  return true
+})
+
+/**
+ * Allows the UI to create a new database instance
+ */
+ipcMain.handle('timechain-database-create', (event, arg) => {
+  if (!arg.filename) return false
+  console.log('database.path', arg.filename)
+  config.set('database.path', arg.filename)
+  app.relaunch()
+  app.quit()
+  // DB = ConnectToDatabase(arg.filename)
+  return true
+})
 
 // ** RECORD **
-console.log("Register timechain-record");
+console.log('Register timechain-record')
 ipcMain.handle('timechain-record', async (event, arg) => {
-
-    let res = null;
+  let res = null
 
   switch (arg.func) {
     case 'add':
-            res = await DbRecord.add(arg.uuid, arg.timestamp, arg.content, arg.mime, arg.hash);
-            break;
+      res = await DbRecord.add(arg.uuid, arg.timestamp, arg.content, arg.mime, arg.hash)
+      break
     case 'delete':
-            res = await DbRecord.delete(arg.uuid);
-            break;
+      res = await DbRecord.delete(arg.uuid)
+      break
     case 'update':
-            res = await DbRecord.update(arg.uuid,arg.content,arg.mime,arg.hash);
-            break;
+      res = await DbRecord.update(arg.uuid, arg.content, arg.mime, arg.hash)
+      break
     case 'find':
-            res = await DbRecord.find(arg.search,arg.sort,arg.limit,arg.offset);
-            break;
+      res = await DbRecord.find(arg.search, arg.sort, arg.limit, arg.offset)
+      break
     case 'get':
-            res = await DbRecord.get(arg.uuid);
-            break;
+      res = await DbRecord.get(arg.uuid)
+      break
     default:
-            res = new Error('unknown command');
+      res = new Error('unknown command')
   }
 
-    return res;
-
+  return res
 })
 
 // ** FILE **
 
 ipcMain.handle('timechain-file', async (event, arg) => {
-    let res = null;
+  let res = null
 
   switch (arg.func) {
     case 'add':
-            res = await DbFile.add(arg.uuid_record,arg.uuid,arg.timestamp,arg.content,arg.mime,arg.hash);
-            break;
+      res = await DbFile.add(arg.uuid_record, arg.uuid, arg.timestamp, arg.content, arg.mime, arg.hash)
+      break
     case 'update':
-            res = await DbFile.update(arg.uuid,arg.timestamp,arg.content,arg.mime,arg.hash);
-            break;
+      res = await DbFile.update(arg.uuid, arg.timestamp, arg.content, arg.mime, arg.hash)
+      break
     case 'get-record':
-            res = await DbFile.getByRecord(arg.uuid_record);
-            break;
+      res = await DbFile.getByRecord(arg.uuid_record)
+      break
     case 'delete-record':
-            res = await DbFile.deleteRecord(arg.uuid_record);
-            break;
+      res = await DbFile.deleteRecord(arg.uuid_record)
+      break
     case 'get':
-            res = await DbFile.get(arg.uuid);
-            break;
+      res = await DbFile.get(arg.uuid)
+      break
     case 'delete':
-            res = await DbFile.delete(arg.uuid);
-            break;
+      res = await DbFile.delete(arg.uuid)
+      break
     default:
-            res = new Error('Unknow a command');
+      res = new Error('Unknow a command')
   }
 
-    return res;
-});
+  return res
+})
 
 // ** TAG **
 
 ipcMain.handle('timechain-tag', async (event, arg) => {
-
-    let res = null;
+  let res = null
 
   switch (arg.func) {
     case 'add':
-            res = await DbTag.add(arg.tag);
-            break;
+      res = await DbTag.add(arg.tag)
+      break
     case 'delete':
-            res = await DbTag.delete(arg.tag);
-            break;
+      res = await DbTag.delete(arg.tag)
+      break
     case 'has':
-            res = await DbTag.delete(arg.tag);
+      res = await DbTag.delete(arg.tag)
+      break
+    case 'all':
+      res = await DbTag.all()
+      break;
+    case 'like':
+      res = await DbTag.like(arg.str)
       break;  
     default:
-            res = new Error('Command Unknown');
+      res = new Error('Command Unknown')
   }
 
-    return res;
-
-});
+  return res
+})
 
 // TAG LINK
 
 ipcMain.handle('timechain-taglink', async (event, arg) => {
-
-    let res = null;
+  let res = null
 
   switch (arg.func) {
     case 'add':
       res = await DbTagLink.add(arg.uuid, arg.tag)
-            break;
+      break
     case 'delete':
-            res = await DbTagLink.delete(arg.uuid,arg.tag);
-            break;
+      res = await DbTagLink.delete(arg.uuid, arg.tag)
+      break
     case 'delete-tag':
-            res = await DbTagLink.deleteTag(arg.tag);
-            break;
+      res = await DbTagLink.deleteTag(arg.tag)
+      break
     case 'delete-record':
-            res = await DbTagLink.deleteRecord(arg.uuid);
-            break;
+      res = await DbTagLink.deleteRecord(arg.uuid)
+      break
     case 'get-records':
-            res = await DbTagLink.getRecords(atg.tag);
-            break;
+      res = await DbTagLink.getRecords(atg.tag)
+      break
     case 'get-tags':
-            res = await DbTagLink.getTags(atg.uuid);
-            break;
+      res = await DbTagLink.getTags(atg.uuid)
+      break
     default:
-            res = Error("Commande not known");
+      res = Error('Commande not known')
   }
 
-    return res;
-});
+  return res
+})

src/data/sqlite.js

@@ -1,111 +1,140 @@
-const Interface = require("es6-interface");
-const {InterfaceRecord,InterfaceFile,InterfaceTag,InterfaceTagLink} = require("./interfaces");
+const Interface = require('es6-interface')
+const { InterfaceRecord, InterfaceFile, InterfaceTag, InterfaceTagLink } = require('./interfaces')
+const Database = require('better-sqlite3')
 
-let db = null;
+let db = null
 
 const ConnectToDatabase = (path) => {
-    db = require('better-sqlite3')(path, {});
-    return db;
+  if (db) {
+    db.close()
+    db = null
+  }
+  db = new Database(path, {})
+  return db
 }
 
 class TimeChainDataSqliteTag extends Interface(InterfaceTag) {
-
   constructor () {
-        super();
+    super()
     const table = `CREATE TABLE IF NOT EXISTS "tags" (
             "tag"   TEXT UNIQUE,
             "created_at"    INTEGER NOT NULL,
             "updated_at"    INTEGER NOT NULL,
             PRIMARY KEY("tag")
-        );`;
+        );`
 
-        const table_idx = ``;
+    const table_idx = ''
 
     if (!db) {
-            throw new Error("Database is not connected");
+      throw new Error('Database is not connected')
     }
 
-
-        db.exec(table + "\n" + table_idx);
-        this.db = db;
+    db.exec(table + '\n' + table_idx)
+    this.db = db
   }
 
   get table_add () {
     if (!this._table_add) {
-            this._table_add = db.prepare("INSERT INTO tags (tag,created_at,updated_at) VALUES (?,?,?)");
+      this._table_add = db.prepare('INSERT INTO tags (tag,created_at,updated_at) VALUES (?,?,?)')
     }
-        return this._table_add;
+    return this._table_add
   }
 
   get table_delete () {
     if (!this._table_delete) {
-            this._table_delete = db.prepare("DELETE FROM tags WHERE tag = ?");
+      this._table_delete = db.prepare('DELETE FROM tags WHERE tag = ?')
     }
-        return this._table_delete;
+    return this._table_delete
   }
 
   get table_get () {
     if (!this._table_get) {
-            this._table_get = db.prepare("SELECT * FROM tags WHERE tag = ?");
+      this._table_get = db.prepare('SELECT * FROM tags WHERE tag = ?')
     }
-        return this._table_get;
+    return this._table_get
+  }
+
+  get table_get_like () {
+    if (!this._table_get) {
+      this._table_get = db.prepare('SELECT * FROM tags WHERE tag LIKE ?')
+    }
+    return this._table_get
+  }
+
+  get table_get_all() {
+    if (!this._table_get_all) {
+      this._table_get_all = db.prepare('SELECT * FROM tags')
+    }
+    return this._table_get_all
   }
 
   get table_count () {
     if (!this._table_count) {
-            this._table_count = db.prepare("SELECT count(tag) as cnt FROM tags WHERE tag = ?");
+      this._table_count = db.prepare('SELECT count(tag) as cnt FROM tags WHERE tag = ?')
     }
-        return this._table_count;
+    return this._table_count
   }
 
   add (tag) {
     return new Promise(resolve => {
       this.has(tag).then(cnt => {
         if (cnt) {
-                    return resolve(1);
+          return resolve(1)
         } else {
-                    const dt = Math.floor(Date.now());
-                    const res = this.table_add.run(tag,dt,dt);
-                    return resolve(res?.changes);
+          const dt = Math.floor(Date.now())
+          const res = this.table_add.run(tag, dt, dt)
+          return resolve(res?.changes)
         }
-            });
-        });
+      })
+    })
+  }
+
+  all() {
+    return new Promise(resolve => {
+      const res = this.table_get_all.all();
+      return resolve(res);
+    })
+  }
+
+  like(str){
+    return new Promise(resolve => {
+      const res = this.table_get_like.all(str + '%');
+      return resolve(res);
+    })
   }
 
   delete (tag) {
     return new Promise(resolve => {
-            const dt = Math.floor(Date.now());
-            const res = this.table_delete.run(tag);
-            return resolve(res?.changes);
-        });
+      const dt = Math.floor(Date.now())
+      const res = this.table_delete.run(tag)
+      return resolve(res?.changes)
+    })
   }
 
   get (tag) {
     return new Promise(resolve => {
-            const res = this.table_get.get(tag);
-            return resolve(res);
-        });
+      const res = this.table_get.get(tag)
+      return resolve(res)
+    })
   }
 
   has (tag) {
     return new Promise(resolve => {
-            const res = this.table_count.get(tag);
-            return resolve(res && res.cnt>0);
-        });
+      const res = this.table_count.get(tag)
+      return resolve(res && res.cnt > 0)
+    })
   }
-
 }
 
 class TimeChainDataSqliteTagLink extends Interface(InterfaceTagLink) {
-
   constructor () {
-        super();
+    super()
 
     this.table = `CREATE TABLE IF NOT EXISTS "taglink" (
             "uuid"  TEXT NOT NULL,
             "tag"   TEXT NOT NULL,
             "created_at"    INTEGER NOT NULL
-        );`;
+        );`
     this.table_idx = `
         CREATE INDEX IF NOT EXISTS "uuid_idx" ON "taglink" (
             "uuid"
@@ -113,108 +142,107 @@ class TimeChainDataSqliteTagLink extends Interface(InterfaceTagLink) {
         CREATE INDEX IF NOT EXISTS "tag_idx" ON "taglink" (
             "tag"
         );
-        `;
+        `
 
-        db.exec(this.table + "\n" + this.table_idx);
-        this.db = db;
+    db.exec(this.table + '\n' + this.table_idx)
+    this.db = db
   }
 
   get table_add () {
     if (!this._table_add) {
-            this._table_add = db.prepare('INSERT INTO taglink (uuid,tag,created_at) VALUES (?,?,?)');
+      this._table_add = db.prepare('INSERT INTO taglink (uuid,tag,created_at) VALUES (?,?,?)')
     }
-        return this._table_add;
+    return this._table_add
   }
 
   get table_delete () {
     if (!this._table_delete) {
-            this._table_delete = db.prepare('DELETE FROM taglink WHERE uuid=? AND tag=?');
+      this._table_delete = db.prepare('DELETE FROM taglink WHERE uuid=? AND tag=?')
     }
-        return this._table_delete;
+    return this._table_delete
   }
 
   get table_delete_tag () {
     if (!this._table_delete_tag) {
-            this._table_delete_tag = db.prepare('DELETE FROM taglink WHERE tag=?');
+      this._table_delete_tag = db.prepare('DELETE FROM taglink WHERE tag=?')
     }
-        return this._table_delete_tag;
+    return this._table_delete_tag
   }
 
   get table_delete_record () {
     if (!this._table_delete_record) {
-            this._table_delete_record = db.prepare('DELETE FROM taglink WHERE uuid=?');
+      this._table_delete_record = db.prepare('DELETE FROM taglink WHERE uuid=?')
     }
-        return this._table_delete_record;
+    return this._table_delete_record
   }
 
   get table_get_records () {
     if (!this._table_get_records) {
-            this._table_get_records = db.prepare("SELECT * FROM taglink WHERE tag=?");
+      this._table_get_records = db.prepare('SELECT * FROM taglink WHERE tag=?')
     }
-        return this._table_get_records;
+    return this._table_get_records
   }
 
   get table_get_tags () {
     if (!this._table_get_tags) {
-            this._table_get_tags = db.prepare("SELECT * FROM taglink WHERE uuid=?");
+      this._table_get_tags = db.prepare('SELECT * FROM taglink WHERE uuid=?')
     }
-        return this._table_get_tags;
+    return this._table_get_tags
   }
 
   add (uuid, tag) {
     return new Promise(resolve => {
-            const prepare = this.table_add;
-            const dt = Math.floor(Date.now());
-            const res = prepare.run(uuid,tag,dt);
-            return resolve(res?.changes);
-        });
+      const prepare = this.table_add
+      const dt = Math.floor(Date.now())
+      const res = prepare.run(uuid, tag, dt)
+      return resolve(res?.changes)
+    })
   }
 
   delete (uuid, tag) {
     return new Promise(resolve => {
-            const prepare = this.table_delete;
-            const res = prepare.run(uuid,tag);
-            return resolve(res?.changes);
-        });
+      const prepare = this.table_delete
+      const res = prepare.run(uuid, tag)
+      return resolve(res?.changes)
+    })
   }
 
   deleteTag (tag) {
     return new Promise(resolve => {
-            const prepare = this.table_delete_tag;
-            const res = prepare.run(tag);
-            return resolve(res?.changes);
-        });
+      const prepare = this.table_delete_tag
+      const res = prepare.run(tag)
+      return resolve(res?.changes)
+    })
   }
 
   deleteRecord (uuid) {
     return new Promise(resolve => {
-            const prepare = this.table_delete_record;
-            const res = prepare.run(uuid);
-            return resolve(res?.changes);
-        });
+      const prepare = this.table_delete_record
+      const res = prepare.run(uuid)
+      return resolve(res?.changes)
+    })
   }
 
   getRecords (tag) {
     return new Promise(resolve => {
-            const prepare = this.table_get_records;
-            const res = prepare.all(tag);
-            return resolve(res);
+      const prepare = this.table_get_records
+      const res = prepare.all(tag)
+      return resolve(res)
     })
   }
 
   getTags (uuid) {
     return new Promise(resolve => {
-            const prepare = this.table_get_tags;
-            const res = prepare.all(uuid);
-            return resolve(res);
+      const prepare = this.table_get_tags
+      const res = prepare.all(uuid)
+      return resolve(res)
     })
   }
 }
 
 class TimeChainDataSqliteFile extends Interface(InterfaceFile) {
-
   constructor () {
-        super();
+    super()
     const table = `CREATE TABLE IF NOT EXISTS "files" (
             "uuid"  TEXT UNIQUE,
             "uuid_record"   TEXT NOT NULL,
@@ -225,116 +253,114 @@ class TimeChainDataSqliteFile extends Interface(InterfaceFile) {
             "created_at"    INTEGER NOT NULL,
             "updated_at"    INTEGER NOT NULL,
             PRIMARY KEY("uuid")
-        );`;
+        );`
     const table_idx = `
         CREATE INDEX IF NOT EXISTS "files_idx_record" ON "files" (
             "uuid_record"
         );
         CREATE INDEX IF NOT EXISTS "files_idx_time" ON "files" (
             "timestamp" DESC
-        );`;
+        );`
 
     if (!db) {
-            throw new Error("Database is not connected");
+      throw new Error('Database is not connected')
     }
 
-        db.exec(table + "\n" + table_idx);
-        this.db = db;
+    db.exec(table + '\n' + table_idx)
+    this.db = db
   }
 
   get table_insert () {
     if (!this._table_insert) {
-            this._table_insert = db.prepare(`INSERT INTO files (uuid,uuid_record,timestamp,content,mime,hash,created_at,updated_at) VALUES (?,?,?,?,?,?,?,?)`);
+      this._table_insert = db.prepare('INSERT INTO files (uuid,uuid_record,timestamp,content,mime,hash,created_at,updated_at) VALUES (?,?,?,?,?,?,?,?)')
     }
-        return this._table_insert;
+    return this._table_insert
   }
 
   get table_update () {
     if (!this._table_update) {
-            this._table_update = db.prepare(`UPDATE files SET timestamp = ?, content = ?, mime = ? hash = ?, updated_at = ? WHERE uuid = ?`);
+      this._table_update = db.prepare('UPDATE files SET timestamp = ?, content = ?, mime = ? hash = ?, updated_at = ? WHERE uuid = ?')
     }
-        return this._table_update;
+    return this._table_update
   }
 
   get table_delete () {
     if (!this._table_delete) {
-            this._table_delete = db.prepare(`DELETE FROM files WHERE uuid = ?`);
+      this._table_delete = db.prepare('DELETE FROM files WHERE uuid = ?')
     }
-        return this._table_delete;
+    return this._table_delete
   }
 
   get table_delete_record () {
-        
     if (!this._table_delete_record) {
-            this._table_delete_record = db.prepare(`DELETE FROM files WHERE uuid_record = ?`);
+      this._table_delete_record = db.prepare('DELETE FROM files WHERE uuid_record = ?')
     }
 
-        return this._table_delete_record;
+    return this._table_delete_record
   }
 
   get table_find_one () {
     if (!this._table_find_one) {
-            this._table_find_one = db.prepare(`SELECT * FROM files WHERE uuid = ?`);
+      this._table_find_one = db.prepare('SELECT * FROM files WHERE uuid = ?')
     }
-        return this._table_find_one;
+    return this._table_find_one
   }
 
   get table_find_record () {
     if (!this._table_find_record) {
-            this._table_find_record = db.prepare(`SELECT * FROM files WHERE uuid_record = ?`);
+      this._table_find_record = db.prepare('SELECT * FROM files WHERE uuid_record = ?')
     }
-        return this._table_find_record;
+    return this._table_find_record
   }
 
   add (uuid_record, uuid, timestamp, content, mime, hash) {
     return new Promise(resolve => {
-            const dt = Math.floor(Date.now());
-            const res = this.table_insert.run(uuid,uuid_record,timestamp,content,mime,hash,dt,dt);
-            return resolve(res?.changes);
-        });
+      const dt = Math.floor(Date.now())
+      const res = this.table_insert.run(uuid, uuid_record, timestamp, content, mime, hash, dt, dt)
+      return resolve(res?.changes)
+    })
   }
 
   getByRecord (uuid_record) {
     return new Promise(resolve => {
-            const res = this.table_find_record.get(uuid_record);
-            return resolve(res);
-        });
+      const res = this.table_find_record.get(uuid_record)
+      return resolve(res)
+    })
   }
 
   get (uuid) {
     return new Promise(resolve => {
-            const res = this.table_find_one.get(uuid);
-            return resolve(res);
-        });
+      const res = this.table_find_one.get(uuid)
+      return resolve(res)
+    })
   }
 
   delete (uuid) {
     return new Promise(resolve => {
-            const prepare = this.table_delete;
-            const res = prepare.run(uuid);
-            return resolve(res?.changes);
+      const prepare = this.table_delete
+      const res = prepare.run(uuid)
+      return resolve(res?.changes)
     })
   }
 
   deleteRecord (uuid_record) {
     return new Promise(resolve => {
-            const res = this.table_delete_record.run(uuid_record);
-            return resolve(res?.changes);
+      const res = this.table_delete_record.run(uuid_record)
+      return resolve(res?.changes)
     })
   }
 
   update (uuid, timestamp, content, mime, hash) {
     return new Promise(resolve => {
-            const res = this.table_update.run(timestamp,content,mime,hash,uuid);
-            return resolve(res?.changes);
+      const res = this.table_update.run(timestamp, content, mime, hash, uuid)
+      return resolve(res?.changes)
     })
   }
 }
 
 class TimeChainDataSqliteRecord extends Interface(InterfaceRecord) {
-    
   constructor () {
-        super();
+    super()
     // TODO: Create Tables Here if not exist
     const table = `CREATE TABLE IF NOT EXISTS "records" (
             "uuid"  TEXT NOT NULL UNIQUE,
@@ -345,113 +371,182 @@ class TimeChainDataSqliteRecord extends Interface(InterfaceRecord) {
             "created_at"    INTEGER NOT NULL,
             "updated_at"    INTEGER NOT NULL,
             PRIMARY KEY("uuid")
-        );`;
+        );`
     const table_idx = `CREATE INDEX IF NOT EXISTS "records_idx_timestamp" ON "records" (
             "timestamp" DESC
         );`
 
     if (!db) {
-            throw new Error("Database is not connected");
+      throw new Error('Database is not connected')
     }
 
-        db.exec(table + "\n" + table_idx);
-        this.db = db;
+    db.exec(table + '\n' + table_idx)
+    this.db = db
   }
 
   get table_insert () {
     if (!this._table_insert) {
-            this._table_insert = db.prepare(`INSERT INTO records (uuid,timestamp,content,mime,hash,created_at,updated_at) VALUES (?,?,?,?,?,?,?)`);
+      this._table_insert = db.prepare('INSERT INTO records (uuid,timestamp,content,mime,hash,created_at,updated_at) VALUES (?,?,?,?,?,?,?)')
     }
-        return this._table_insert;
+    return this._table_insert
   }
 
   get table_update () {
     if (!this._table_update) {
-            this._table_update = db.prepare(`UPDATE records SET timestamp = ?, content = ?, mime = ?, hash = ? updated_at = ? WHERE uuid = ?`);
+      this._table_update = db.prepare('UPDATE records SET timestamp = ?, content = ?, mime = ?, hash = ? updated_at = ? WHERE uuid = ?')
     }
-        return this._table_update;
+    return this._table_update
   }
 
   get table_delete () {
     if (!this._table_delete) {
-            this._table_delete = db.prepare(`DELETE FROM records WHERE uuid = ?`);
+      this._table_delete = db.prepare('DELETE FROM records WHERE uuid = ?')
     }
-        return this._table_delete;
+    return this._table_delete
   }
 
   get table_fine_one () {
     if (!this._table_fine_one) {
-            this._table_fine_one = db.prepare(`SELECT * FROM records WHERE uuid = ?`);
+      this._table_fine_one = db.prepare('SELECT * FROM records WHERE uuid = ?')
     }
-        return this._table_fine_one;
+    return this._table_fine_one
   }
 
   get table_find () {
     if (!this._table_find) {
       this._table_find = db.prepare(`
-                select records.*, GROUP_CONCAT(taglink.tag,',') AS tags
+                select records.*,
+                    (SELECT GROUP_CONCAT(tag,',') FROM taglink WHERE taglink.uuid = records.uuid) as tags
+                from records
+                order by records.timestamp DESC
+                limit ? offset ?
+            `)
+    }
+
+    return this._table_find
+  }
+
+  generator_find_sql (tags) {
+      let query = `
+          select records.*, 
+          (SELECT GROUP_CONCAT(tag,',') FROM taglink WHERE taglink.uuid = records.uuid) as tags
           from records
           left join taglink on (taglink.uuid = records.uuid)
+          {where}
           group by records.uuid
           order by records.timestamp DESC
           limit ? offset ?
-            `);
+      `;
+
+      const where = [];
+
+      tags.forEach(tag => {
+
+        if( tag.indexOf(':') != -1 ){
+          //Skip Filter
+          const parts = tag.split(':');
+          const cmd = parts[0];
+
+          const dayjs = require('dayjs');
+
+          switch (cmd){
+            case 'before':
+              const time_before = Math.floor(dayjs(parts[1]).toDate().getTime());
+              where.push(`records.timestamp < ${time_before}`);
+              break;
+            case 'after':
+              const time_after = Math.floor(dayjs(parts[1]).toDate().getTime());
+              where.push(`records.timestamp > ${time_after}`);
+              break;
           }
 
-        return this._table_find;
+        }else{
+          let cleantag = tag.replace(/\'/g,"''");
+          where.push(`taglink.tag = '${cleantag}'`);
+        }
+
+      });
+
+      let where_string = "WHERE " + where.join(" AND ");
+
+      query = query.replace('{where}', where_string);
+
+      console.log(query);
+
+      return db.prepare(query);
+
   }
 
   add (uuid, timestamp, content, mime, hash) {
     return new Promise(resolve => {
-            const dt = Math.floor(Date.now());
-            const res = this.table_insert.run(uuid,timestamp,content,mime,hash,dt,dt);
-            return resolve(res?.changes);
-        });
+      const dt = Math.floor(Date.now())
+      const res = this.table_insert.run(uuid, timestamp, content, mime, hash, dt, dt)
+      return resolve(res?.changes)
+    })
   }
 
   get (uuid) {
     return new Promise(resolve => {
-            const rec = this.table_fine_one.get(uuid);
-            return resolve(rec);
-        });
+      const rec = this.table_fine_one.get(uuid)
+      return resolve(rec)
+    })
   }
 
   find (search, sort = null, limit = undefined, offset = 0) {
     // TODO: add logic for seach and sort (Currently does nothing)
     return new Promise(resolve => {
-            const prepare = this.table_find;
 
-            const res = prepare.all(100,0);
+      if(!search || !search.tags || Object.keys(search.tags).length === 0){
+        const prepare = this.table_find
+
+        const res = prepare.all(100, 0)
 
         // TODO: add count here
-            const rescount = {cnt:100};
+        const rescount = { cnt: 100 }
 
         return resolve({
           data: res,
           count: rescount?.cnt,
           limit: limit,
           offset: offset
-            });
+        })
 
-        });
+      }else{
+
+        console.log(search);
+
+        const prepare = this.generator_find_sql(search.tags);
+        const res = prepare.all(100, 0)
+        const rescount = { cnt: 100 }
+        return resolve({
+          data: res,
+          count: rescount?.cnt,
+          limit: limit,
+          offset: offset
+        })
+
+
+      }
+
+
+    })
   }
 
   delete (uuid) {
     return new Promise(resolve => {
-            const prepare = this.table_delete;
-            const res = prepare.run(uuid);
-            return resolve(res?.changes);
-        });
+      const prepare = this.table_delete
+      const res = prepare.run(uuid)
+      return resolve(res?.changes)
+    })
   }
 
   update (uuid, content, mime, hash) {
     return new Promise(resolve => {
-            const dt = Math.floor(Date.now());
-            const res = this.table_update.run(content,mime,hash,dt,uuid);
-            return resolve(res?.changes);
+      const dt = Math.floor(Date.now())
+      const res = this.table_update.run(content, mime, hash, dt, uuid)
+      return resolve(res?.changes)
     })
   }
-
 }
 
 class TimeChainDataSqlite {
@@ -466,6 +561,3 @@ module.exports = {
   TimeChainDataSqliteTagLink,
   TimeChainDataSqliteTag
 }
-
-
-

src/lib/toast.js

@@ -0,0 +1,15 @@
+import Swal from 'sweetalert2'
+
+const Toast = Swal.mixin({
+    toast: true,
+    position: 'top-end',
+    showConfirmButton: false,
+    timer: 3000,
+    timerProgressBar: true,
+    didOpen: (toast) => {
+        toast.addEventListener('mouseenter', Swal.stopTimer)
+        toast.addEventListener('mouseleave', Swal.resumeTimer)
+    }
+});
+
+module.exports = {Toast};

src/ui/app.riot

@@ -13,6 +13,12 @@
 		import TimechainInput from './timechain-input.riot'
 		import TimechainList from './timechain-list.riot'
 		import AppDivider from './app-divider.riot'
+		import keymage from 'keymage';
+		import pubsub from 'pubsub-js';
+
+		if(window.Timechain_isElectron){
+			const { ipcRenderer } = window.require('electron')
+		}
 
 		export default {
 			components: {
@@ -20,7 +26,103 @@
 				TimechainInput,
 				TimechainList,
 				AppDivider
+			},
+			onBeforeMount(){
+				console.log('Init');
+			},
+			onMounted(){
+
+				console.log("Application Mounted");
+
+				if(window.Timechain_isElectron){
+					console.log("Is Electron");
+					this.setupElectronKeyEvents();
+				}else{
+					console.log("Is Browser");
 				}
+
+			},
+			setupElectronKeyEvents(){
+				const kevents = [];
+				kevents.push( keymage('ctrl-o', this.onElectronOpenDatabase.bind(this)) );
+				kevents.push( keymage('ctrl-n', this.onElectronCreateDatabase.bind(this)) );
+
+				this._keyEvents = kevents;
+			},
+			async onElectronOpenDatabase(){
+				const file = await ipcRenderer.invoke('select-sqlite-file',{});
+				console.log(file)
+				
+				const filepath = (file && file.filePaths) ? file.filePaths[0] : false;
+				console.log(filepath);
+
+				if(!filepath){
+					return alert("Could not load file. Filename not provided.")
+				}
+
+				console.log("Loading new database");
+				const loaded = await ipcRenderer.invoke('timechain-database-open',{filename:filepath});
+
+				if(!loaded){
+					return alert("Database loading failed");
+				}else{
+					console.log("%c Database Reloaded","background-color:red;color:white;");
+					pubsub.publish('database-reloaded',true);
+				}
+
+			},
+			async onElectronCreateDatabase(){
+
+				console.log("Create Datbase Event");
+
+				const file = await ipcRenderer.invoke('create-sqlite-file',{});
+				console.log("Returned")
+				console.log(file);
+
+				//const filepath = (file && file.filePaths) ? file.filePaths[0] : false;
+				//console.log(filepath);
+
+				const filepath = file;
+
+				if(!filepath){
+					console.warn("No file name");
+					return alert("Could not create file. Filename not provided.",filepath);
+				}else{
+					console.log("We have a file name.. Time to make db");
+				}
+
+				console.log("Creating new database")
+
+				const loaded = await ipcRenderer.invoke('timechain-database-create',{filename:filepath});
+
+				if(!loaded){
+					return alert("Database not created");
+				}else{
+					console.log("%c Database Created","background-color:red;color:white;");
+					pubsub.publish('database-reloaded', true);
+				}
+			}
+			/*onElectronCreateDatabaseOld(){
+				return ipcRenderer.invoke('select-sqlite-file',{}).then(file=>{
+					console.log(file)
+					const filepath = (file && file.filePaths) ? file.filePaths[0] : false;
+					console.log(filepath);
+					if(!filepath){
+						return alert("Could not load file. Filename not provided.")
+
+						return ipcRenderer.invoke('timechain-database-open',{}).then(success=>{
+							console.log("DB RETURNED");
+							if(success){
+								console.log("%c Database Reloaded","background-color:red;color:white;");
+								pubsub.publish('database-reloaded',true);
+							}else{
+								console.log("Database loading failed");
+							}
+							return success;
+						})
+					}
+				});
+			}*/
 		}
 
 	</script>

src/ui/timechain-input.riot

@@ -54,6 +54,10 @@
 			onMounted(){
 				document.addEventListener('paste', this.pasteEvent.bind(this));
 
+				this.event_dbreloaded = pubsub.subscribe('database-reloaded', (event,res)=>{
+					pubsub.publish('timechain-list-update', true);
+				})
+
 				this.setupKeyEvents();
 			},
 			/**
@@ -86,6 +90,7 @@
 				this._keyevents.forEach(f=>{
 					f();
 				});
+				pubsub.unsubscribe(this.event_dbreloaded);
 			},
 			/**
 			 * Window paste event has been fire.
@@ -121,8 +126,11 @@
 							break;
 						}else if(t == 'image/png'){
 							isFile = true;
-							this.isIMAGE(e.clipboardData.items[i], 'image/png')
+							this.isIMAGE(e.clipboardData.items[i], 'image/png');
 							break;
+						}else if(t == 'image/gif'){
+							isFile = true;
+							this.isIMAGE(e.clipboardData.items[i], 'image/gif');
 						}
 					}
 

src/ui/timechain-item-menu.riot

@@ -0,0 +1,17 @@
+<timechain-item-menu>
+
+    <div id="context-menu">
+        <div class="item">Copy to Clipboard</div>
+    </div>
+
+    <script>
+
+        export default {
+
+
+
+        }
+
+    </script>
+
+</timechain-item-menu>

src/ui/timechain-list.riot

@@ -1,16 +1,22 @@
 <timechain-list>
 
+	<div class="search-row">
+		<div class="search-tag">
+			<timechain-tag ontag="{onTags}" />
+		</div>
+	</div>
+
 	<div class="top-gradient"></div>
 	<div class="timechain-list">
 
-		<div class="timechange-item" each="{r in state.records}" key="{r.uuid}" if="{!state.loading}">
+		<div class="timechange-item item-{r.iid}" data-iid="{r.iid}" each="{r in state.records}" key="{r.uuid}" if="{!state.loading}" oncontextmenu="{onContextMenu}">
 
 			<div class="timechain-timestamp">
 				<timestamp-static time={r.timestamp} />
 			</div>
 
 			<div class="timechain-tag-list">
-				<timechain-tag-list tags="{r.tags}" />
+				<timechain-tag-list tags="{r.tags}" canedit="1" rid="{r.uuid}" ontag="{onTagChange}"/>
 			</div>
 			
 			<div class="timechain-item-text" if="{r.mime == 'text/plain'}">
@@ -41,8 +47,16 @@
 		import TimechainTagList from './timechain-tag-list.riot'
 		import pubsub from 'pubsub-js'
 
+		import TimechainTag from './timechain-tag.riot'
+
+		import {dataURLtoBlob} from '../lib/blobconvert.js'
+		import {Toast} from '../lib/toast.js'
+
+
 		const {
-			TimeChainDataSqliteRecord
+			TimeChainDataSqliteTag,
+			TimeChainDataSqliteRecord,
+			TimeChainDataSqliteTagLink
 		} = require('../data/sqlite-client');
 		
 		export default {
@@ -54,7 +68,8 @@
 			components: {
 				Raw,
 				TimestampStatic,
-				TimechainTagList
+				TimechainTagList,
+				TimechainTag
 			},
 			onMounted(){
 				console.log("List mounted");
@@ -67,12 +82,21 @@
 				pubsub.unsubscribe(this.event_load);
 			},
 
-			loadRecords(){
+			loadRecords(search){
 				this.update({loading:true});
 				const TR = new TimeChainDataSqliteRecord();
 
-				TR.find({},null,100,0).then(records=>{
+				if(!search) {
+					if(this.last_search){
+						search = this.last_search
+					}else{
+						search = {};
+					}
+				}
+
+				TR.find(search,null,100,0).then(records=>{
 					console.log("Records", records);
+					if(records) records.data.forEach(r=>r.iid=this.uid());
 					this.update({records:records.data,loading:false});
 				}).then(()=>{
 					this.processImages();
@@ -82,12 +106,114 @@
 			processImages(){
 				var URLObj = window.URL || window.webkitURL;
 				this.state.records.forEach(r=>{
-					if(r.mime == "image/jpeg" || r.mime == "image/png"){
+					if(typeof r.mime == 'string' && r.mime.startsWith("image/")){
 						r.imageURL = r.content;
 					}
 				});
 
 				this.update();
+			},
+
+			onTags(tags){
+
+				if(tags==''){
+					return this.loadRecords({});
+				}
+
+				console.log(tags);
+				tags = JSON.parse(tags);
+				const search =  [];
+				tags.map(t=>{
+					//console.log(t.value);
+					search.push(t.value);
+				});
+
+				this.loadRecords({
+					tags:search
+				})
+			},
+
+			onContextMenu(e){
+				const t = e.target.closest('.timechange-item');
+				const id = t.dataset.iid;
+				const record = this.state.records.find(r=>r.iid==id);
+				console.log("Right click", id, record);
+
+				if(!record) return;
+
+
+				if(record.mime && record.mime.includes('image/')){
+					const b = dataURLtoBlob(record.content);
+
+					console.log(b);
+
+					const items = { [b.type]: b };
+					const clipboardItem = new ClipboardItem(items);
+					navigator.clipboard.write([clipboardItem]).then(()=>{
+						Toast.fire({
+							icon: 'success',
+  							title: 'Copied to clipboard'
+						})
+					});
+
+
+				}else if(record.mime && (record.mime == 'text/html' || record.mime == 'text/plain')){
+					const t = record.mime;
+					const b = new Blob([record.content], {type:t});
+
+					console.log(t);
+					console.log(b);
+
+					const data = [new ClipboardItem({ [t]: b })];
+					navigator.clipboard.write(data).then(()=>{
+						Toast.fire({
+							icon: 'success',
+  							title: 'Copied to clipboard'
+						})
+					});
+					
+				}else{
+					alert("Can't copy");
+				}
+			},
+
+			onTagChange(tags,rid){
+				const TAG = new TimeChainDataSqliteTag();
+				const TL = new TimeChainDataSqliteTagLink();
+
+				console.log('LIST', tags,rid);
+
+				if(typeof tags == 'string'){
+					tags = JSON.parse(tags);
+				}
+
+				if(!rid) return;
+
+				return TL.deleteRecord(rid).then(()=>{
+
+					const tasks = tags.map(t=>{
+						const tag = t.value;
+						if(!tag) return false;
+
+						return TAG.has(tag).then(v=>{
+							return v;
+						}).then(v=>{
+							if(!v){
+								return TAG.add(tag);
+							}
+							return true;
+						}).then(v=>{
+							TL.add(rid,tag);
+						})
+					});
+
+					return Promise.all(tasks).then(()=>{
+						console.log("finish adding tags");
+					});
+
+				})
+
+
 			}
 
 		}

src/ui/timechain-tag-list.riot

@@ -1,7 +1,8 @@
 <timechain-tag-list>
 
-	<div class="timechain-tags">
-		<span class="timechain-tag" each="{t in state.tags}">{t}</span>
+	<div class="timechain-tags" ondblclick="{goEdit}">
+		<span class="timechain-tag" each="{t in state.tags}" if="{!state.isEditing}">{t}</span>
+		<timechain-tag if="{state.isEditing}" tags="{state.tags_text}" rid="{state.rid}" ontag="{onTagChange}" onEnter="{onEnter}"></timechain-tag>
 	</div>
 
 
@@ -11,6 +12,7 @@
 			text-align:  center;
 			margin-bottom: 0.5em;
 			margin-top:  0.5em;
+			min-height: 0.5em;
 		}
 		
 		.timechain-tags .timechain-tag {
@@ -25,16 +27,71 @@
 
 	<script>
 
+		import TimechainTag from './timechain-tag.riot'
+		
 		export default {
 
 			state: {
-				tags: []
+				tags: [],
+				tags_text: "",
+				canEdit: false,
+				isEditing: false,
+				key: '',
+				rid: '',
 			},
-			onMounted: function(props){
+			components: {
+				TimechainTag
+			},
+			onBeforeMount(props){
+				if(props.canedit=='1'){
+					this.state.canEdit = true;
+				}
+
+				if(props.rid){
+					this.state.rid = props.rid;
+				}else{
+					//console.log("No rid in list");
+				}
+			},
+			onMounted(props){
 				if(!props.tags) return;
 				this.update({
+					tags_text: props.tags,
 					tags: props.tags.split(',')
 				})
+
+				if(this.state.tags.length==0 && this.state.canEdit){
+					this.update({isEditing:true});
+				}
+			},
+			goEdit(e){
+				if(!this.state.canEdit) return;
+				this.state.isEditing = !this.state.isEditing;
+				this.update();
+			},
+			onTagChange(tags,key){
+				console.log(tags,key);
+
+				if(typeof tags == 'string'){
+					tags = JSON.parse(tags);
+				}
+
+				let tagArr = [];
+				tags.forEach(t=>{
+					tagArr.push(t.value);
+				});
+
+				this.update({
+					tags_text: tagArr.join(','),
+					tags: tagArr
+				});
+
+				if(this.props?.ontag){
+					this.props.ontag(tags,key);
+				}
+			},
+			onEnter(){
+				this.update({isEditing:false});
 			}
 
 		}

src/ui/timechain-tag.riot

@@ -1,27 +1,132 @@
 <timechain-tag>
 	<div class="timechain-tagging">
-		<input id="tagging" placeholder="tag your paste">
+		<input id="{state.id}" placeholder="tag your paste">
 	</div>
 
 	<script>
 		import Tagify from '@yaireo/tagify'
 		const pubsub = require('pubsub-js');
+		const debounce = require('debounce');
+
+		const {
+			TimeChainDataSqliteTag
+		} = require('../data/sqlite-client');
 
 		export default {
-			onMounted(){
-				const inputElm = this.$('#tagging');
+			state:{
+				id:'tagging',
+				rid: ''
+			},
+			onBeforeMount(props){
+				this.state.id = "tagging"+this.makeid(5);
+				this.tagdb = new TimeChainDataSqliteTag();
+			},
+			onMounted(props, state){
+				const inputElm = this.$('#'+this.state.id);
+
+				if(props.rid){
+					state.rid = props.rid;
+				}else{
+					//console.log("no rid");
+				}
+
+				if(props.tags){
+					console.log("We have tags", props.tags);
+					inputElm.value = props.tags;
+				}else{
+					console.log("No tags");
+					console.log(props.tags);
+				}
+
 				this.tagify = new Tagify(inputElm);
 				inputElm.addEventListener('change', this.onChange.bind(this));
 				this.event_clean = pubsub.subscribe('tag.clean', this.onClean.bind(this));
+
+				this.tagify.on('input', debounce( this.onInputEvent.bind(this), 400) )
+
+				if(props.tags){
+					this.setFocus();
+					this.tagify.on('keydown',  this.onKeyDown.bind(this) );
+				}
+
 			},
 			onUnmounted(){
 				pubsub.unsubscribe(this.event_clean);
 			},
 			onChange(e){
+				if(this.props?.ontag){
+					if(this.state.rid){
+						this.props.ontag(e.target.value, this.state.rid);
+					}else{
+						console.log("No RID");
 						this.props?.ontag(e.target.value);
+					}
+				}else{
+					console.log("No on tag function");
+				}
 			},
 			onClean(){
 				this.tagify.removeAllTags();
+			},
+			makeid(length) {
+			    var result           = '';
+			    var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+			    var charactersLength = characters.length;
+			    for ( var i = 0; i < length; i++ ) {
+			      result += characters.charAt(Math.floor(Math.random() * charactersLength));
+			   }
+			   return result;
+			},
+			setFocus(){
+				const i = this.$('#'+this.state.id);
+				if(!i) {
+					return console.log("No input");
+				}
+
+				const tag = i.closest('.timechain-tagging');
+
+				if(!tag){
+					return console.log("No Tagg");
+				}
+
+				const s = tag.querySelector('.tagify__input');
+
+				if(!s){
+					return console.log("No tag imput");
+				}
+
+				s.focus();
+			},
+			onKeyDown(e){
+				console.log(e);
+
+				if(e.detail && e.detail.originalEvent && (e.detail.originalEvent.key == "Enter" || e.detail.originalEvent.key == "Escape") ){
+					//e.detail.originalEvent.stopPropagation();
+					//e.detail.originalEvent.preventDefault();
+					//console.log("ENTER");
+
+					if(this.props?.onEnter){
+						this.props.onEnter(e.detail.originalEvent);
+					}
+
+				}
+			},
+			onInputEvent(e){
+				const val = e.detail.value;
+				this.tagify.whitelist = null;
+
+				console.log('%c Value '+val,'background-color:black;');
+
+				this.tagify.loading(true); //dropdown.hide();
+
+				this.tagdb.like(val).then(res=>{
+					const cleaned = res.map(r=>r.tag);
+					console.log(cleaned);
+					this.tagify.whitelist = cleaned;
+					this.tagify.loading(false).dropdown.show(val);
+				})
+
+
 			}
 		}
 	</script>

src/ui/timechain-tags.riot

@@ -0,0 +1,3 @@
+<timechain-tags>
+
+</timechain-tags>

start.js

@@ -1,34 +1,23 @@
-import './src/less/main.less';
-import './src/css/tagify.scss';
-
-import * as Sentry from "@sentry/browser";
-import { BrowserTracing } from "@sentry/tracing";
-
-Sentry.init({
-  dsn: "http://a12d5c5f800b406f8d1c0c5d2ed63a78@216.128.138.128:8000/1",
-
-  // Alternatively, use `process.env.npm_package_version` for a dynamic release version
-  // if your build tool supports it.
-  release: "timechain@1.0.0",
-  integrations: [new BrowserTracing()],
-
-  // Set tracesSampleRate to 1.0 to capture 100%
-  // of transactions for performance monitoring.
-  // We recommend adjusting this value in production
-  tracesSampleRate: 1.0,
-});
-
+import './src/less/main.less'
+import './src/css/tagify.scss'
 
 import App from './src/ui/app.riot'
 
-import { component } from 'riot'
+import { component, install } from 'riot'
 
-window.debugging = true;
+let id = 0
+
+install(function(component) {
+  // all components will pass through here
+  component.uid = ()=>{
+    return ++id;
+  }
+})
+
+window.debugging = true
 
 setTimeout(() => {
-	document.getElementById('main-loading')?.remove();
-	component(App)(document.getElementById('timechain'));
-	Sentry.captureMessage('Application Started');
+  document.getElementById('main-loading')?.remove()
+  component(App)(document.getElementById('timechain'))
+  Sentry.captureMessage('Application Started')
 }, 0)
-
-