feat: general fixes & style enh

Makefile

@@ -3,6 +3,18 @@ include tools.mk
 
 LDFLAGS += -X "$(MODULE)/version.Version=$(VERSION)" -X "$(MODULE)/version.CommitSHA=$(VERSION_HASH)"
 
+
+## Development:
+
+.PHONY: start-fe-dev
+start-fe-dev: ## Frontend Development (entry=./)
+start-fe-dev: entry:='./'
+start-fe-dev:
+ $Q $(go) build -tags dev && ./filebrowser -r ${entry} 1> /dev/null 2> /dev/null & \
+ cd frontend && npm i -s && npm run dev && \
+ trap 'kill -- -$$PID'; \
+ wait
+
 ## Build:
 
 .PHONY: build
@@ -53,6 +65,7 @@ bump-version: $(standard-version) ## Bump app version
  $Q ./scripts/bump_version.sh
 
 ## Help:
+.DEFAULT_GOAL := help
 help: ## Show this help
  @echo ''
  @echo 'Usage:'

frontend/src/api/files.ts

@@ -40,9 +40,7 @@ async function resourceAction(url: string, method: ApiMethod, content?: any) {
  opts.body = content;
  }
 
- const res = await fetchURL(`/api/resources${url}`, opts);
-
- return res;
+ return await fetchURL(`/api/resources${url}`, opts);
 }
 
 export async function remove(url: string) {

frontend/src/components/prompts/Share.vue

@@ -142,7 +142,7 @@
 <script>
 import { mapActions, mapState } from "pinia";
 import { useFileStore } from "@/stores/file";
-import { share as api, pub as pub_api } from "@/api";
+import { pub as pub_api, share as api } from "@/api";
 import dayjs from "dayjs";
 import { useLayoutStore } from "@/stores/layout";
 import { copy } from "@/utils/clipboard";
@@ -182,11 +182,10 @@ export default {
  },
  async beforeMount() {
  try {
- const links = await api.get(this.url);
- this.links = links;
+ this.links = await api.get(this.url);
  this.sort();
 
- if (this.links.length == 0) {
+ if (this.links.length === 0) {
  this.listing = false;
  }
  } catch (e) {
@@ -208,7 +207,7 @@ export default {
  },
  submit: async function () {
  try {
- let res = null;
+ let res;
 
  if (!this.time) {
  res = await api.create(this.url, this.password);
@@ -234,7 +233,7 @@ export default {
  await api.remove(link.hash);
  this.links = this.links.filter((item) => item.hash !== link.hash);
 
- if (this.links.length == 0) {
+ if (this.links.length === 0) {
  this.listing = false;
  }
  } catch (e) {
@@ -263,7 +262,7 @@ export default {
  });
  },
  switchListing() {
- if (this.links.length == 0 && !this.listing) {
+ if (this.links.length === 0 && !this.listing) {
  this.closeHovers();
  }
 

frontend/src/css/_buttons.css

@@ -1,8 +1,7 @@
 .button {
  outline: 0;
- border: 0;
  padding: 0.5em 1em;
- border-radius: 0.1em;
+ border-radius: 0.25em;
  cursor: pointer;
  background: var(--blue);
  color: white;

frontend/src/css/_inputs.css

@@ -2,7 +2,7 @@
  background: var(--surfacePrimary);
  color: var(--textSecondary);
  border: 1px solid var(--borderPrimary);
- border-radius: 0.1em;
+ border-radius: 0.35em;
  padding: 0.5em 1em;
  transition: 0.2s ease all;
  margin: 0;

frontend/src/css/dashboard.css

@@ -161,7 +161,7 @@ table tr > *:last-child {
  margin: 0 0 1rem 0;
  background: var(--surfacePrimary);
  color: var(--textSecondary);
- border-radius: 2px;
+ border-radius: 7px;
  box-shadow:
  0 2px 2px 0 rgba(0, 0, 0, 0.14),
  0 1px 5px 0 rgba(0, 0, 0, 0.12),
@@ -374,7 +374,7 @@ body.rtl .card .card-action {
  color: var(--textPrimary);
  vertical-align: middle;
  line-height: 1.4;
- font-family: "Material Icons";
+ font-family: "Material Icons", serif;
  font-size: 1.75em;
  margin-right: 0.25em;
 }

frontend/src/css/listing.css

@@ -93,7 +93,7 @@ html[dir="rtl"] #listing {
  width: calc(33% - 1em);
  margin: 0.5em;
  padding: 0.5em;
- border-radius: 0.2em;
+ border-radius: 0.5em;
  box-shadow:
  0 1px 3px rgba(0, 0, 0, 0.06),
  0 1px 2px rgba(0, 0, 0, 0.12);

frontend/src/views/files/FileListing.vue

@@ -444,7 +444,7 @@ watch(req, () => {
 
 onMounted(() => {
  // Check the columns size for the first time.
- colunmsResize();
+ columnsResize();
 
  // How much every listing item affects the window height
  setItemWeight();
@@ -638,7 +638,7 @@ const paste = (event: Event) => {
  action(overwrite, rename);
 };
 
-const colunmsResize = () => {
+const columnsResize = () => {
  // Update the columns size based on the window width.
  let items_ = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
  if (items_ === null) return;
@@ -846,7 +846,7 @@ const toggleMultipleSelection = () => {
 };
 
 const windowsResize = throttle(() => {
- colunmsResize();
+ columnsResize();
  width.value = window.innerWidth;
 
  // Listing element is not displayed

scripts/bump_version.sh

@@ -1,14 +1,14 @@
 #!/usr/bin/env bash
 set -e
 
-if ! [ -x "$(command -v standard-version)" ]; then
- echo "standard-version is not installed. please run 'npm i -g standard-version'"
+if ! [ -x "$(command -v npx)" ]; then
+ echo "Node.js is require, exiting..."
  exit 1
 fi
 
-standard-version --dry-run --skip
+npx standard-version --dry-run --skip
 read -p "Continue (y/n)? " -n 1 -r
 echo ;
 if [[ $REPLY =~ ^[Yy]$ ]]; then
- standard-version -s ;
+ npx standard-version -s ;
 fi

scripts/commitlint.sh

@@ -1,11 +1,11 @@
 #!/usr/bin/env bash
 set -e
 
-if ! [ -x "$(command -v commitlint)" ]; then
- echo "commitlint is not installed. please run 'npm i -g commitlint'"
+if ! [ -x "$(command -v npx)" ]; then
+ echo "Node.js is require, exiting..."
  exit 1
 fi
 
 for commit_hash in $(git log --pretty=format:%H origin/master..HEAD); do
- commitlint -f ${commit_hash}~1 -t ${commit_hash}
+ npx commitlint -f ${commit_hash}~1 -t ${commit_hash}
 done